Telerik Forums / Kendo UI Forum / Grid /

Is there a way to change the PageSize dinamically?

Kendo UI
Resources Buy Try

25 posts, 1 answers

Alvaro

6 posts

Member since:
Dec 2011

Posted 27 Dec 2011 Link to this post

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
Answer
Dimo
Admin

8404 posts

Posted 28 Dec 2011 Link to this post

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

6 posts

Member since:
Dec 2011

Posted 28 Dec 2011 Link to this post

Thanks for the information. I will implement the functionality.
Dombi

4 posts

Member since:
Feb 2012

Posted 15 Feb 2012 Link to this post

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
Admin

8404 posts

Posted 15 Feb 2012 Link to this post

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

4 posts

Member since:
Feb 2012

Posted 15 Feb 2012 Link to this post

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
Admin

8404 posts

Posted 15 Feb 2012 Link to this post

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

4 posts

Member since:
Feb 2012

Posted 15 Feb 2012 Link to this post

Thank you Dimo that was the problem :/

Regards
Joel

78 posts

Member since:
Oct 2012

Posted 19 Feb 2012 Link to this post

Dimo,

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

Thanks,
Joel
Atanu

40 posts

Member since:
Jan 2012

Posted 11 Oct 2012 Link to this post

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
Admin

8404 posts

Posted 11 Oct 2012 Link to this post

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

40 posts

Member since:
Jan 2012

Posted 11 Oct 2012 Link to this post

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
Admin

8404 posts

Posted 12 Oct 2012 Link to this post

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

40 posts

Member since:
Jan 2012

Posted 12 Oct 2012 Link to this post

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
Admin

8404 posts

Posted 12 Oct 2012 Link to this post

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

40 posts

Member since:
Jan 2012

Posted 15 Oct 2012 Link to this post

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
Admin

8404 posts

Posted 16 Oct 2012 Link to this post

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!
Ariful

2 posts

Member since:
Sep 2012

Posted 16 Oct 2012 Link to this post

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
Francesco

6 posts

Member since:
Feb 2012

Posted 11 Jan 2013 Link to this post

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
Admin

8404 posts

Posted 11 Jan 2013 Link to this post

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

15 posts

Member since:
May 2015

Posted 20 Sep 2015 in reply to Joel Link to this post

Joel said:Dimo,

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

Thanks,
Joel

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
Admin

8404 posts

Posted 23 Sep 2015 Link to this post

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

15 posts

Member since:
May 2015

Posted 23 Sep 2015 in reply to Dimo Link to this post

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!

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

11 posts

Member since:
Nov 2016

Posted 12 May in reply to Dimo Link to this post

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
Admin

8404 posts

Posted 15 May Link to this post

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.

Is there a way to change the PageSize dinamically?

Alvaro

Dimo

Alvaro

Dombi

Dimo

Dombi

Dimo

Dombi

Joel

Atanu

Dimo

Atanu

Dimo

Atanu

Dimo

Atanu

Dimo

Ariful

Francesco

Dimo

darryl

Dimo

darryl

Su Pei

Dimo