Skip to content

Commit 920e879

Browse files
NithyaSivaprakasamNithyaSivaprakasam
committed
896213: Documentation of Cells Topic
1 parent 46eab26 commit 920e879

File tree

24 files changed

+378
-49
lines changed

24 files changed

+378
-49
lines changed

‎ej2-asp-core-mvc/code-snippet/grid/cell/customize/customize.cs renamed to ‎ej2-asp-core-mvc/code-snippet/grid/cell/customize-cell-cs1/customize.cs

File renamed without changes.

‎ej2-asp-core-mvc/code-snippet/grid/cell/customize-cell-cs1/razor

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.dataSource).Columns(col =>
2+
{
3+
col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
4+
col.Field("CustomerID").HeaderText("Customer ID").Width("150").Add();
5+
col.Field("OrderDate").HeaderText("Order Date").Width("130").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
6+
col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
7+
col.Field("ShipCountry").HeaderText("Ship Country").Width("150").Add();
8+
9+
}).EnableHover(false).AllowSelection(false).QueryCellInfo("customizeCell").Render()
10+
11+
@section Scripts {
12+
<style>
13+
.below-30 {
14+
background-color: orangered;
15+
}
16+
.below-80 {
17+
background-color: yellow;
18+
}
19+
.above-80 {
20+
background-color: greenyellow;
21+
}
22+
</style>
23+
<script type="text/javascript">
24+
function customizeCell(args) {
25+
console.log(args.column);
26+
if (args.column.field === 'Freight') {
27+
var freightData = args.data['Freight'];
28+
if (freightData <= 30) {
29+
args.cell.classList.add('below-30');
30+
} else if (freightData > 30 && freightData < 80) {
31+
args.cell.classList.add('below-80');
32+
} else {
33+
args.cell.classList.add('above-80');
34+
}
35+
}
36+
}</script>
37+
}

‎ej2-asp-core-mvc/code-snippet/grid/cell/customize/tagHelper renamed to ‎ej2-asp-core-mvc/code-snippet/grid/cell/customize-cell-cs1/tagHelper

File renamed without changes.

‎ej2-asp-core-mvc/code-snippet/grid/cell/html/html.cs renamed to ‎ej2-asp-core-mvc/code-snippet/grid/cell/customize-cell-cs2/customize.cs

File renamed without changes.

‎ej2-asp-core-mvc/code-snippet/grid/cell/customize-cell-cs2/razor

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.dataSource).Columns(col =>
2+
{
3+
col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
4+
col.Field("CustomerID").HeaderText("Customer ID").Width("150").Add();
5+
col.Field("OrderDate").HeaderText("Order Date").Width("130").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
6+
col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
7+
col.Field("ShipCountry").HeaderText("Ship Country").Width("150").Add();
8+
}).SelectionSettings(select => select.Mode(Syncfusion.EJ2.Grids.SelectionMode.Cell).Type(Syncfusion.EJ2.Grids.SelectionType.Multiple)).Render()
9+
10+
@section Scripts {
11+
<style>
12+
.e-grid td.e-cellselectionbackground {
13+
background: #9ac5ee;
14+
font-style: italic;
15+
}
16+
</style>
17+
}

‎ej2-asp-core-mvc/code-snippet/grid/cell/customize-cell-cs2/tagHelper

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" queryCellInfo="customiseCell">
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="OrderDate" headerText="Order Date" format='yMd' width="100"></e-grid-column>
6+
<e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" width="100"></e-grid-column>
7+
<e-grid-column field="ShipCity" headerText="Ship City" width="100"></e-grid-column>
8+
</e-grid-columns>
9+
</ejs-grid>
10+
11+
<script>
12+
function customiseCell(args) {
13+
if(args.column.field === 'Freight') {
14+
if (args.data['Freight'] < 30){
15+
args.cell.classList.add('below-30');
16+
} else if(args.data['Freight'] < 80 ) {
17+
args.cell.classList.add('below-80');
18+
} else {
19+
args.cell.classList.add('above-80');
20+
}
21+
}
22+
}
23+
</script>

‎ej2-asp-core-mvc/code-snippet/grid/cell/customize-cell-cs3/customize.cs

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/cell/customize-cell-cs3/razor

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
2+
@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.dataSource).Columns(col =>
3+
{
4+
col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).CustomAttributes(new { @class = "custom-css" }).Add();
5+
col.Field("CustomerID").HeaderText("Customer ID").Width("150").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
6+
col.Field("ShipCity").HeaderText("Ship City").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).CustomAttributes(new { @class = "custom-css" }).Add();
7+
col.Field("ShipCountry").HeaderText("Ship Country").Width("150").Add();
8+
}).Render()
9+
10+
@section Scripts
11+
{
12+
<style>
13+
.custom-css{
14+
background: #d7f0f4;
15+
font-style: italic;
16+
color: navy
17+
}
18+
</ style >
19+
}

‎ej2-asp-core-mvc/code-snippet/grid/cell/customize-cell-cs3/tagHelper

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" queryCellInfo="customiseCell">
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="OrderDate" headerText="Order Date" format='yMd' width="100"></e-grid-column>
6+
<e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" width="100"></e-grid-column>
7+
<e-grid-column field="ShipCity" headerText="Ship City" width="100"></e-grid-column>
8+
</e-grid-columns>
9+
</ejs-grid>
10+
11+
<script>
12+
function customiseCell(args) {
13+
if(args.column.field === 'Freight') {
14+
if (args.data['Freight'] < 30){
15+
args.cell.classList.add('below-30');
16+
} else if(args.data['Freight'] < 80 ) {
17+
args.cell.classList.add('below-80');
18+
} else {
19+
args.cell.classList.add('above-80');
20+
}
21+
}
22+
}
23+
</script>

‎ej2-asp-core-mvc/code-snippet/grid/cell/customize-cell-cs4/customize.cs

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/cell/customize-cell-cs4/razor

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.dataSource).Columns(col =>
2+
{
3+
col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
4+
col.Field("CustomerID").HeaderText("Customer ID").Width("250").Add();
5+
col.Field("ShipCity").HeaderText("ShipCity").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
6+
col.Field("ShipCountry").HeaderText("Ship Country").Width("150").Add();
7+
8+
}).DataBound("dataBound").Render()
9+
10+
@section Scripts {
11+
<script type="text/javascript">
12+
function dataBound() {
13+
var grid = document.getElementById("Grid").ej2_instances[0];
14+
var header = grid.getHeaderContent().querySelector('.e-headercell');
15+
header.style.backgroundColor = 'red';
16+
header.style.color = 'white';
17+
var cell = grid.getCellFromIndex(1, 2);
18+
cell.style.background = '#f9920b';
19+
cell.style.color = 'white';
20+
}</script>
21+
}

‎ej2-asp-core-mvc/code-snippet/grid/cell/customize-cell-cs4/tagHelper

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" queryCellInfo="customiseCell">
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="OrderDate" headerText="Order Date" format='yMd' width="100"></e-grid-column>
6+
<e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" width="100"></e-grid-column>
7+
<e-grid-column field="ShipCity" headerText="Ship City" width="100"></e-grid-column>
8+
</e-grid-columns>
9+
</ejs-grid>
10+
11+
<script>
12+
function customiseCell(args) {
13+
if(args.column.field === 'Freight') {
14+
if (args.data['Freight'] < 30){
15+
args.cell.classList.add('below-30');
16+
} else if(args.data['Freight'] < 80 ) {
17+
args.cell.classList.add('below-80');
18+
} else {
19+
args.cell.classList.add('above-80');
20+
}
21+
}
22+
}
23+
</script>

‎ej2-asp-core-mvc/code-snippet/grid/cell/customize/razor

Lines changed: 0 additions & 40 deletions
This file was deleted.

‎ej2-asp-core-mvc/code-snippet/grid/cell/display-html-content/html.cs

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

‎ej2-asp-core-mvc/code-snippet/grid/cell/display-html-content/razor

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<label style="padding: 10px 10px">
2+
Enable or disable HTML Encode
3+
</label>
4+
@Html.EJS().Switch("default").Change("onSwitchChange").Render()
5+
@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.dataSource).Columns(col =>
6+
{
7+
col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
8+
col.Field("CustomerID").HeaderText("<strong> Customer ID </strong>").Width("180").Add();
9+
col.Field("OrderDate").HeaderText("Order Date").Width("130").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
10+
col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
11+
col.Field("ShipCountry").HeaderText("Ship Country").Width("150").Add();
12+
13+
}).Render()
14+
15+
@section Scripts {
16+
<script type="text/javascript">
17+
function onSwitchChange(args) {
18+
var grid = document.getElementById("Grid").ej2_instances[0];
19+
if (args.checked) {
20+
grid.getColumnByField('CustomerID').disableHtmlEncode = false;
21+
} else {
22+
grid.getColumnByField('CustomerID').disableHtmlEncode = true;
23+
}
24+
grid.refreshColumns();
25+
}</script>
26+
}

‎ej2-asp-core-mvc/code-snippet/grid/cell/html/tagHelper renamed to ‎ej2-asp-core-mvc/code-snippet/grid/cell/display-html-content/tagHelper

File renamed without changes.

‎ej2-asp-core-mvc/code-snippet/grid/cell/html/razor

Lines changed: 0 additions & 9 deletions
This file was deleted.

0 commit comments

Comments
 (0)