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

    Hi

    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"
             k-options="mainGridOptions"
             k-rebind="mainGridOptions">
        </div>

    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.

    Thanks.

     

     

  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 .....

    https://www.telerik.com/forums/trimming-down-the-grid-page-sizes-dropdown

    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')
                    .find('select')
                    .data('kendoDropDownList');
     
                ddList.bind('dataBound', () => {
                    setTimeout(() => {
                        if (parseInt(ddList.text()) > parseInt(data[data.length - 1].value)) {
                            ddList.select(data.length - 1);
                        }
                    });
                });
     
                $('.k-pager-sizes')
                    .find('select')
                    .data('kendoDropDownList')
                    .setDataSource(new kendo.data.DataSource({ data: data }));
            }

     

Back to Top