剑道UI网格绑定两次

Question

继承了我正在尝试修复的 Kendo 应用程序，并且确实卡在了这里。我有一个绑定到数据源两次的搜索页面，无法弄清楚。

这是网格代码：

@(Html.Kendo().Grid<Flex.Models.AddEntryEditModel>()
    .Name("EventGrid")
    .Columns(columns =>
    {
        columns.Command(command =>
        {
            command.Edit(); command.Destroy(); command.Custom("Copy and Create").Click("copyNAddEvent")
                        .HtmlAttributes(new {@class = "copynadd"}); 
        }).Width(169).Title("Action");
        columns.Bound(e => e.id).Hidden();
        columns.Bound(e => e.contactName).Width(180).Title("Contact Name");
        columns.Bound(e => e.contactEmail).Width(180).Title("Contact Email");
        columns.Bound(e => e.contactPhone).Width(180).Title("Contact Phone #");
    })


    .HtmlAttributes(new { style = "height:500px;" })
    .ToolBar(tools => { tools.Excel(); })
    .Excel(excel => excel
        .AllPages(true)
        .FileName("FlexData.xlsx")
        .Filterable(true)
        .ProxyURL(Url.Action("Excel_Export_Save", "Home"))
    ).Events(x => x.ExcelExport("onExcelExport"))

    .DataSource(datasource => datasource
            .Ajax()
            .ServerOperation(false)
            .Model(model => {
                model.Id(p => p.id);
                model.Field(p => p.application).Editable(false);
                model.Field(p => p.componentType).Editable(false);
                model.Field(p => p.creditedOrSupportEquipment).Editable(false);
                model.Field(p => p.driverType).Editable(false);
                model.Field(p => p.eventName).Editable(false);
                model.Field(p => p.PMinterval).Editable(false);
                model.Field(p => p.PMName).Editable(false);
                model.Field(p => p.scheduledMaintenance).Editable(false);
                model.Field(p => p.equipmentOperatingHours).Editable(false);
                model.Field(p => p.companyName).Editable(false);
                model.Field(p => p.plantName).Editable(false);
                model.Field(p => p.supportingEventDocument).Editable(false);
            })
            .Read(read => read.Action("SearchEvents", "Home").Data("FillSearchParms"))
            .Update(update => update.Action("UpdateEvent", "Home").Data("FillUpdateParms"))
            .Destroy(update => update.Action("DeleteEvent", "Home"))
            .PageSize(10)
            .Events(e => 
            { 
                e.RequestEnd("onRequestEnd");
            })
    )
)

这是我用于搜索按钮的 jQuery：

$("#SearchBtn").click(function (e) {
    e.preventDefault();

    if (!validator.validate()) {
        return;
    }

    var descr = $("#Description").data("kendoEditor");
    //debugger;

    $.ajax({
        type: "POST",
        url: "/Home/SearchEvents",
        datatype: "json",
        data: {
            id: null,
            eventDate: $("#EventDate").val(),
            eventDateTo: $("#EventDateTo").val(),
            application: defaultDD("Application"),
            componentType: defaultDD("ComponentType"),
            creditedOrSupportEquipment: defaultDD("CreditedOrSupportEquipment"),
            equipmentID: $("#EquipmentId").val(),
            driverType: defaultDD("DriverType"),
            eventName: defaultDD("EventName"),
            make: $("#Make").val(),
            model: $("#Model").val(),
            PMinterval: defaultDD("PMInterval"),
            PMName: defaultDD("PMName"),
            scheduledMaintenance: defaultDD("ScheduledMaintenance"),
            equipmentOperatingHours: defaultDD("equipmentOperatingHours"),
            companyName: defaultDD("CompanyName"),
            plantName: defaultDD("PlantName"),
        },
        success: function (result) {
            $("#searchEventGrid").attr("style", "display: block;");
            //debugger;
            var grid = $("#EventGrid").data("kendoGrid");

            grid.dataSource.read();
            grid.refresh();
            e.preventDefault();

            $("#searchbar").data("kendoPanelBar").collapse($("li.k-state-active"));
        },
        error: function (xhr, txt) {
            //debugger;
            var err = xhr.responseText.match(/.*<body.*>([\s\S]*)<\/body>.*/); ;
            custom_alert(err, "Error!");
        }
    })
})

当我单击搜索按钮时，它会第一次返回正确的记录集，然后刷新并返回整个数据集。刚接触剑道，不知道第二个电话是从哪里来的。

Answer 1

您的代码的问题在于，在单击按钮时，您正在对服务器进行 ajax 调用以获取数据并调用grid.dataSource.read(); 请注意，这将再次调用服务器并加载数据。这就是为什么您感觉网格绑定了两次的原因。

实际上不需要显式 ajax 调用，Kendo 已经这样做了，因为您在配置中指定了datasource => datasource.Ajax()。您需要做的就是定义一个函数（我希望您已经完成了），它将设置您的搜索参数：-

function FillSearchParms(){
    return{
       id: null,
       eventDate: $("#EventDate").val(),
       eventDateTo: $("#EventDateTo").val(),
       ....and so on
    };
}

最后在按钮点击处理程序中，简单调用read方法根据搜索参数加载网格：-

$("#SearchBtn").click(function (e) {
     var grid = $("#EventGrid").data("kendoGrid");
     grid.dataSource.read();
});

另外，请注意没有需要调用刷新方法。