How to display the row index using jsRender?

[xia]

I have read a post of this problem, and I have used the plan. But when I clicked next page, the index has been 1 for start again, it's totally out of my expectation.

Does have any way to display the rowIndex to continually to the next page without changing my grid datasource?

Thank you

[Manivannan Padmanaban]

Hi Xia 

Thanks for contacting Syncfusion Support. 

Query: Does have any way to display the rowIndex to continually to the next page without changing my grid datasource? 

Using templateRefresh event we can achieve your requirement, In the templateRefresh event of the Grid, we have calculated the Index value based on  pageSize and currentPage of the records along with rowIndex. This event  will re-render automatically, when any grid action is performed. So while moving to the next page it will update the rowIndex based on pageSize and currentPage of pageSettings property.  

 

Please refer to the code example:- 

    <script type="text/x-jsrender" id="columnTemplate"> 

         <span class="label label-warning></span>   

    </script> 

    <div id="Grid"></div> 

             

   <script type="text/javascript"> 

     $(function () { 

         // the datasource "window.gridData" is referred from jsondata.min.js 

         var data = ej.DataManager(window.gridData).executeLocal(ej.Query().take(50)); 

         $("#Grid").ejGrid({ 

             dataSource: data, 

             allowPaging: true, 

             allowSorting: true, 

             isResponsive: true,                 

             columns: [ 

                      { headerText: "RowIndex", template: true, templateID: "#columnTemplate", textAlign: "center", width: 110 }, 

                     .  .  . 

            ], 

             templateRefresh:"refresh", 

         }); 

     }); 

    function refresh(args) { 

        Index = (this.model.pageSettings.pageSize * (this.model.pageSettings.currentPage-1)) + args.rowIndex + 1; 

        $(args.cell).find("span").text(Index); 

    } 

               

    </script> 

Please refer to the sample and documentation link:-   

http://jsplayground.syncfusion.com/w3xt1kh3 

 

https://help.syncfusion.com/js/grid/columns#column-template 

 

https://help.syncfusion.com/api/js/ejgrid#events:templaterefresh 

 

Regards, 

Manivannan Padmanaban. 

[xia]

Thank you Padmanaban, your code is woking fine :)

[Farveen Sulthana Thameeztheen Basha]

Hi Xia, 

Thanks for your update. Please get back to us if you need any further assistance. 

Regards, 

Farveen sulthana T