Kendo UI Grid Paging issue

3 posts, 0 answers
  1. Nathan
    Nathan avatar
    4 posts
    Member since:
    Oct 2016

    Posted 01 Dec 2016 Link to this post

    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. Nathan
    Nathan avatar
    4 posts
    Member since:
    Oct 2016

    Posted 02 Dec 2016 in reply to Nathan Link to this post

    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. 

  3. Nathan
    Nathan avatar
    4 posts
    Member since:
    Oct 2016

    Posted 05 Dec 2016 in reply to Nathan Link to this post

    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);

Back to Top