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

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

3 Answers 960 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Jairo
Top achievements
Rank 1
Jairo asked on 24 Jul 2014, 10:47 AM

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





3 Answers, 1 is accepted

Sort by
0
Jairo
Top achievements
Rank 1
answered on 24 Jul 2014, 05:19 PM
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();
                }
0
Manfred
Top achievements
Rank 2
answered on 02 Jan 2016, 12:13 AM

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.

0
Timothy
Top achievements
Rank 1
answered on 26 Aug 2016, 08:24 AM

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

Tags
Grid
Asked by
Jairo
Top achievements
Rank 1
Answers by
Jairo
Top achievements
Rank 1
Manfred
Top achievements
Rank 2
Timothy
Top achievements
Rank 1
Share this question
or