CODEWITHSUNDEEP
kendo-uikendo-grid
ProfK
ProfK

Reputation: 51064

Kendo toolbar AddNew button doesn't work when the grid is filtered

I have a small Kendo Grid, set up as below. In an inccredibly mysterious fashion, the Controller action for "Add New", i.e. BatchCreate is only invoked if when you click another command button after clicking "Add New". E.g. a) Click "Add New", nothing at all happens. b) Reload the page, and click "Add New", and have nothing happen, then click "Save Changes", then the BatchCreatemethod is finally invoked.

My grid looks like this, copied nearly straight from an example of theirs:

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

Another grid exactly the same, except for one extra field, works perfectly.

JUST IN: Filtering the grid with the following code seems to cause the above behaviour. When I comment the commented line, $("#ParkadeId").change() out, the grid behaves as normal:

$(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 setting a filter on a Kendo grid breaks the Add New functionality.

Upvotes: 4

Views: 5566

Answers (3)

Abbas Galiyakotwala
Abbas Galiyakotwala

Reputation: 3019

This can be done by custom "create" toolbar

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

on load

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

Upvotes: 0

Alejo
Alejo

Reputation: 1923

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

What I did was create a zero filter which accepts data with primary key equal to zero (since a row you just added with have zero as its primary key), and anywhere I need to set a custom filter I just include the zero 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
        ]
    });
}

Upvotes: 0

EdsonF
EdsonF

Reputation: 2808

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

Possible solutions is to enable server sorting / filtering or implement custom "Add record" button which first clears the data source current filter and sort and then add new record using grid API.

This is an example of a function that clears current filters and sorting 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();
}

Upvotes: 5

Related Questions