Write code to automatically hide the paging controls when we only have one page.

4 posts, 0 answers
  1. Jairo
    Jairo avatar
    6 posts
    Member since:
    Jun 2014

    Posted 24 Jul 2014 Link to this post


    Hi I expended so much time  trying to solve an issue with the dataBound event of the Angular kendo grid,
    I finally could see that the error consist that the Angular kendo grid is not recognizing neither the dataSource object nor the pager object in the databound event.

    This is the code of the dataBound function that I added to my Angular Kendo Grid:


                   dataBound: function () {
                        console.log("I am inside the databound event  of the Grid Source");

                        console.log("printing object this.dataSource"); // Return Undefined
                        console.log(this.dataSource); // Return Undefined

                        console.log("printing object this.pager"); // Return Undefined
                        console.log(this.pager);  // Return Undefined

                        if (this.dataSource.totalPages() === 1) {
                            this.pager.element.hide();
                        }
                        else {
                            this.pager.element.show();
                        }





  2. Jairo
    Jairo avatar
    6 posts
    Member since:
    Jun 2014

    Posted 24 Jul 2014 Link to this post

    I got the solution by myself, I saw that the returned object is a windows object and the widget object is the owner of the pager object so the following code help me to accomplish my goal of disable the kendo grid pagging controls when the grid have only 1 page.

     var GridDestination = $("#PlaceHereYourGridID").data("kendoGrid");               
    if (GridDestination.dataSource.totalPages() === 1) {
                        GridDestination.pager.element.hide();
                    }
                    else {
                        GridDestination.pager.element.show();
                    }
  3. Kendo UI is VS 2017 Ready
  4. Manfred
    Manfred avatar
    1 posts
    Member since:
    Feb 2011

    Posted 01 Jan Link to this post

    Had the same issue when configuring some grids with Kendo Mvc Helpers. I used a similar but somewhat simpler version of the javascript function:

     

    function Grid_onDataBound() {
       if (this.dataSource.total() <= this.dataSource.pageSize) this.options.pageable = false;
    };

     

    This function is attached to the Grid event handler for the databound event, but using the Mvc helper, like so:

    @(Html.Kendo().Grid<myGridViewModel>
    // Datasource and Columns configuration ... 
    .Pageable()
    .Events(e => e.DataBound(
    "Grid_onDataBound"))
     

    The point is, that I configure paging in the Mvc helper and switch it off via js if the records fit on one page. This might not be a viable solution for every scenario, but at least it feels like a frequently required feature in real-world-scenarios. The solution is so simple that Telerik probably thought, why bother with another option in the pageable configurator.

    Hope this is of help to kendo grid newbies like myself.

  5. Timothy
    Timothy avatar
    3 posts
    Member since:
    Mar 2016

    Posted 26 Aug Link to this post

    A much cleaner fix that doesn't need any javascript at all - use this css. This basically just hides the page number if it's the only one on the page.

    .k-pager-numbers li:nth-child(2):last-child { display:none; }

Back to Top
Kendo UI is VS 2017 Ready