Панель инструментов Kendo Кнопка AddNew не работает, когда сетка фильтруется

Question

У меня есть небольшая сетка Kendo, настроенная как показано ниже. В невероятно загадочном ключе действие Controller для «Добавить новое», то есть BatchCreate, вызывается только тогда, когда вы нажимаете другую командную кнопку после нажатия «Добавить новое». Например. a) Нажмите «Добавить новое», ничего не происходит. б) Перезагрузите страницу и нажмите «Добавить новое», и ничего не получится, затем нажмите «Сохранить изменения», затем вызывается метод BatchCreate.

Моя сетка выглядит так, скопирована почти прямо из примера у них:

@(Html.Kendo().Grid<LocationIndexItem>() 
       .Name("index-grid") 
       .Columns(columns => 
          { 
           columns.Bound(p => p.Name);          
           columns.Bound(p => p.IsActive).ClientTemplate(
            "<input type='checkbox' value='#= IsActive #' " + 
            "# if (IsActive) { #" + 
            "checked='checked'" + 
            "# } #" + 
            "/>").Width(70); 
           columns.Bound(p => p.Remarks); 
           columns.Command(cmd => cmd.Destroy()); 
          }) 
       .ToolBar(toolbar => 
       { 
        toolbar.Create(); 
        toolbar.Save(); 
       }) 
       //.Events(e => e.Edit("gridEdit"))  
       .Editable(editable => editable.Mode(GridEditMode.InCell)) 
       .Filterable() 
       .Pageable() 
       .Scrollable() 
       .DataSource(dataSource => dataSource 
            .Ajax() 
            .ServerOperation(false) 
            .Batch(true) 
            .PageSize(20) 
            .Events(events => events.Error("errorHandler")) 
            .Model(model => model.Id(p => p.Id)) 
            .Read(read => read.Action("Read", "Location")) 
            .Update(update => update.Action("BatchUpdate", "Location")) 
            .Create(create => create.Action("BatchCreate", "Location")) 
            .Destroy(destroy => destroy.Action("BatchDelete", "Location")) 
          ) 
) 

Другой сетки точно так же, за одним исключением дополнительного поля, отлично работает.

JUST IN: Фильтр сетки со следующим кодом, похоже, вызывает вышеуказанное поведение. Когда я комментирую комментируемой линию, $("#ParkadeId").change() вне, сетка ведет себя как обычно: Казалось бы, установив фильтр на сетке Кендо

$(function() { 
    $("#ParkadeId").change(function() { 
     var value = $(this).val(); 
     var grid = $("#index-grid").data("kendoGrid"); 
     if (value) { 
      grid.dataSource.filter({ field: "ParkadeId", operator: "eq", value: parseInt(value) }); 
     } else { 
      grid.dataSource.filter({}); 
     } 
    }); 
    //$("#ParkadeId").change(); 
}); 

ломает Добавить функциональность.

Answer 1

Согласно Kendo Ui Support Forum - это ожидаемое поведение, когда фильтрация/сортировка применяются на стороне клиента, потому что, когда новая запись создается за пределами текущего представления, ее нельзя редактировать.

Возможные решения: разрешить сортировку/фильтрацию сервера или создать пользовательскую кнопку «Добавить запись», которая сначала очищает текущий фильтр источника данных и сортирует, а затем добавляет новую запись с использованием grid API.

Это пример функции, которая очищает текущие фильтры и сортировки, прежде чем добавить новую запись:

function createNew() { 
    var grid = $("#grid").data("kendoGrid"); 
    grid.dataSource.filter({}); 
    grid.dataSource.sort({}); 
    //add record using Grid API 
    grid.addRow(); 
} 

Answer 2

I found a good solution to this in the Kendo forums:

Что я сделал создать нулевой фильтр, который принимает данные с первичным ключом равный нулю (так как строка, которую вы только что добавили, имеет нуль в качестве ее первичного ключа), и где бы мне ни понадобилось установить собственный фильтр, я просто включаю нулевой фильтр:

var zeroFilter = { 
    field: "FieldID", 
    operator: "eq", 
    value: 0 
}; 

function filterData() { 
    var ds = $("#Grid").data("kendoGrid").dataSource; 
    ds.filter({ 
     logic: "or", 
     filters: [ 
      { 
       field: "MyField", 
       operator: "eq", 
       value: someValue 
      }, 
      zeroFilter 
     ] 
    }); 
} 

Answer 3

Это может быть сделано путем обычая "создать" панель

$("#grid").kendoGrid({ 
       ... 
       toolbar: [{ 
        name: "my-create", 
        text: "Add new record" 
       }], 
.. 
)}; 

на нагрузке

$(".k-grid-my-create", grid.element).on("click", function(e) { 
      var grid = $("#grid").data("kendoGrid"); 
      grid.dataSource.filter({}); 
      grid.dataSource.sort({}); 
      //add record using Grid API 
      grid.addRow(); 
      });