Changing PageSizes on GridPager

2 posts, 0 answers
  1. Florian
    Florian avatar
    2 posts
    Member since:
    Mar 2018

    Posted 27 Mar Link to this post


    I have a grid where I get my data from the server.
    In my pager Im showing this page sizes [25,50,100,"All"] which works fine. 

    But now,when we have more than 10000 items in the totalResults I want to remove the "All" option. 
    How can I change the pagesizes of the pager?

    But I only want to change the selectbox without reloading (and fetching the data) the grid again.

    I tried it in the Databound event like this

    dataBound(e) {
       var grid = e.sender;
       var pageSizes = self.totalResults < 10000
                    ? [self.gridPageSize, self.gridPageSize * 2, self.gridPageSize * 4, "all"]
                    : [self.gridPageSize, self.gridPageSize * 2, self.gridPageSize * 4];

       grid.setOptions({ pageable: { pageSizes: pageSizes  } });


    This leads me in a endless loop because the setOptions refrehes the grid.
    Because the query can take some time, I dont want to load the data again.
    I also played around with hidding the "ALL" option via css. But this, I also didn't get to work.

    Than I tried to bind the options and change them directly like this.

        <div kendo-grid="grid" id="grid"

    self.mainGridOptions.pageable.pageSizes = pageSizes;
    This works, but also does a refresh of the grid (and does another api call to the backoffice)

    So, is there a way to change the pagesizes without refreshing the data of the grid.




  2. Florian
    Florian avatar
    2 posts
    Member since:
    Mar 2018

    Posted 27 Mar Link to this post

    After searching again, I found a solution. Don't know why I did not find it earlier .....

    This is my solution now, calling this function in the dataBound Event.

    updatePageSizes(withAll: boolean) {
                var data =
                    { text: `${this.gridPageSize}`, value: `${this.gridPageSize}` },
                    { text: `${this.gridPageSize*2}`, value: `${this.gridPageSize*2}` },
                    { text: `${this.gridPageSize*4}`, value: `${this.gridPageSize*4}` }
                if (withAll) {
                    data.push({ text: 'All', value: 'all' });
                var ddList = $('.k-pager-sizes')
                ddList.bind('dataBound', () => {
                    setTimeout(() => {
                        if (parseInt(ddList.text()) > parseInt(data[data.length - 1].value)) {
                   - 1);
                    .setDataSource(new{ data: data }));


Back to Top