File tree Expand file tree Collapse file tree 38 files changed +718
-407
lines changed
code-snippet/grid/columns
column-render-valueaccessor Expand file tree Collapse file tree 38 files changed +718
-407
lines changed Original file line number Diff line number Diff line change
1
+ public IActionResult Index ( )
2
+ {
3
+ var Order = OrderDetails . GetAllRecords ( ) ;
4
+ ViewBag . dataSource = Order ;
5
+ return View ( ) ;
6
+ }
Original file line number Diff line number Diff line change 2
2
3
3
<script>
4
4
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';
8
6
}
9
7
</script>
Original file line number Diff line number Diff line change
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>
Original file line number Diff line number Diff line change 1
- @Html.EJS().Grid("Auto").DataSource((IEnumerable<object>)ViewBag.dataSource ).Render()
1
+ @Html.EJS().Grid("Auto").AllowPaging(true). DataSource((IEnumerable<object>)ViewBag.DataSource ).Render()
Original file line number Diff line number Diff line change 1
- <ejs-grid id="Grid" dataSource="@ViewBag.DataSource">
2
-
1
+ <ejs-grid id="Grid" allowPaging=true dataSource="@ViewBag.DataSource">
3
2
</ejs-grid>
Original file line number Diff line number Diff line change 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()
3
2
<script>
4
3
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 ;
9
8
}
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';
12
15
}
13
- this.columns[3].format = "P2";
14
16
}
15
- this .refreshColumns();
17
+ grid .refreshColumns();
16
18
}
17
19
</script>
Original file line number Diff line number Diff line change 4
4
5
5
<script>
6
6
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 ;
11
11
}
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';
14
18
}
15
- this.columns[3].format = "P2";
16
19
}
17
- this .refreshColumns();
20
+ grid .refreshColumns();
18
21
}
19
22
</script>
Original file line number Diff line number Diff line change
1
+ public IActionResult Index ( )
2
+ {
3
+ var ComplexData = ComplexData . GetAllRecords ( ) ;
4
+ ViewBag . DataSource = ComplexData ;
5
+ return View ( ) ;
6
+ }
Original file line number Diff line number Diff line change
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>
Original file line number Diff line number Diff line change
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>
Original file line number Diff line number Diff line change
1
+ public IActionResult Index ( )
2
+ {
3
+ var Order = FoodDetails . GetAllRecords ( ) ;
4
+ ViewBag . DataSource = Order ;
5
+ return View ( ) ;
6
+ }
Original file line number Diff line number Diff line change
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>
Original file line number Diff line number Diff line change
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>
Original file line number Diff line number Diff line change
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()
File renamed without changes.
Original file line number Diff line number Diff line change
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
+
Original file line number Diff line number Diff line change
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>
Original file line number Diff line number Diff line change
1
+ public IActionResult Index ( )
2
+ {
3
+ var Order = OrdersDetails . GetAllRecords ( ) ;
4
+ ViewBag . dataSource = Order ;
5
+ return View ( ) ;
6
+ }
Original file line number Diff line number Diff line change
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>
Original file line number Diff line number Diff line change
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>
Original file line number Diff line number Diff line change
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>
Original file line number Diff line number Diff line change
1
+ public IActionResult Index ( )
2
+ {
3
+ var Order = OrdersDetails . GetAllRecords ( ) ;
4
+ ViewBag . DataSource = Order ;
5
+ return View ( ) ;
6
+ }
Original file line number Diff line number Diff line change @@ -3,4 +3,4 @@ public IActionResult Index()
3
3
var Order = OrderDetails . GetAllRecords ( ) ;
4
4
ViewBag . DataSource = Order ;
5
5
return View ( ) ;
6
- }
6
+ }
Original file line number Diff line number Diff line change
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()
Original file line number Diff line number Diff line change
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>
Original file line number Diff line number Diff line change 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 =>
2
2
{
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()
Original file line number Diff line number Diff line change 1
1
<ejs-grid id="Grid" dataSource="@ViewBag.data" height="315" >
2
2
<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>
4
4
<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>
7
7
</e-grid-columns>
8
8
</ejs-grid>
You can’t perform that action at this time.
0 commit comments