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

How to display the row index using jsRender?

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

3 Replies

MP Manivannan Padmanaban Syncfusion Team September 20, 2019 03:53 PM UTC

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>   
    <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)); 
             dataSource: data, 
             allowPaging: true, 
             allowSorting: true, 
             isResponsive: true,                 
             columns: [ 
                      { headerText: "RowIndex", template: true, templateID: "#columnTemplate", textAlign: "center", width: 110 }, 
                     .  .  . 
    function refresh(args) { 
        Index = (this.model.pageSettings.pageSize * (this.model.pageSettings.currentPage-1)) + args.rowIndex + 1; 

Please refer to the sample and documentation link:-   

Manivannan Padmanaban. 

XI xia September 24, 2019 02:47 AM UTC

Thank you Padmanaban, your code is woking fine :)

FS Farveen Sulthana Thameeztheen Basha Syncfusion Team September 24, 2019 09:52 AM UTC

Hi Xia, 

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

Farveen sulthana T 

Live Chat Icon For mobile
Up arrow icon