Skip to content

Commit 960ee8c

Browse files
documentation(896235):Column rendering topic
1 parent 96141a1 commit 960ee8c

File tree

41 files changed

+718
-100
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+718
-100
lines changed
Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
public IActionResult Index()
2+
{
3+
var Order = OrderDetails.GetAllRecords();
4+
ViewBag.dataSource = Order;
5+
return View();
6+
}

ej2-asp-core-mvc/code-snippet/grid/columns/primary/razor renamed to ej2-asp-core-mvc/code-snippet/grid/columns/auto-primary/razor

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,6 @@
22

33
<script>
44
function dataBound() {
5-
var grid = document.getElementById('Auto').ej2_instances[0];
6-
var column = grid.columns[0];
7-
column.isPrimaryKey = 'true';
5+
document.getElementById('Auto').ej2_instances[0].columns[0].isPrimaryKey = 'true';
86
}
97
</script>
Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<ejs-grid id="Auto" dataSource="@ViewBag.dataSource" dataBound="dataBound">
2+
<e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true">
3+
</e-grid-editSettings>
4+
</ejs-grid>
5+
6+
<script>
7+
function dataBound() {
8+
document.getElementById('Auto').ej2_instances[0].columns[0].isPrimaryKey = 'true';
9+
}
10+
</script>
Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
@Html.EJS().Grid("Auto").DataSource((IEnumerable<object>)ViewBag.dataSource).Render()
1+
@Html.EJS().Grid("Auto").AllowPaging(true).DataSource((IEnumerable<object>)ViewBag.DataSource).Render()
Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,2 @@
1-
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource">
2-
1+
<ejs-grid id="Grid" allowPaging=true dataSource="@ViewBag.DataSource">
32
</ejs-grid>
Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,19 @@
1-
@Html.EJS().Grid("Auto").DataSource((IEnumerable<object>)ViewBag.dataSource).DataBound("dataBound").Render()
2-
1+
@Html.EJS().Grid("Auto").DataSource((IEnumerable<object>)ViewBag.DataSource).DataBound("dataBound").Render()
32
<script>
43
function dataBound() {
5-
for (var i = 0; i < this.columns.length; i++) {
6-
this.columns[0].width = 120;
7-
if (this.columns[i].field === "OrderDate") {
8-
this.columns[i].type = "date";
4+
const grid = document.getElementById('Auto').ej2_instances[0];
5+
for (const cols of grid.columns) {
6+
if (cols.field === 'OrderID') {
7+
cols.width = 120;
98
}
10-
if (this.columns[i].type === "date") {
11-
this.columns[i].format = { type: "date", format: "dd/MM/yyyy" };
9+
if (cols.field === 'OrderDate') {
10+
cols.type = 'date';
11+
cols.format = 'yMd';
12+
}
13+
if (cols.field === 'Freight') {
14+
cols.format = 'P2';
1215
}
13-
this.columns[3].format = "P2";
1416
}
15-
this.refreshColumns();
17+
grid.refreshColumns();
1618
}
1719
</script>

ej2-asp-core-mvc/code-snippet/grid/columns/autocolumnformat/tagHelper

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,19 @@
44

55
<script>
66
function dataBound() {
7-
for (var i = 0; i < this.columns.length; i++) {
8-
this.columns[0].width = 120;
9-
if (this.columns[i].field === "OrderDate") {
10-
this.columns[i].type = "date";
7+
const grid = document.getElementById('Auto').ej2_instances[0];
8+
for (const cols of grid.columns) {
9+
if (cols.field === 'OrderID') {
10+
cols.width = 120;
1111
}
12-
if (this.columns[i].type === "date") {
13-
this.columns[i].format = { type: "date", format: "dd/MM/yyyy" };
12+
if (cols.field === 'OrderDate') {
13+
cols.type = 'date';
14+
cols.format = 'yMd';
15+
}
16+
if (cols.field === 'Freight') {
17+
cols.format = 'P2';
1418
}
15-
this.columns[3].format = "P2";
1619
}
17-
this.refreshColumns();
20+
grid.refreshColumns();
1821
}
1922
</script>
Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
public IActionResult Index()
2+
{
3+
var ComplexData = ComplexData.GetAllRecords();
4+
ViewBag.DataSource = ComplexData;
5+
return View();
6+
}
Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
@{
2+
var valueAccess = "valueAccessFn";
3+
}
4+
5+
@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).Height(350).Columns(col =>
6+
{
7+
col.Field("EmployeeID").HeaderText("Employee ID").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width("120").Add();
8+
col.Field("Name").HeaderText("Full Name").ValueAccessor(valueAccess).Width("150").Add();
9+
col.Field("Title").HeaderText("Title").Width("150").Add();
10+
}).Render()
11+
12+
<script>
13+
function valueAccessFn(field, data) {
14+
return data[field].map((s) => { return s.LastName || s.FirstName; }).join(' ');
15+
}
16+
</script>
Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
@{
2+
var valueAccess = "valueAccessFn";
3+
}
4+
5+
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" height="350" >
6+
<e-grid-columns>
7+
<e-grid-column field="EmployeeID" headerText="Employee ID" width="150" ></e-grid-column>
8+
<e-grid-column field="Name" headerText="Full Name" width="150"></e-grid-column>
9+
<e-grid-column field="Title" headerText="Title" width="150"></e-grid-column>
10+
</e-grid-columns>
11+
</ejs-grid>
12+
13+
<script>
14+
function valueAccessFn(field, data) {
15+
return data[field].map((s) => { return s.LastName || s.FirstName; }).join(' ');
16+
}
17+
</script>
Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
public IActionResult Index()
2+
{
3+
var Order = FoodDetails.GetAllRecords();
4+
ViewBag.DataSource = Order;
5+
return View();
6+
}
Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
@{
2+
var totalCalories = "totalCaloriesFn";
3+
}
4+
5+
@Html.EJS().Grid("ValueAccessor").DataSource((IEnumerable<object>)ViewBag.DataSource).Height(350).Columns(col =>
6+
{
7+
col.Field("FoodName").HeaderText("Food Name").Width("150").Add();
8+
col.Field("Protein").HeaderText("Protein").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width("120").Add();
9+
col.Field("Fat").HeaderText("Fat").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width("80").Add();
10+
col.Field("Carbohydrate").HeaderText("Carbohydrate").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width("120").Add();
11+
col.HeaderText("Calories Intake").ValueAccessor(totalCalories).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width("150").Add();
12+
13+
}).Render()
14+
15+
<script>
16+
function totalCaloriesFn(field, data) {
17+
return data.Protein * 4 + data.Fat * 9 + data.Carbohydrate * 4;
18+
}
19+
</script>
Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
@{
2+
var totalCalories = "totalCaloriesFn";
3+
}
4+
5+
<ejs-grid id="ValueAccessor" dataSource="@ViewBag.DataSource" height="280">
6+
<e-grid-columns>
7+
<e-grid-column field='FoodName' headerText='Food Name' width=150></e-grid-column>
8+
<e-grid-column field='Protein' headerText='Protein' textAlign='Right' width=120></e-grid-column>
9+
<e-grid-column field='Fat' headerText='Fat' textAlign='Right' width=80></e-grid-column>
10+
<e-grid-column field='Carbohydrate' headerText='Carbohydrate' textAlign='Right' width=120></e-grid-column>
11+
<e-grid-column headerText='Calories Intake' textAlign='Right' valueAccessor='totalCalories' width=150></e-grid-column>
12+
</e-grid-columns>
13+
</ejs-grid>
14+
15+
<script>
16+
function totalCaloriesFn(field, data) {
17+
return data.Protein * 4 + data.Fat * 9 + data.Carbohydrate * 4;
18+
}
19+
</script>
Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
@Html.EJS().Grid("Grid").DataSource(dataManger =>
2+
{
3+
dataManger.Url("https://services.odata.org/V4/Northwind/Northwind.svc/Orders/").CrossDomain(true).Adaptor("ODataV4Adaptor");
4+
5+
}).Query("new ej.data.Query().expand('Employee')").Columns(col =>
6+
{
7+
col.Field("OrderID").HeaderText("Order ID").Width("100").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
8+
col.Field("CustomerID").HeaderText("Customer Name").Width("120").Add();
9+
col.Field("ShipCity").HeaderText("Ship City").Width("130").Add();
10+
col.Field("Employee.City").HeaderText("City").Width("130").Add();
11+
12+
}).AllowPaging().Render()
Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<ejs-grid id="Grid" allowPaging='true' query="new ej.data.Query().expand('Employee')" >
2+
<e-data-manager url="https://services.odata.org/V4/Northwind/Northwind.svc/Orders/" crossdomain="true" adaptor="ODataV4Adaptor"></e-data-manager>
3+
<e-grid-columns>
4+
<e-grid-column field="OrderID" headerText="Order ID" width="100" ></e-grid-column>
5+
<e-grid-column field="CustomerID" headerText="Customer ID" width="120"></e-grid-column>
6+
<e-grid-column field="ShipCity" headerText="Ship City" width="130"></e-grid-column>
7+
<e-grid-column field="Employee.City" headerText="City" width="130"></e-grid-column>
8+
</e-grid-columns>
9+
</ejs-grid>
10+
Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.dataSource).Height(350).Columns(col =>
2+
{
3+
col.HeaderText("S.No").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Center).Width("90").Add();
4+
col.Field("OrderID").HeaderText("Order ID").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width("120").Add();
5+
col.Field("CustomerID").HeaderText("Customer Name").Width("150").Add();
6+
col.Field("Freight").HeaderText("Freight").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width("120").Add();
7+
col.Field("ShipCity").HeaderText("Ship City").Width("150").Add();
8+
}).AllowPaging().RowDataBound("rowDataBound").Render()
9+
</div>
10+
<script>
11+
function rowDataBound(args) {
12+
let grid = document.getElementById('Grid').ej2_instances[0];
13+
if (args.row) {
14+
var rowIndex = parseInt(args.row.getAttribute('aria-rowIndex'));
15+
var currentPageNumber = grid.pageSettings.currentPage;
16+
var pageSize = grid.pageSettings.pageSize;
17+
var startIndex = (currentPageNumber - 1) * pageSize;
18+
args.row.querySelector('.e-rowcell').innerHTML = (
19+
startIndex + rowIndex
20+
).toString();
21+
}
22+
}
23+
</script>
Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
public IActionResult Index()
2+
{
3+
var Order = OrdersDetails.GetAllRecords();
4+
ViewBag.dataSource = Order;
5+
return View();
6+
}
Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<ejs-grid id="Grid" dataSource="@ViewBag.dataSource" height="350" rowDataBound='rowDataBound' allowPaging="true">
2+
<e-grid-columns>
3+
<e-grid-column headerText='S.No' width=90 textAlign='Center'></e-grid-column>
4+
<e-grid-column field="OrderID" headerText="Order ID" width="100" textAlign="Right"></e-grid-column>
5+
<e-grid-column field="CustomerID" headerText="Customer Name" width="120"></e-grid-column>
6+
<e-grid-column field="Freight" headerText="Freight" textAlign="Right" width="120" ></e-grid-column>
7+
<e-grid-column field="ShipCity" headerText="Ship City" width="150"></e-grid-column>
8+
</e-grid-columns>
9+
</ejs-grid>
10+
<script>
11+
function rowDataBound (args) {
12+
let grid = document.getElementById('Grid').ej2_instances[0];
13+
if (args.row) {
14+
var rowIndex = parseInt(args.row.getAttribute('aria-rowIndex'));
15+
var currentPageNumber = grid.pageSettings.currentPage;
16+
var pageSize = grid.pageSettings.pageSize;
17+
var startIndex = (currentPageNumber - 1) * pageSize;
18+
args.row.querySelector('.e-rowcell').innerHTML = (
19+
startIndex + rowIndex
20+
).toString();
21+
}
22+
}
23+
</script>
Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
@{
2+
var currencyFormatter = "currencyFormatterFn";
3+
var concatenateFields = "concatenateFieldsFn";
4+
}
5+
6+
@Html.EJS().Grid("ValueAccessor").DataSource((IEnumerable<object>)ViewBag.DataSource).Height(350).Columns(col =>
7+
{
8+
col.Field("OrderID").HeaderText("Order ID").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width("120").Add();
9+
col.Field("CustomerID").HeaderText("Customer Name").Width("150").Add();
10+
col.Field("Freight").HeaderText("Freight").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width("120").ValueAccessor(currencyFormatter).Add();
11+
col.Field("ShipCity").HeaderText("Ship City").ValueAccessor(concatenateFields).Width("150").Add();
12+
}).Render()
13+
14+
<script>
15+
function currencyFormatterFn(field, data) {
16+
return '€' + data['Freight']
17+
}
18+
function concatenateFieldsFn(field, data) {
19+
return data['ShipCity'] + '-' + data['ShipRegion'];
20+
}
21+
</script>
Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
@{
2+
var currencyFormatter = "currencyFormatterFn";
3+
var concatenateFields = "concatenateFieldsFn";
4+
}
5+
6+
<ejs-grid id="ValueAccessor" dataSource="@ViewBag.DataSource" height="350">
7+
<e-grid-columns>
8+
<e-grid-column field="OrderID" headerText="Order ID" width="100" textAlign="Right"></e-grid-column>
9+
<e-grid-column field="CustomerID" headerText="Customer Name" width="120"></e-grid-column>
10+
<e-grid-column field="Freight" headerText="Freight" textAlign="Right" width="120" valueAccessor="currencyFormatter" ></e-grid-column>
11+
<e-grid-column field="ShipCity" valueAccessor="concatenateFields" headerText="Ship City" width="150"></e-grid-column>
12+
</e-grid-columns>
13+
</ejs-grid>
14+
15+
<script>
16+
function currencyFormatterFn(field, data) {
17+
return '€' + data['Freight']
18+
}
19+
20+
function concatenateFieldsFn(field, data) {
21+
return data['ShipCity'] + '-' + data['ShipRegion']; // Assuming concatenation of ShipCity and ShipCountry
22+
}
23+
</script>
Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
public IActionResult Index()
2+
{
3+
var Order = OrdersDetails.GetAllRecords();
4+
ViewBag.DataSource = Order;
5+
return View();
6+
}

ej2-asp-core-mvc/code-snippet/grid/columns/valueaccessor/valueaccessor.cs renamed to ej2-asp-core-mvc/code-snippet/grid/columns/column-rendering/column-rendering.cs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,4 @@ public IActionResult Index()
33
var Order = OrderDetails.GetAllRecords();
44
ViewBag.DataSource = Order;
55
return View();
6-
}
6+
}
Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).Columns(col =>
2+
{
3+
col.Field("OrderID").HeaderText("Order ID").Width("100").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
4+
col.Field("CustomerID").HeaderText("Customer ID").Width("120").Add();
5+
col.Field("Freight").HeaderText("Freight").Width("80").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
6+
col.Field("OrderDate").HeaderText("Order Date").Width("80").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
7+
col.Field("ShipCity").HeaderText("Ship Country").Width("120").Add();
8+
9+
}).Render()
Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" height='315'>
2+
<e-grid-columns>
3+
<e-grid-column field='OrderID' headerText='Order ID' textAlign='Right' width="100"></e-grid-column>
4+
<e-grid-column field='CustomerID' headerText='Customer ID' width="120"></e-grid-column>
5+
<e-grid-column field='Freight' headerText='Freight' format='C2' textAlign='Right' width="80"></e-grid-column>
6+
<e-grid-column field='OrderDate' headerText='Order Date' format='yMd' textAlign='Right' width="80"></e-grid-column>
7+
</e-grid-columns>
8+
</ejs-grid>
Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
1-
@Html.EJS().Grid("Complex").DataSource((IEnumerable<object>)ViewBag.dataSource).Columns(col =>
1+
@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.data).Height(350).Columns(col =>
22
{
3-
col.Field("EmployeeID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
4-
col.Field("Name.FirstName").HeaderText("FirstName").Width("140").Add();
5-
col.Field("Name.LastName").HeaderText("LastName").Width("130").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
6-
col.Field("City").Width("120").Add();
7-
col.Field("Country").Width("140").Add();
8-
9-
}).AllowPaging().Render()
3+
col.Field("EmployeeID").HeaderText("Employee ID").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width("120").Add();
4+
col.Field("Name.FirstName").HeaderText("First Name").Width("120").Add();
5+
col.Field("Name.LastName").HeaderText("Last Name").Width("120").Add();
6+
col.Field("Title").HeaderText("Title").Width("150").Add();
7+
}).Render()
Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<ejs-grid id="Grid" dataSource="@ViewBag.data" height="315" >
22
<e-grid-columns>
3-
<e-grid-column field="EmployeeID" headerText="Employee ID" width="100" textAlign="Right"></e-grid-column>
3+
<e-grid-column field="EmployeeID" headerText="Employee ID" width="120" textAlign="Right"></e-grid-column>
44
<e-grid-column field="Name.FirstName" headerText="Last Name" width="120"></e-grid-column>
5-
<e-grid-column field="Name.LastName" headerText="Last Name" width="100"></e-grid-column>
6-
<e-grid-column field="Title" headerText="Title" width="100"></e-grid-column>
5+
<e-grid-column field="Name.LastName" headerText="Last Name" width="120"></e-grid-column>
6+
<e-grid-column field="Title" headerText="Title" width="150"></e-grid-column>
77
</e-grid-columns>
88
</ejs-grid>

0 commit comments

Comments
 (0)