Is there a way to change the PageSize dinamically?

25 posts, 1 answers
  1. Alvaro
    Alvaro avatar
    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

  2.
  3. Answer
    Dimo
    Admin
    Dimo avatar
    8475 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!
  5. Alvaro
    Alvaro avatar
    6 posts
    Member since:
    Dec 2011

    Posted 28 Dec 2011 Link to this post

    Thanks for the information. I will implement the functionality.
  7. Dombi
    Dombi avatar
    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.
  8.
  9. Dimo
    Admin
    Dimo avatar
    8475 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!
  11. Dombi
    Dombi avatar
    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
  13. Dimo
    Admin
    Dimo avatar
    8475 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!
  15. Dombi
    Dombi avatar
    4 posts
    Member since:
    Feb 2012

    Posted 15 Feb 2012 Link to this post

    Thank you Dimo that was the problem :/

    Regards
  17. Joel
    Joel avatar
    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
  19. Atanu
    Atanu avatar
    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.
  20.
  21. Dimo
    Admin
    Dimo avatar
    8475 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!
  23. Atanu
    Atanu avatar
    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.
  25. Dimo
    Admin
    Dimo avatar
    8475 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!
  27. Atanu
    Atanu avatar
    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
  29. Dimo
    Admin
    Dimo avatar
    8475 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!
  31. Atanu
    Atanu avatar
    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.

  32.
  33. Dimo
    Admin
    Dimo avatar
    8475 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!
  35. Ariful
    Ariful avatar
    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
  37. Francesco
    Francesco avatar
    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
  38.
  39. Dimo
    Admin
    Dimo avatar
    8475 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!
  41. darryl
    darryl avatar
    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)

  43. Dimo
    Admin
    Dimo avatar
    8475 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!
  44.
  45. darryl
    darryl avatar
    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!

  47. Su Pei
    Su Pei avatar
    11 posts
    Member since:
    Nov 2016

    Posted 12 May 2017 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

  49. Dimo
    Admin
    Dimo avatar
    8475 posts

    Posted 15 May 2017 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.
Back to Top