GridComponent: pageSettings template only takes in string or HTML

[ONG YU FENG]

Hi

I am trying to create a custom page template for my GridComponents. However, the pageSettings template only takes in string or HTML. Is there any way for the template prop to take in JSX component instead?

And also able to all the pageSettings like currentPage, totalPages and totalRecordCount without the use of bind method

https://ej2.syncfusion.com/react/documentation/grid/paging/

[Mohammed Farook J]

Hi ONG YU FENG, 

Thanks for contacting Syncfusion support. 

Could please provide the below details to proceed on your requirement, 

• Whether you want to import external JSX components into the pager template?
• Share the details of your JSX component if this is your requirement?
• Otherwise, please explain the more information about your requirement.

Please get back to us if you need further assistance. 

Regards, 

Praveen 

[ONG YU FENG]

Hi Praveen

Please refer to the message below and codesandbox for example:

(property) PageSettingsModel.template?: string

Defines the template which renders customized elements in pager instead of default elements. It accepts either template string or HTML element ID.

@default

null

Type '(pagerData: any) => JSX.Element' is not assignable to type 'string'.ts(2322)

Other than able to use JSX components in the template prop, the JSX component should be able to take in GridComponent ref to get information for PageSettings (currentPage, totalPages and totalRecordCount)

https://codesandbox.io/s/mutable-dawn-7jy4c?file=/src/App.tsx

Thanks

[Ajith Govarthan]

Hi ONG YU FENG, 

Thanks for the update. 

Query: Other than able to use JSX components in the template prop, the JSX component should be able to take in GridComponent ref to get information for PageSettings (currentPage, totalPages and totalRecordCount) 

 

We have checked your attached sample and able to reproduce the reported behavior at our end. So, currently we are validating on the reported behavior at our source side and we will update further details on or before 25^th August 2021. 

Until then we appreciate your patience. 

Regards, 

Ajith G. 

[ONG YU FENG]

Hi Ajith G

Is there any update on this issue?

Regards

Yu Feng

[Rajapandi Ravi]

Hi ONG, 

Thanks for your patience 

From your update, we could see that you are using a functional component in your application and like to render a NumericTextBox in pager Template. Based on your query we have prepared a sample and render the NumericTextBox in pager Template. Please refer the below code example, sample and documentation for more information. 

 

 

function Home() { 

     

    const sortSettings:SortSettingsModel = { columns: [ 

        {field: 'EmployeeID', direction: 'Ascending' } 

    ] }; 

    const filterOptions: FilterSettingsModel = { 

        type: 'Excel' 

         }; 

         const template = (pagerData: any) => { 

            return ( 

                <div className="e-pagertemplate"> 

                  <div className="col-lg-12 control-section"> 

                      <div className="content-wrapper"> 

                      <NumericTextBoxComponent min={1} max={3} value={pagerData.currentPage} format='###.##' change={change} /> 

                    </div> 

                  </div> 

                  <div 

                    id="totalPages" 

                    className="e-pagertemplatemessage" style={{ marginTop: 8, marginLeft: 30, border: "none", display: "inline-block"}}> 

                    <span className="e-pagenomsg"> 

                      {pagerData.currentPage} of {pagerData.totalPages} pages ({pagerData.totalRecordsCount} items) 

                    </span> 

                  </div> 

                </div> 

              ); 

         } 

         const change = (args:any) => { 

            const grid = (document.getElementById('FGrid') as any).ej2_instances[0]; 

            grid.goToPage(args.value); 

         } 

         const pageSettings:any =  { template, pageSize: 3 }; 

    return(<div> <p>Grid-1 using Functional Components</p> 

    <GridComponent dataSource={sdata} id="FGrid" allowPaging={true} allowFiltering={true} pageSettings={ pageSettings } 

            allowSorting={true} filterSettings={filterOptions} sortSettings={ sortSettings }> 

            <ColumnsDirective> 

                <ColumnDirective field='OrderID' width='100' textAlign="Right"/> 

                <ColumnDirective field='CustomerID' width='100'/> 

                <ColumnDirective field='EmployeeID' width='100' textAlign="Right"/> 

                <ColumnDirective field='Freight' width='100' format="C2" textAlign="Right"/> 

                <ColumnDirective field='ShipCountry' width='100'/> 

            </ColumnsDirective> 

            <Inject services={[Page, Sort, Filter, Group]} /> 

        </GridComponent>  

        </div> 

) 

    } 

Sample: https://www.syncfusion.com/downloads/support/forum/168181/ze/1681811524737403.zip 

Documentation: https://ej2.syncfusion.com/react/documentation/grid/paging/#template 

Screenshot: 

 

Regards, 

Rajapandi R 

[ONG YU FENG]

Hi Rajapandi

I tested on the zip that you sent me is working fine which the packages are based on the old versions. However, it seems that it does not render on the latest version of the Syncfusion/React.

I have updated the codesandbox with the latest packages and it does not render as it is. Please refer to the link below:

https://codesandbox.io/s/mutable-dawn-7jy4c?file=/src/App.tsx

Regards

Yu

[Ajith Govarthan]

Hi ONG YU FENG, 

Thanks for the update. 

We have checked your attached sample and able reproduce the reported behavior at our end. We have taken this query as high priority one and we will update further on or before 6^th September 2021. 

Until then we appreciate your patience. 

Regards, 

Ajith G. 

[Ajith Govarthan]

Hi ONG YU FENG, 

Thanks for the patience. 

We have validated the provided information and we have confirmed it as a bug and logged the defect report “pager template is not rendering in the react Grid”. Thank you for taking the time to report this issue and helping us improve our product. At Syncfusion, we are committed to fixing all validated defects (subject to technological feasibility and Product Development Life Cycle ) and including the defect fix in our upcoming weekly release which is expected to be rolled out on 22^nd September 2021. 

    

You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link.    

    

Feedback Link: https://www.syncfusion.com/feedback/28481/pager-template-is-not-rendering-in-the-react-grid 

For your convenience we have prepared a workaround sample. So, please use the below workaround sample until we fix the reported issue. 

Code Example: 

App.tsx 

  const dataBound = () => { 

    var grid = document.getElementsByClassName("e-grid")[0].ej2_instances[0]; 

    grid.pagerModule.isInitialRender = false; 

    grid.pagerModule.renderReactPagerTemplate(); 

  }; 

Sample Link: https://codesandbox.io/s/brave-hypatia-0q921?file=/src/App.tsx:812-1018 

Regards, 

Ajith G. 

[Praveenkumar Gajendiran]

Hi ONG YU FENG,  

  

Sorry for the inconvenience. 

Due to our 2021 Volume 3 Main release, we have not rolled out the weekly patch release. We will include the fix for this bug (“pager template is not rendering in the react Grid”) in our next patch release which is expected to be roll out on Oct 13 2021. 

We appreciate your patience until then. 

Regards, 

Praveenkumar G 

[Praveenkumar Gajendiran]

Hi ONG YU FENG,

Thanks for your patience.

We are glad to announce that our Essential Javascript2 patch release (v19.3.45) has been rolled out successfully and in that release we have added the fix for “pager template is not rendering in the react Grid” issue . So please update your package to this version to include the fix.

Find the below sample for your reference. 

Sample:  https://codesandbox.io/s/relaxed-black-7y10h?file=/src/App.tsx

Feedback Link: https://www.syncfusion.com/feedback/28481/pager-template-is-not-rendering-in-the-react-grid 

We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require further assistance. 

 

Regards,            

Praveenkumar G