过滤网格时，Kendo 工具栏的 AddNew 按钮不起作用 [英] Kendo toolbar AddNew button doesn't work when the grid is filtered

问题描述

我有一个小的剑道网格，设置如下.以一种令人难以置信的神秘方式，添加新"的控制器操作，即 BatchCreate 仅在单击添加新"后单击另一个命令按钮时才会被调用.例如.a) 单击添加新"，什么也没有发生.b) 重新加载页面，点击Add New"，没有任何反应，然后点击Save Changes"，最后调用BatchCreate方法.

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: 使用以下代码过滤网格似乎会导致上述行为.当我评论注释行 $("#ParkadeId").change() 时，网格表现正常:

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

似乎在 Kendo 网格上设置过滤器会破坏添加新功能.

It would seem setting a filter on a Kendo grid breaks the Add New functionality.

推荐答案

根据 Kendo Ui 支持论坛 - 这是在客户端应用过滤/排序时的预期行为，因为当新记录在当前之外创建时查看，无法编辑.

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.

可能的解决方案是启用服务器排序/过滤或实现自定义添加记录"按钮，首先清除数据源当前过滤器和排序，然后使用网格 API 添加新记录.

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

这篇关于过滤网格时，Kendo 工具栏的 AddNew 按钮不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！