Change Page Size Programmatically

[Bernd Parchmann]

Hi,

I want to use my Pager template of the GridComponent in my TreeGridComponents.

My problem is, I dont know how I can set the PageSize same as I am changing for the Grid like gridInstance.pagerModule.setPageSize(myNewSize) because this function is not available for TreeGrid!

How can I change the current PageSize for example with a separate Combobox change event programmatically?

Hope you can give me a hint,

Thx much and greetings,

Bernd

[Bernd Parchmann]

I found a solution: added a state variable for the complete page settings and the combobox change event is setting this complete variable. this is working for both Grid elements!

Maybe the missing method (setPageSize(n)) could be added anyway?

[Farveen Sulthana Thameeztheen Basha]

Hi Bernd,

Greetings from Syncfusion.

Hope that your reported problem has been resolved. Also please find the solution and get back to us if you are facing any difficulties.

Query#:- My problem is, I dont know how I can set the PageSize same as I am changing for the Grid. How can I change the current PageSize for example with a separate Combobox change event programmatically?

Solution #1:-

As mentioned we cannot directly access the setPageSize from TreeGrid Instance. To achieve your requirement (Change PageSize dynamically from Combobox change event) by accessing this method from PagerModule through GridInstance.

Refer to the code below:-

 

 

  const onChange = (args) =>

    {

        var pageSize = args.itemData.value;

        treegridObj.current.grid.pagerModule.setPageSize(pageSize); // access the setPageSize pagerModule from Grid instance

    };

 

<ComboBoxComponent

          id="games"

          dataSource={sportsData}

          change={onChange.bind(this)}    //bind change event for combo box

          width="250"

          placeholder="Select PageSize"

          popupHeight="220px"

     />

 

<TreeGridComponent

          dataSource={sampleData}

          treeColumnIndex={1}

          childMapping="subtasks"

          height="350"

          ref={treegridObj}

          allowPaging={true}

          pageSettings={{ pageSizes: true, pageSize: 10, pageCount: 2 }}

        >

          <ColumnsDirective>

          </ColumnsDirective>

              .  .  .         

 </TreeGridComponent>

Sample link:- https://stackblitz.com/edit/react-v93lhm-eekvjt?file=index.js

Solution#2:-

By default, In TreeGrid we can have pageSettings.pageSizes property which renders pager dropdown to dynamically change pageSize.

Refer to the documentation link:-

https://ej2.syncfusion.com/react/documentation/treegrid/paging#pager-with-page-size-dropdown

https://ej2.syncfusion.com/react/demos/#/material3/treegrid/paging

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

Regards,

Farveen sulthana T

[Bernd Parchmann]

Thx for more options to solve my problem!

Could you extend your sample to achieve with functional component, please?

[Shek Mohammed Asiq Abdul Jabbar]

Bernd,

Query : Extend your sample to achieve with react functional component.

We have achieved the previous sample by using react functional component. Please refer to the following code snippet.

function Paging () {

  . . . .

}

export default Paging; 

 

Kindly get back to us for further assistance.

Regards,

Shek Mohammed Asiq

Attachment: React_8ff20ce6.zip