客户端模板在 kendo 网格中不起作用

Question

我的 kendo 网格有一些列。我正在尝试使用客户端模板有条件地隐藏一个复选框。当我使用客户端模板时，它工作正常。上面的代码在条件为真时隐藏元素。

 @(Html.Kendo().Grid<Spectrum.Model.CustomerInterestItem>()
                    .Name("customerInterestInfoGrid")
                    .AutoBind(true)
                    .Columns(columns =>
                    {
                        columns.Bound(c => c.ID).Width(200);
                                                    columns.Bound(c => c.SubscriptionEndDate).Title("End Date").Format("{0:MMM dd, yyyy}").Width(130);
                        columns.Bound(c => c.Notes).Width(200);

                        columns.Template(@<text></text>)
                        .ClientTemplate("#if (!InterestTypeID == 99) {#"
                        +"<input name='chkSubscribed' class='subscribedClass' type='checkbox' data-bind='checked: IsSubscribed' #= IsSubscribed ? checked='checked' : '' #/>"
                        + "#} #").Width(130).Title("Subscribed");

                        columns.Command(command => { command.Edit(); command.Destroy(); });
                    })
                    .DataSource(dataSource => dataSource
                    .Ajax()
                   .Model(model => { model.Id(c => c.ID); model.Field(f => f.Notes).Editable(false); model.Field(f => f.IsSubscribed).Editable(false); })
                    .Read(cfg => cfg.Action("testGridRead", "Customer").Data("customerIDData"))
                     .Update(cfg => cfg.Action("EditInterestItem", "Customer"))
                    .Destroy(cfg => cfg.Action("DeleteInterestItem", "Customer"))
                    .ServerOperation(false)
                    )

                    .Pageable(pageable => pageable
                    .Enabled(true)
                    .PageSizes(new int[3] { 10, 25, 50 })
                    .Refresh(true))
                    .Scrollable()
                    .Selectable()
                    .Sortable()
    )

以上代码将隐藏复选框。但我的问题是，当我点击更新按钮时，复选框变得可见。我不知道原因。

Answer 1

Kendo 将在编辑模式下根据您的模型数据类型添加一个编辑器。所以要阻止 Kendo 添加编辑器：-

您可以在模型中将该字段设置为 editable false。但如果你将其设置为可编辑 -> false 你需要明确地将值发送到控制器网格模型不会传递该值。或
使用与您的客户端模板相同的代码将 editor template 绑定到该列。我在 JavaScript 中创建了示例代码片段供您参考。

<div id="example">
    <div id="grid"></div>
    <script>
    $(document).ready(function () {
        crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service",
        dataSource = new kendo.data.DataSource({
            transport: {
             read:  {
                 url: crudServiceBaseUrl + "/Products",
                 dataType: "jsonp"
             },
             update: {
                 url: crudServiceBaseUrl + "/Products/Update",
                 dataType: "jsonp"
             },
             destroy: {
                 url: crudServiceBaseUrl + "/Products/Destroy",
                 dataType: "jsonp"
             },
             create: {
                 url: crudServiceBaseUrl + "/Products/Create",
                 dataType: "jsonp"
             },
             parameterMap: function(options, operation) {
                 if (operation !== "read" && options.models) {
                     return {models: kendo.stringify(options.models)};
                 }
             }
         },
         batch: true,
         pageSize: 20,
         schema: {
             model: {
                 id: "ProductID",
                 fields: {
                     ProductID: { editable: false, nullable: true },
                     ProductName: { validation: { required: true } },
                     UnitPrice: { type: "number", validation: { required: true, min: 1} },
                     Discontinued: { type: "boolean" },
                     UnitsInStock: { type: "number", validation: { min: 0, required: true } }
                 }
             }
         }
     });

    $("#grid").kendoGrid({
             dataSource: dataSource,
             pageable: true,
             height: 550,
             toolbar: ["create"],
             columns: [
                 "ProductName",
                 { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "120px" },
                 { field: "UnitsInStock", title:"Units In Stock", width: "120px" },
                 { field: "Discontinued", title: "Discontinued", width: "80px", 
                   template: "#if (UnitPrice > 20) {# <input name='chkSubscribed' class='subscribedClass' type='checkbox' data-bind='checked: Discontinued' #= Discontinued ? checked='checked' : '' #/> #} #",
                   editor: customBoolEditor },
                 { command: ["edit", "destroy"], title: "&nbsp;", width: "250px" }],
             editable: "inline"
         });
     });

    function customBoolEditor(container, options) {
        var guid = kendo.guid();
        if(options.model.UnitPrice > 20) {                 
            $('<input class="k-checkbox" id="' + guid 
               + '" type="checkbox" name="Discontinued" data-type="boolean" data-bind="checked:Discontinued">').appendTo(container);
            $('<label class="k-checkbox-label" for="' + guid + '">&#8203;</label>').appendTo(container);                  
       }
    }
    </script>        
</div>

Answer 2

试试下面的方法。您可以在客户端模板本身中给出条件

    columns.Bound(c => c).Width(50).Title("Subscribed").ClientTemplate("<input type='checkbox' name='chkSubscribed' class='subscribedClass' #=InterestTypeID =='99' ? \"checked='checked' \" : '' # />");

客户端模板在 kendo 网格中不起作用

Client template not working in kendo grid

asp.net-mvc-4

kendo-ui

kendo-grid

kendo-asp.net-mvc

kendo-ui-mvc