I'm working on a Kendo UI Grid using ASP.NET MVC. We're having an issue with the grid sticking on a specific page. If the user makes their selections and the grid brings back ten pages, it displays fine. However, if the user makes navigates to page 10 and then makes another selection that only brings back 5 pages, the grid is blank, but the correct page numbers display. If the user clicks on one of the page numbers, the data displays correctly.
Here's my grid:
@(Html.Kendo().Grid<
SMT.Models.SpecimenDetail
>()
.Name("SpecimenDetailGrid")
.Columns(columns =>
{
columns.Bound(e => e.uniqueID).Hidden();
columns.Bound(e => e.SampleID).Width(180).Title("Specimen ID").ClientTemplate("#= fileLinks(data) #");
columns.Bound(e => e.contactId).Hidden();
columns.Bound(e => e.contact_business_email).Width(120).Title("Owner Email");
columns.Bound(e => e.contact_business_phone).Width(120).Title("Owner Phone");
})
.ToolBar(tools =>
{
tools.Excel();
tools.Custom().Text("Back to Specimen Summary").HtmlAttributes(new { id = "goBack", style = "margin-left: 880px;" });
})
.Excel(excel => excel
.AllPages(true)
.FileName("SpecimenDetailGridData.xlsx")
.Filterable(true)
.ProxyURL(Url.Action("Excel_Export_Save", "Home"))
)
.Resizable(x => x.Columns(true))
.Reorderable(x => x.Columns(true))
.Scrollable()
.Sortable()
.HtmlAttributes(new { style = "height:500px;" })
.Pageable()
.Filterable()
.AutoBind(false)
.Editable(e => e.Mode(GridEditMode.InLine))
.DataSource(datasource => datasource
.Ajax()
.Model(model => {
model.Id(p => p.uniqueID);
model.Field(p => p.SampleID).Editable(false);
model.Field(p => p.company_business_name).Editable(false);
// disable company name on edit
// model.Field(p => p.company_business_name).Editable(false);
})
.Read(read => read.Action("GetSpecimenDetail", "Home").Data("FillSearchParms"))
.Update(update => update.Action("UpdateSpecimen", "Home").Data("FillUpdateParms"))
.Destroy(destroy => destroy.Action("DeleteSpecimen", "Home"))
.PageSize(10)
.Events(e => { e.RequestEnd("onRequestEnd");})
)
)
Here's the call that fires off the search:
$(document).ready(function () {
$("#divSearchSpecimenDetail").attr("style", "display: none;");
$("#SearchBtn").click(function (e) {
e.preventDefault();
//debugger;
var selectedSpecimen = $('#SpecimenCategory').data("kendoDropDownList").text();
if (selectedSpecimen == "-- Select --") {
alert("Please select Specimen Category");
return;
}
var selectedUnits = $('#Units').data("kendoDropDownList").text();
if (selectedUnits == "") {
alert("Please select Units");
return;
}
var units = defaultDDObj("Units");
var specimenCat = defaultDD("SpecimenCategory");
$("#divSearchSpecimenDetail").attr("style", "display: block;");
//debugger;
var grid = $("#SpecimenDetailGrid").data("kendoGrid");
grid.dataSource.read();
grid.refresh();
grid.pager.refresh();
e.preventDefault();
hideColumns(specimenCat);
$("#searchbar").data("kendoPanelBar").collapse($("li.k-state-active"));
})
});
Really stuck here, thanks in advance