Kendo UI grid binds twice
Inherited a Kendo app I'm trying to fix and really stuck here. I have a search page bound to a datasource twice and can't figure it out.
Here is 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");
})
)
)
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 refreshes and brings back the entire dataset. For a kendo newbie, can't figure out where the second call is coming from.
The problem with your code is that when the button is clicked you are making an ajax call to the server to get the data back and call. grid.dataSource.read();Note that this will make another call to the server and load the data. That's why you feel the grid is bound twice.
Actually, there is no need for an explicit ajax call, since you specified it datasource => datasource.Ajax()in the config, and Kendo already does it . All you need to do is define a function (I hope you have done) that will set your search parameters:-
function FillSearchParms(){
return{
id: null,
eventDate: $("#EventDate").val(),
eventDateTo: $("#EventDateTo").val(),
....and so on
};
}
Finally, in the button click handler, simply call the read method to load the grid based on the search parameters:
$("#SearchBtn").click(function (e) {
var grid = $("#EventGrid").data("kendoGrid");
grid.dataSource.read();
});
Also, note that there is no need to call the refresh method anymore.