Ej2 896213 cell

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

@@ -1,10 +1,22 @@
-@Html.EJS().Grid("AutoWrap").DataSource((IEnumerable<object>)ViewBag.dataSource).AllowTextWrap().Columns(col =>
+	<div style="display: flex">
+		<label style="padding: 10px 10px 26px 0"> Change the wrapmode of auto wrap feature: </label>
+		<span style="height:fit-content">
+			@Html.EJS().DropDownList("Wrap").Width("180px").DataSource(new List<object> { "Both", "Content" }).Change("change").Render()
+		</span>
+	</div>
+	@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.dataSource).AllowTextWrap().Columns(col =>
 {
+	col.Field("Inventor").HeaderText("Inventor Name").Width("150").Add();
 
-   col.Field("NumberofPatentFamilies").HeaderText("NumberofPatentFamilies").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
-   col.Field("Inventor").HeaderText("Inventor").Width("150").Add();
-   col.Field("NumberofINPADOCpatents").HeaderText("NumberofINPADOCpatents").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
-   col.Field("Mainfieldsofinvention").HeaderText("Mainfieldsofinvention").Width("150").Add();
-   col.Field("Active").HeaderText("Active").Width("150").Add();
+	col.Field("NumberOfPatentFamilies").HeaderText("Number of Patent Families").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+	col.Field("Country").HeaderText("Country").Width("150").Add();
+	col.Field("Active").HeaderText("Active").Width("150").Add();
 
-}).AllowPaging().TextWrapSettings(text => { text.WrapMode(Syncfusion.EJ2.Grids.WrapMode.Content);}).Render()
+}).TextWrapSettings(text => { text.WrapMode(Syncfusion.EJ2.Grids.WrapMode.Content); }).Render()
+
+<script>
+	function change(args) {
+		var grid = document.getElementById("Grid").ej2_instances[0];
+		grid.textWrapSettings.wrapMode = args.value;
+	}
+</script>

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

@@ -1,10 +1,22 @@
-<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" gridLines="Default" height="315" allowTextWrap="true">
-    <e-grid-textwrapsettings wrapMode="Content"></e-grid-textwrapsettings>
+<div style="display: flex">
+    <label style="padding: 10px 10px 26px 0"> Change the wrapmode of auto wrap feature: </label>
+    <span style="height:fit-content">
+<ejs-dropdownlist id="dropdown" dataSource="@ViewBag.dropdownData" change="Change"></ejs-dropdownlist>
+</span>
+</div>
+<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowTextWrap=true>
+<e-grid-textwrapsettings wrapMode="Content"></e-grid-textwrapsettings>
     <e-grid-columns>
-        <e-grid-column field="RoolNo" headerText="Rool No"  textAlign="Right" width="120"></e-grid-column>
-        <e-grid-column field="Name" headerText="Name of the inventor"  width="100"></e-grid-column>                
-        <e-grid-column field="patentfamilies" headerText="No of patentfamilies"  width="130"></e-grid-column>
-        <e-grid-column field="Country" headerText="Country" width="130"></e-grid-column>
-        <e-grid-column field="mainfields" headerText="Main fields of Invention" width="150"></e-grid-column>
+        <e-grid-column field="Inventor" headerText="Inventor Name" textAlign="Right" width="120"></e-grid-column>
+        <e-grid-column field="NumberOfPatentFamilies" headerText="Number of Patent families" textAlign="Right" width="120"></e-grid-column>
+        <e-grid-column field="Country" headerText="Country" width="150"></e-grid-column>
+        <e-grid-column field="Active" headerText="Active" textAlign="Right" width="150"></e-grid-column>
     </e-grid-columns>
- </ejs-grid>
+</ejs-grid>
+
+<script type="text/javascript">
+    function Change(args) {
+        var grid = document.getElementById("Grid").ej2_instances[0];
+        grid.textWrapSettings.wrapMode = args.value;
+    }
+</script>

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

@@ -1,6 +1,7 @@
 public IActionResult Index()
 {
-    var Order = OrderDetails.GetAllRecords();
+    var Order = InventorDetails.GetAllRecords();
     ViewBag.DataSource = Order;
+    ViewBag.dropdownData = new string[] { "Clip", "Ellipsis", "EllipsisWithTooltip" };
     return View();
-} 
+}

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

@@ -1,8 +1,24 @@
- @Html.EJS().Grid("ClipMode").DataSource((IEnumerable<object>)ViewBag.dataSource).Columns(col =>
-   {
-       col.Field("NumberofPatentFamilies").HeaderText("NumberofPatentFamilies").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
-       col.Field("Inventor").HeaderText("Inventor").ClipMode(Syncfusion.EJ2.Grids.ClipMode.Clip).Width("150").Add();
-       col.Field("NumberofINPADOCpatents").ClipMode(Syncfusion.EJ2.Grids.ClipMode.Ellipsis).HeaderText("NumberofINPADOCpatents").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
-       col.Field("Mainfieldsofinvention").ClipMode(Syncfusion.EJ2.Grids.ClipMode.EllipsisWithTooltip).HeaderText("Mainfieldsofinvention").Width("150").Add();
-       col.Field("Active").HeaderText("Active").Width("150").Add();
-   }).AllowPaging().Render()
+
+	<div style="display: flex">
+		<label style="padding: 10px 10px 26px 0">Change the clip mode: </label>
+		<span style="height:fit-content">
+			@Html.EJS().DropDownList("ClipMode").Width("180px").DataSource(new List<object> { "Clip", "Ellipsis", "EllipsisWithTooltip" }).Change("change").Render()
+		</span>
+
+	</div>
+	@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.dataSource).Columns(col =>
+	  {
+		  col.Field("NumberOfPatentFamilies").HeaderText("NumberofPatentFamilies").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+		  col.Field("Inventor").HeaderText("Inventor").Width("150").Add();
+		  col.Field("NumberOfINPADOCPatents").HeaderText("NumberofINPADOCpatents").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+		  col.Field("MainFieldsOfInvention").HeaderText("Mainfieldsofinvention").Width("150").Add();
+		  col.Field("Active").HeaderText("Active").Width("150").Add();
+	  }).Render()
+
+<script>
+	function change(args) {
+		var grid = document.getElementById("Grid").ej2_instances[0];
+		grid.getColumnByField('MainFieldsOfInvention').clipMode = args.value;
+		grid.refresh();
+	}
+</script>

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

@@ -1,11 +1,25 @@
+<div style="display: flex">
+    <label style="padding: 10px 10px 26px 0">Change the clip mode: </label>
+    <span style="height:fit-content">
+      <ejs-dropdownlist id="dropdown" dataSource="@ViewBag.dropdownData" change="Change"></ejs-dropdownlist>
+    </span>
+</div>
+<ejs-grid id="Grid" dataSource="@ViewBag.DataSource">
+    <e-grid-columns>
+            <e-grid-column field="NumberOfPatentFamilies" headerText="Number of Patent families" textAlign="Right" width="120"></e-grid-column>
 
+        <e-grid-column field="Inventor" headerText="Inventor Name" textAlign="Right" width="120"></e-grid-column>
+            <e-grid-column field="NumberOfINPADOCPatents" headerText="NumberOfINPADOCPatents" width="150"></e-grid-column>
+        <e-grid-column field="MainFieldsOfInvention" headerText="Main Fields Of Invention" width="150"></e-grid-column>
+        <e-grid-column field="Active" headerText="Active" textAlign="Right" width="150"></e-grid-column>
+    </e-grid-columns>
+</ejs-grid>
 
-<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" height="315" allowPaging="true">
-	<e-grid-columns>
-		<e-grid-column field="RoolNo" headerText="Rool No" textAlign="Right" width="100"></e-grid-column>
-		<e-grid-column field="Name" headerText="Name of the inventor" clipMode="Clip" width="80"></e-grid-column>
-		<e-grid-column field="patentfamilies" headerText="No of patentfamilies" clipMode="Ellipsis" width="100"></e-grid-column>
-		<e-grid-column field="Country" headerText="Country" width="100"></e-grid-column>
-		<e-grid-column field="mainfields" headerText="Main fields of Invention" clipMode="EllipsisWithTooltip" width="100"></e-grid-column>
-	</e-grid-columns>
- </ejs-grid>
+
+<script type="text/javascript">
+    function Change(args) {
+        var grid = document.getElementById("Grid").ej2_instances[0];
+        grid.getColumnByField('MainFieldsOfInvention').clipMode = args.value;
+        grid.refresh();
+    }
+</script>

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

@@ -0,0 +1,21 @@
+@Html.EJS().Tooltip("Tooltip").Target(".e-rowcell").ContentTemplate(@<div>
+	@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).Columns(col =>
+	{
+	   col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+	   col.Field("CustomerID").HeaderText("Customer Name").Width("130").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+	   col.Field("OrderDate").HeaderText("Order Date").Width("130").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Format("yMd").Add();
+	   col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+	   col.Field("ShipCountry").HeaderText("Ship Country").Width("120").Add();
+
+	}).Render()
+</div>).BeforeRender("beforeRender").Render()
+
+<script>
+	function beforeRender(args) {
+		var tooltip = document.getElementById("Tooltip").ej2_instances[0]
+		if (args.target.classList.contains('e-rowcell')) {
+			// event triggered before render the tooltip on target element.
+			tooltip.content = 'The value is "' + args.target.innerText + '" ';
+		}
+	}
+</script>

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

@@ -0,0 +1,27 @@
+<ejs-tooltip id="Tooltip" target=".e-rowcell" beforeRender="beforeRender">
+    <!-- Target element -->
+    <e-content-template>
+        <ejs-grid id="Grid" dataSource="@ViewBag.DataSource">
+            <e-grid-columns>
+                <e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" width="100"></e-grid-column>
+                <e-grid-column field="CustomerID" headerText="Customer Name" width="120"></e-grid-column>
+                <e-grid-column field="CustomerID" headerText="Customer ID" width="120"></e-grid-column>
+                <e-grid-column field="OrderDate" headerText="Order Date" width="100" textAlign="Right" format="yMd"></e-grid-column>
+                <e-grid-column field="Freight" headerText="Freight" width="100"></e-grid-column>
+                <e-grid-column field="ShipCountry" headerText="Ship Country" textAlign="Right"
+                    width="100"></e-grid-column>
+            </e-grid-columns>
+        </ejs-grid>
+    </e-content-template>
+</ejs-tooltip>
+
+
+<script>
+    function beforeRender(args) {
+        var tooltip = document.getElementById("Tooltip").ej2_instances[0];
+        if (args.target.classList.contains('e-rowcell')) {
+            // event triggered before render the tooltip on target element.
+            tooltip.content = 'The value is "' + args.target.innerText + '" ';
+        }
+    }
+</script>

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

@@ -0,0 +1,37 @@
+@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.dataSource).Columns(col =>
+	{
+	col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+	col.Field("CustomerID").HeaderText("Customer ID").Width("150").Add();
+	col.Field("OrderDate").HeaderText("Order Date").Width("130").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+	col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+	col.Field("ShipCountry").HeaderText("Ship Country").Width("150").Add();
+
+	}).EnableHover(false).AllowSelection(false).QueryCellInfo("customizeCell").Render()
+
+@section Scripts {
+	<style>
+	.below-30 {
+	background-color: orangered;
+	}
+	.below-80 {
+	background-color: yellow;
+	}
+	.above-80 {
+	background-color: greenyellow;
+	}
+	</style>
+	<script type="text/javascript">
+		function customizeCell(args) {
+			console.log(args.column);
+			if (args.column.field === 'Freight') {
+				var freightData = args.data['Freight'];
+				if (freightData <= 30) {
+					args.cell.classList.add('below-30');
+				} else if (freightData > 30 && freightData < 80) {
+					args.cell.classList.add('below-80');
+				} else {
+					args.cell.classList.add('above-80');
+				}
+			}
+		}</script>
+}

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

@@ -0,0 +1,38 @@
+<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" queryCellInfo="customizeCell">
+    <e-grid-columns>
+        <e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" width="100"></e-grid-column>
+        <e-grid-column field="CustomerID" headerText="Customer ID" width="120"></e-grid-column>
+        <e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" width="100"></e-grid-column>
+        <e-grid-column field="ShipCountry" headerText="Ship Country" width="100"></e-grid-column>
+    </e-grid-columns>
+</ejs-grid>
+
+@section Scripts {
+<style>
+    .below-30 {
+        background-color: orangered;
+    }
+
+    .below-80 {
+        background-color: yellow;
+    }
+
+    .above-80 {
+        background-color: greenyellow;
+    }
+</style>
+<script type="text/javascript">
+    function customizeCell(args) {
+        console.log(args.column);
+        if (args.column.field === 'Freight') {
+            var freightData = args.data['Freight'];
+            if (freightData <= 30) {
+                args.cell.classList.add('below-30');
+            } else if (freightData > 30 && freightData < 80) {
+                args.cell.classList.add('below-80');
+            } else {
+                args.cell.classList.add('above-80');
+            }
+        }
+    }</script>
+}

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

@@ -0,0 +1,17 @@
+	@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.dataSource).Columns(col =>
+		{
+			col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+			col.Field("CustomerID").HeaderText("Customer ID").Width("150").Add();
+			col.Field("OrderDate").HeaderText("Order Date").Width("130").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+			col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+			col.Field("ShipCountry").HeaderText("Ship Country").Width("150").Add();
+		}).SelectionSettings(select => select.Mode(Syncfusion.EJ2.Grids.SelectionMode.Cell).Type(Syncfusion.EJ2.Grids.SelectionType.Multiple)).Render()
+
+@section Scripts {
+	<style>
+			.e-grid td.e-cellselectionbackground {
+				background: #9ac5ee;
+				font-style: italic;
+			}
+	</style>
+}

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

@@ -0,0 +1,19 @@
+<ejs-grid id="Grid" dataSource="@ViewBag.DataSource">
+    <e-grid-selectionsettings mode=Cell type="Multiple"></e-grid-selectionsettings>
+    <e-grid-columns>
+        <e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" width="100"></e-grid-column>
+        <e-grid-column field="CustomerID" headerText="Customer ID" width="120"></e-grid-column>
+        <e-grid-column field="OrderDate" headerText="Order Date" format='yMd' width="100"></e-grid-column>
+        <e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" width="100"></e-grid-column>
+        <e-grid-column field="ShipCountry" headerText="Ship Country" width="100"></e-grid-column>
+    </e-grid-columns>
+</ejs-grid>
+
+@section Scripts {
+<style>
+    .e-grid td.e-cellselectionbackground {
+        background: #9ac5ee;
+        font-style: italic;
+    }
+</style>
+}

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

@@ -0,0 +1,6 @@
+public IActionResult Index()
+{
+    var Order = OrderDetails.GetAllRecords();
+    ViewBag.DataSource = Order;
+    return View();
+} 

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

@@ -0,0 +1,19 @@
+
+@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.dataSource).Columns(col =>
+	{
+		col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).CustomAttributes(new { @class = "custom-css" }).Add();
+		col.Field("CustomerID").HeaderText("Customer ID").Width("150").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+		col.Field("ShipCity").HeaderText("Ship City").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).CustomAttributes(new { @class = "custom-css" }).Add();
+		col.Field("ShipCountry").HeaderText("Ship Country").Width("150").Add();
+	}).Render()
+
+@section Scripts
+{
+	<style>
+	.custom-css{
+		background: #d7f0f4;
+		font-style: italic;
+		color: navy
+	}
+	</ style >
+}

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

@@ -0,0 +1,20 @@
+<ejs-grid id="Grid" dataSource="@ViewBag.DataSource">
+    <e-grid-columns>
+        <e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" customAttributes=@(new {
+            @class="custom-css" } ) width="100"></e-grid-column>
+        <e-grid-column field="CustomerID" headerText="Customer ID" width="120"></e-grid-column>
+        <e-grid-column field="ShipCity" headerText="Ship City" width="100" CustomAttributes=@(new{@class="custom-css"
+            })></e-grid-column>
+        <e-grid-column field="ShipCountry" headerText="Ship Country" textAlign="Right" width="100"></e-grid-column>
+    </e-grid-columns>
+</ejs-grid>
+
+@section Scripts {
+<style>
+    .custom-css {
+        background: #d7f0f4;
+        font-style: italic;
+        color: navy
+    }
+</style>
+}