Articles in this section
Category / Section

How to show S.No in grid and how to maintain even after sorting

2 mins read

This Knowledge base explains the way of how to show S.No (as like in MS-Excel row header) in grid and how to maintain the same even after sorting?


We have achieved it using template property of columns in grid.


<div id="Grid"></div>



<script type="text/javascript">

        $(function () {


                dataSource: window.gridData,

                allowPaging: true,


                columns: [

                            { headerText: "", template: "<span></span>", isPrimaryKey: true, width:40 },

                            { field: "OrderID", headerText: "Order ID"},

                            { field: "CustomerID", headerText: "Customer ID" },

                            { field: "EmployeeID", headerText: "Employee ID" },

                            { field: "ShipCity", headerText: "Ship City" },

                            { field: "ShipCountry", headerText: "Ship Country" },


                actionBegin: "onBegin",

                templateRefresh: "onTemplateRefresh"










           .Columns(col =>



               col.Field("OrderID").HeaderText("Order ID").Add();

               col.Field("CustomerID").HeaderText("Customer ID").Add();

               col.Field("EmployeeID").HeaderText("Employee ID").Add();

               col.Field("ShipCity").HeaderText("Ship City").Add();

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


       .ClientSideEvents(eve => eve.ActionBegin("onBegin").TemplateRefresh("onTemplateRefresh"))






namespace Sample.Controllers


    public class GridController : Controller


        public ActionResult GridFeatures()


            ViewBag.datasource = new NorthwindDataContext().OrdersViews.ToList();

            return View();






<ej:Grid id="FlatGrid" runat="server" AllowPaging="true" AllowSorting="true">


                <ej:Column HeaderText="" Template="<span></span>" IsPrimaryKey="true" Width="40"></ej:Column>

                <ej:Column Field="OrderID" HeaderText="Order ID" />

                <ej:Column Field="CustomerID" HeaderText="Customer ID" />

                <ej:Column Field="EmployeeID" HeaderText="Employee ID" />

                <ej:Column Field="ShipCity" HeaderText="Ship City" />

                <ej:Column Field="ShipCountry" HeaderText="Ship Country" />


        <ClientSideEvents ActionBegin="onBegin" TemplateRefresh="onTemplateRefresh" />



Here using templateRefresh and actionBegin event in grid we have passed the row number for grid row header. Also when sorting the grid it will maintain the S.No value as it is like in the initial rendering. 



        var sno = 0;

        function onBegin(args) {

            if (args.requestType == "paging" || args.requestType == "sorting") {

                var curPage = (this._currentPage() - 1) * this.model.pageSettings.pageSize;

                sno = curPage == 0 ? 0 : curPage;



        function onTemplateRefresh(args) {

            sno = sno + 1;






Figure 1: shows that grid contains first column as row header identity column



Figure 2: shows that the row header maintains its identity after paging


Figure 3: shows the grid row header maintain even after sorting the grid

Did you find this information helpful?
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment