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

EJ2 Grid MVC Display Row Number

Thanks for giving an opportunity to use Syncfusion Tools for free on trial. It is very usefull tool.
I need to display row numbers on grid. I did some research. In older and different platforms there was a property called RowHeader.
But I couldn't find any good solution for my case on EJ2 Grid for MVC. I don't want to add row_number() to my sql queries.
I just want to handle this on grid. Is there a best practice for that? How could I achive this?
Please advise,

5 Replies

TS Thavasianand Sankaranarayanan Syncfusion Team February 22, 2019 10:26 AM UTC

Hi Sue, 

Greetings from Syncfusion. 

Based on your query we suspect that you want to show the row numbers in Grid. We can achieve your requirement using the queryCellInfo event of Grid. 

Refer the below code example. 

@Html.EJS().Grid("FlatGrid").DataSource((IEnumerable<object>)ViewBag.dataSource).QueryCellInfo("querycellinfo").Columns(col => 
    col.HeaderText("Row Numer").Width("90").Add(); 
    col.Field("EmployeeID").HeaderText("Employee ID").IsPrimaryKey(true).Width("120").Add(); 
    col.Field("CustomerID").HeaderText("Customer Name").Width("150").Add(); 
    col.Field("OrderDate").HeaderText("Order Date").Type("date").Width("110").Add(); 
    col.Field("ShipCountry").HeaderText("Ship Country").Width("150").Add(); 
    var count = 1; 
    function querycellinfo(args) {       
        if (args.column.headerText == "Row Numer") { 
            args.cell.innerHTML = count; 

Refer the below screen shot. 


Please let us know if you need further assistance on this. 

Thavasianand S. 

RO RouX February 22, 2019 01:27 PM UTC


Thanks for your fast reply. This is awesome solution for my case. I applied the code but there are some logics to be handled. I'll try to handle those.
For now I applied those on actionBegin:

if (args.requestType == "paging" || args.requestType == "sorting" || args.requestType == "grouping" || 
     args.requestType == "filtering" || args.requestType == "searching" || args.requestType == "close")
count = 1; 

TS Thavasianand Sankaranarayanan Syncfusion Team February 25, 2019 11:53 AM UTC

Hi Cahid, 
We are happy that the problem has been solved. 
Please get back to us if you need any further assistance.  
Thavasianand S.                         

LI Liau November 6, 2020 01:26 AM UTC

Hi do your mind to share some code on it. So far i will get error when i click to the next page.

RR Rajapandi Ravi Syncfusion Team November 6, 2020 01:14 PM UTC

Hi Liau, 

Thanks for the update 

We have analyzed your query and we could see that you like to display the row number in column. Based on your query we have prepared a sample and achieved your requirement by using rowDataBound event of Grid. Please refer the below code example and sample for more information. 

    @Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.datasource).AllowPaging().Columns(col => 
            col.Field("OrderID").HeaderText("Order ID").Add(); 
            col.Field("EmployeeID").HeaderText("Employee ID").IsPrimaryKey(true).Add(); 
            col.Field("ShipCountry").HeaderText("Ship Country").Add(); 
        }).RowDataBound("rowDataBound").PageSettings(page => { page.PageSize(4); }).Render() 
    function rowDataBound(args) { 
        if (this.pagerModule.pagerObj.currentPage == 1) { 
            args.row.querySelector('td').innerText = +args.row.getAttribute('aria-rowindex') + 1; 
        else { 
            var num = (this.pagerModule.pagerObj.currentPage - 1) * this.pagerModule.pageSettings.pageSize; 
            args.row.querySelector('td').innerText = +args.row.getAttribute('aria-rowindex') + 1 + num; 

Rajapandi R

Live Chat Icon For mobile
Up arrow icon