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

EJ2 Grid MVC Display Row Number

Thread ID:

Created:

Updated:

Platform:

Replies:

142823 Feb 21,2019 03:57 AM UTC Nov 6,2020 01:14 PM UTC ASP.NET MVC - EJ 2 5
loading
Tags: Grid
RouX
Asked On February 21, 2019 03:57 AM UTC

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 [Syncfusion]
Replied On 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("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
Replied On February 22, 2019 01:27 PM UTC

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 [Syncfusion]
Replied On 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.  
                          
Regards, 
Thavasianand S.                         


Liau
Replied On 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.


Rajapandi Ravi [Syncfusion]
Replied On 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. 


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




Regards, 
Rajapandi R

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