Kendo 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

Проблема с кодом, что на кнопке мыши вы делаете АЯКС вызова к серверу получить обратно данные и вызов grid.dataSource.read(); Обратите внимание, это будет снова сделать вызов на сервер и загружать данные. Именно по этой причине вы чувствуете, что сетка привязывается дважды.

На самом деле нет необходимости в явном ajax call, Kendo уже делает это, потому что вы указали datasource => datasource.Ajax() в конфигурации. Все, что вам нужно сделать, это определить функцию (я надеюсь, что вы уже сделали), который установит поиска Params: -

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

Наконец в кнопке обработчик щелчка, просто Вызвать чтения метод для загрузки сетки на основе поиска paramas: -

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

Кроме того, обратите внимание, что нет нет необходимости вызвать обновления метод.