Customize Pageable Options

[Shawn]

I was able to set my Pageable options with no problem but have few questions below and was hoping someone could help.

• Can yo change the order of the pageable controls.......For example I would like the Refresh button to be first followed by the |< < then display the page size drop down box, then show "Page input box of Total > >|.............?
• Can I show the refresh button at the top and bottom of the Grid?
• Can I change the width of the Input box?

Thanks

[Alexander Valchev]

Hi Shawn,

Can yo change the order of the pageable controls.......For example I would like the Refresh button to be first?

I am afraid that configurable pager refresh position is not supported currently. However, if moving the refresh button to the left is a must, you can move its element before first child of the pager element after the Grid has been initialized:

grid.pager.element
  .find(".k-pager-refresh")
  .insertBefore(
    grid.pager.element.children().first()
  );

In addition you should override the default CSS styling with the following:

#grid .k-pager-refresh {
  float: left;
}

For convenience I prepared a small example: http://jsbin.com/ezigaw/3
If you want to configure the position of the other controls in the pager you can use the same approach.

Can I show the refresh button at the top and bottom of the Grid?

This is not supported out of the box. To achieve that you can define a custom button or to use a toolbar template. As an example:

toolbar: '<a href="\\#" class="k-pager-refresh k-link" title="Refresh"><span class="k-icon k-i-refresh">Refresh</span></a>',

Can I change the width of the Input box?

Please use jQuery or CSS to change the default styling. 

grid.pager.element
    .find(".k-pager-input > input.k-textbox")
    .width("120px");

Or

#grid .k-pager-input > input.k-textbox {
  width: 120px;
}

I hope this information will help.

Regards,
Alexander Valchev
the Telerik team

[Shawn]

When I implement your code I do get a refresh button at the top of the grid.  However when you click on the icon it doesn act like the refresh button in the toolbar under the grid.  It calls the Sort routine and the Kendo.MVC.SortDescriptor is null.  Guessing since it was moved the grid thinks its part of the column.

Also I was expecting the Refresh button in the toolbar below the grid to also float to the left but it didnt.  It stays between the paging arrows and the "Page 1 of 390" text.........

this is the code I used to move the Refresh section

//Move Refresh button to top of Grid

        var grid22 = $("#ResultsGrid2").kendoGrid().data("kendoGrid");       

        var zd = grid22.element           

            .find(".k-pager-refresh")

            .insertBefore(grid22.element.children().first()

            );

Also do you know how to set the width of the dropdown box for the pageSizes.  I tried to use similiar syntax for the the text box of the number of page but cant seem to find right combination of class names to make it work.

[Alexander Valchev]

Hello Shawn,

Where you insert the refresh button? Is it appended to the toolbar of the Grid or in the header of one of the columns? Clicking on the toolbar is not supposed to trigger sorting, please make sure that the refresh button is placed inside the toolbar element via template.

In addition it is required to hook up to the click event of the button and refresh the grid manually. For example:

grid.element
  .find(".k-grid-toolbar .k-pager-refresh")
  .bind("click", function(e) {
    e.preventDefault();
    grid.dataSource.read(); //refresh
  });

Also I was expecting the Refresh button in the toolbar below the grid to also float to the left but it didnt.
Did you include the CSS that I provided in my previous reply?

The code that you provided differs from the one from the example in few terms.

1. To create a refresh button on top of the grid you can use a toolbar template.
   

   toolbar: '<a href="\\#" class="k-pager-refresh k-link" title="Refresh"><span class="k-icon k-i-refresh">Refresh</span></a>',

2. The JavaScript code is used to change the position of the refresh button inside the pager. To get a refresh button at the top of the Grid please use a toolbar template.

Regarding your last question, the pageSizes input is a Kendo DropDownList. In this demo you can find an example that demonstrates how to change the width of the drop-down list.

All the best,
Alexander Valchev
the Telerik team