This is a migrated thread and some comments may be shown as answers.

Kendo UI Grid Paging issue

2 Answers 605 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Nathan
Top achievements
Rank 1
Nathan asked on 01 Dec 2016, 03:50 PM

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

2 Answers, 1 is accepted

Sort by
0
Nathan
Top achievements
Rank 1
answered on 03 Dec 2016, 01:42 AM

Wow, awesome turnaround guys.  

I inherited this app, only reason I'm on here.  Experiences like this 'support' are going to make it that much easier to sell jQuery Datatables on the next project. 

0
Nathan
Top achievements
Rank 1
answered on 05 Dec 2016, 01:24 PM

Found my answer in another post:

http://www.telerik.com/forums/reset-to-first-page-after-sort-or-server-side-filtering

Just needed to add this line:

grid.dataSource.page(1);

Tags
Grid
Asked by
Nathan
Top achievements
Rank 1
Answers by
Nathan
Top achievements
Rank 1
Share this question
or