Kendo UI grid binding twice

Question

Inherited a Kendo app that I'm trying to fix and really stuck here. I have a search page that is binding to the datasource twice, cannot figure this out.

Here's the grid code:

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

and here is my jQuery for the search button:

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

When I click the search button, it brings back the correct recordset the first time, then it refreshes and brings back the whole dataset. Newer to Kendo, can't figure out where that second call is coming from.

Answer 1

The problem with your code is that on button click you are making an ajax call to the server getting back the data and calling grid.dataSource.read(); Please note this will again make a call to the server and load the data. This is the reason why your are feeling that grid is binding twice.

Actually there is no need for explicit ajax call, Kendo is already doing that because you specified datasource => datasource.Ajax() in configuration. All you need to do is define a function (which I hope you have already done) which will set your search params:-

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

Finally in the button click handler, simple call the read method to load the grid based on search paramas:-

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

Also, please note there is no need to call the refresh method.