We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Allow the user select the number of elements in a page with pageSizes

Thread ID:





142274 Jan 24,2019 11:37 AM UTC Jan 28,2019 11:34 AM UTC Angular - EJ 2 7
Tags: Grid
Asked On January 24, 2019 11:37 AM UTC


Can you please give an example of how to use the paseSizes of the Grid? I want to allow the user to select how many elements he or she wants to see in each page (20, 50 or 100). 

Thank you in advance, 


Madhu Sudhanan P [Syncfusion]
Replied On January 24, 2019 11:50 AM UTC

Hi Ane, 

Thanks for contacting Syncfusion support. 

You can achieve this requirement using page size dropdown feature. Please refer to the below link to achieve this.  

Madhu Sudhanan P 

Replied On January 24, 2019 01:11 PM UTC

Solved! Now I have another problem. I want to filter 2 of a 4 colums grid and I want them to be type checkbox. I have tried using [filter] but it shows me an error. 

Thank you in advance!

Madhu Sudhanan P [Syncfusion]
Replied On January 25, 2019 04:06 AM UTC

Hi Ane, 

Could you please share the screenshot of the error or the stack trace to check the reported problem. 

Madhu Sudhanan P  

Replied On January 25, 2019 07:58 AM UTC


Now it doesn't show me that error but it filters all the columns and I just want to filter 2 columns. How can I solve that problem?

<ejs-grid [dataSource]='data' [enableHover]='false' [allowSelection]='false' [allowFiltering]='true' [filterSettings]='filterSettings' [allowPaging]='true' [pageSettings]="pageSettings">
<e-column field='aaaa' headerText='AAAA' textAlign='Center'></e-column>
<e-column field='bbbb' headerText='BBBB' [filter] = 'filter' textAlign='Center'></e-column>
<e-column field='cccc' headerText='CCCC' textAlign='Left'></e-column>
<e-column field='dddd' headerText='DDDD' textAlign='Center'></e-column>
In the .ts:

 filterSettings: FilterSettingsModel;
filter: IFilter;

 ngOnInit() {
this.filterSettings = { type: 'Menu', showFilterBarStatus: false };
this.filter = { type : 'CheckBox'};

Madhu Sudhanan P [Syncfusion]
Replied On January 28, 2019 04:22 AM UTC

Hi Ane, 

Thanks for the update.  

We understood that you want to disable filter for some of the columns, if so please set the columns.allowFiltering property as false. 

<e-column field='bbbb' headerText='BBBB' [allowFiltering]='false' textAlign='Center'></e-column> 



Madhu Sudhanan P 

Replied On January 28, 2019 11:23 AM UTC

Thank you!

Madhu Sudhanan P [Syncfusion]
Replied On January 28, 2019 11:34 AM UTC

Hi Ane, 
Thanks for the update. Please get back to us if you require further assistance. 
Madhu Sudhanan P 


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon