How to show S.No in grid and how to maintain even after sorting in JavaScript ejGrid?
This Knowledge base explains the way of how to show S.No (as like in MS-Excel row header) in JavaScript ejGrid 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> |
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
Conclusion
I hope you enjoyed learning about how to show S.No in grid and how to maintain even after sorting in JavaScript ejGrid.
You can refer to our JavaScript ejTGrid feature tour page to know about its other groundbreaking feature representations and documentation, to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
