EJ2 Grid MVC Display Row Number

[RouX]

Hi,

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,

Thanks.

[Thavasianand Sankaranarayanan]

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("Freight").HeaderText("Freight").EditType("numericedit").Width("120").Add(); 

    col.Field("ShipCountry").HeaderText("Ship Country").Width("150").Add(); 

}).AllowPaging().Render() 

 

<script> 

    var count = 1; 

    function querycellinfo(args) {       

  

        if (args.column.headerText == "Row Numer") { 

            args.cell.innerHTML = count; 

            count++; 

        } 

    } 

</script> 

  

Refer the below screen shot. 

 

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

Regards, 

Thavasianand S. 

[RouX]

Hi,

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; 

Regards. 

[Thavasianand Sankaranarayanan]

Hi Cahid, 

 

We are happy that the problem has been solved. 

 

Please get back to us if you need any further assistance.  

                          

Regards, 

Thavasianand S.                         

[Liau]

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

[Rajapandi Ravi]

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. 

<div> 

    @Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.datasource).AllowPaging().Columns(col => 

        { 

            col.HeaderText("RowNumber").Add(); 

            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() 

</div> 

 

<script> 

     

    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; 

        } 

         

    } 

</script> 

Sample: https://www.syncfusion.com/downloads/support/forum/142823/ze/1428231532503948.zip 

API: https://ej2.syncfusion.com/documentation/api/grid/#rowdatabound 

Regards, 

Rajapandi R