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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback
Essential JS2

Syncfusion jQuery based widgets are no longer in active development. Switch to our pure JavaScript based next generation Essential JS 2 library.

Try Essential JS 2

How to display the row index using jsRender?

Thread ID:

Created:

Updated:

Platform:

Replies:

147669 Sep 19,2019 08:02 AM UTC Sep 24,2019 09:52 AM UTC jQuery 3
loading
Tags: ejGrid
xia
Asked On September 19, 2019 08:02 AM UTC

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 [Syncfusion]
Replied On 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>   
    </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:-   

 
 
 
Regards, 
Manivannan Padmanaban. 


xia
Replied On September 24, 2019 02:47 AM UTC

Thank you Padmanaban, your code is woking fine :)

Farveen Sulthana Thameeztheen Basha [Syncfusion]
Replied On September 24, 2019 09:52 AM UTC

Hi Xia, 

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

Regards, 
Farveen sulthana T 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon