Is there a way to change the PageSize dinamically?

2 Answers 6004 Views
Grid
Alvaro
Top achievements
Rank 1
Alvaro asked on 27 Dec 2011, 06:43 PM
Hi,

I was looking at the forum, but I didn't find any message related to this. I would like to allow users to change the number of rows displayed in the grid for example 15, 30, 50. So far, I see that the pageSize property is specified when initializing the grid. Also, I havent' see any example where the number of rows can be changed dinamically, for example a drop down list with the number of rows next to the pagination numbers, or a text box when the number of pages can be entered.

Thanks for your help

2 Answers, 1 is accepted

Sort by
0
Accepted
Dimo
Telerik team
answered on 28 Dec 2011, 02:15 PM
Hi Alvaro,

You can change the Kendo Grid page size by using the widget's datasource API:

http://www.kendoui.com/documentation/framework/datasource/methods.aspx

In other words, set the datasource's page size like below and then rebind the Grid:

var grid = $("#GridID").data("kendoGrid");
grid.dataSource.pageSize(20);
grid.refresh();

The Grid itself does not provide a dropdown for doing the above automatically, but you can use a Kendo DropDownList widget inside a Grid toolbar template, as shown in this demo:

http://demos.kendoui.com/web/grid/toolbar-template.html

Alternatively, you can even inject a <select> or <input> element inside the Grid pager area (after the Grid has been created) and initialize a DropDownList (ComboBox) widget there. Afterwards, use its change event.

http://demos.kendoui.com/web/dropdownlist/events.html

Kind regards,
Dimo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Alvaro
Top achievements
Rank 1
commented on 28 Dec 2011, 02:59 PM

Thanks for the information. I will implement the functionality.
Dombi
Top achievements
Rank 1
commented on 15 Feb 2012, 12:04 PM

Hi Dimo!

I tried your suggestion:

var grid = $("#GridID").data("kendoGrid");
grid.dataSource.pageSize(2);
grid.refresh();


but after setting the page size to 2 in case of a grid containing 11 elements, I get the following:

At the first page there are 2 elements, so its correct.
At the second page there are 9 elements
At the third page there are 7 elements
and so on, decrement by 2 every page until the end.

What could couse these duplications?

I use a grid initialized from local json data.

If I set the dataSource pageSize to 2 at the Grid initialization, there is no problem.
Dimo
Telerik team
commented on 15 Feb 2012, 12:58 PM

Hi Dombi,

I cannot reproduce such an issue. Can you provide a full demo?

Kind regards,
Dimo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Dombi
Top achievements
Rank 1
commented on 15 Feb 2012, 01:50 PM

I made this quick demo:

http://develic.com/kendoGrid/list.html 

try to set the page size with the dropDown, and check the pages
Dimo
Telerik team
commented on 15 Feb 2012, 02:12 PM

Hello Dombi,

The page size that you are setting, should be a number, not a string.

Regards,
Dimo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Dombi
Top achievements
Rank 1
commented on 15 Feb 2012, 02:26 PM

Thank you Dimo that was the problem :/

Regards
Joel
Top achievements
Rank 1
commented on 19 Feb 2012, 07:50 AM

Dimo,

Is this something that can be worked into the grid pager as a feature?

Thanks,
Joel
Atanu
Top achievements
Rank 1
commented on 11 Oct 2012, 11:17 AM

Is there way to change the grid page size on grid load....
I am asking this question because there is no grid_onload event like Telerik grid where this can be done pretty easily.

Please advise.
Dimo
Telerik team
commented on 11 Oct 2012, 11:32 AM

Hello Atanu,

There is not much need of an OnLoad event. You can simply execute or call the required code after the Grid Javascript initialization statement.

Regards,
Dimo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Atanu
Top achievements
Rank 1
commented on 11 Oct 2012, 11:38 AM

Thanks for your prompt reply.
Can you please show a small sample to implement this.

Actually I want to implement a common function to set the pagesize of the grid at start so that all other grids can call that same function; which I used to do very easily with telerik grid's
.Events(events => events.onLoad("Grid_onLoad"))
 
where Grid_Load is a javascript function to set the grid pagesize and all other grids used to call that.

Regards.
Dimo
Telerik team
commented on 12 Oct 2012, 11:43 AM

Hi Atanu,

You can use the code I have provided in my first post in this thread, and enclose it in a function that will be called with a parameter after each Grid Javascript initialization statement. The parameter can be the Grid's ID or DOM element.

Regards,
Dimo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Atanu
Top achievements
Rank 1
commented on 12 Oct 2012, 12:00 PM

Hi Dimo

Here is how I designed my grid

@{
    Html.Kendo().Grid<......>()
    .Name("TestKendoGrid")
    .HtmlAttributes(new { style = "width: 100%;" })
    .Events(events => events.DataBound("Grid_onDataBound"))
    .Events(events => events.Change("Grid_OnChange"))   
    .AutoBind(false)
    .Columns(col =>
    {
        col.Bound("NP_PARAM_UID").Hidden();        
        col.Bound("PROCESS_GRP").Title("Process Group").HeaderHtmlAttributes(new { style = "text-align:center;" });
        col.Bound("PARAM_NAME").Title("Parameter Name").HeaderHtmlAttributes(new { style = "text-align:center;" });
        col.Bound("PARAM_VALUE").Title("Parameter Value").HeaderHtmlAttributes(new { style = "text-align:center;" });
        col.Bound("EXTERNAL_ID").Title("Table Name").HeaderHtmlAttributes(new { style = "text-align:center;" });
        col.Bound("EXTERNAL_FK").Title("Key Value").HeaderHtmlAttributes(new { style = "text-align:center;" });
        col.Bound("DEL_FLG").Hidden();
    })
    .DataSource(dataBinding =>
    {
        dataBinding.Ajax().Read(read => read.Action("SrchDataIniParam", "Admin",
        new
        {
            area = "Admin",
            strParamGrp = ViewBag.Param1        
        }))
        .ServerOperation(false);
    })
    .Resizable(resizing => resizing.Columns(true))
    .Selectable() 
    .Reorderable(reorder => reorder.Columns(true))
    .Pageable()
    .Sortable()
    .Filterable()
    .Render();
}

Now where to put that initialization code?. Sorry if I am wrong in my understanding as i am new to Kendo UI Grid
Dimo
Telerik team
commented on 12 Oct 2012, 12:07 PM

When using Kendo UI MVC wrappers, the initialization statement follows immediately the widget's HTML markup. So you can put your custom Javascript anywhere after the server-side widget declaration.

Greetings,
Dimo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Atanu
Top achievements
Rank 1
commented on 16 Oct 2012, 04:32 AM

Thanks....

I have used it the way you said

<script type="text/javascript" language="javascript" >
    Grid_PageSize('MyKendoGrid');
</script>

And in the javascript function did the paging as below

Grid_onLoad = function (objGrid) {
    var grid = $("#" + objGrid).data("kendoGrid");
    if (grid != undefined)
        grid.dataSource.pageSize(parseInt(GridPageSize)); //GridPageSize is a variable holding the page size
}

That works fine but the function cause the grid to rebind again. So now the grid is binding twice and making two server round trips.

Please advise.

Dimo
Telerik team
commented on 16 Oct 2012, 07:57 AM

Hello Atanu,

Yes, surely the Grid will rebind when changing its page size. I don't imagine what else should happen, right?

I strongly recommend changing your implementation, so that setting the page size initially after data binding is not needed. If the desired page size is not known on the server, a possible option is to use the pure Kendo UI Grid, which is initialized via Javascript on the client. In this way you will be able to know what page size to set directly in the widget's initial configuration.

Regards,
Dimo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Francesco
Top achievements
Rank 1
commented on 11 Jan 2013, 12:28 PM

Hi,
i use to inject the select on the kendo grid wrapper next to the original select.

but how can i set the change event on my select for doing the same action to a original select?


Thank you
Dimo
Telerik team
commented on 11 Jan 2013, 02:09 PM

Hello Francesco,

You can use the Grid datasource API and namely, the page method to navigate to another page.

gridObject.dataSource.page(5);

Greetings,
Dimo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
darryl
Top achievements
Rank 1
commented on 20 Sep 2015, 07:02 AM

[quote]Joel said:Dimo,

Is this something that can be worked into the grid pager as a feature?

Thanks,
Joel[/quote]

I didn't see a response to your comment, but I second that.  I don't know why such a standard functionality of any grid would be omitted and left to each developer to custom code it.  Especially because you could easily convert that 1-20 of 22 text into a slick rows per page selector.

(yes i realize this is an old thread, but amazingly, still holds true for the latest kendoui)

Dimo
Telerik team
commented on 23 Sep 2015, 01:14 PM

Hello Darryl,

The original topic in this thead was about the ability to change the page size on the fly, which is now supported out-of-the-box:

http://demos.telerik.com/kendo-ui/grid/index

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-pageable.pageSizes

In case you are referring to something else, please clarify.

Regards,
Dimo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
darryl
Top achievements
Rank 1
commented on 23 Sep 2015, 05:11 PM

[quote]Dimo said:Hello Darryl,

The original topic in this thead was about the ability to change the page size on the fly, which is now supported out-of-the-box:

http://demos.telerik.com/kendo-ui/grid/index

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-pageable.pageSizes

In case you are referring to something else, please clarify.

Regards,
Dimo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

[/quote]

 

AHA! Great!  I was specifically referring to a built in UI control for end-user ability to alter page size.  I've used paging but didn't notice the switch to enable the UI for rows per page.  Well good to have a conclusion here on this old thread then so nobody is misguided when they search "rows per page kendo ui grid"  ;)

Thanks Dimo!

Su Pei
Top achievements
Rank 1
commented on 12 May 2017, 07:58 AM

Hi Dimo, 

Currently I'm facing a problem when I change the page size while scrolling the grid, the grid datasource rebind again. 

I wish to retain the existing grid data, because of user will have changes in textbox inside the detail template.  

Do you know any method when page size changed, it just append another additional row at the bottom of the grid? 

Thanks.

Regards, 

Su Pei

Dimo
Telerik team
commented on 15 May 2017, 07:44 AM

Hello Su Pei,

By design, when a Kendo UI widget's dataSource changes (it is rebound, sorted, paged, fitlered, etc), the widget is rebound as well and all its data items are re-rendered. This behavior occurs also if the pushInsert method is used:

http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#methods-pushInsert

From this point of view, I am afraid adding data items while preserving the current ones is not supported. What I can suggest is to prevent the user from changing the page size before saving all pending changes:

http://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/Editing/grid-prevent-navigation-when-in-editing-mode

Regards,
Dimo
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Ariful
Top achievements
Rank 1
answered on 16 Oct 2012, 04:23 PM
Sorry for late reply. But it may help for new developers who got same problem. The solution is simple.

.Pageable(x => x.PageSizes(new int[] { 10, 20, 50, 100 }))

Thanks!
ARIF
Vishal
Top achievements
Rank 1
commented on 10 Jun 2022, 03:30 PM

I would like to save the preferences of the Page Selection. But when user selects "All", the Telerik GRID is not providing a way to set that option dynamically. Any suggestion?
Georgi Denchev
Telerik team
commented on 15 Jun 2022, 10:31 AM

Hi, Vishal,

Could you please provide me with a bit more information(or a code snippet) regarding the issue?

I tested the pageSizes property in the documentation here:

https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/pageable.pagesizes 

And it seems to be working as expected.

 

  pageable: {
    pageSizes: [2, 3, 4, "all"],
    numeric: false
  }

Best Regards,

Georgi

Vishal
Top achievements
Rank 1
commented on 15 Jun 2022, 10:34 AM | edited

If you select All, it will display all the records, but if you want to have all selected dynamically, what can be done? I am saving the last selected page size and wants to have the all option as well. So when user load the same grid again, it will have all selected.
Georgi Denchev
Telerik team
commented on 20 Jun 2022, 07:53 AM

Hello, Vishal,

Thank you for clarifying the requirement.

In this case, you'll have to save the pageSize selection separately and then restore it back after calling setOptions.

            // Save the value from the pageSize dropdownlist.
            localStorage["kendo-grid-page-size"] = grid.pager.element.find(".k-pager-sizes select").data("kendoDropDownList").value();




              // Call setOptions to restore the options.
              grid.setOptions(JSON.parse(options));
              
              // Set the pageSize back to the dataSource.
              if (!isNaN(pageSize)) {
                grid.dataSource.pageSize(pageSize);
              } else if (pageSize.toLowerCase() == "all") {
                grid.dataSource._pageSize = undefined;
                grid.dataSource._take = undefined;
                grid.dataSource._skip = 0;
              }

Dojo

https://dojo.telerik.com/@gdenchev/AlUnEpEl 

Best Regards,

Georgi

Tags
Grid
Asked by
Alvaro
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Ariful
Top achievements
Rank 1
Share this question
or