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.
Unfortunately, activation email could not send to your email. Please try again.

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

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.

HTML

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

 

JS

<script type="text/javascript">

        $(function () {

            $("#Grid").ejGrid({

                dataSource: window.gridData,

                allowPaging: true,

                allowSorting: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"

            });

        });

    </script>

 

RAZOR

@(Html.EJ().Grid<object("FlatGrid")

           .Datasource((IEnumerable<Object>)ViewBag.datasource)

           .AllowPaging()

           .AllowSorting()

           .Columns(col =>

           {

                col.HeaderText("").Template("<span></span>").IsPrimaryKey(true).Width(40).Add();

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

    )

 

 

C#

 

namespace Sample.Controllers

{

    public class GridController : Controller

    {

        public ActionResult GridFeatures()

        {

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

            return View();

        }

    }

}

 

ASPX

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

     <Columns>

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

            </Columns>

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

       </ej:Grid>

 

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. 

 

<script>

        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;

            $(args.cell).find("span").text(sno);

        }

   </script>

 

C:\Users\Manisankar.durai\Desktop\sshot-1.png

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

 

C:\Users\Manisankar.durai\Desktop\sshot-2.png

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

C:\Users\Manisankar.durai\Desktop\sshot-3.png

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

Article ID: Published Date: Last Revised Date: Platform: Control:
7753 06/07/2017 06/07/2017 JavaScript ejGrid
Tags:
Did you find this information helpful?
Add Comment
You must log in to leave a comment

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.