Skip to content

Commit 3100482

Browse files
NithyaSivaprakasamNithyaSivaprakasam
committed
896213: Documentation of Cells Topic
Signed-off-by: Nithya <Nithya.sivaprakasam@syncfusion.com>
1 parent 0383a21 commit 3100482

File tree

27 files changed

+507
-654
lines changed

27 files changed

+507
-654
lines changed

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

Lines changed: 20 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,22 @@
1-
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" gridLines="Default" height="315" allowTextWrap="true">
2-
<e-grid-textwrapsettings wrapMode="Content"></e-grid-textwrapsettings>
1+
<div style="display: flex">
2+
<label style="padding: 10px 10px 26px 0"> Change the wrapmode of auto wrap feature: </label>
3+
<span style="height:fit-content">
4+
<ejs-dropdownlist id="dropdown" dataSource="@ViewBag.dropdownData" change="Change"></ejs-dropdownlist>
5+
</span>
6+
</div>
7+
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowTextWrap=true>
8+
<e-grid-textwrapsettings wrapMode="Content"></e-grid-textwrapsettings>
39
<e-grid-columns>
4-
<e-grid-column field="RoolNo" headerText="Rool No" textAlign="Right" width="120"></e-grid-column>
5-
<e-grid-column field="Name" headerText="Name of the inventor" width="100"></e-grid-column>
6-
<e-grid-column field="patentfamilies" headerText="No of patentfamilies" width="130"></e-grid-column>
7-
<e-grid-column field="Country" headerText="Country" width="130"></e-grid-column>
8-
<e-grid-column field="mainfields" headerText="Main fields of Invention" width="150"></e-grid-column>
10+
<e-grid-column field="Inventor" headerText="Inventor Name" textAlign="Right" width="120"></e-grid-column>
11+
<e-grid-column field="NumberOfPatentFamilies" headerText="Number of Patent families" textAlign="Right" width="120"></e-grid-column>
12+
<e-grid-column field="Country" headerText="Country" width="150"></e-grid-column>
13+
<e-grid-column field="Active" headerText="Active" textAlign="Right" width="150"></e-grid-column>
914
</e-grid-columns>
10-
</ejs-grid>
15+
</ejs-grid>
16+
17+
<script type="text/javascript">
18+
function Change(args) {
19+
var grid = document.getElementById("Grid").ej2_instances[0];
20+
grid.textWrapSettings.wrapMode = args.value;
21+
}
22+
</script>

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
public IActionResult Index()
22
{
3-
var Order = InventoryDetails.GetAllRecords();
3+
var Order = InventorDetails.GetAllRecords();
44
ViewBag.DataSource = Order;
5+
ViewBag.dropdownData = new string[] { "Clip", "Ellipsis", "EllipsisWithTooltip" };
56
return View();
6-
}
7+
}

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

Lines changed: 23 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,25 @@
1+
<div style="display: flex">
2+
<label style="padding: 10px 10px 26px 0">Change the clip mode: </label>
3+
<span style="height:fit-content">
4+
<ejs-dropdownlist id="dropdown" dataSource="@ViewBag.dropdownData" change="Change"></ejs-dropdownlist>
5+
</span>
6+
</div>
7+
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource">
8+
<e-grid-columns>
9+
<e-grid-column field="NumberOfPatentFamilies" headerText="Number of Patent families" textAlign="Right" width="120"></e-grid-column>
110

11+
<e-grid-column field="Inventor" headerText="Inventor Name" textAlign="Right" width="120"></e-grid-column>
12+
<e-grid-column field="NumberOfINPADOCPatents" headerText="NumberOfINPADOCPatents" width="150"></e-grid-column>
13+
<e-grid-column field="MainFieldsOfInvention" headerText="Main Fields Of Invention" width="150"></e-grid-column>
14+
<e-grid-column field="Active" headerText="Active" textAlign="Right" width="150"></e-grid-column>
15+
</e-grid-columns>
16+
</ejs-grid>
217

3-
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" height="315" allowPaging="true">
4-
<e-grid-columns>
5-
<e-grid-column field="RoolNo" headerText="Rool No" textAlign="Right" width="100"></e-grid-column>
6-
<e-grid-column field="Name" headerText="Name of the inventor" clipMode="Clip" width="80"></e-grid-column>
7-
<e-grid-column field="patentfamilies" headerText="No of patentfamilies" clipMode="Ellipsis" width="100"></e-grid-column>
8-
<e-grid-column field="Country" headerText="Country" width="100"></e-grid-column>
9-
<e-grid-column field="mainfields" headerText="Main fields of Invention" clipMode="EllipsisWithTooltip" width="100"></e-grid-column>
10-
</e-grid-columns>
11-
</ejs-grid>
18+
19+
<script type="text/javascript">
20+
function Change(args) {
21+
var grid = document.getElementById("Grid").ej2_instances[0];
22+
grid.getColumnByField('MainFieldsOfInvention').clipMode = args.value;
23+
grid.refresh();
24+
}
25+
</script>

‎ej2-asp-core-mvc/code-snippet/grid/cell/custom-tooltip/tagHelper

Lines changed: 22 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,27 @@
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>
1+
<ejs-tooltip id="Tooltip" target=".e-rowcell" beforeRender="beforeRender">
2+
<!-- Target element -->
3+
<e-content-template>
4+
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource">
5+
<e-grid-columns>
6+
<e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" width="100"></e-grid-column>
7+
<e-grid-column field="CustomerID" headerText="Customer Name" width="120"></e-grid-column>
8+
<e-grid-column field="CustomerID" headerText="Customer ID" width="120"></e-grid-column>
9+
<e-grid-column field="OrderDate" headerText="Order Date" width="100" textAlign="Right" format="yMd"></e-grid-column>
10+
<e-grid-column field="Freight" headerText="Freight" width="100"></e-grid-column>
11+
<e-grid-column field="ShipCountry" headerText="Ship Country" textAlign="Right"
12+
width="100"></e-grid-column>
13+
</e-grid-columns>
14+
</ejs-grid>
15+
</e-content-template>
16+
</ejs-tooltip>
17+
1018

1119
<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+
function beforeRender(args) {
21+
var tooltip = document.getElementById("Tooltip").ej2_instances[0];
22+
if (args.target.classList.contains('e-rowcell')) {
23+
// event triggered before render the tooltip on target element.
24+
tooltip.content = 'The value is "' + args.target.innerText + '" ';
2025
}
2126
}
22-
}
2327
</script>

‎ej2-asp-core-mvc/code-snippet/grid/cell/customAttribute/customStyle.cs

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

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

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

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

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

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

Lines changed: 32 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,38 @@
1-
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" queryCellInfo="customiseCell">
1+
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" queryCellInfo="customizeCell">
22
<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>
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>
65
<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>
6+
<e-grid-column field="ShipCountry" headerText="Ship Country" width="100"></e-grid-column>
87
</e-grid-columns>
98
</ejs-grid>
109

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-
}
10+
@section Scripts {
11+
<style>
12+
.below-30 {
13+
background-color: orangered;
14+
}
15+
16+
.below-80 {
17+
background-color: yellow;
2118
}
22-
}
23-
</script>
19+
20+
.above-80 {
21+
background-color: greenyellow;
22+
}
23+
</style>
24+
<script type="text/javascript">
25+
function customizeCell(args) {
26+
console.log(args.column);
27+
if (args.column.field === 'Freight') {
28+
var freightData = args.data['Freight'];
29+
if (freightData <= 30) {
30+
args.cell.classList.add('below-30');
31+
} else if (freightData > 30 && freightData < 80) {
32+
args.cell.classList.add('below-80');
33+
} else {
34+
args.cell.classList.add('above-80');
35+
}
36+
}
37+
}</script>
38+
}

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

Lines changed: 13 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,19 @@
1-
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" queryCellInfo="customiseCell">
1+
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource">
2+
<e-grid-selectionsettings mode=Cell type="Multiple"></e-grid-selectionsettings>
23
<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>
4+
<e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" width="100"></e-grid-column>
5+
<e-grid-column field="CustomerID" headerText="Customer ID" width="120"></e-grid-column>
6+
<e-grid-column field="OrderDate" headerText="Order Date" format='yMd' width="100"></e-grid-column>
67
<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-column field="ShipCountry" headerText="Ship Country" width="100"></e-grid-column>
89
</e-grid-columns>
910
</ejs-grid>
1011

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-
}
12+
@section Scripts {
13+
<style>
14+
.e-grid td.e-cellselectionbackground {
15+
background: #9ac5ee;
16+
font-style: italic;
2117
}
22-
}
23-
</script>
18+
</style>
19+
}

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

Lines changed: 15 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,20 @@
1-
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" queryCellInfo="customiseCell">
1+
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource">
22
<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>
3+
<e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" customAttributes=@(new {
4+
@class="custom-css" } ) 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="100" CustomAttributes=@(new{@class="custom-css"
7+
})></e-grid-column>
8+
<e-grid-column field="ShipCountry" headerText="Ship Country" textAlign="Right" width="100"></e-grid-column>
89
</e-grid-columns>
910
</ejs-grid>
1011

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-
}
12+
@section Scripts {
13+
<style>
14+
.custom-css {
15+
background: #d7f0f4;
16+
font-style: italic;
17+
color: navy
2118
}
22-
}
23-
</script>
19+
</style>
20+
}

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

Lines changed: 16 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,21 @@
1-
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" queryCellInfo="customiseCell">
1+
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" dataBound="dataBound">
22
<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>
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>
75
<e-grid-column field="ShipCity" headerText="Ship City" width="100"></e-grid-column>
6+
<e-grid-column field="ShipCountry" headerText="Ship Country" textAlign="Right" width="100"></e-grid-column>
87
</e-grid-columns>
98
</ejs-grid>
109

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>
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/display-html-content/tagHelper

Lines changed: 22 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,22 @@
1-
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" height="135" allowPaging="true">
2-
<e-grid-columns>
3-
<e-grid-column field="OrderID" headerText="<span> Order ID </span>" disableHtmlEncode="true" textAlign="Right" width="140"></e-grid-column>
4-
<e-grid-column field="CustomerID" headerText="<span> Customer ID </span>" disableHtmlEncode="false" width="120"></e-grid-column>
5-
<e-grid-column field="OrderDate" headerText="Order Date" format='yMd' textAlign="Right" width="100"></e-grid-column>
6-
<e-grid-column field="ShipCity" headerText="Ship City" width="100"></e-grid-column>
7-
</e-grid-columns>
8-
</ejs-grid>
1+
<label style="padding: 10px 10px">Enable or disable HTML Encode</label>
2+
<ejs-switch id="switch" change="Change"></ejs-switch>
3+
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource">
4+
<e-grid-columns>
5+
<e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" width="120"></e-grid-column>
6+
<e-grid-column field="CustomerID" headerText="<strong>Customer ID</strong>" textAlign="Right" width="180"></e-grid-column>
7+
<e-grid-column field="Freight" headerText="Freight" textAlign="Right" type='number' format='C2' width="130"></e-grid-column>
8+
<e-grid-column field="ShipCountry" headerText="Ship Country" textAlign="Right" width="130"></e-grid-column>
9+
</e-grid-columns>
10+
</ejs-grid>
11+
12+
<script type="text/javascript">
13+
function Change(args) {
14+
var grid = document.getElementById("Grid").ej2_instances[0];
15+
if (args.checked) {
16+
grid.getColumnByField('CustomerID').disableHtmlEncode = false;
17+
} else {
18+
grid.getColumnByField('CustomerID').disableHtmlEncode = true;
19+
}
20+
grid.refreshColumns();
21+
}
22+
</script>

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
public IActionResult Index()
22
{
3-
var Order = OrderDetails.GetAllRecords();
3+
var Order = InventoryDetails.GetAllRecords();
44
ViewBag.DataSource = Order;
5+
ViewBag.dropdownData = new string[] { "Default", "Both", "Horizontal", "Vertical", "None" };
56
return View();
6-
}
7+
}

0 commit comments

Comments
 (0)