Setting pageSize to "All"

[Ivica]

I am trying to find a way of setting the page size selection box to "All" by default.

In my grid I have:

pageSettings: {pageSize: defaultPageSize, pageSizes: [5,10,20,50,100,'All']}

If I set my variable 'defaultPageSize' to the total data size, the grid will display correctly and all rows are shown, but the page size selection box in the grid is empty (ie. not set to "All"). If I set 'defaultPageSize' to the string 'All', the grid does not display at all, but the page size selection box does show "All".

I have tried the following in "created" or "dataBound" events:

$(grid.element).find(".e-pagerdropdown input.e-dropdownlist").val('All')

And it does work initially, but the value gets reset to an empty value again. Is there some later grid event I could use (after 'created'), or could you help me identify where the selection box gets reset?

Thank you

[Thiyagu Subramani]

Hi Ivica, 

Thanks for contacting Syncfusion support. 

Based on your shared information we have prepared sample as per your requirement. In this sample we have stored total data size to the default defaultPageSize in dataBound event and we have defined that value to the pageSettings.pageSize property.  

Please refer to the below code and sample link. 

dataBound: function (args) { 

    if (flag) { 

      defaultPageSize = grid.dataSource.length; 

      grid.pageSettings.pageSize = defaultPageSize; 

      grid.pagerModule.element.getElementsByClassName("e-dropdownlist")[0].ej2_instances[0].value = "All"; 

      flag = false; 

    } 

  }, 

  allowPaging: true, 

. . . . . . .  . . . 

  pageSettings: { 

    pageSizes: [5, 10, 15, 20, 25, "All"] 

  } 

Sample link: https://stackblitz.com/edit/yfn2qm-s8wqid?file=index.js 

Documentation link:  https://ej2.syncfusion.com/javascript/documentation/grid/how-to/customize-pager-drop-down/ 

Please get back to us, if you need any further assistance. 

Regards, 

Thiyagu S 

[Ivica]

Thank you, "grid.pagerModule.element.getElementsByClassName("e-dropdownlist")[0].ej2_instances[0]" is what I needed.

[Shalini Maragathavel]

 Hi Ivica, 

Thanks for your update.

We are glad to hear that the provided solution resolved your query.

Please get back to us, if you need further assistance.

Regards,
Shalini M. 

[Ronald Koh]

hello, I faces the above issue when trying to use the solution proposed above

my workaround was to forcibly access it like this: (not sure this is the right way to do it)
```

(this.grid!.pagerModule as any).element.getElementsByClassName("e-dropdownlist")[0].ej2_instances[0]

```

(let me know if I should create a new thread to cater this issue)

[Rajapandi Ravi]

Ronald,

In Syncfusion’s Grid, the pagerModule.element property is internally marked as private in the TypeScript definition to indicate that it’s not part of the public API. As a result, direct access like pagerModule.element is blocked by TypeScript with an error. You can access the element without compile-time errors by using below approach and resolve the problem at your end. Please refer the below code example for more information.

Index.ts

 

import { DropDownList } from '@syncfusion/ej2-dropdowns';

import { getInstance } from '@syncfusion/ej2-base';

 

 

dataBound: function() {

if (flag) { 

.  .  .  .  .  .  .  .  .  .  .

.  .  .  .  .  .  .  .  .  .  .

//pass the element and dropdownlist within the getInstance method to get the dropdown instance

var dropInstance = getInstance(grid.pagerModule.pagerObj.element.getElementsByClassName("e-dropdownlist")[0] as HTMLElement, DropDownList) as DropDownList;

dropInstance.value = "All";

flag = false; 

}

}

Please get back to us if you need further assistance.

[Ronald Koh]

hi, thanks for the clarification and solution

[Rajapandi Ravi]

Ronald,

We are happy to hear that the provided solution was helpful. Please get back to us if you need any other assistance.