Category / Section
How to display the row index using jsRender?
1 min read
We can display the row index as a grid column using the column template feature of the Grid. HTML templates can be specified in the template property of the particular column as a string (HTML element). You can use JsRender syntax in the template. For more information about JsRender syntax, please refer this link.
JS:
$("#Grid").ejGrid({
// the datasource "window.employeeView" is referred from jsondata.min.js
dataSource: ej.DataManager(window.gridData).executeLocal(ej.Query().take(200)),
allowPaging: true,
columns: [
{ headerText: "RowIndex", template: '{{:~index + 1}}', textAlign: "center", width: 110 },
{ field: "EmployeeID", headerText: "Employee ID", textAlign: ej.TextAlign.Right, width: 90 },
{ field: "CustomerID", headerText: "CustomerID", width: 90 },
{ field: "ShipCity", headerText: "ShipCity", width: 90 },
]
});ss
MVC:
@(Html.EJ().Grid<object>("Grid")
.Datasource((IEnumerable<object>)ViewBag.datasource)
.AllowPaging()
.Columns(col =>
{
col.HeaderText("RowIndex").TextAlign(TextAlign.Center).Template("{{:~index + 1}}").Width(110).Add();
col.Field("EmployeeID").HeaderText("Employee ID").TextAlign(TextAlign.Right)..Width(90).Add();
col.Field("CustomerID").HeaderText("Customer ID").Width(90).Add();
col.Field("ShipCity").HeaderText("Ship City").Width(90).Add();
})
)
Controller:
namespace Sample.Controllers
{
public class GridController : Controller
{
public ActionResult GridFeatures()
{
var DataSource = new NorthwindDataContext().OrdersViews.ToList();
ViewBag.datasource = DataSource;
return View();
}
}
}
We have displayed the row index using JsRender syntax in Template property of the particular column.
ASPX:
<ej:Grid ID="Grid1" AllowPaging="True" runat="server">
<Columns>
<ej:Column HeaderText="RowIndex" Template="{{:~index + 1}}" TextAlign=" Center" Width="110" />
<ej:Column Field="EmployeeID" HeaderText="Employee ID" TextAlign=" Right" Width="90" />
<ej:Column Field="CustomerID" HeaderText="Customer ID" Width="90" />
<ej:Column Field="ShipCity" HeaderText="Ship City" Width="90" />
</Columns>
</ej:Grid>
namespace Sample
{
public partial class _Default : Page
{
protected void Page_Load(object sender, EventArgs e)
{
this.Grid.DataSource = new MyDataDataContext().Orders.ToList();
this.Grid.DataBind();
}
}
}
The result will be as follows.
Figure 1: Display row index using JsRender.
