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.
Essential JS2

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

Syncfusion Feedback

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

Platform: jQuery |
Control: ejGrid

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

You must log in to leave a comment

Please sign in to access our KB

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

Up arrow icon

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