在 Kendogrid 下拉列表中默认选择一个选项

Question

在这个剑道网格中有一个下拉列表DiscountType。该下拉列表中有两个选项，即Amount 和Percentage。我希望在创建新条目时默认选择这些选项之一。

view

@{
   Layout = Request.IsAjaxRequest() ? null : 
    "~/Views/Shared/_AdminLayout.cshtml";
}

<!--Kendo Scripts and Style Start------------------------------------------- -------------------------------------->


<link href="https://kendo.cdn.telerik.com/2016.2.504/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="https://kendo.cdn.telerik.com/2016.2.504/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
<link href="https://kendo.cdn.telerik.com/2016.2.504/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
<link href="https://kendo.cdn.telerik.com/2016.2.504/styles/kendo.metro.min.css" rel="stylesheet" type="text/css" />
<link href="https://kendo.cdn.telerik.com/2016.2.504/styles/kendo.bootstrap.min.css" rel="stylesheet" type="text/css" />

<script src="https://kendo.cdn.telerik.com/2016.2.504/js/angular.min.js">
</script>
<script src="https://kendo.cdn.telerik.com/2016.2.504/js/jszip.min.js">
</script>
<script src="https://kendo.cdn.telerik.com/2016.2.504/js/kendo.all.min.js">
</script>
<script src="https://kendo.cdn.telerik.com/2016.2.504/js/kendo.aspnetmvc.min.js">
</script>


<!--Kendo Scripts and Style End-->
<div id="grid"></div>
<script>
    $("#grid").kendoGrid({
    height: 400,
    columns: [

        { field: "Coup_Code", title: "Coupon Code"},
        { field: "Coup_Discription", title: "Coupon Discription" },
        { field: "DiscountType", title: "Discount Type", editor: PlaceDropDownEditor1 },
        { field: "DiscountAmount", title: "Discount Amount" },
        {field: "ExpiredOn",format: "{0: yyyy-MM-dd}"},
        {command: [ "edit" , "destroy"], width: 180 }
    ],
    toolbar: ["create"],
    dataSource: {
        type: "aspnetmvc-ajax",
        transport: {
            read: {
                url: "/Coupon/Coupon_Read"
            },
            create: {
                url: "/Coupon/Coupon_Create"
            },
            update: {
                url: "/Coupon/Coupon_Update"
            },
            destroy: {
                url: "/Coupon/Coupon_Destroy"
            }
        },
        schema: {
            data: "Data",
            model: {
                id: "CoupID",
                fields: {
                    CoupID: { type: "number", editable: false, nullable: false },
                    Coup_Description: { type: "string" },
                    ExpiredOn: { type: "date", validation: { required: true, required: { message: "required" } } },
                    DiscountType: { type: "string", validation: { required: true, required: { message: "required" } } },
                    DiscountAmount: { type: "number", validation: { required: true, required: { message: "required" }, min: 0 } },

                }                }
        },
        serverPaging: true,
        serverSorting: true,
    },
    editable: "inline",
    scrollable: true
})
  function PlaceDropDownEditor1(container, options) {
      $('<input required name="' + options.field + '"/>')
       .appendTo(container)
       .kendoDropDownList({
           autoBind: true,
           dataTextField: "Text",
            dataValueField: "Value",
           dataSource: {
               type: "json",
               transport: {
                   read: "/Coupon/GetDicountType"
               }
           }
       });
  }

</script>

ActionResult GetDicountType

 public ActionResult GetDicountType()
    {
        List<SelectListItem> listItems = new List<SelectListItem>();
        listItems.Add(new SelectListItem
        {
            Text = "Percentage",
            Value = "Percentage"
        });
        listItems.Add(new SelectListItem
        {
            Text = "Amount",
            Value = "Amount",
            Selected = true
        });
        return Json(listItems, JsonRequestBehavior.AllowGet);

    }

Answer 1

您的模型定义中缺少“默认”值指令。添加类似：

defaultValue: { Value: "Percentage", Text: "Percentage"} 

到行：

DiscountType: { type: "string", validation: { required: true, required: { message: "required" } } },