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

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

HTML

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

)

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

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

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

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

Did you find this information helpful?

Yes

Comments (0)

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

Access denied