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

[Jairo]

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

[Jairo]

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

[Manfred]

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.

[Timothy]

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