Skip to content

Commit 0383a21

Browse files
NithyaSivaprakasamNithyaSivaprakasam
committed
896213: Documentation of Cells Topic
1 parent 4065e70 commit 0383a21

File tree

15 files changed

+292
-28
lines changed

15 files changed

+292
-28
lines changed

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

Lines changed: 19 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,22 @@
1-
@Html.EJS().Grid("AutoWrap").DataSource((IEnumerable<object>)ViewBag.dataSource).AllowTextWrap().Columns(col =>
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+
@Html.EJS().DropDownList("Wrap").Width("180px").DataSource(new List<object> { "Both", "Content" }).Change("change").Render()
5+
</span>
6+
</div>
7+
@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.dataSource).AllowTextWrap().Columns(col =>
28
{
9+
col.Field("Inventor").HeaderText("Inventor Name").Width("150").Add();
310

4-
col.Field("NumberofPatentFamilies").HeaderText("NumberofPatentFamilies").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
5-
col.Field("Inventor").HeaderText("Inventor").Width("150").Add();
6-
col.Field("NumberofINPADOCpatents").HeaderText("NumberofINPADOCpatents").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
7-
col.Field("Mainfieldsofinvention").HeaderText("Mainfieldsofinvention").Width("150").Add();
8-
col.Field("Active").HeaderText("Active").Width("150").Add();
11+
col.Field("NumberOfPatentFamilies").HeaderText("Number of Patent Families").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
12+
col.Field("Country").HeaderText("Country").Width("150").Add();
13+
col.Field("Active").HeaderText("Active").Width("150").Add();
914

10-
}).AllowPaging().TextWrapSettings(text => { text.WrapMode(Syncfusion.EJ2.Grids.WrapMode.Content);}).Render()
15+
}).TextWrapSettings(text => { text.WrapMode(Syncfusion.EJ2.Grids.WrapMode.Content); }).Render()
16+
17+
<script>
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: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
public IActionResult Index()
22
{
3-
var Order = OrderDetails.GetAllRecords();
3+
var Order = InventoryDetails.GetAllRecords();
44
ViewBag.DataSource = Order;
55
return View();
66
}

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

Lines changed: 24 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,24 @@
1-
@Html.EJS().Grid("ClipMode").DataSource((IEnumerable<object>)ViewBag.dataSource).Columns(col =>
2-
{
3-
col.Field("NumberofPatentFamilies").HeaderText("NumberofPatentFamilies").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
4-
col.Field("Inventor").HeaderText("Inventor").ClipMode(Syncfusion.EJ2.Grids.ClipMode.Clip).Width("150").Add();
5-
col.Field("NumberofINPADOCpatents").ClipMode(Syncfusion.EJ2.Grids.ClipMode.Ellipsis).HeaderText("NumberofINPADOCpatents").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
6-
col.Field("Mainfieldsofinvention").ClipMode(Syncfusion.EJ2.Grids.ClipMode.EllipsisWithTooltip).HeaderText("Mainfieldsofinvention").Width("150").Add();
7-
col.Field("Active").HeaderText("Active").Width("150").Add();
8-
}).AllowPaging().Render()
1+
2+
<div style="display: flex">
3+
<label style="padding: 10px 10px 26px 0">Change the clip mode: </label>
4+
<span style="height:fit-content">
5+
@Html.EJS().DropDownList("ClipMode").Width("180px").DataSource(new List<object> { "Clip", "Ellipsis", "EllipsisWithTooltip" }).Change("change").Render()
6+
</span>
7+
8+
</div>
9+
@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.dataSource).Columns(col =>
10+
{
11+
col.Field("NumberOfPatentFamilies").HeaderText("NumberofPatentFamilies").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
12+
col.Field("Inventor").HeaderText("Inventor").Width("150").Add();
13+
col.Field("NumberOfINPADOCPatents").HeaderText("NumberofINPADOCpatents").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
14+
col.Field("MainFieldsOfInvention").HeaderText("Mainfieldsofinvention").Width("150").Add();
15+
col.Field("Active").HeaderText("Active").Width("150").Add();
16+
}).Render()
17+
18+
<script>
19+
function change(args) {
20+
var grid = document.getElementById("Grid").ej2_instances[0];
21+
grid.getColumnByField('MainFieldsOfInvention').clipMode = args.value;
22+
grid.refresh();
23+
}
24+
</script>

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

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
@Html.EJS().Tooltip("Tooltip").Target(".e-rowcell").ContentTemplate(@<div>
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).Add();
5+
col.Field("CustomerID").HeaderText("Customer Name").Width("130").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
6+
col.Field("OrderDate").HeaderText("Order Date").Width("130").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Format("yMd").Add();
7+
col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
8+
col.Field("ShipCountry").HeaderText("Ship Country").Width("120").Add();
9+
10+
}).Render()
11+
</div>).BeforeRender("beforeRender").Render()
12+
13+
<script>
14+
function beforeRender(args) {
15+
var tooltip = document.getElementById("Tooltip").ej2_instances[0]
16+
if (args.target.classList.contains('e-rowcell')) {
17+
// event triggered before render the tooltip on target element.
18+
tooltip.content = 'The value is "' + args.target.innerText + '" ';
19+
}
20+
}
21+
</script>

‎ej2-asp-core-mvc/code-snippet/grid/cell/custom-tooltip/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/custom-tooltip/tooltip.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/gridlines/razor

Lines changed: 21 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,22 @@
1-
@Html.EJS().Grid("GridLine").DataSource((IEnumerable<object>)ViewBag.dataSource).GridLines(Syncfusion.EJ2.Grids.GridLine.Both).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").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Format("yMd").Add();
6-
col.Field("Freight").HeaderText("Freight").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Format("C2").Add();
7-
col.Field("ShipCountry").HeaderText("Ship Country").Width("150").Add();
1+
<div style="display: flex">
2+
<label style="padding: 10px 10px 26px 0">Change the Grid lines: </label>
3+
<span style="height:fit-content">
4+
@Html.EJS().DropDownList("GridLines").Width("180px").DataSource(new List<object> { "Default", "Both", "Horizontal", "Vertical", "None" }).Change("change").Render()
5+
</span>
86

9-
}).AllowPaging().PageSettings(page => { page.PageCount(5);}).Render()
7+
</div>
8+
@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.dataSource).Columns(col =>
9+
{
10+
col.Field("NumberOfPatentFamilies").HeaderText("NumberofPatentFamilies").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
11+
col.Field("Inventor").HeaderText("Inventor").Width("150").Add();
12+
col.Field("NumberOfINPADOCPatents").HeaderText("NumberofINPADOCpatents").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
13+
col.Field("MainFieldsOfInvention").HeaderText("Mainfieldsofinvention").Width("150").Add();
14+
col.Field("Active").HeaderText("Active").Width("150").Add();
15+
}).Render()
16+
17+
<script>
18+
function change(args) {
19+
var grid = document.getElementById("Grid").ej2_instances[0];
20+
grid.gridLines = args.value;
21+
}
22+
</script>

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

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
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").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Template("#template").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+
}).Render()
9+
10+
@section Scripts {
11+
<script id="template" type="text/x-template">
12+
<span data-toggle="tooltip" title="${CustomerID}" data-container="body" data-placement="left" data-delay='{"show":"800", "hide":"300"}'><i class="fas fa-pencil-alt"></i>${CustomerID}</span>
13+
</script>
14+
<script>
15+
$(document).ready(function () {
16+
$('[data-toggle="tooltip"]').tooltip();
17+
});
18+
</script>
19+
}

‎ej2-asp-core-mvc/code-snippet/grid/cell/tooltip/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/tooltip/tooltip.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+
}

0 commit comments

Comments
 (0)