This is a migrated thread and some comments may be shown as answers.

Changing PageSizes on GridPager

1 Answer 263 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Florian
Top achievements
Rank 1
Florian asked on 27 Mar 2018, 12:46 PM

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.

 

 

1 Answer, 1 is accepted

Sort by
0
Florian
Top achievements
Rank 1
answered on 27 Mar 2018, 01:24 PM

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 }));
        }

 

Tags
Grid
Asked by
Florian
Top achievements
Rank 1
Answers by
Florian
Top achievements
Rank 1
Share this question
or