筛选网格后，Kendo工具栏的“添加新"按钮不起作用 [英] Kendo toolbar AddNew button doesn't work when the grid is filtered

问题描述

我有一个小的Kendo网格，设置如下.以一种难以置信的神秘方式，仅当在单击添加新"后单击另一个命令按钮时，才调用添加新"的Controller动作，即BatchCreate.例如. a)单击添加新"，什么也没有发生. b)重新加载页面，然后单击添加新"，没有任何反应，然后单击保存更改"，然后最终调用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.

仅输入:使用以下代码过滤网格似乎会导致上述行为.当我注释掉注释行$("#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工具栏的“添加新"按钮不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！