Шаблон клиента не работает в сетке кендо - PullRequest
Новая
       40

Шаблон клиента не работает в сетке кендо

0 голосов
/ 14 мая 2019

У меня есть сетка кендо с несколькими столбцами.Я пытаюсь скрыть флажок условно с помощью шаблона клиента.Когда я использую шаблон клиента, он работает нормально.Приведенный выше код скрывает элемент при выполнении условия true. 

 @(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()
    )

Приведенный выше код скрывает флажок.Но моя проблема в том, что когда я нажимаю кнопку обновления, флажок становится видимым.Я не знаю причину.

1 Ответ

1 голос
/ 15 мая 2019

Kendo добавит редактор, основанный на типе вашей модели, в режиме редактирования.Поэтому, чтобы остановить Kendo от добавления редактора: -

  1. Вы можете установить это поле как редактируемое ложное в модели.Но если вы установите его как редактируемый -> false, вам нужно явно отправлять значения в контроллер, модель сетки не будет передавать значение. ИЛИ
  2. Привязать шаблон редактора к этому столбцу с тем же кодом, что и шаблон вашего клиента.Я создал образец кода в 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>
...