Kendo Toolbar The AddNew button does not work when the mesh is filtered.

Question

I have a small Kendo grid configured as shown below. In an incredibly cryptic key, the Controller action for "Add New", i.e. BatchCreate , is called only when you press the button of another command after clicking "Add new". For instance. a) Click "Add New", nothing happens. b) Reload the page and click "Add New" and nothing will work, then click "Save Changes", then the BatchCreate method will be BatchCreate .

My grid looks like this, copied almost directly from an example of them:

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

The other grid is exactly the same, with the exception of one additional field, it works fine.

JUST IN: Filtering the grid with the following code seems to trigger the behavior described above. When I comment out a commented line, $("#ParkadeId").change() out, the grid behaves as usual:

 $(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(); }); 

It would seem that installing a filter in the Kendo grid interrupts the Add New function.

Answer 1

According to the Kendo Ui Support Forum, this is the expected behavior when filtering / sorting is applied on the client side, because when a new record is created outside the current view, it cannot be edited.

Possible solutions: enable server sorting / filtering or create a custom "Add Record" button, which first clears the current data source filter and sorts, and then adds a new record using the grid API.

This is an example of a function that clears the current filters and sort before adding a new record:

 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 for this on the Kendo forums :

What I did was create a null filter that accepts data with a primary key equal to zero (since the line you just added has zero as its primary key), and anywhere I need to set a custom filter, I just turn on the null filter as well:

 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

This can be done using the custom Create toolbar.

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

while loading

 $(".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(); });