diff --git a/ej2-asp-core-mvc/EJ2_ASP.MVC/introduction.md b/ej2-asp-core-mvc/EJ2_ASP.MVC/introduction.md
index e666971c78..dec984f6d8 100644
--- a/ej2-asp-core-mvc/EJ2_ASP.MVC/introduction.md
+++ b/ej2-asp-core-mvc/EJ2_ASP.MVC/introduction.md
@@ -124,10 +124,8 @@ padding-top: 50px;
<div class="controlanchorlink"><a target="_self" href="https://ej2.syncfusion.com/aspnetmvc/documentation/pivot-table/getting-started">Pivot Table</a></div>
<div class="controlanchorlink"><a target="_self" href="https://ej2.syncfusion.com/aspnetmvc/documentation/tree-grid/getting-started-mvc">TreeGrid</a></div>
<div class="controlanchorlink"><a target="_self" href="https://ej2.syncfusion.com/aspnetmvc/documentation/spreadsheet/getting-started-mvc">Spreadsheet</a></div>
- <div class="control-anchor-link"><a target="_self" href="https://ej2.syncfusion.com/aspnetmvc/documentation/multicolumn-combobox/getting-started">MultiColumn ComboBox</a></div>
<div><p class="controlcategory">FILE VIEWERS & EDITORS</p></div>
<div class="controlanchorlink"><a target="_self" href="https://ej2.syncfusion.com/aspnetmvc/documentation/rich-text-editor/getting-started">RichTextEditor</a></div>
- <div class="control-anchor-link"><a target="_self" href="https://ej2.syncfusion.com/aspnetmvc/documentation/markdown-editor/getting-started">Markdown Editor</a></div>
<div class="controlanchorlink"><a target="_self" href="https://ej2.syncfusion.com/aspnetmvc/documentation/pdfviewer/getting-started">PDF Viewer</a></div>
<div class="controlanchorlink"><a target="_self" href="https://ej2.syncfusion.com/aspnetmvc/documentation/document-editor/getting-started">Word Processor</a></div>
<div class="controlanchorlink"><a target="_self" href="https://ej2.syncfusion.com/aspnetmvc/documentation/image-editor/getting-started">Image Editor</a></div>
@@ -138,30 +136,24 @@ padding-top: 50px;
<div class="controlanchorlink"><a target="_self" href="https://help.syncfusion.com/file-formats/presentation/create-read-edit-powerpoint-files-in-asp-net-mvc">PowerPoint</a></div>
<div><p class="controlcategory">LAYOUT</p></div>
<div class="controlanchorlink"><a target="_self" href="https://ej2.syncfusion.com/aspnetmvc/documentation/dialog/getting-started">Dialog</a></div>
- <div class="control-anchor-link"><a target="_self" href="https://ej2.syncfusion.com/aspnetmvc/documentation/predefined-dialogs/getting-started">Predefined Dialog</a></div>
<div class="controlanchorlink"><a target="_self" href="https://ej2.syncfusion.com/aspnetmvc/documentation/listview/getting-started">ListView</a></div>
<div class="controlanchorlink"><a target="_self" href="https://ej2.syncfusion.com/aspnetmvc/documentation/tooltip/getting-started-asp-mvc">Tooltip</a></div>
<div class="controlanchorlink"><a target="_self" href="https://ej2.syncfusion.com/aspnetmvc/documentation/splitter/getting-started">Splitter</a></div>
<div class="controlanchorlink"><a target="_self" href="https://ej2.syncfusion.com/aspnetmvc/documentation/dashboard-layout/getting-started">Dashboard</a></div>
<div class="controlanchorlink"><a target="_self" href="https://ej2.syncfusion.com/aspnetmvc/documentation/card/getting-started">Card</a></div>
<div class="controlanchorlink"><a target="_self" href="https://ej2.syncfusion.com/aspnetmvc/documentation/avatar/getting-started-asp-mvc">Avatar</a></div>
- <div class="control-anchor-link"><a target="_self" href="https://ej2.syncfusion.com/aspnetmvc/documentation/timeline/getting-started">Timeline</a></div>
</td>
<td>
<div><p class="controlcategory-topics">DATA VISUALIZATION</p></div>
<div class="controlanchorlink"><a target="_self" href="https://ej2.syncfusion.com/aspnetmvc/documentation/chart/getting-started">Charts</a></div>
- <div class="control-anchor-link"><a target="_self" href="https://ej2.syncfusion.com/aspnetmvc/documentation/3d-chart/getting-started">3D Chart</a></div>
- <div class="control-anchor-link"><a target="_self" href="https://ej2.syncfusion.com/aspnetmvc/documentation/circular-chart-3d/getting-started">3D Circular Chart</a></div>
<div class="controlanchorlink"><a target="_self" href="https://ej2.syncfusion.com/aspnetmvc/documentation/stock-chart/getting-started">Stock Chart</a></div>
<div class="controlanchorlink"><a target="_self" href="https://ej2.syncfusion.com/aspnetmvc/documentation/circular-gauge/getting-started">Circular Gauge</a></div>
<div class="controlanchorlink"><a target="_self" href="https://ej2.syncfusion.com/aspnetmvc/documentation/linear-gauge/getting-started">Linear Gauge</a></div>
<div class="controlanchorlink"><a target="_self" href="https://ej2.syncfusion.com/aspnetmvc/documentation/diagram/getting-started">Diagram</a></div>
<div class="controlanchorlink"><a target="_self" href="https://ej2.syncfusion.com/aspnetmvc/documentation/heatmap-chart/getting-started">HeatMap Chart</a></div>
<div class="controlanchorlink"><a target="_self" href="https://ej2.syncfusion.com/aspnetmvc/documentation/maps/getting-started">Map</a></div>
- <div class="control-anchor-link"><a target="_self" href="https://ej2.syncfusion.com/aspnetmvc/documentation/range-navigator/getting-started">Range Navigator</a></div>
<div class="controlanchorlink"><a target="_self" href="https://ej2.syncfusion.com/aspnetmvc/documentation/smithchart/getting-started">Smith Chart</a></div>
<div class="controlanchorlink"><a target="_self" href="https://ej2.syncfusion.com/aspnetmvc/documentation/sparkline/getting-started">Sparkline Charts</a></div>
- <div class="control-anchor-link"><a target="_self" href="https://ej2.syncfusion.com/aspnetmvc/documentation/accumulation-chart/getting-started">Accumulation Chart</a></div>
<div class="controlanchorlink"><a target="_self" href="https://ej2.syncfusion.com/aspnetmvc/documentation/barcode/getting-started">Barcode</a></div>
<div class="controlanchorlink"><a target="_self" href="https://ej2.syncfusion.com/aspnetmvc/documentation/treemap/getting-started">TreeMap</a></div>
<div class="controlanchorlink"><a target="_self" href="https://ej2.syncfusion.com/aspnetmvc/documentation/bullet-chart/getting-started">Bullet Chart</a></div>
@@ -194,18 +186,12 @@ padding-top: 50px;
<div class="controlanchorlink"><a target="_self" href="https://ej2.syncfusion.com/aspnetmvc/documentation/color-picker/getting-started">Color Picker</a></div>
<div class="controlanchorlink"><a target="_self" href="https://ej2.syncfusion.com/aspnetmvc/documentation/uploader/getting-started">File Upload</a></div>
<div class="controlanchorlink"><a target="_self" href="https://ej2.syncfusion.com/aspnetmvc/documentation/range-slider/getting-started">Range Slider</a></div>
- <div class="control-anchor-link"><a target="_self" href="https://ej2.syncfusion.com/aspnetmvc/documentation/textarea/getting-started">TextArea</a></div>
<div class="controlanchorlink"><a target="_self" href="https://ej2.syncfusion.com/aspnetmvc/documentation/switch/getting-started">Toggle Switch Button</a></div>
<div class="controlanchorlink"><a target="_self" href="https://ej2.syncfusion.com/aspnetmvc/documentation/signature/getting-started">Signature</a></div>
<div class="control-anchor-link"><a target="_self" href="https://ej2.syncfusion.com/aspnetmvc/documentation/rating/getting-started">Rating</a></div>
- <div class="control-anchor-link"><a target="_self" href="https://ej2.syncfusion.com/aspnetmvc/documentation/otp-input/getting-started">OTP Input</a></div>
- <div class="control-anchor-link"><a target="_self" href="https://ej2.syncfusion.com/aspnetmvc/documentation/speech-to-text/getting-started">Speech To Text</a></div>
<div><p class="controlcategory">FORMS</p></div>
<div class="controlanchorlink"><a target="_self" href="https://ej2.syncfusion.com/aspnetmvc/documentation/in-place-editor/getting-started">In-place Editor</a></div>
<div class="controlanchorlink"><a target="_self" href="https://ej2.syncfusion.com/aspnetmvc/documentation/query-builder/getting-started">Query Builder</a></div>
- <div><p class="control-category">Interactive Chat</p></div>
- <div class="control-anchor-link"><a target="_self" href="https://ej2.syncfusion.com/aspnetmvc/documentation/ai-assistview/getting-started">AI AssistView</a></div>
- <div class="control-anchor-link"><a target="_self" href="https://ej2.syncfusion.com/aspnetmvc/documentation/chat-ui/getting-started">Chat UI</a></div>
</td>
<td>
<div><p class="controlcategory-topics">DROPDOWNS</p></div>
@@ -213,7 +199,6 @@ padding-top: 50px;
<div class="controlanchorlink"><a target="_self" href="https://ej2.syncfusion.com/aspnetmvc/documentation/list-box/getting-started-mvc">ListBox</a></div>
<div class="controlanchorlink"><a target="_self" href="https://ej2.syncfusion.com/aspnetmvc/documentation/combo-box/getting-started">ComboBox</a></div>
<div class="controlanchorlink"><a target="_self" href="https://ej2.syncfusion.com/aspnetmvc/documentation/drop-down-list/getting-started">Dropdown List</a></div>
- <div class="control-anchor-link"><a target="_self" href="https://ej2.syncfusion.com/aspnetmvc/documentation/drop-down-tree/getting-started">DropDownTree</a></div>
<div class="controlanchorlink"><a target="_self" href="https://ej2.syncfusion.com/aspnetmvc/documentation/multi-select/getting-started">Multiselect DropDown</a></div>
<div class="controlanchorlink"><a target="_self" href="https://ej2.syncfusion.com/aspnetmvc/documentation/mention/getting-started">Mention</a></div>
<div><p class="controlcategory">NAVIGATION</p></div>
@@ -225,11 +210,8 @@ padding-top: 50px;
<div class="controlanchorlink"><a target="_self" href="https://ej2.syncfusion.com/aspnetmvc/documentation/toolbar/getting-started">Toolbar</a></div>
<div class="controlanchorlink"><a target="_self" href="https://ej2.syncfusion.com/aspnetmvc/documentation/treeview/getting-started">TreeView</a></div>
<div class="controlanchorlink"><a target="_self" href="https://ej2.syncfusion.com/aspnetmvc/documentation/file-manager/getting-started">File Manager</a></div>
- <div class="control-anchor-link"><a target="_self" href="https://ej2.syncfusion.com/aspnetmvc/documentation/ribbon/getting-started">Ribbon</a></div>
<div class="controlanchorlink"><a target="_self" href="https://ej2.syncfusion.com/aspnetmvc/documentation/breadcrumb/getting-started">Breadcrumb</a></div>
- <div class="control-anchor-link"><a target="_self" href="https://ej2.syncfusion.com/aspnetmvc/documentation/carousel/getting-started">Carousel</a></div>
<div class="controlanchorlink"><a target="_self" href="https://ej2.syncfusion.com/aspnetmvc/documentation/appbar/getting-started">AppBar</a></div>
- <div class="control-anchor-link"><a target="_self" href="https://ej2.syncfusion.com/aspnetmvc/documentation/stepper/getting-started">Stepper</a></div>
<div><p class="controlcategory">NOTIFICATION</p></div>
<div class="controlanchorlink"><a target="_self" href="https://ej2.syncfusion.com/aspnetmvc/documentation/toast/getting-started">Toast</a></div>
<div class="controlanchorlink"><a target="_self" href="https://ej2.syncfusion.com/aspnetmvc/documentation/progress-bar/getting-started">Progress Bar</a></div>
diff --git a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/introduction.md b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/introduction.md
index cdb25226c5..f466c12f2e 100644
--- a/ej2-asp-core-mvc/EJ2_ASP.NETCORE/introduction.md
+++ b/ej2-asp-core-mvc/EJ2_ASP.NETCORE/introduction.md
@@ -84,10 +84,8 @@ padding-top: 20px;
<div class="control-anchor-link"><a target="_self" href="https://ej2.syncfusion.com/aspnetcore/documentation/pivot-table/getting-started">Pivot Table</a></div>
<div class="control-anchor-link"><a target="_self" href="https://ej2.syncfusion.com/aspnetcore/documentation/tree-grid/getting-started-core">TreeGrid</a></div>
<div class="control-anchor-link"><a target="_self" href="https://ej2.syncfusion.com/aspnetcore/documentation/spreadsheet/getting-started-core">Spreadsheet</a></div>
- <div class="control-anchor-link"><a target="_self" href="https://ej2.syncfusion.com/aspnetcore/documentation/multicolumn-combobox/getting-started">MultiColumn ComboBox</a></div>
<div><p class="control-category">FILE VIEWERS & EDITORS</p></div>
<div class="control-anchor-link"><a target="_self" href="https://ej2.syncfusion.com/aspnetcore/documentation/rich-text-editor/getting-started">RichTextEditor</a></div>
- <div class="control-anchor-link"><a target="_self" href="https://ej2.syncfusion.com/aspnetcore/documentation/markdown-editor/getting-started">Markdown Editor</a></div>
<div class="control-anchor-link"><a target="_self" href="https://ej2.syncfusion.com/aspnetcore/documentation/pdfviewer/getting-started">PDF Viewer</a></div>
<div class="control-anchor-link"><a target="_self" href="https://ej2.syncfusion.com/aspnetcore/documentation/document-editor/getting-started-core">Word Processor</a></div>
<div class="control-anchor-link"><a target="_self" href="https://ej2.syncfusion.com/aspnetcore/documentation/image-editor/getting-started">Image Editor</a></div>
@@ -98,30 +96,24 @@ padding-top: 20px;
<div class="control-anchor-link"><a target="_self" href="https://help.syncfusion.com/file-formats/presentation/create-read-edit-powerpoint-files-in-asp-net-core-c-sharp">PowerPoint</a></div>
<div><p class="control-category">LAYOUT</p></div>
<div class="control-anchor-link"><a target="_self" href="https://ej2.syncfusion.com/aspnetcore/documentation/dialog/getting-started">Dialog</a></div>
- <div class="control-anchor-link"><a target="_self" href="https://ej2.syncfusion.com/aspnetcore/documentation/predefined-dialogs/getting-started">Predefined Dialog</a></div>
<div class="control-anchor-link"><a target="_self" href="https://ej2.syncfusion.com/aspnetcore/documentation/listview/getting-started">ListView</a></div>
<div class="control-anchor-link"><a target="_self" href="https://ej2.syncfusion.com/aspnetcore/documentation/tooltip/getting-started-asp-core">Tooltip</a></div>
<div class="control-anchor-link"><a target="_self" href="https://ej2.syncfusion.com/aspnetcore/documentation/splitter/getting-started">Splitter</a></div>
<div class="control-anchor-link"><a target="_self" href="https://ej2.syncfusion.com/aspnetcore/documentation/dashboard-layout/getting-started">Dashboard</a></div>
<div class="control-anchor-link"><a target="_self" href="https://ej2.syncfusion.com/aspnetcore/documentation/card/getting-started">Card</a></div>
<div class="control-anchor-link"><a target="_self" href="https://ej2.syncfusion.com/aspnetcore/documentation/avatar/getting-started-asp-core">Avatar</a></div>
- <div class="control-anchor-link"><a target="_self" href="https://ej2.syncfusion.com/aspnetcore/documentation/timeline/getting-started">Timeline</a></div>
</td>
<td>
<div><p class="control-category-topics">DATA VISUALIZATION</p></div>
<div class="control-anchor-link"><a target="_self" href="https://ej2.syncfusion.com/aspnetcore/documentation/chart/getting-started">Charts</a></div>
- <div class="control-anchor-link"><a target="_self" href="https://ej2.syncfusion.com/aspnetcore/documentation/3d-chart/getting-started">3D Chart</a></div>
- <div class="control-anchor-link"><a target="_self" href="https://ej2.syncfusion.com/aspnetcore/documentation/circular-chart-3d/getting-started">3D Circular Chart</a></div>
<div class="control-anchor-link"><a target="_self" href="https://ej2.syncfusion.com/aspnetcore/documentation/stock-chart/getting-started">Stock Chart</a></div>
<div class="control-anchor-link"><a target="_self" href="https://ej2.syncfusion.com/aspnetcore/documentation/circular-gauge/getting-started">Circular Gauge</a></div>
<div class="control-anchor-link"><a target="_self" href="https://ej2.syncfusion.com/aspnetcore/documentation/linear-gauge/getting-started">Linear Gauge</a></div>
<div class="control-anchor-link"><a target="_self" href="https://ej2.syncfusion.com/aspnetcore/documentation/diagram/getting-started">Diagram</a></div>
<div class="control-anchor-link"><a target="_self" href="https://ej2.syncfusion.com/aspnetcore/documentation/heatmap-chart/getting-started">HeatMap Chart</a></div>
<div class="control-anchor-link"><a target="_self" href="https://ej2.syncfusion.com/aspnetcore/documentation/maps/getting-started">Map</a></div>
- <div class="control-anchor-link"><a target="_self" href="https://ej2.syncfusion.com/aspnetcore/documentation/range-navigator/getting-started">Range Navigator</a></div>
<div class="control-anchor-link"><a target="_self" href="https://ej2.syncfusion.com/aspnetcore/documentation/smithchart/getting-started">Smith Chart</a></div>
<div class="control-anchor-link"><a target="_self" href="https://ej2.syncfusion.com/aspnetcore/documentation/sparkline/getting-started">Sparkline Charts</a></div>
- <div class="control-anchor-link"><a target="_self" href="https://ej2.syncfusion.com/aspnetcore/documentation/accumulation-chart/getting-started">Accumulation Chart</a></div>
<div class="control-anchor-link"><a target="_self" href="https://ej2.syncfusion.com/aspnetcore/documentation/barcode/getting-started">Barcode</a></div>
<div class="control-anchor-link"><a target="_self" href="https://ej2.syncfusion.com/aspnetcore/documentation/treemap/getting-started">TreeMap</a></div>
<div class="control-anchor-link"><a target="_self" href="https://ej2.syncfusion.com/aspnetcore/documentation/bullet-chart/getting-started">Bullet Chart</a></div>
@@ -154,18 +146,12 @@ padding-top: 20px;
<div class="control-anchor-link"><a target="_self" href="https://ej2.syncfusion.com/aspnetcore/documentation/color-picker/getting-started">Color Picker</a></div>
<div class="control-anchor-link"><a target="_self" href="https://ej2.syncfusion.com/aspnetcore/documentation/uploader/getting-started">File Upload</a></div>
<div class="control-anchor-link"><a target="_self" href="https://ej2.syncfusion.com/aspnetcore/documentation/range-slider/getting-started">Range Slider</a></div>
- <div class="control-anchor-link"><a target="_self" href="https://ej2.syncfusion.com/aspnetcore/documentation/textarea/getting-started">TextArea</a></div>
<div class="control-anchor-link"><a target="_self" href="https://ej2.syncfusion.com/aspnetcore/documentation/switch/getting-started">Toggle Switch Button</a></div>
<div class="control-anchor-link"><a target="_self" href="https://ej2.syncfusion.com/aspnetcore/documentation/signature/getting-started">Signature</a></div>
<div class="control-anchor-link"><a target="_self" href="https://ej2.syncfusion.com/aspnetcore/documentation/rating/getting-started">Rating</a></div>
- <div class="control-anchor-link"><a target="_self" href="https://ej2.syncfusion.com/aspnetcore/documentation/otp-input/getting-started">OTP Input</a></div>
- <div class="control-anchor-link"><a target="_self" href="https://ej2.syncfusion.com/aspnetcore/documentation/speech-to-text/getting-started">Speech To Text</a></div>
<div><p class="control-category">FORMS</p></div>
<div class="control-anchor-link"><a target="_self" href="https://ej2.syncfusion.com/aspnetcore/documentation/in-place-editor/getting-started">In-place Editor</a></div>
<div class="control-anchor-link"><a target="_self" href="https://ej2.syncfusion.com/aspnetcore/documentation/query-builder/getting-started">Query Builder</a></div>
- <div><p class="control-category">Interactive Chat</p></div>
- <div class="control-anchor-link"><a target="_self" href="https://ej2.syncfusion.com/aspnetcore/documentation/ai-assistview/getting-started">AI AssistView</a></div>
- <div class="control-anchor-link"><a target="_self" href="https://ej2.syncfusion.com/aspnetcore/documentation/chat-ui/getting-started">Chat UI</a></div>
</td>
<td>
<div><p class="control-category-topics">DROPDOWNS</p></div>
@@ -173,7 +159,6 @@ padding-top: 20px;
<div class="control-anchor-link"><a target="_self" href="https://ej2.syncfusion.com/aspnetcore/documentation/list-box/getting-started-core">ListBox</a></div>
<div class="control-anchor-link"><a target="_self" href="https://ej2.syncfusion.com/aspnetcore/documentation/combo-box/getting-started">ComboBox</a></div>
<div class="control-anchor-link"><a target="_self" href="https://ej2.syncfusion.com/aspnetcore/documentation/drop-down-list/getting-started">Dropdown List</a></div>
- <div class="control-anchor-link"><a target="_self" href="https://ej2.syncfusion.com/aspnetcore/documentation/drop-down-tree/getting-started">DropDownTree</a></div>
<div class="control-anchor-link"><a target="_self" href="https://ej2.syncfusion.com/aspnetcore/documentation/multi-select/getting-started">Multiselect DropDown</a></div>
<div class="control-anchor-link"><a target="_self" href="https://ej2.syncfusion.com/aspnetcore/documentation/mention/getting-started">Mention</a></div>
<div><p class="control-category">NAVIGATION</p></div>
@@ -185,11 +170,9 @@ padding-top: 20px;
<div class="control-anchor-link"><a target="_self" href="https://ej2.syncfusion.com/aspnetcore/documentation/toolbar/getting-started">Toolbar</a></div>
<div class="control-anchor-link"><a target="_self" href="https://ej2.syncfusion.com/aspnetcore/documentation/treeview/getting-started">TreeView</a></div>
<div class="control-anchor-link"><a target="_self" href="https://ej2.syncfusion.com/aspnetcore/documentation/file-manager/getting-started">File Manager</a></div>
- <div class="control-anchor-link"><a target="_self" href="https://ej2.syncfusion.com/aspnetcore/documentation/ribbon/getting-started">Ribbon</a></div>
<div class="control-anchor-link"><a target="_self" href="https://ej2.syncfusion.com/aspnetcore/documentation/breadcrumb/getting-started">Breadcrumb</a></div>
<div class="control-anchor-link"><a target="_self" href="https://ej2.syncfusion.com/aspnetcore/documentation/carousel/getting-started">Carousel</a></div>
<div class="control-anchor-link"><a target="_self" href="https://ej2.syncfusion.com/aspnetcore/documentation/appbar/getting-started">AppBar</a></div>
- <div class="control-anchor-link"><a target="_self" href="https://ej2.syncfusion.com/aspnetcore/documentation/stepper/getting-started">Stepper</a></div>
<div><p class="control-category">NOTIFICATION</p></div>
<div class="control-anchor-link"><a target="_self" href="https://ej2.syncfusion.com/aspnetcore/documentation/toast/getting-started">Toast</a></div>
<div class="control-anchor-link"><a target="_self" href="https://ej2.syncfusion.com/aspnetcore/documentation/progress-bar/getting-started">Progress Bar</a></div>
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/column-template-radiobutton/OrdersDetails.cs b/ej2-asp-core-mvc/code-snippet/grid/columns/column-template-radiobutton/OrdersDetails.cs
deleted file mode 100644
index 6a5ab5d499..0000000000
--- a/ej2-asp-core-mvc/code-snippet/grid/columns/column-template-radiobutton/OrdersDetails.cs
+++ /dev/null
@@ -1,61 +0,0 @@
-using System.ComponentModel.DataAnnotations;
-namespace GridSample.Models
-{
- public class OrdersDetails
- {
- public static List<OrdersDetails> order = new List<OrdersDetails>();
-
- public OrdersDetails() { }
-
- public OrdersDetails(
- int OrderID, string CustomerId, int EmployeeId, double Freight, bool Verified,
- DateTime OrderDate, string ShipCity, string ShipName, string ShipCountry,
- DateTime ShippedDate, string ShipAddress, string OrderStatus)
- {
- this.OrderID = OrderID;
- this.CustomerID = CustomerId;
- this.EmployeeID = EmployeeId;
- this.Freight = Freight;
- this.ShipCity = ShipCity;
- this.Verified = Verified;
- this.OrderDate = OrderDate;
- this.ShipName = ShipName;
- this.ShipCountry = ShipCountry;
- this.ShippedDate = ShippedDate;
- this.ShipAddress = ShipAddress;
- this.OrderStatus = OrderStatus;
- }
-
- public static List<OrdersDetails> GetAllRecords()
- {
- if (order.Count == 0)
- {
- int code = 10000;
- for (int i = 1; i < 10; i++)
- {
- order.Add(new OrdersDetails(code + 1, "ALFKI", i + 0, 2.3 * i, false, new DateTime(1991, 05, 15), "Berlin", "Simons bistro", "Denmark", new DateTime(1996, 7, 16), "Kirchgasse 6", "Pending"));
- order.Add(new OrdersDetails(code + 2, "ANATR", i + 2, 3.3 * i, true, new DateTime(1990, 04, 04), "Madrid", "Queen Cozinha", "Brazil", new DateTime(1996, 9, 11), "Avda. Azteca 123", "Confirmed"));
- order.Add(new OrdersDetails(code + 3, "ANTON", i + 1, 4.3 * i, true, new DateTime(1957, 11, 30), "Cholchester", "Frankenversand", "Germany", new DateTime(1996, 10, 7), "Carrera 52 con Ave. Bolívar #65-98 Llano Largo", "Shipped"));
- order.Add(new OrdersDetails(code + 4, "BLONP", i + 3, 5.3 * i, false, new DateTime(1930, 10, 22), "Marseille", "Ernst Handel", "Austria", new DateTime(1996, 12, 30), "Magazinweg 7", "Cancelled"));
- order.Add(new OrdersDetails(code + 5, "BOLID", i + 4, 6.3 * i, true, new DateTime(1953, 02, 18), "Tsawassen", "Hanari Carnes", "Switzerland", new DateTime(1997, 12, 3), "1029 - 12th Ave. S.", "Confirmed"));
- code += 5;
- }
- }
- return order;
- }
-
- [Key]
- public int OrderID { get; set; }
- public string CustomerID { get; set; }
- public int? EmployeeID { get; set; }
- public double Freight { get; set; }
- public string ShipCity { get; set; }
- public bool Verified { get; set; }
- public DateTime OrderDate { get; set; }
- public string ShipName { get; set; }
- public string ShipCountry { get; set; }
- public DateTime ShippedDate { get; set; }
- public string ShipAddress { get; set; }
- public string OrderStatus { get; set; }
- }
-}
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/column-template-radiobutton/column-template-radiobutton.cs b/ej2-asp-core-mvc/code-snippet/grid/columns/column-template-radiobutton/column-template-radiobutton.cs
deleted file mode 100644
index a313f00f64..0000000000
--- a/ej2-asp-core-mvc/code-snippet/grid/columns/column-template-radiobutton/column-template-radiobutton.cs
+++ /dev/null
@@ -1,6 +0,0 @@
-public IActionResult Index()
-{
- var Order = OrdersDetails.GetAllRecords();
- ViewBag.DataSource = Order;
- return View();
-}
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/column-template-radiobutton/razor b/ej2-asp-core-mvc/code-snippet/grid/columns/column-template-radiobutton/razor
deleted file mode 100644
index 9d472a66e4..0000000000
--- a/ej2-asp-core-mvc/code-snippet/grid/columns/column-template-radiobutton/razor
+++ /dev/null
@@ -1,40 +0,0 @@
-@{
- ViewBag.Title = "Home Page";
-}
-
-@using Syncfusion.EJ2
-
-@Html.EJS().Grid("grid").DataSource((IEnumerable<object>)ViewBag.dataSource).Height("315px").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("Freight").HeaderText("Freight").Width("120").Format("C2").EditType("numericedit").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
- col.Field("OrderDate").HeaderText("OrderDate").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width("150").Add();
- col.Field("OrderStatus").HeaderText("Order Status").Template("#columnTemplate").Width("200").Add();
-}).QueryCellInfo("initializeRadioButtons").Render()
-
-<script type="text/x-template" id="columnTemplate">
- <div style="display: flex; flex-direction: column; align-items: start; gap: 5px;">
- <input type='radio' class='order-status-radio' data-status='Pending' />
- <input type='radio' class='order-status-radio' data-status='Confirmed' />
- <input type='radio' class='order-status-radio' data-status='Shipped' />
- <input type='radio' class='order-status-radio' data-status='Cancelled' />
- </div>
-</script>
-
-<script>
- function initializeRadioButtons(args) {
- if (args.column.field === 'OrderStatus') {
- let orderStatus = args.data['OrderStatus']; // Get current row status.
- let radioButtons = args.cell.querySelectorAll('.order-status-radio');
- radioButtons.forEach((radio) => {
- let status = radio.getAttribute('data-status');
- let radioButton = new ej.buttons.RadioButton({
- label: status,
- name: `orderStatus-${args.data['OrderID']}`, // Unique name per row.
- checked: status === orderStatus
- });
- radioButton.appendTo(radio);
- });
- }
- }
-</script>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/column-template-radiobutton/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/columns/column-template-radiobutton/tagHelper
deleted file mode 100644
index f7965e8f59..0000000000
--- a/ej2-asp-core-mvc/code-snippet/grid/columns/column-template-radiobutton/tagHelper
+++ /dev/null
@@ -1,41 +0,0 @@
-@page
-@model IndexModel
-@{
- ViewData["Title"] = "Home page";
-}
-<ejs-grid id="grid" dataSource="@ViewBag.dataSource" height="312px" queryCellInfo="initializeRadioButtons">
- <e-grid-columns>
- <e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" width="120"></e-grid-column>
- <e-grid-column field="CustomerID" headerText="Customer ID" width="150"></e-grid-column>
- <e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" width="120"></e-grid-column>
- <e-grid-column field="OrderDate" headerText="Order Date" format="yMd" width="150"></e-grid-column>
- <e-grid-column field="OrderStatus" headerText="Order Status" template="#columnTemplate" width="200"></e-grid-column>
- </e-grid-columns>
-</ejs-grid>
-
-<script type="text/x-template" id="columnTemplate">
- <div style="display: flex; flex-direction: column; align-items: start; gap: 5px;">
- <input type='radio' class='order-status-radio' data-status='Pending' />
- <input type='radio' class='order-status-radio' data-status='Confirmed' />
- <input type='radio' class='order-status-radio' data-status='Shipped' />
- <input type='radio' class='order-status-radio' data-status='Cancelled' />
- </div>
-</script>
-
-<script>
- function initializeRadioButtons(args) {
- if (args.column.field === 'OrderStatus') {
- let orderStatus = args.data['OrderStatus']; // Get current row status.
- let radioButtons = args.cell.querySelectorAll('.order-status-radio');
- radioButtons.forEach((radio) => {
- let status = radio.getAttribute('data-status');
- let radioButton = new ej.buttons.RadioButton({
- label: status,
- name: `orderStatus-${args.data['OrderID']}`, // Unique name per row.
- checked: status === orderStatus
- });
- radioButton.appendTo(radio);
- });
- }
- }
-</script>
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/foreignkey-columntemplate/EmployeeDetails.cs b/ej2-asp-core-mvc/code-snippet/grid/columns/foreignkey-columntemplate/EmployeeDetails.cs
deleted file mode 100644
index f1a3faeb2d..0000000000
--- a/ej2-asp-core-mvc/code-snippet/grid/columns/foreignkey-columntemplate/EmployeeDetails.cs
+++ /dev/null
@@ -1,71 +0,0 @@
-using System;
-using System.Collections.Generic;
-using System.Linq;
-using System.Web;
-
-namespace GridSample.Models
-{
- public class EmployeeDetails
- {
- public EmployeeDetails()
- {
-
- }
- public EmployeeDetails(int EmployeeID, string FirstName, string LastName, string Title, DateTime BirthDate, DateTime HireDate, int ReportsTo, string Address, string PostalCode, string Phone, string City, string Country)
- {
- this.EmployeeID = EmployeeID;
- this.FirstName = FirstName;
- this.LastName = LastName;
- this.Title = Title;
- this.BirthDate = BirthDate;
- this.HireDate = HireDate;
- this.ReportsTo = ReportsTo;
- this.Address = Address;
- this.PostalCode = PostalCode;
- this.Phone = Phone;
- this.City = City;
- this.Country = Country;
- }
- public int EmployeeID { get; set; }
- public string FirstName { get; set; }
- public string LastName { get; set; }
- public string Title { get; set; }
- public DateTime BirthDate { get; set; }
- public DateTime HireDate { get; set; }
- public int ReportsTo { get; set; }
- public string Address { get; set; }
- public string PostalCode { get; set; }
- public string Phone { get; set; }
- public string City { get; set; }
- public string Country { get; set; }
- public static List<EmployeeDetails> GetAllRecords()
- {
- List<EmployeeDetails> Emp = new List<Models.EmployeeDetails>();
- Emp.Add(new EmployeeDetails(1, "Nancy", "Davolio", "Sales Representative", new DateTime(1948, 12, 08), new DateTime(1992, 05, 01), 2, "507 - 20th Ave. E.Apt. 2A ", " 98122", "(206) 555-9857 ", "Seattle ", "USA"));
- Emp.Add(new EmployeeDetails(2, "Andrew", "Fuller", "Vice President, Sales", new DateTime(1952, 02, 19), new DateTime(1992, 08, 14), 4, "908 W. Capital Way", "98401 ", "(206) 555-9482 ", "Kirkland ", "USA"));
- Emp.Add(new EmployeeDetails(3, "Janet", "Leverling", "Sales Representative", new DateTime(1963, 08, 30), new DateTime(1992, 04, 01), 3, " 4110 Old Redmond Rd.", "98052 ", "(206) 555-8122", "Redmond ", "USA "));
- Emp.Add(new EmployeeDetails(4, "Margaret", "Peacock", "Sales Representative", new DateTime(1937, 09, 19), new DateTime(1993, 05, 03), 6, "14 Garrett Hill ", "SW1 8JR ", "(71) 555-4848 ", "London ", "UK "));
- Emp.Add(new EmployeeDetails(5, "Steven", "Buchanan", "Sales Manager", new DateTime(1955, 03, 04), new DateTime(1993, 10, 17), 8, "Coventry HouseMiner Rd. ", "EC2 7JR ", " (206) 555-8122", "Tacoma ", " USA"));
- Emp.Add(new EmployeeDetails(6, "Michael", "Suyama", "Sales Representative", new DateTime(1963, 07, 02), new DateTime(1993, 10, 17), 2, " 7 Houndstooth Rd.", " WG2 7LT", "(71) 555-4444 ", "London ", "UK "));
- Emp.Add(new EmployeeDetails(7, "Robert", "King", "Sales Representative", new DateTime(1960, 05, 29), new DateTime(1994, 01, 02), 7, "Edgeham HollowWinchester Way ", "RG1 9SP ", "(71) 555-5598 ", "London ", " UK"));
- Emp.Add(new EmployeeDetails(8, "Laura", "Callahan", "Inside Sales Coordinator", new DateTime(1958, 01, 09), new DateTime(1994, 03, 05), 9, "722 Moss Bay Blvd. ", "98033 ", " (206) 555-3412", "Seattle ", "USA "));
- Emp.Add(new EmployeeDetails(9, "Anne", "Dodsworth", "Sales Representative", new DateTime(1966, 01, 27), new DateTime(1994, 11, 15), 5, "4726 - 11th Ave. N.E. ", "98105 ", "(71) 555-5598 ", " London", "UK "));
- Emp.Add(new EmployeeDetails(10, "Albert", "Hellstrom", "Sales Manager", new DateTime(1956, 11, 13), new DateTime(1995, 01, 22), 3, "15 Maple Avenue", "11357", "(206) 555-1122", "Queens", "USA"));
- Emp.Add(new EmployeeDetails(11, "Emma", "Jenkins", "Marketing Specialist", new DateTime(1972, 04, 15), new DateTime(1996, 07, 12), 4, "22 Willow Drive", "90210", "(213) 555-1212", "Beverly Hills", "USA"));
- Emp.Add(new EmployeeDetails(12, "Samuel", "Green", "Product Manager", new DateTime(1980, 06, 24), new DateTime(1998, 09, 10), 6, "87 Elm Street", "60657", "(312) 555-9876", "Chicago", "USA"));
- Emp.Add(new EmployeeDetails(13, "Sophia", "Brown", "Regional Manager", new DateTime(1968, 02, 10), new DateTime(1997, 03, 14), 7, "245 Oak Lane", "33101", "(305) 555-2233", "Miami", "USA"));
- Emp.Add(new EmployeeDetails(14, "Liam", "Parker", "HR Specialist", new DateTime(1975, 09, 12), new DateTime(1999, 11, 18), 2, "19 Cedar Blvd", "78201", "(210) 555-3344", "San Antonio", "USA"));
- Emp.Add(new EmployeeDetails(15, "Olivia", "Evans", "Sales Representative", new DateTime(1985, 03, 08), new DateTime(2001, 05, 09), 5, "67 Birch Road", "94123", "(415) 555-5566", "San Francisco", "USA"));
- Emp.Add(new EmployeeDetails(16, "James", "Taylor", "Technical Lead", new DateTime(1979, 08, 20), new DateTime(2000, 02, 12), 8, "110 Maple Ave", "75201", "(214) 555-6677", "Dallas", "USA"));
- Emp.Add(new EmployeeDetails(17, "Mia", "Clark", "Sales Coordinator", new DateTime(1990, 07, 11), new DateTime(2010, 06, 15), 9, "902 Pine Street", "10001", "(212) 555-7788", "New York", "USA"));
- Emp.Add(new EmployeeDetails(18, "Benjamin", "Walker", "Accountant", new DateTime(1983, 11, 25), new DateTime(2005, 09, 21), 3, "35 Spruce Lane", "80203", "(303) 555-8899", "Denver", "USA"));
- Emp.Add(new EmployeeDetails(19, "Charlotte", "Harris", "Chief Financial Officer", new DateTime(1971, 12, 05), new DateTime(1996, 10, 29), 10, "888 Elm Drive", "98101", "(206) 555-9900", "Seattle", "USA"));
- Emp.Add(new EmployeeDetails(20, "Alexander", "Scott", "Software Engineer", new DateTime(1992, 05, 03), new DateTime(2018, 07, 17), 1, "12 Aspen Lane", "02139", "(617) 555-1020", "Cambridge", "USA"));
- Emp.Add(new EmployeeDetails(21, "Evelyn", "Mitchell", "Marketing Manager", new DateTime(1988, 10, 19), new DateTime(2012, 04, 11), 6, "24 Fir Avenue", "85001", "(602) 555-2031", "Phoenix", "USA"));
- Emp.Add(new EmployeeDetails(22, "Daniel", "Perez", "UX Designer", new DateTime(1991, 02, 14), new DateTime(2015, 08, 05), 2, "75 Walnut Drive", "30301", "(404) 555-3042", "Atlanta", "USA"));
- Emp.Add(new EmployeeDetails(23, "Grace", "Diaz", "Operations Manager", new DateTime(1984, 12, 27), new DateTime(2008, 03, 19), 7, "33 Chestnut St", "78250", "(210) 555-4053", "San Antonio", "USA"));
- Emp.Add(new EmployeeDetails(24, "Matthew", "Brooks", "Content Strategist", new DateTime(1986, 07, 15), new DateTime(2010, 09, 25), 4, "41 Maple Way", "90001", "(213) 555-5064", "Los Angeles", "USA"));
- return Emp;
- }
- }
-}
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/foreignkey-columntemplate/OrdersDetails.cs b/ej2-asp-core-mvc/code-snippet/grid/columns/foreignkey-columntemplate/OrdersDetails.cs
deleted file mode 100644
index 6a5ab5d499..0000000000
--- a/ej2-asp-core-mvc/code-snippet/grid/columns/foreignkey-columntemplate/OrdersDetails.cs
+++ /dev/null
@@ -1,61 +0,0 @@
-using System.ComponentModel.DataAnnotations;
-namespace GridSample.Models
-{
- public class OrdersDetails
- {
- public static List<OrdersDetails> order = new List<OrdersDetails>();
-
- public OrdersDetails() { }
-
- public OrdersDetails(
- int OrderID, string CustomerId, int EmployeeId, double Freight, bool Verified,
- DateTime OrderDate, string ShipCity, string ShipName, string ShipCountry,
- DateTime ShippedDate, string ShipAddress, string OrderStatus)
- {
- this.OrderID = OrderID;
- this.CustomerID = CustomerId;
- this.EmployeeID = EmployeeId;
- this.Freight = Freight;
- this.ShipCity = ShipCity;
- this.Verified = Verified;
- this.OrderDate = OrderDate;
- this.ShipName = ShipName;
- this.ShipCountry = ShipCountry;
- this.ShippedDate = ShippedDate;
- this.ShipAddress = ShipAddress;
- this.OrderStatus = OrderStatus;
- }
-
- public static List<OrdersDetails> GetAllRecords()
- {
- if (order.Count == 0)
- {
- int code = 10000;
- for (int i = 1; i < 10; i++)
- {
- order.Add(new OrdersDetails(code + 1, "ALFKI", i + 0, 2.3 * i, false, new DateTime(1991, 05, 15), "Berlin", "Simons bistro", "Denmark", new DateTime(1996, 7, 16), "Kirchgasse 6", "Pending"));
- order.Add(new OrdersDetails(code + 2, "ANATR", i + 2, 3.3 * i, true, new DateTime(1990, 04, 04), "Madrid", "Queen Cozinha", "Brazil", new DateTime(1996, 9, 11), "Avda. Azteca 123", "Confirmed"));
- order.Add(new OrdersDetails(code + 3, "ANTON", i + 1, 4.3 * i, true, new DateTime(1957, 11, 30), "Cholchester", "Frankenversand", "Germany", new DateTime(1996, 10, 7), "Carrera 52 con Ave. Bolívar #65-98 Llano Largo", "Shipped"));
- order.Add(new OrdersDetails(code + 4, "BLONP", i + 3, 5.3 * i, false, new DateTime(1930, 10, 22), "Marseille", "Ernst Handel", "Austria", new DateTime(1996, 12, 30), "Magazinweg 7", "Cancelled"));
- order.Add(new OrdersDetails(code + 5, "BOLID", i + 4, 6.3 * i, true, new DateTime(1953, 02, 18), "Tsawassen", "Hanari Carnes", "Switzerland", new DateTime(1997, 12, 3), "1029 - 12th Ave. S.", "Confirmed"));
- code += 5;
- }
- }
- return order;
- }
-
- [Key]
- public int OrderID { get; set; }
- public string CustomerID { get; set; }
- public int? EmployeeID { get; set; }
- public double Freight { get; set; }
- public string ShipCity { get; set; }
- public bool Verified { get; set; }
- public DateTime OrderDate { get; set; }
- public string ShipName { get; set; }
- public string ShipCountry { get; set; }
- public DateTime ShippedDate { get; set; }
- public string ShipAddress { get; set; }
- public string OrderStatus { get; set; }
- }
-}
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/foreignkey-columntemplate/foreignkey-columntemplate.cs b/ej2-asp-core-mvc/code-snippet/grid/columns/foreignkey-columntemplate/foreignkey-columntemplate.cs
deleted file mode 100644
index 26d54f6cf4..0000000000
--- a/ej2-asp-core-mvc/code-snippet/grid/columns/foreignkey-columntemplate/foreignkey-columntemplate.cs
+++ /dev/null
@@ -1,6 +0,0 @@
-public IActionResult Index()
-{
- ViewBag.dataSource = OrdersDetails.GetAllRecords();
- ViewBag.foreignData = EmployeeDetails.GetAllRecords();
- return View();
-}
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/foreignkey-columntemplate/razor b/ej2-asp-core-mvc/code-snippet/grid/columns/foreignkey-columntemplate/razor
deleted file mode 100644
index 6e82ba1055..0000000000
--- a/ej2-asp-core-mvc/code-snippet/grid/columns/foreignkey-columntemplate/razor
+++ /dev/null
@@ -1,40 +0,0 @@
-@{
- ViewBag.Title = "Home Page";
-}
-
-@using Syncfusion.EJ2
-
-@Html.EJS().Grid("grid").DataSource((IEnumerable<object>)ViewBag.dataSource).Height("348px").Columns(col =>
-{
- col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); col.Field("EmployeeID").ForeignKeyValue("FirstName").DataSource((IEnumerable<object>)ViewBag.foreignData).HeaderText("Employee Name").Width("150").Template("#columnTemplate").Add();
- col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").EditType("numericedit").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
- col.Field("ShipName").HeaderText("Ship Name").Width("150").Add();
- col.Field("ShipCity").HeaderText("Ship City").EditType("dropdownedit").Width("150").Add();
-}).QueryCellInfo("navToAccount").Render()
-
-<script type="text/x-template" id="columnTemplate">
- <div>
- <a href="javascript:void(0)">${foreignKeyData.FirstName}</a>
- </div>
-</script>
-<script>
-function navToAccount(args) {
- if (args.column.field === "EmployeeID" && args.data) {
- const anchor = args.cell.querySelector("a");
- if (anchor) {
- const accountId = args.data.OrderID; // Get the actual ID field.
- anchor.href = `../Account/AccountDetail.cshtml?custid=0&accountId=${accountId}`;
-
- // Prevent default navigation and use history push.
- anchor.addEventListener("click", (event) => {
- event.preventDefault();
- window.history.pushState(
- '',
- 'changed',
- `../Account/AccountDetail.cshtml?custid=0&accountId=${accountId}`
- );
- });
- }
- }
-}
-</script>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/foreignkey-columntemplate/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/columns/foreignkey-columntemplate/tagHelper
deleted file mode 100644
index 6d230328dd..0000000000
--- a/ej2-asp-core-mvc/code-snippet/grid/columns/foreignkey-columntemplate/tagHelper
+++ /dev/null
@@ -1,39 +0,0 @@
-@page
-@model IndexModel
-@{
- ViewData["Title"] = "Home page";
-}
-<ejs-grid id="grid" dataSource="@ViewBag.dataSource" height="348px" queryCellInfo="navToAccount">
- <e-grid-columns>
- <e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" width="120"></e-grid-column>
- <e-grid-column field="EmployeeID" headerText="Employee Name" foreignKeyValue="FirstName" template="#columnTemplate" dataSource="ViewBag.foreignData" width="150"></e-grid-column>
- <e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" width="120"></e-grid-column>
- <e-grid-column field="ShipName" headerText="Ship Name" width="150"></e-grid-column>
- <e-grid-column field="ShipCity" headerText="Ship City" width="150"></e-grid-column>
- </e-grid-columns>
-</ejs-grid>
-<script type="text/x-template" id="columnTemplate">
- <div>
- <a href="javascript:void(0)">${foreignKeyData.FirstName}</a>
- </div>
-</script>
-<script>
-function navToAccount(args) {
- if (args.column.field === "EmployeeID" && args.data) {
- const anchor = args.cell.querySelector("a");
- if (anchor) {
- const accountId = args.data.OrderID; // Get the actual ID field.
- anchor.href = `../Account/AccountDetail.cshtml?custid=0&accountId=${accountId}`;
- // Prevent default navigation and use history push.
- anchor.addEventListener("click", (event) => {
- event.preventDefault();
- window.history.pushState(
- '',
- 'changed',
- `../Account/AccountDetail.cshtml?custid=0&accountId=${accountId}`
- );
- });
- }
- }
-}
-</script>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/data-binding/localtime/localtime.cs b/ej2-asp-core-mvc/code-snippet/grid/data-binding/localtime/localtime.cs
new file mode 100644
index 0000000000..de14d12ac1
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/data-binding/localtime/localtime.cs
@@ -0,0 +1,40 @@
+ public IActionResult Index()
+ {
+ // Timezone List for Dropdown.
+ List<TimeZoneData> timeZones = new List<TimeZoneData>
+ {
+ new TimeZoneData { Value = -12, Text = "-12:00 UTC" },
+ new TimeZoneData { Value = -11, Text = "-11:00 UTC" },
+ new TimeZoneData { Value = -10, Text = "-10:00 UTC" },
+ new TimeZoneData { Value = -9, Text = "-09:00 UTC" },
+ new TimeZoneData { Value = -8, Text = "-08:00 UTC" },
+ new TimeZoneData { Value = -7, Text = "-07:00 UTC" },
+ new TimeZoneData { Value = -6, Text = "-06:00 UTC" },
+ new TimeZoneData { Value = -5, Text = "-05:00 UTC" },
+ new TimeZoneData { Value = -4, Text = "-04:00 UTC" },
+ new TimeZoneData { Value = -3, Text = "-03:00 UTC" },
+ new TimeZoneData { Value = -2, Text = "-02:00 UTC" },
+ new TimeZoneData { Value = -1, Text = "-01:00 UTC" },
+ new TimeZoneData { Value = 0, Text = "+00:00 UTC" },
+ new TimeZoneData { Value = 1, Text = "+01:00 UTC" },
+ new TimeZoneData { Value = 2, Text = "+02:00 UTC" },
+ new TimeZoneData { Value = 3, Text = "+03:00 UTC" },
+ new TimeZoneData { Value = 4, Text = "+04:00 UTC" },
+ new TimeZoneData { Value = 5, Text = "+05:00 UTC" },
+ new TimeZoneData { Value = 5.5, Text = "+05:30 UTC" },
+ new TimeZoneData { Value = 6, Text = "+06:00 UTC" },
+ new TimeZoneData { Value = 7, Text = "+07:00 UTC" },
+ new TimeZoneData { Value = 8, Text = "+08:00 UTC" },
+ new TimeZoneData { Value = 9, Text = "+09:00 UTC" },
+ new TimeZoneData { Value = 10, Text = "+10:00 UTC" },
+ new TimeZoneData { Value = 11, Text = "+11:00 UTC" },
+ new TimeZoneData { Value = 12, Text = "+12:00 UTC" },
+ new TimeZoneData { Value = 13, Text = "+13:00 UTC" },
+ new TimeZoneData { Value = 14, Text = "+14:00 UTC" }
+ };
+
+ ViewBag.TimeZones = timeZones;
+ return View();
+ }
+
+
diff --git a/ej2-asp-core-mvc/code-snippet/grid/data-binding/localtime/razor b/ej2-asp-core-mvc/code-snippet/grid/data-binding/localtime/razor
new file mode 100644
index 0000000000..f5845a5ddb
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/data-binding/localtime/razor
@@ -0,0 +1,59 @@
+@{
+ ViewBag.Title = "Syncfusion Grid with Timezone Selection";
+}
+
+@using Syncfusion.EJ2
+
+<div style="display: flex; align-items: center; margin-bottom: 10px;" >
+ <label style="margin-right: 10px">Select Timezone:</label>
+ @Html.EJS().DropDownList("timezone").DataSource((IEnumerable < object >)ViewBag.TimeZones).Fields(new Syncfusion.EJ2.DropDowns.DropDownListFieldSettings { Value = "Value", Text = "Text" }).Index(0).Width("200px").Change("onTimezoneChange").Render()
+</div >
+<div style="margin-bottom: 20px;">
+ @Html.EJS().CheckBox("timezoneCheckbox").Label("Prevent Timezone Conversion").Change("onCheckboxChange").Render()
+</div>
+<div>
+ @*Replace xxxx with your actual port number.*@
+ @Html.EJS().Grid("Grid").DataSource(dm => dm.Url("https://localhost:****/api/orders").Adaptor("WebApiAdaptor")).AllowPaging().Columns(col =>
+ {
+ col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).IsPrimaryKey(true).Add();
+ col.Field("CustomerID").HeaderText("Customer ID").Width("140").Add();
+ col.Field("ShipCity").HeaderText("Ship City").Width("140").Add();
+ col.Field("ShipCountry").HeaderText("Ship Country").Width("140").Add();
+ col.Field("OrderDate").HeaderText("Order Date").Width("140").Format("dd/MM/yyyy HH:mm").Add();
+ }).Load("load").Render()
+</div>
+
+<script>
+ var selectedTimezone = -12;
+ var checkbox;
+ var grid;
+ function load() {
+ checkbox = document.getElementById("timezoneCheckbox")?.ej2_instances?.[0];
+ grid = document.getElementById("Grid")?.ej2_instances?.[0];
+ ej.data.DataUtil.serverTimezoneOffset = checkbox.checked ? 0 : selectedTimezone;
+ }
+ function onTimezoneChange(event) {
+ selectedTimezone = Number(event.value);
+ ej.data.DataUtil.serverTimezoneOffset = checkbox.checked ? 0 : selectedTimezone;
+ grid.setProperties({
+ dataSource: new ej.data.DataManager({
+ url: "https://localhost:****/api/orders", // Replace **** with your actual port number.
+ adaptor: new ej.data.WebApiAdaptor(),
+ crossDomain: true
+ })
+ });
+ grid.refresh();
+ }
+
+ function onCheckboxChange(event) {
+ ej.data.DataUtil.serverTimezoneOffset = checkbox.checked ? 0 : selectedTimezone;
+ grid.setProperties({
+ dataSource: new ej.data.DataManager({
+ url: "https://localhost:****/api/orders", // Replace **** with your actual port number.
+ adaptor: new ej.data.WebApiAdaptor(),
+ crossDomain: true
+ })
+ });
+ grid.refresh();
+ }
+</script>
diff --git a/ej2-asp-core-mvc/code-snippet/grid/data-binding/localtime/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/data-binding/localtime/tagHelper
new file mode 100644
index 0000000000..f3ae8e164f
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/grid/data-binding/localtime/tagHelper
@@ -0,0 +1,58 @@
+@page
+@model IndexModel
+@{
+ var timeZoneList = ViewBag.TimeZones;
+}
+<div style="display: flex; align-items: center; margin-bottom: 10px;">
+ <label style="margin-right: 10px">Select Timezone:</label>
+ <ejs-dropdownlist id="timezone" dataSource="@timeZoneList" fields="@(new Syncfusion.EJ2.DropDowns.DropDownListFieldSettings { Text = "Text", Value = "Value" })" placeholder="Select a Timezone" popupHeight="220px" width="200px" change="onTimezoneChange"></ejs-dropdownlist>
+</div>
+<div style="margin-bottom: 20px;">
+ <ejs-checkbox type="checkbox" id="timezoneCheckbox" label="Prevent Timezone Conversion" onchange="onCheckboxChange"></ejs-checkbox>
+</div>
+<ejs-grid id="Grid" load="load" height="314" allowPaging="true">
+ @* Replace **** with your actual port number. *@
+ <e-data-manager url="https://localhost:****/api/Grid" adaptor="WebApiAdaptor"></e-data-manager>
+ <e-grid-columns>
+ <e-grid-column field="OrderID" headerText="Order ID" width="120" textAlign="Right" isPrimaryKey="true"></e-grid-column>
+ <e-grid-column field="CustomerID" headerText="Customer ID" width="160"></e-grid-column>
+ <e-grid-column field="Freight" headerText="Freight" format="C2" width="150"></e-grid-column>
+ <e-grid-column field="OrderDate" headerText="Order Date" format="dd/MM/yyyy HH:mm" width="150"></e-grid-column>
+ </e-grid-columns>
+</ejs-grid>
+
+<script>
+var selectedTimezone = -12;
+var checkbox;
+var grid;
+
+function load() {
+ checkbox = document.getElementById("timezoneCheckbox")?.ej2_instances?.[0];
+ grid = document.getElementById("Grid")?.ej2_instances?.[0];
+ ej.data.DataUtil.serverTimezoneOffset = checkbox.checked ? 0 : selectedTimezone;
+}
+
+function onTimezoneChange(event) {
+ selectedTimezone = Number(event.value);
+ updateTimezoneOffset();
+}
+
+function onCheckboxChange() {
+ if (!checkbox) {
+ checkbox = document.getElementById("timezoneCheckbox")?.ej2_instances?.[0];
+ }
+ updateTimezoneOffset();
+}
+
+function updateTimezoneOffset() {
+ ej.data.DataUtil.serverTimezoneOffset = checkbox.checked ? 0 : selectedTimezone;
+ grid.setProperties({
+ dataSource: new ej.data.DataManager({
+ url: "https://localhost:****/api/Grid", // Replace **** with your actual port number.
+ adaptor: new ej.data.WebApiAdaptor(),
+ crossDomain: true
+ })
+ });
+ grid.refresh();
+}
+</script>
diff --git a/ej2-asp-core-mvc/code-snippet/grid/excel-export/excelexport-show-hide/excel-export.cs b/ej2-asp-core-mvc/code-snippet/grid/excel-export/excelexport-show-hide/excel-export.cs
deleted file mode 100644
index 904bc61acc..0000000000
--- a/ej2-asp-core-mvc/code-snippet/grid/excel-export/excelexport-show-hide/excel-export.cs
+++ /dev/null
@@ -1,5 +0,0 @@
-public ActionResult Index()
-{
- ViewBag.dataSource = OrdersDetails.GetAllRecords();
- return View();
-}
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/excel-export/excelexport-show-hide/razor b/ej2-asp-core-mvc/code-snippet/grid/excel-export/excelexport-show-hide/razor
deleted file mode 100644
index dbfb11ba6d..0000000000
--- a/ej2-asp-core-mvc/code-snippet/grid/excel-export/excelexport-show-hide/razor
+++ /dev/null
@@ -1,33 +0,0 @@
-@Html.EJS().Grid("grid").DataSource((IEnumerable<object>)ViewBag.dataSource).Height("348px").AllowExcelExport().ToolbarClick("toolbarClick").ExcelExportComplete("excelExportComplete").Columns(col =>
-{
- col.Field("OrderID").HeaderText("Order ID").Width("120").IsPrimaryKey(true).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
- col.Field("CustomerID").HeaderText("Customer ID").Width("150").Visible(false).Add();
- col.HeaderText("Order Details").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Center).Columns(orderCol =>
- {
- orderCol.Field("OrderDate").HeaderText("Order Date").Width("130").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Format("yMd").Add();
- orderCol.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
- }).Add();
- col.HeaderText("Ship Details").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Center).Columns(shipCol =>
- {
- shipCol.Field("ShippedDate").HeaderText("Shipped Date").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Format("yMd").Add();
- shipCol.Field("ShipCountry").HeaderText("Ship Country").Width("120").Add();
- shipCol.Field("ShipName").HeaderText("Ship Name").Width("150").Visible(false).Add();
- }).Add();
-}).Toolbar(new List<string>() { "ExcelExport" }).Render()
-
-<script>
- function toolbarClick(args) {
- var grid = document.getElementById("grid").ej2_instances[0];
- if (args.item.id === 'grid_excelexport') {
- grid.columns[2].columns[0].visible = false;
- grid.columns[3].columns[2].visible = true;
- grid.excelExport();
- }
- }
-
- function excelExportComplete() {
- var grid = document.getElementById("grid").ej2_instances[0];
- grid.columns[2].columns[0].visible = true;
- grid.columns[3].columns[2].visible = false;
- }
-</script>
diff --git a/ej2-asp-core-mvc/code-snippet/grid/excel-export/excelexport-show-hide/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/excel-export/excelexport-show-hide/tagHelper
deleted file mode 100644
index a61dc58ca3..0000000000
--- a/ej2-asp-core-mvc/code-snippet/grid/excel-export/excelexport-show-hide/tagHelper
+++ /dev/null
@@ -1,39 +0,0 @@
-@page
-@model IndexModel
-@{
- ViewData["Title"] = "Home page";
-}
-
-<ejs-grid id="grid" dataSource="@ViewBag.dataSource" allowExcelExport="true" height="348px" toolbarClick="toolbarClick" excelExportComplete="excelExportComplete" toolbar="@(new List<string>() { "ExcelExport" })">
- <e-grid-columns>
- <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="120"></e-grid-column>
- <e-grid-column field="CustomerID" headerText="Customer ID" width="150" visible="false"></e-grid-column>
- <e-grid-column headerText="Order Details" textAlign="Center" columns="@( new List<Syncfusion.EJ2.Grids.GridColumn>() {
- new Syncfusion.EJ2.Grids.GridColumn { Field = "OrderDate", Width = "130", HeaderText = "Order Date", Format="yMd", TextAlign= Syncfusion.EJ2.Grids.TextAlign.Right },
- new Syncfusion.EJ2.Grids.GridColumn { Field = "Freight", Width = "120", HeaderText = "Freight", Format="C2", TextAlign= Syncfusion.EJ2.Grids.TextAlign.Right }
- })">
- </e-grid-column>
- <e-grid-column headerText="Ship Details" textAlign="Center" columns="@( new List<Syncfusion.EJ2.Grids.GridColumn>() {
- new Syncfusion.EJ2.Grids.GridColumn { Field = "ShippedDate", Width = "120", HeaderText = "Shipped Date", TextAlign=Syncfusion.EJ2.Grids.TextAlign.Right, Format="yMd" },
- new Syncfusion.EJ2.Grids.GridColumn { Field = "ShipCountry", Width = "120", HeaderText = "Ship Country" },
- new Syncfusion.EJ2.Grids.GridColumn { Field = "ShipName", Width = "150", HeaderText = "Ship Name", Visible = false }
- })">
- </e-grid-column>
- </e-grid-columns>
-</ejs-grid>
-<script>
- function toolbarClick(args) {
- var grid = document.getElementById("grid").ej2_instances[0];
- if (args.item.id === 'grid_excelexport') {
- grid.columns[2].columns[0].visible = false;
- grid.columns[3].columns[2].visible = true;
- grid.excelExport();
- }
- }
-
- function excelExportComplete() {
- var grid = document.getElementById("grid").ej2_instances[0];
- grid.columns[2].columns[0].visible = true;
- grid.columns[3].columns[2].visible = false;
- }
-</script>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/filtering/enum-filtering/filter.cs b/ej2-asp-core-mvc/code-snippet/grid/filtering/enum-filtering/filter.cs
deleted file mode 100644
index 2d2069cacc..0000000000
--- a/ej2-asp-core-mvc/code-snippet/grid/filtering/enum-filtering/filter.cs
+++ /dev/null
@@ -1,5 +0,0 @@
-public IActionResult Index()
-{
- ViewBag.dataSource = OrderDetails.GetAllRecords();
- return View();
-}
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/filtering/enum-filtering/razor b/ej2-asp-core-mvc/code-snippet/grid/filtering/enum-filtering/razor
deleted file mode 100644
index 02ad19a91c..0000000000
--- a/ej2-asp-core-mvc/code-snippet/grid/filtering/enum-filtering/razor
+++ /dev/null
@@ -1,50 +0,0 @@
-@using Syncfusion.EJ2
-
-@{
- var filterBarTemplate = new { create = "dropDownCreate", write = "dropDownWrite" };
-}
-@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.dataSource).AllowFiltering().Height("273px").Columns(col =>
-{
- col.Field("OrderID").HeaderText("Order ID").Width("100").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).IsPrimaryKey(true).Add();
- col.Field("CustomerID").HeaderText("Customer ID").Width("120").Add();
- col.Field("ShipCity").HeaderText("Ship City").Width("100").Add();
- col.Field("ShipName").HeaderText("Ship Name").Width("100").Add();
- col.Field("TypeText").HeaderText("File Type").Width("170").FilterBarTemplate(filterBarTemplate).Add();
-}).Render()
-
-<script>
- var dropDown;
- var filterDropData = [
- { Type: 'All' },
- { Type: 'Base' },
- { Type: 'Replace' },
- { Type: 'Delta' }
- ];
-
- function dropDownCreate() {
- dropDown = document.createElement('select');
- dropDown.id = 'TypeFilter';
- filterDropData.forEach((item) => {
- var option = document.createElement('option');
- option.value = item.Type;
- option.innerText = item.Type;
- dropDown.appendChild(option);
- });
- return dropDown;
- }
-
- function dropDownWrite() {
- var dropDownList = new ej.dropdowns.DropDownList({
- change: function (args) {
- var grid = document.getElementById("Grid").ej2_instances[0];
- if (args.value !== 'All') {
- grid.filterByColumn('TypeText', 'equal', args.value);
- } else {
- grid.removeFilteredColsByField('TypeText');
- }
- }
- });
-
- dropDownList.appendTo('#TypeFilter');
- }
-</script>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/filtering/enum-filtering/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/filtering/enum-filtering/tagHelper
deleted file mode 100644
index 5278c3187b..0000000000
--- a/ej2-asp-core-mvc/code-snippet/grid/filtering/enum-filtering/tagHelper
+++ /dev/null
@@ -1,56 +0,0 @@
-@page
-@model IndexModel
-@{
- ViewData["Title"] = "Home page";
-}
-@using Newtonsoft.Json;
-
-@{
- var filterBarTemplate = new { create = "dropDownCreate", write = "dropDownWrite" };
-}
-
-<ejs-grid id="grid" dataSource="@ViewBag.dataSource" allowFiltering="true" height="273px">
- <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="ShipCity" headerText="Ship City" width="100"></e-grid-column>
- <e-grid-column field="ShipName" headerText="Ship Name" width="100"></e-grid-column>
- <e-grid-column field="TypeText" headerText="File Type" width="170" filterBarTemplate=filterBarTemplate></e-grid-column>
- </e-grid-columns>
-</ejs-grid>
-
-<script>
- var dropDown;
- var filterDropData = [
- { Type: 'All' },
- { Type: 'Base' },
- { Type: 'Replace' },
- { Type: 'Delta' }
- ];
-
- function dropDownCreate() {
- dropDown = document.createElement('select');
- dropDown.id = 'TypeFilter';
- filterDropData.forEach((item) => {
- var option = document.createElement('option');
- option.value = item.Type;
- option.innerText = item.Type;
- dropDown.appendChild(option);
- });
- return dropDown;
- }
-
- function dropDownWrite() {
- var dropDownList = new ej.dropdowns.DropDownList({
- change: function (args) {
- var grid = document.getElementById("grid").ej2_instances[0];
- if (args.value !== 'All') {
- grid.filterByColumn('TypeText', 'equal', args.value);
- } else {
- grid.removeFilteredColsByField('TypeText');
- }
- }
- });
- dropDownList.appendTo(dropDown);
- }
-</script>
diff --git a/ej2-asp-core-mvc/code-snippet/grid/pdf-export/pdfexport-show-hide/pdf-export.cs b/ej2-asp-core-mvc/code-snippet/grid/pdf-export/pdfexport-show-hide/pdf-export.cs
deleted file mode 100644
index 904bc61acc..0000000000
--- a/ej2-asp-core-mvc/code-snippet/grid/pdf-export/pdfexport-show-hide/pdf-export.cs
+++ /dev/null
@@ -1,5 +0,0 @@
-public ActionResult Index()
-{
- ViewBag.dataSource = OrdersDetails.GetAllRecords();
- return View();
-}
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/pdf-export/pdfexport-show-hide/razor b/ej2-asp-core-mvc/code-snippet/grid/pdf-export/pdfexport-show-hide/razor
deleted file mode 100644
index c7310d588a..0000000000
--- a/ej2-asp-core-mvc/code-snippet/grid/pdf-export/pdfexport-show-hide/razor
+++ /dev/null
@@ -1,32 +0,0 @@
-@Html.EJS().Grid("grid").DataSource((IEnumerable<object>)ViewBag.DataSource).Height("272px").AllowPdfExport(true).ToolbarClick("toolbarClick").PdfExportComplete("pdfExportComplete").Columns(col =>
-{
- col.Field("OrderID").HeaderText("Order ID").Width("120").IsPrimaryKey(true).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
- col.Field("CustomerID").HeaderText("Customer ID").Width("150").Visible(false).Add();
- col.HeaderText("Order Details").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Center).Columns(orderCol =>
- {
- orderCol.Field("OrderDate").HeaderText("Order Date").Width("130").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Format("yMd").Add();
- orderCol.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
- }).Add();
- col.HeaderText("Ship Details").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Center).Columns(shipCol =>
- {
- shipCol.Field("ShippedDate").HeaderText("Shipped Date").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Format("yMd").Add();
- shipCol.Field("ShipCountry").HeaderText("Ship Country").Width("120").Add();
- shipCol.Field("ShipName").HeaderText("Ship Name").Width("150").Visible(false).Add();
- }).Add();
-}).Toolbar(new List<string>() { "PdfExport" }).Render()
-
-<script>
- function toolbarClick(args) {
- var grid = document.getElementById("grid").ej2_instances[0];
- if (args.item.id === 'grid_excelexport') {
- grid.columns[2].columns[0].visible = false;
- grid.columns[3].columns[2].visible = true;
- grid.pdfExport();
- }
- }
- function pdfExportComplete() {
- var grid = document.getElementById("grid").ej2_instances[0];
- grid.columns[2].columns[0].visible = true;
- grid.columns[3].columns[2].visible = false;
- }
-</script>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/grid/pdf-export/pdfexport-show-hide/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/pdf-export/pdfexport-show-hide/tagHelper
deleted file mode 100644
index 06c8a86764..0000000000
--- a/ej2-asp-core-mvc/code-snippet/grid/pdf-export/pdfexport-show-hide/tagHelper
+++ /dev/null
@@ -1,39 +0,0 @@
-@page
-@model IndexModel
-@{
- ViewData["Title"] = "Home page";
-}
-
-<ejs-grid id="grid" dataSource="@ViewBag.DataSource" allowPaging="true" allowPdfExport="true" toolbarClick="toolbarClick" pdfExportComplete="pdfExportComplete" height="272px" toolbar="@(new List<string>() {"PdfExport"})">
- <e-grid-columns>
- <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="120"></e-grid-column>
- <e-grid-column field="CustomerID" headerText="Customer ID" width="150" visible="false"></e-grid-column>
- <e-grid-column headerText="Order Details" textAlign="Center" columns="@( new List<Syncfusion.EJ2.Grids.GridColumn>() {
- new Syncfusion.EJ2.Grids.GridColumn { Field = "OrderDate", Width = "130", HeaderText = "Order Date", Format="yMd", TextAlign= Syncfusion.EJ2.Grids.TextAlign.Right },
- new Syncfusion.EJ2.Grids.GridColumn { Field = "Freight", Width = "120", HeaderText = "Freight", Format="C2", TextAlign= Syncfusion.EJ2.Grids.TextAlign.Right }
- })">
- </e-grid-column>
- <e-grid-column headerText="Ship Details" textAlign="Center" columns="@( new List<Syncfusion.EJ2.Grids.GridColumn>() {
- new Syncfusion.EJ2.Grids.GridColumn { Field = "ShippedDate", Width = "120", HeaderText = "Shipped Date", TextAlign=Syncfusion.EJ2.Grids.TextAlign.Right, Format="yMd" },
- new Syncfusion.EJ2.Grids.GridColumn { Field = "ShipCountry", Width = "120", HeaderText = "Ship Country" },
- new Syncfusion.EJ2.Grids.GridColumn { Field = "ShipName", Width = "150", HeaderText = "Ship Name", Visible = false }
- })">
- </e-grid-column>
- </e-grid-columns>
-</ejs-grid>
-
-<script>
- function toolbarClick(args) {
- var grid = document.getElementById("grid").ej2_instances[0];
- if (args.item.id === 'grid_excelexport') {
- grid.columns[2].columns[0].visible = false;
- grid.columns[3].columns[2].visible = true;
- grid.pdfExport();
- }
- }
- function pdfExportComplete() {
- var grid = document.getElementById("grid").ej2_instances[0];
- grid.columns[2].columns[0].visible = true;
- grid.columns[3].columns[2].visible = false;
- }
-</script>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/columns/column-template.md b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/columns/column-template.md
index 5b34aaf92b..eb15481f46 100644
--- a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/columns/column-template.md
+++ b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/columns/column-template.md
@@ -187,26 +187,6 @@ function queryCellInfo(args) {
-### Render RadioButton in a column
-
-The Syncfusion ASP.NET MVC Grid supports rendering the [RadioButton](https://ej2.syncfusion.com/aspnetmvc/documentation/radio-button/getting-started) within a column using the [Template](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.GridColumn.html#Syncfusion_EJ2_Grids_GridColumn_Template) property. This feature is particularly useful for displaying selection options, such as order statuses, payment methods, or approval choices, within the Grid.
-
-In the following example, a `RadioButton` is rendered in the **Order Status** column of the Syncfusion ASP.NET MVC Grid by defining the `Template` property.
-
-{% tabs %}
-{% highlight cshtml tabtitle="CSHTML" %}
-{% include code-snippet/grid/columns/column-template-radiobutton/razor %}
-{% endhighlight %}
-{% highlight c# tabtitle="Template.cs" %}
-{% include code-snippet/grid/columns/column-template-radiobutton/column-template-radiobutton.cs %}
-{% endhighlight %}
-{% highlight c# tabtitle="OrdersDetails.cs" %}
-{% include code-snippet/grid/columns/column-template-radiobutton/OrdersDetails.cs %}
-{% endhighlight %}
-{% endtabs %}
-
-
-
## Using condition template
The conditional column `Template` allows you to display template elements based on specific conditions.
diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/columns/foreign-key-column.md b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/columns/foreign-key-column.md
index 06e0eed649..c2506c3123 100644
--- a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/columns/foreign-key-column.md
+++ b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/columns/foreign-key-column.md
@@ -141,31 +141,6 @@ In the provided example, the `customAggregateFn` function is used to filter the
-## Render foreign key value in column template
-
-The Syncfusion ASP.NET MVC Grid allows for rendering foreign key values within a column template, enhancing the display of related data in a clear format. This feature is particularly useful when you want to show a more meaningful representation of a foreign key instead of its underlying value.
-
-To render foreign key values in a column template, you need to define a template for the column using the [Template](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.GridColumn.html#Syncfusion_EJ2_Grids_GridColumn_Template) property. The `Template` property can accept either an HTML element or a function that returns the desired HTML element.
-
-The following example demonstrates how to render foreign key values in a column template within the Grid:
-
-{% tabs %}
-{% highlight cshtml tabtitle="CSHTML" %}
-{% include code-snippet/grid/columns/foreignkey-columntemplate/razor %}
-{% endhighlight %}
-{% highlight c# tabtitle="foreignkey-columntemplate.cs" %}
-{% include code-snippet/grid/columns/foreignkey-columntemplate/foreignkey-columntemplate.cs %}
-{% endhighlight %}
-{% highlight c# tabtitle="OrdersDetails.cs" %}
-{% include code-snippet/grid/columns/foreignkey-columntemplate/OrdersDetails.cs %}
-{% endhighlight %}
-{% highlight c# tabtitle="EmployeeDetails.cs" %}
-{% include code-snippet/grid/columns/foreignkey-columntemplate/EmployeeDetails.cs %}
-{% endhighlight %}
-{% endtabs %}
-
-
-
## Enable multiple foreign key columns
The Syncfusion Grid component supports the feature of enabling multiple foreign key columns with editing options. This allows users to display columns from foreign data sources in the Grid component.
@@ -181,4 +156,299 @@ In the following example, **Customer Name** and **Ship City** are foreign key co
{% endhighlight %}
{% endtabs %}
-
\ No newline at end of file
+
+
+## Edit template in foreign key column using remote data
+
+The Syncfusion ASP.NET MVC Grid allows you to customize the edit template for foreign key columns when using remote data. By default, a [DropDownList](https://ej2.syncfusion.com/aspnetmvc/documentation/drop-down-list/getting-started) component is used for editing foreign key column. However, you can render a different component by configuring the [Column.Edit](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.GridColumn.html#Syncfusion_EJ2_Grids_GridColumn_Edit) property.
+
+This example demonstrates how to use an edit template in a foreign key column with remote data. In this case, an [AutoComplete](https://ej2.syncfusion.com/aspnetmvc/documentation/auto-complete/getting-started) component is rendered as the edit template for the **EmployeeID** foreign key column. The [DataSource](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.DropDowns.AutoComplete.html#Syncfusion_EJ2_DropDowns_AutoComplete_DataSource) property of the **AutoComplete** component is set to the employees data, and the [Field](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.GridColumn.html#Syncfusion_EJ2_Grids_GridColumn_Field) property is configured to display the **FirstName** field as the value. Follow the steps below to achieve this:
+
+**Step 1:** Open Visual Studio and create an ASP.NET MVC project named **UrlAdaptor**. To create an ASP.NET MVC application, follow the documentation [link](https://learn.microsoft.com/en-us/aspnet/mvc/overview/getting-started/introduction/getting-started#create-your-first-app) for detailed steps.
+
+**Step 2 :** Create a simple Syncfusion ASP.NET MVC Grid by following the [Getting Started](https://ej2.syncfusion.com/aspnetmvc/documentation/grid/getting-started-mvc) documentation link.
+
+**Step 3:** In your ASP.NET MVC file (e.g., **Index.cshtml**), define the Syncfusion ASP.NET MVC Grid with the necessary configurations, including a foreign key column for **EmployeeID**, and implement the required logic to manage its behavior.
+
+```cs
+@*Replace **** with your actual port number.*@
+@Html.EJS().Grid("grid").DataSource(dataManger => { dataManger.Url("https://localhost:****/api/Grid").Adaptor("UrlAdaptor"); }).Height("348px").Columns(col =>
+{
+ col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+ col.Field("EmployeeID").ForeignKeyField("EmployeeID").ForeignKeyValue("FirstName").DataSource(dataManger => { dataManger.Url("https://localhost:****/api/Employees/").Adaptor("UrlAdaptor"); }).HeaderText("Employee Name").Width("140").Edit(new { create = "create", read = "read", destroy = "destroy", write = "write" }).Add();
+ col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").EditType("numericedit").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+ col.Field("ShipCity").HeaderText("Ship City").Width("150").Add();
+}).EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true); }).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" }).Render()
+
+<script>
+ let autoComplete;
+ let employeeData = new ej.data.DataManager({
+ url: 'https://localhost:****/api/Employees', //Replace **** with your actual port number.
+ adaptor: new ej.data.UrlAdaptor(),
+ crossDomain: true,
+ });
+
+ function create() {
+ return ej.base.createElement('input');
+ }
+
+ function destroy() {
+ if (autoComplete) autoComplete.destroy();
+ }
+
+ function read() {
+ return autoComplete ? autoComplete.value : '';
+ }
+
+ function write(args) {
+ let selectedValue = args.rowData ? args.rowData.employeeID : '';
+ employeeData.executeQuery(new ej.data.Query()).then((data) => {
+ let employees = data.result;
+ autoComplete = new ej.dropdowns.AutoComplete({
+ dataSource: employees,
+ fields: { value: "EmployeeID", text: "FirstName" },
+ value: selectedValue,
+ placeholder: "Select Employee",
+ allowFiltering: true,
+ filtering: function (e) {
+ let query = new ej.data.Query();
+ query = e.text ? query.where("FirstName", "startswith", e.text, true) : query;
+ e.updateData(employees, query);
+ },
+ change: function (e) {
+ if (e.itemData) {
+ args.rowData.employeeID = e.itemData.employeeID;
+ }
+ }
+ });
+ autoComplete.appendTo(args.element);
+ }).catch((error) => {
+ console.error("Error fetching employee data:", error);
+ });
+ }
+</script>
+```
+
+**Step 4:** On the server side, create a controller named **GridController.cs** and **EmployeesController.cs** under the **Controllers** folder to handle API requests:
+
+```cs
+namespace EditTemplate.Controllers
+{
+ [ApiController]
+ public class GridController : Controller
+ {
+ [HttpPost]
+ [Route("api/[controller]")]
+ public object Post()
+ {
+ // Retrieve data from the data source (e.g., database).
+ IQueryable<OrdersDetails> DataSource = GetOrderData().AsQueryable();
+
+ // Get the total count of records.
+ int totalRecordsCount = DataSource.Count();
+
+ // Return data based on the request.
+ return new { result = DataSource, count = totalRecordsCount };
+ }
+
+ [HttpGet]
+ [Route("api/[controller]")]
+ public List<OrdersDetails> GetOrderData()
+ {
+ var data = OrdersDetails.GetAllRecords().ToList();
+ return data;
+ }
+
+ /// <summary>
+ /// Inserts a new data item into the data collection.
+ /// </summary>
+ /// <param name="newRecord">It contains the new record detail which is need to be inserted.</param>
+ /// <returns>Returns void.</returns>
+ [HttpPost]
+ [Route("api/Grid/Insert")]
+ public void Insert(CRUDModel<OrdersDetails> newRecord)
+ {
+ if (newRecord.value != null)
+ {
+ OrdersDetails.GetAllRecords().Insert(0, newRecord.value);
+ }
+ }
+
+ /// <summary>
+ /// Update a existing data item from the data collection.
+ /// </summary>
+ /// <param name="Order">It contains the updated record detail which is need to be updated.</param>
+ /// <returns>Returns void.</returns>
+ [HttpPost]
+ [Route("api/Grid/Update")]
+ public void Update(CRUDModel<OrdersDetails> Order)
+ {
+ var updatedOrder = Order.value;
+ if (updatedOrder != null)
+ {
+ var data = OrdersDetails.GetAllRecords().FirstOrDefault(or => or.OrderID == updatedOrder.OrderID);
+ if (data != null)
+ {
+ // Update the existing record.
+ data.OrderID = updatedOrder.OrderID;
+ data.CustomerID = updatedOrder.CustomerID;
+ data.EmployeeID = updatedOrder.EmployeeID;
+ data.ShipCity = updatedOrder.ShipCity;
+ data.ShipCountry = updatedOrder.ShipCountry;
+ // Update other properties similarly.
+ }
+ }
+
+ }
+ /// <summary>
+ /// Remove a specific data item from the data collection.
+ /// </summary>
+ /// <param name="value">It contains the specific record detail which is need to be removed.</param>
+ /// <return>Returns void.</return>
+ [HttpPost]
+ [Route("api/Grid/Remove")]
+ public void Remove(CRUDModel<OrdersDetails> deletedRecord)
+ {
+ int orderId = int.Parse(deletedRecord.key.ToString()); // Get key value from the deletedRecord.
+ var data = OrdersDetails.GetAllRecords().FirstOrDefault(orderData => orderData.OrderID == orderId);
+ if (data != null)
+ {
+ // Remove the record from the data collection.
+ OrdersDetails.GetAllRecords().Remove(data);
+ }
+ }
+
+ public class CRUDModel<T> where T : class
+ {
+ public string? action { get; set; }
+ public string? keyColumn { get; set; }
+ public object? key { get; set; }
+ public T? value { get; set; }
+ public List<T>? added { get; set; }
+ public List<T>? changed { get; set; }
+ public List<T>? deleted { get; set; }
+ public IDictionary<string, object>? @params { get; set; }
+ }
+ }
+}
+```
+
+```cs
+namespace EditTemplate.Controllers
+{
+ [Route("api/[controller]")]
+ [ApiController]
+ public class EmployeesController : ControllerBase
+ {
+ [HttpPost]
+ public object Post(DataManagerRequest DataManagerRequest)
+ {
+ // Retrieve data from the data source (e.g., database).
+ IQueryable<EmployeeDetails> DataSource = EmployeeDetails.GetAllRecords().AsQueryable();
+
+ // Get the total count of records.
+ int totalRecordsCount = DataSource.Count();
+
+ // Return result and total record count.
+ return DataManagerRequest.RequiresCounts ? Ok(new { result = DataSource, totalRecordsCount }) : Ok(DataSource);
+ }
+
+ [HttpGet]
+ public List<EmployeeDetails> GetOrderData()
+ {
+ var data = EmployeeDetails.GetAllRecords().ToList();
+ return data;
+ }
+ }
+}
+
+```
+**Step 5:** Create a model class named **OrdersDetails.cs** under the **Models** folder in the server-side project to represent the order data and employee data:
+
+```cs
+namespace EditTemplate.Models
+{
+ public class OrdersDetails
+ {
+ private static List<OrdersDetails> order = new List<OrdersDetails>();
+ public OrdersDetails() { }
+ public OrdersDetails(int OrderID, string CustomerId, int EmployeeId, double Freight, bool Verified,
+ DateTime OrderDate, string ShipCity, string ShipName, string ShipCountry,
+ DateTime ShippedDate, string ShipAddress)
+ {
+ this.OrderID = OrderID;
+ this.CustomerID = CustomerId;
+ this.EmployeeID = EmployeeId;
+ this.Freight = Freight;
+ this.ShipCity = ShipCity;
+ this.Verified = Verified;
+ this.OrderDate = OrderDate;
+ this.ShipName = ShipName;
+ this.ShipCountry = ShipCountry;
+ this.ShippedDate = ShippedDate;
+ this.ShipAddress = ShipAddress;
+ }
+ public static List<OrdersDetails> GetAllRecords()
+ {
+ if (order.Count == 0)
+ {
+ int code = 10000;
+ List<Employee> employees = Employee.GetAllEmployees();
+ int employeeCount = employees.Count;
+ for (int i = 1; i < 10; i++)
+ {
+ order.Add(new OrdersDetails(code++, "ALFKI", employees[(code + 0) % employeeCount].EmployeeID, 2.3 * i, false, new DateTime(1991, 05, 15), "Berlin", "Simons bistro", "Denmark", new DateTime(1996, 7, 16), "Kirchgasse 6"));
+ order.Add(new OrdersDetails(code++, "ANATR", employees[(code + 1) % employeeCount].EmployeeID, 3.3 * i, true, new DateTime(1990, 04, 04), "Madrid", "Queen Cozinha", "Brazil", new DateTime(1996, 9, 11), "Avda. Azteca 123"));
+ order.Add(new OrdersDetails(code++, "ANTON", employees[(code + 2) % employeeCount].EmployeeID, 4.3 * i, true, new DateTime(1957, 11, 30), "Cholchester", "Frankenversand", "Germany", new DateTime(1996, 10, 7), "Carrera 52 con Ave. Bolívar #65-98 Llano Largo"));
+ order.Add(new OrdersDetails(code++, "BLONP", employees[(code + 3) % employeeCount].EmployeeID, 5.3 * i, false, new DateTime(1930, 10, 22), "Marseille", "Ernst Handel", "Austria", new DateTime(1996, 12, 30), "Magazinweg 7"));
+ order.Add(new OrdersDetails(code++, "BOLID", employees[(code + 4) % employeeCount].EmployeeID, 6.3 * i, true, new DateTime(1953, 02, 18), "Tsawassen", "Hanari Carnes", "Switzerland", new DateTime(1997, 12, 3), "1029 - 12th Ave. S."));
+ }
+ }
+ return order;
+ }
+ public int? OrderID { get; set; }
+ public string? CustomerID { get; set; }
+ public int? EmployeeID { get; set; }
+ public double? Freight { get; set; }
+ public string? ShipCity { get; set; }
+ public bool? Verified { get; set; }
+ public DateTime OrderDate { get; set; }
+ public string? ShipName { get; set; }
+ public string? ShipCountry { get; set; }
+ public DateTime ShippedDate { get; set; }
+ public string? ShipAddress { get; set; }
+ }
+ public class Employee
+ {
+ public int EmployeeID { get; set; }
+ public string? FirstName { get; set; }
+ public string? LastName { get; set; }
+ public string? Department { get; set; }
+ public string? Email { get; set; }
+ public string? PhoneNumber { get; set; }
+ public static List<Employee> GetAllEmployees()
+ {
+ return new List<Employee>
+ {
+ new Employee { EmployeeID = 1, FirstName = "John", LastName = "Doe", Department = "Sales", Email = "john.doe@example.com", PhoneNumber = "123-456-7890" },
+ new Employee { EmployeeID = 2, FirstName = "David", LastName = "Smith", Department = "Marketing", Email = "david.smith@example.com", PhoneNumber = "987-654-3210" },
+ new Employee { EmployeeID = 3, FirstName = "Maria", LastName = "Gonzalez", Department = "HR", Email = "maria.gonzalez@example.com", PhoneNumber = "456-789-0123" },
+ new Employee { EmployeeID = 4, FirstName = "Sophia", LastName = "Brown", Department = "Finance", Email = "sophia.brown@example.com", PhoneNumber = "321-654-0987" },
+ new Employee { EmployeeID = 5, FirstName = "James", LastName = "Wilson", Department = "IT", Email = "james.wilson@example.com", PhoneNumber = "654-321-7654" },
+ new Employee { EmployeeID = 6, FirstName = "Emma", LastName = "Taylor", Department = "Operations", Email = "emma.taylor@example.com", PhoneNumber = "213-546-8790" },
+ new Employee { EmployeeID = 7, FirstName = "Daniel", LastName = "Anderson", Department = "Logistics", Email = "daniel.anderson@example.com", PhoneNumber = "789-654-3210" },
+ new Employee { EmployeeID = 8, FirstName = "Olivia", LastName = "Thomas", Department = "Procurement", Email = "olivia.thomas@example.com", PhoneNumber = "567-890-1234" },
+ new Employee { EmployeeID = 9, FirstName = "Michael", LastName = "Harris", Department = "R&D", Email = "michael.harris@example.com", PhoneNumber = "890-123-4567" },
+ new Employee { EmployeeID = 10, FirstName = "Lucas", LastName = "Martin", Department = "Customer Service", Email = "lucas.martin@example.com", PhoneNumber = "345-678-9012" },
+ new Employee { EmployeeID = 11, FirstName = "Elijah", LastName = "Clark", Department = "Support", Email = "elijah.clark@example.com", PhoneNumber = "741-852-9630" },
+ new Employee { EmployeeID = 12, FirstName = "Isabella", LastName = "Hall", Department = "Legal", Email = "isabella.hall@example.com", PhoneNumber = "963-852-7410" },
+ new Employee { EmployeeID = 13, FirstName = "Ethan", LastName = "Young", Department = "Administration", Email = "ethan.young@example.com", PhoneNumber = "258-963-1470" },
+ new Employee { EmployeeID = 14, FirstName = "Charlotte", LastName = "Scott", Department = "Design", Email = "charlotte.scott@example.com", PhoneNumber = "147-258-3690" },
+ new Employee { EmployeeID = 15, FirstName = "Alexander", LastName = "Allen", Department = "Engineering", Email = "alexander.allen@example.com", PhoneNumber = "369-147-2580" }
+ };
+ }
+ }
+}
+```
+
+
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/data-binding/data-binding.md b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/data-binding/data-binding.md
index 063f984de1..ee251228b2 100644
--- a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/data-binding/data-binding.md
+++ b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/data-binding/data-binding.md
@@ -238,6 +238,25 @@ Here’s a sample implementation demonstrating how to set up the Grid for CRUD o
{% endhighlight %}
{% endtabs %}
+## Prevent to convert local time zone format for date column
+
+By default, Syncfusion ASP.NET MVC Grid automatically converts date values to the local time zone of the client system. However, in some scenarios, you may need to display the original date as received from the server without any timezone conversion.
+
+To prevent timezone conversion for a date column, use the `serverTimezoneOffset` property from `DataUtil`. Setting this property to **0** ensures that dates remain in the original format received from the server without conversion to the local timezone.
+
+The following example demonstrates how to prevent local time zone conversion for date columns in Syncfusion ASP.NET MVC Grid by using the `DataUtil.serverTimezoneOffset` property:
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/grid/data-binding/localtime/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="localtime.cs" %}
+{% include code-snippet/grid/data-binding/localtime/localtime.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+
+
## Troubleshoot: Syncfusion ASP.NET MVC Grid render rows without data
In ASP.NET MVC, by default the JSON results are returned in camelCase format. So Grid field names are also changed in camelCase.
diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/data-binding/remote-data.md b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/data-binding/remote-data.md
index 1bdea41b55..f41bb56b95 100644
--- a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/data-binding/remote-data.md
+++ b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/data-binding/remote-data.md
@@ -698,61 +698,4 @@ On remote data binding, all grid actions such as paging, sorting, editing, group
{% highlight c# tabtitle="Offline.cs" %}
{% include code-snippet/grid/data-binding/offline/offline.cs %}
{% endhighlight %}
-{% endtabs %}
-
-## Fetch result from the DataManager query using external button
-
-By default, Syncfusion ASP.NET MVC Grid automatically binds a remote data source using the `DataManager`. However, in some scenarios, you may need to fetch data dynamically from the server using a query triggered by an external button. This approach allows greater control over when and how data is loaded into the Grid.
-
-To achieve this, you can use the `executeQuery` method of `DataManager` with a `Query` object. This method allows you to run a custom query and retrieve results dynamically.
-
-The following example demonstrates how to fetch data from the server when an external button is clicked and display a status message indicating the data fetch status:
-
-{% tabs %}
-{% highlight razor tabtitle="CSHTML" %}
-
-@using Syncfusion.EJ2
-
-<div id='container'>
-@Html.EJS().Button("fetchButton").Content("Execute Query").CssClass("e-primary").Render()
-<p id="statusMessage" style="text-align:center;color:blue"></p>
-@Html.EJS().Grid("Grid").Columns(col =>
-{
- col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Type("number").Add();
- col.Field("CustomerID").HeaderText("Customer ID").Width("160").Type("string").Add();
- col.Field("EmployeeID").HeaderText("Employee ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Type("number").Add();
- col.Field("Freight").HeaderText("Freight").Width("150").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Type("number").Add();
- col.Field("ShipCountry").HeaderText("Ship Country").Width("150").Type("string").Add();
-}).Render()
-</div>
-
-<script>
- document.addEventListener("DOMContentLoaded", function () {
- let SERVICE_URL = 'https://ej2services.syncfusion.com/production/web-services/api/Orders';
- let statusMessage = document.getElementById("statusMessage");
-
- fetchButton.addEventListener("click", function () {
- statusMessage.textContent = "Fetching data...";
- var grid = document.getElementById("Grid")?.ej2_instances?.[0];
-
- let getData = new ej.data.DataManager({
- url: SERVICE_URL,
- adaptor: new ej.data.WebApiAdaptor()
- });
-
- getData.executeQuery(new ej.data.Query()).then(function (e) {
- grid.dataSource = e.result;
- statusMessage.textContent = "Data fetched successfully! Total Records: " + e.result.length;
- statusMessage.style.color = "green";
- }).catch(function () {
- statusMessage.textContent = "Error fetching data!";
- statusMessage.style.color = "red";
- });
- });
- });
-</script>
-
-{% endhighlight %}
-{% endtabs %}
-
-
\ No newline at end of file
+{% endtabs %}
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/editing/validation.md b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/editing/validation.md
index 1c397c4fba..978aec6d7c 100644
--- a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/editing/validation.md
+++ b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/editing/validation.md
@@ -1,6 +1,6 @@
---
layout: post
-title: Validation in ##Platform_Name## Grid Control | Syncfusion
+title: Validation in ##Platform_Name## Grid Component
description: Learn here all about Validation in Syncfusion ##Platform_Name## Grid component of Syncfusion Essential JS 2 and more.
platform: ej2-asp-core-mvc
control: Validation
@@ -8,7 +8,7 @@ publishingplatform: ##Platform_Name##
documentation: ug
---
-# Validation in ASP.NET MVC Syncfusion Grid component
+# Validation in ASP.NET MVC Grid component
Validation is a crucial aspect of data integrity in any application. The ASP.NET MVC Grid component in Syncfusion<sup style="font-size:70%">®</sup> provides built-in support for easy and effective data validation. This feature ensures that the data entered or modified adheres to predefined rules, preventing errors and guaranteeing the accuracy of the displayed information.
@@ -120,217 +120,3 @@ Here's an example that demonstrates how to change the position of the validation
-## Show custom error message while performing CRUD actions
-
-While performing CRUD actions in the Syncfusion ASP.NET MVC Grid, errors may occur due to various reasons such as validation failures, network issues, or server-side exceptions. Handling these errors effectively is essential for providing meaningful error messages when an operation fails.
-
-To achieve this, you can use the [ActionFailure](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_ActionFailure) event, which is triggered when an action (such as update, delete, or insert) fails. This event allows you to retrieve the error message from the server response and display it in the UI.
-
-The following sample demonstrates how to retrieve and display error messages in the Syncfusion ASP.NET MVC Grid:
-
-{% tabs %}
-{% highlight razor tabtitle="CSHTML" %}
-<div id="errorMessage" class="error-message" style="display:none; color: red; text-align: center"></div>
-@*Replace xxxx with your actual port number*@
-@Html.EJS().Grid("grid").DataSource(ds => ds.Url("https://localhost:xxxx/Grid/UrlDatasource")
- .InsertUrl("https://localhost:xxxx/Grid/Insert")
- .UpdateUrl("https://localhost:xxxx/Grid/Update")
- .RemoveUrl("https://localhost:xxxx/Grid/Remove")
- .Adaptor("UrlAdaptor")).Columns(col =>
-{
- col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width("150")
- .TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
- col.Field("CustomerID").HeaderText("Customer Name").Width("150").Add();
- col.Field("Freight").HeaderText("Freight").Width("150").Format("C2")
- .TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
- col.Field("ShipCity").HeaderText("Ship City").Width("150").Add();
-}).EditSettings(edit => edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true)).Toolbar(new List<string>
-{ "Add", "Edit", "Delete", "Update", "Cancel" }).Height(320).ActionFailure("actionFailure").AllowPaging(true).Render()
-
-<script>
-function actionFailure(args) {
- let errorDiv = document.getElementById("errorMessage");
- if (args.error && args.error[0] && args.error[0].error) {
- let response = args.error[0].error;
- response.text().then(errorMessage => {
- // Extract meaningful error message.
- let match = errorMessage.match(/<h3>HTTP Error 400.*? - (.*?)<\/h3>/);
- if (match && match[1]) {
- errorDiv.innerText = match[1]; // Display only the relevant error message.
- } else {
- errorDiv.innerText = "An unexpected error occurred.";
- }
- }).catch(() => {
- errorDiv.innerText = "An unexpected error occurred.";
- });
- } else {
- errorDiv.innerText = "An unexpected error occurred.";
- }
-}
-</script>
-
-{% endhighlight %}
-
-{% highlight c# tabtitle="GridController.cs" %}
-
-using System.Collections.Generic;
-using System.Linq;
-using System.Net;
-using System.Web.Mvc;
-using Syncfusion.EJ2.Base;
-using UrlAdaptor.Models;
-
-namespace UrlAdaptor.Controllers
-{
- public class GridController : Controller
- {
- private static List<OrdersDetails> order = OrdersDetails.GetAllRecords();
- /// <summary>
- /// Handles the HTTP POST request to retrieve data from the data source based on the DataManagerRequest.
- /// Supports filtering,searching, sorting, and paging operations (skip and take).
- /// </summary>
- /// <param name="dataManager">Contains the filtering, sorting, and paging options requested by the client.</param>
- /// <returns>Returns the filtered,searched, sorted, and paginated data along with the total record count.</returns>
- [HttpPost]
- public ActionResult UrlDatasource(DataManagerRequest dataManager)
- {
- // Retrieve data source and convert to queryable.
- IEnumerable<OrdersDetails> DataSource = order;
-
- // Initialize DataOperations instance.
- DataOperations queryableOperation = new DataOperations();
-
- // Handling searching operation.
- if (dataManager.Search != null && dataManager.Search.Count > 0)
- {
- DataSource = queryableOperation.PerformSearching(DataSource, dataManager.Search);
- }
-
- // Handling filtering operation.
- if (dataManager.Where != null && dataManager.Where.Count > 0)
- {
- foreach (var condition in dataManager.Where)
- {
- foreach (var predicate in condition.predicates)
- {
- DataSource = queryableOperation.PerformFiltering(DataSource, dataManager.Where, predicate.Operator);
- }
- }
- }
-
- // Handling sorting operation.
- if (dataManager.Sorted != null && dataManager.Sorted.Count > 0)
- {
- DataSource = queryableOperation.PerformSorting(DataSource, dataManager.Sorted);
- }
-
- // Get the total count of records.
- int totalRecordsCount = DataSource.Count();
-
- // Handling paging operation.
- if (dataManager.Skip != 0)
- {
- DataSource = queryableOperation.PerformSkip(DataSource, dataManager.Skip);
- }
- if (dataManager.Take != 0)
- {
- DataSource = queryableOperation.PerformTake(DataSource, dataManager.Take);
- }
-
- // Return result and total record count.
- return dataManager.RequiresCounts ? Json(new { result = DataSource, count = totalRecordsCount }) : Json(DataSource);
- }
-
- /// <summary>
- /// Inserts a new data item into the data collection.
- /// </summary>
- /// <param name="newRecord">It contains the new record detail which is need to be inserted.</param>
- /// <returns>Returns void.</returns>
- [HttpPost]
- [Route("Grid/Insert")]
- public ActionResult Insert(CRUDModel<OrdersDetails> newRecord)
- {
- if (newRecord != null)
- {
- var existingOrder = order.FirstOrDefault(or => or.OrderID == newRecord.value.OrderID);
- if (existingOrder == null)
- {
- order.Insert(0, newRecord.value);
- return Json(new { success = true, message = "Order added successfully.", data = newRecord });
- }
- else
- {
- return new HttpStatusCodeResult(HttpStatusCode.BadRequest, "Duplicate values cannot be inserted.");
- }
- }
- return new HttpStatusCodeResult(HttpStatusCode.BadRequest, "Invalid data received.");
- }
-
- /// <summary>
- /// Update a existing data item from the data collection.
- /// </summary>
- /// <param name="updateRecord">It contains the updated record detail which is need to be updated.</param>
- /// <returns>Returns void.</returns>
- [HttpPost]
- [Route("Grid/Update")]
- public ActionResult Update(CRUDModel<OrdersDetails> updateRecord)
- {
- if (updateRecord.value == null)
- {
- return new HttpStatusCodeResult(HttpStatusCode.BadRequest, "Invalid data received.");
- }
-
- // Corrected condition to validate OrderID range.
- if (updateRecord.value.OrderID < 10010 || updateRecord.value.OrderID > 10030)
- {
- return new HttpStatusCodeResult(HttpStatusCode.BadRequest, "OrderID must be between 10010 and 10030 to update.");
- }
- var data = OrdersDetails.GetAllRecords().FirstOrDefault(or => or.OrderID == updateRecord.value.OrderID);
- if (data == null)
- {
- return new HttpStatusCodeResult(HttpStatusCode.NotFound, "Order not found.");
- }
-
- // Update the existing record.
- data.CustomerID = updateRecord.value.CustomerID;
- data.Freight = updateRecord.value.Freight;
- data.ShipCity = updateRecord.value.ShipCity;
- data.ShipCountry = updateRecord.value.ShipCountry;
- return Json(new { success = true, message = "Order updated successfully.", data = updateRecord });
- }
- /// <summary>
- /// Remove a specific data item from the data collection.
- /// </summary>
- /// <param name="value">It contains the specific record detail which is need to be removed.</param>
- /// <return>Returns void.</return>
- [HttpPost]
- [Route("Grid/Remove")]
- public ActionResult Remove(CRUDModel<OrdersDetails> value)
- {
- int orderId = int.Parse(value.key.ToString());
- if (orderId < 10031 || orderId > 10045)
- {
- return new HttpStatusCodeResult(HttpStatusCode.BadRequest, "OrderID must be between 10031 and 10045 to delete.");
- }
- var data = OrdersDetails.GetAllRecords().FirstOrDefault(orderData => orderData.OrderID == orderId);
- OrdersDetails.GetAllRecords().Remove(data);
- return Json(new { success = true, message = "Order deleted successfully." });
- }
- }
- public class CRUDModel<T>
- {
- public string action { get; set; }
- public string keyColumn { get; set; }
- public object key { get; set; }
- public T value { get; set; }
- public List<T> Added { get; set; }
- public List<T> Changed { get; set; }
- public List<T> Deleted { get; set; }
- public IDictionary<string, object> @params { get; set; }
- }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/excel-export/excel-export-options.md b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/excel-export/excel-export-options.md
index c3b2a03863..8a1b090700 100644
--- a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/excel-export/excel-export-options.md
+++ b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/excel-export/excel-export-options.md
@@ -128,33 +128,6 @@ In the following example, the **CustomerID** is initially a hidden column in the
-## Show or hide columns while exporting with stacked header
-
-The Syncfusion ASP.NET MVC Grid allows you to control the visibility of columns during export operations. This feature is particularly useful when customizing the data presented in exported files while using stacked headers.
-
-To implement the show or hide columns feature during Excel export in the Syncfusion ASP.NET MVC Grid, follow these steps:
-
-1. Handle the [ToolbarClick](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_ToolbarClick) event of the Syncfusion ASP.NET MVC Grid.
-
-2. Update the visibility of the desired columns by setting the [Visible](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.GridColumn.html#Syncfusion_EJ2_Grids_GridColumn_Visible) property of the column to **true** or **false**.
-
-3. Export the Syncfusion ASP.NET MVC Grid to Excel document using the `ExcelExport` or `CsvExport` method.
-
-4. Handle the [ExcelExportComplete](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_ExcelExportComplete) event to restore the column visibility to its original state.
-
-In the following example, the **ShipName** is initially a hidden column in the Syncfusion ASP.NET MVC Grid. However, during the Excel export process, the **ShipName** column is made visible, while the **OrderDate** column is hidden:
-
-{% tabs %}
-{% highlight razor tabtitle="CSHTML" %}
-{% include code-snippet/grid/excel-export/excelexport-show-hide/razor %}
-{% endhighlight %}
-{% highlight c# tabtitle="excel-export.cs" %}
-{% include code-snippet/grid/excel-export/excelexport-show-hide/excel-export.cs %}
-{% endhighlight %}
-{% endtabs %}
-
-
-
## Enable filtering in the exported excel file
The Grid allows you to export data to Excel or CSV with filter options and also export only filtered records. This feature is especially beneficial when you need to share data with others while preserving the ability for them to filter and analyze the data in Excel or CSV.
diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/filtering/filtering.md b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/filtering/filtering.md
index 76dce178d3..27fc235556 100644
--- a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/filtering/filtering.md
+++ b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/filtering/filtering.md
@@ -172,37 +172,6 @@ Consider the following sample where the `IgnoreAccent` property is set to true i
-## Perform ENUM column filtering
-
-The Syncfusion ASP.NET MVC Grid allows you to filter enum-type data using the [FilterBarTemplate](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.GridColumn.html#Syncfusion_EJ2_Grids_GridColumn_FilterBarTemplate) feature. This is particularly useful for filtering predefined values, such as categories or statuses.
-
-To achieve this functionality:
-
-1. Render [DropDownList](https://ej2.syncfusion.com/aspnetmvc/documentation/drop-down-list/getting-started) in the `FilterBarTemplate` for the enum-type column.
-
-2. Bind the enumerated list data to the column.
-
-3. Convert the `enum` values to a readable format using a computed column (e.g., TypeText) in the data model.
- ```cs
- public FileType Type { get; set; }
- public string TypeText => Type.ToString();
- ```
-
-4. In the [Change](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.DropDowns.DropDownList.html#Syncfusion_EJ2_DropDowns_DropDownList_Change) event of the **DropDownList**, dynamically filter the column using the `FilterByColumn` method of the Syncfusion ASP.NET MVC Grid.
-
-Below is an example demonstrating how to filter enum-type data in a Syncfusion ASP.NET MVC Grid:
-
-{% tabs %}
-{% highlight razor tabtitle="CSHTML" %}
-{% include code-snippet/grid/filtering/enum-filtering/razor %}
-{% endhighlight %}
-{% highlight c# tabtitle="filter-bar.cs" %}
-{% include code-snippet/grid/filtering/enum-filtering/filter.cs %}
-{% endhighlight %}
-{% endtabs %}
-
-
-
## Filtering with case sensitivity
The Syncfusion<sup style="font-size:70%">®</sup> ASP.NET MVC Grid provides the flexibility to enable or disable case sensitivity during filtering. This feature is useful when you want to control whether filtering operations should consider the case of characters. It can be achieved by using the [EnableCaseSensitivity](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.GridFilterSettings.html#Syncfusion_EJ2_Grids_GridFilterSettings_EnableCaseSensitivity) property within the [FilterSettings](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_FilterSettings) of the grid.
diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/pdf-export/pdf-export-options.md b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/pdf-export/pdf-export-options.md
index 8ff050c306..687066f7be 100644
--- a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/pdf-export/pdf-export-options.md
+++ b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/pdf-export/pdf-export-options.md
@@ -1,6 +1,6 @@
---
layout: post
-title: PDF Export Options in ##Platform_Name## Syncfusion Grid Component
+title: PDF Export Options in ##Platform_Name## Grid Component
description: Learn here all about PDF Export Options in Syncfusion ##Platform_Name## Grid component of Syncfusion Essential JS 2 and more.
platform: ej2-asp-core-mvc
control: PDF Export Options
@@ -135,33 +135,6 @@ In the following example, the **CustomerID** is initially a hidden column in the
-## Show or hide columns while exporting with stacked header
-
-The Syncfusion ASP.NET MVC Grid allows you to control the visibility of columns during export operations. This feature is particularly useful when customizing the data presented in exported files while using stacked headers.
-
-To implement the show or hide columns feature during PDF export in the Syncfusion ASP.NET MVC Grid, follow these steps:
-
-1. Handle the [ToolbarClick](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_ToolbarClick) event of the Syncfusion ASP.NET MVC Grid.
-
-2. Update the visibility of the desired columns by setting the [Visible](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.GridColumn.html#Syncfusion_EJ2_Grids_GridColumn_Visible) property of the column to **true** or **false**.
-
-3. Export the Syncfusion ASP.NET MVC Grid to PDF document using `PdfExport` method.
-
-4. Handle the [PdfExportComplete](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_PdfExportComplete) event to restore the column visibility to its original state.
-
-In the following example, the **ShipName** is initially a hidden column in the Syncfusion ASP.NET MVC Grid. However, during the PDF export process, the **ShipName** column is made visible, while the **OrderDate** column is hidden:
-
-{% tabs %}
-{% highlight cshtml tabtitle="CSHTML" %}
-{% include code-snippet/grid/pdf-export/pdfexport-show-hide/tagHelper %}
-{% endhighlight %}
-{% highlight c# tabtitle="pdf-export.cs" %}
-{% include code-snippet/grid/pdf-export/pdfexport-show-hide/pdf-export.cs %}
-{% endhighlight %}
-{% endtabs %}
-
-
-
## Change page orientation
The Syncfusion ASP.NET MVC Grid component allows you to change the page orientation of the exported PDF document from the default portrait mode to landscape mode. This feature provides the flexibility to adjust the layout and presentation of the exported PDF according to your needs.
diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/selection/row-selection.md b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/selection/row-selection.md
index dea9daf516..351476055e 100644
--- a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/selection/row-selection.md
+++ b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/selection/row-selection.md
@@ -210,7 +210,7 @@ To achieve this, you can leverage the `getSelectedRowIndexes` method, which retu
The Grid component allows you to retrieve the selected records even when navigating to different pages. This feature is useful when working with large data sets and allows you to perform actions on the selected records across multiple pages.
-To persist the selection across pages, you need to enable the [PersistSelection](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.GridSelectionSettings.html#Syncfusion_EJ2_Grids_GridSelectionSettings_PersistSelection) property. By default, this property is set to **false**. To enable it, set the value to **true** in the [SelectionSettings](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.GridSelectionSettings.html) property of the Grid component.
+To persist the selection across pages, you need to enable the [Persistselection](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.GridSelectionSettings.html#Syncfusion_EJ2_Grids_GridSelectionSettings_PersistSelection) property. By default, this property is set to **false**. To enable it, set the value to **true** in the [SelectionSettings](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Grids.GridSelectionSettings.html) property of the Grid component.
To retrieve the selected records from different pages, you can use the `getSelectedRecords` method. This method returns an array of the selected records.
@@ -290,409 +290,4 @@ In the following example, row selection is canceled when the value of **Customer
{% endhighlight %}
{% endtabs %}
-
-
-## Pass selected records to server using AJAX
-
-The Syncfusion ASP.NET MVC Grid allows you to select multiple or single records and send them to the server using AJAX requests. This feature is useful for scenarios where you need to process or manipulate selected data on the server side.
-
-To achieve passing selected records to the server using AJAX requests in the Syncfusion ASP.NET MVC Grid, follow these steps:
-
-**Step 1:** Open Visual Studio and create an ASP.NET MVC project named **SelectRecord**. To create an ASP.NET MVC application, follow the documentation [link](https://learn.microsoft.com/en-us/aspnet/mvc/overview/getting-started/introduction/getting-started#create-your-first-app) for detailed steps.
-
-**Step 2 :** Create a simple Syncfusion ASP.NET MVC Grid by following the [Getting Started](https://ej2.syncfusion.com/aspnetmvc/documentation/grid/getting-started-mvc) documentation link.
-
-**Step 3:** In your HTML file (e.g., **Index.cshtml**), add a button to trigger the AJAX call and include the Syncfusion ASP.NET MVC Grid with necessary configurations:
-
-```html
-@Html.EJS().Button("passRecords").Content("Pass the selected records to controller").CssClass("e-primary").Render()
-<div style="padding: 20px 17px 0 0">
- @*Replace **** with your actual port number.*@
- @Html.EJS().Grid("Grid").DataSource(ds => ds.Url("https://localhost:****/Grid/UrlDatasource").Adaptor("UrlAdaptor")).Columns(col =>
- {
- col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width("100").Add();
- col.Field("EmployeeID").HeaderText("Employee ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
- col.Field("CustomerID").HeaderText("Customer Name").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width("120").Add();
- col.Field("OrderDate").HeaderText("Date").Width("150").Format("yMd").Add();
- }).SelectionSettings(select => select.Type(Syncfusion.EJ2.Grids.SelectionType.Multiple)).Render()
-</div>
-```
-
-**Step 4:** In your script section, you need to handle the button `click` event. When clicked, retrieve the selected records using the `getSelectedRecords` method from the Syncfusion ASP.NET MVC Grid and send them to the server using AJAX. Add the following code:
-
-```ts
-<script>
- // Button click event to send selected records.
- document.getElementById("passRecords").addEventListener("click", function () {
- var grid = document.querySelector("#Grid")?.ej2_instances?.[0]; // Get the Grid instance.
- var selectedRecords = grid.getSelectedRecords(); // Get selected rows.
- if (selectedRecords.length === 0) {
- alert("Please select at least one record.");
- return;
- }
- // Convert selected records to JSON.
- var rows = JSON.stringify(selectedRecords);
- // Send data to the server using Ajax.
- var ajax = new ej.base.Ajax({
- url: 'https://localhost:****/Grid/SelectRecord', // Replace **** with actual server port.
- type: 'POST',
- contentType: 'application/json; charset=utf-8',
- data: rows
- });
-
- ajax.onSuccess = function (result) {
- console.log("Records sent successfully:", result);
- };
- ajax.send();
- });
-
-</script>
-```
-
-**Step 5:** On the server side, create a controller named **GridController.cs** under the **Controllers** folder to handle incoming requests and process selected records. Add the following code:
-
-```cs
-namespace SelectRecord.Controllers
-{
- public class GridController : Controller
- {
- private static List<OrdersDetails> order = OrdersDetails.GetAllRecords();
- [HttpPost]
- public ActionResult UrlDatasource(DataManagerRequest DataManagerRequest)
- {
- // Retrieve data source and convert to queryable.
- IEnumerable<OrdersDetails> DataSource = order;
- DataOperations queryableOperation = new DataOperations(); // Initialize DataOperations instance.
-
- // Handling searching operation.
- if (DataManagerRequest.Search != null && DataManagerRequest.Search.Count > 0)
- {
- DataSource = queryableOperation.PerformSearching(DataSource, DataManagerRequest.Search);
- }
- // Handling filtering operation.
- if (DataManagerRequest.Where != null && DataManagerRequest.Where.Count > 0)
- {
- foreach (var condition in DataManagerRequest.Where)
- {
- foreach (var predicate in condition.predicates)
- {
- DataSource = queryableOperation.PerformFiltering(DataSource, DataManagerRequest.Where, predicate.Operator);
- }
- }
- }
- // Handling sorting operation.
- if (DataManagerRequest.Sorted != null && DataManagerRequest.Sorted.Count > 0)
- {
- DataSource = queryableOperation.PerformSorting(DataSource, DataManagerRequest.Sorted);
- }
- // Get the total count of records.
- int totalRecordsCount = DataSource.Count();
-
- // Handling paging operation.
- if (DataManagerRequest.Skip != 0)
- {
- DataSource = queryableOperation.PerformSkip(DataSource, DataManagerRequest.Skip);
- }
- if (DataManagerRequest.Take != 0)
- {
- DataSource = queryableOperation.PerformTake(DataSource, DataManagerRequest.Take);
- }
-
- // Get the total records count.
- int count = DataSource.Count();
-
- // Return result and total record count.
- return DataManagerRequest.RequiresCounts ? Json(new { result = DataSource, count }) : Json(DataSource);
- }
-
- [HttpPost]
- public ActionResult SelectRecord(List<Gridcolumns> row)
- {
- return Json(row);
- }
- public class SelectedModel
- {
- public List<Gridcolumns> rowData { get; set; }
- }
- public class Gridcolumns
- {
- public int OrderID { get; set; }
- public string CustomerID { get; set; }
- public int EmployeeID { get; set; }
- public DateTime OrderDate { get; set; }
- }
- }
-}
-```
-
-**Step 6:** Create a model class named **OrdersDetails.cs** under the **Models** folder in the server-side project to represent the order data. Add the following code:
-
-```cs
-namespace SelectRecord.Models
-{
- public class OrdersDetails
- {
- public static List<OrdersDetails> order = new List<OrdersDetails>();
- public OrdersDetails()
- {
-
- }
- public OrdersDetails(
- int OrderID, string CustomerId, int EmployeeId, double Freight, bool Verified,
- DateTime OrderDate, string ShipCity, string ShipName, string ShipCountry,
- DateTime ShippedDate, string ShipAddress)
- {
- this.OrderID = OrderID;
- this.CustomerID = CustomerId;
- this.EmployeeID = EmployeeId;
- this.Freight = Freight;
- this.ShipCity = ShipCity;
- this.Verified = Verified;
- this.OrderDate = OrderDate;
- this.ShipName = ShipName;
- this.ShipCountry = ShipCountry;
- this.ShippedDate = ShippedDate;
- this.ShipAddress = ShipAddress;
- }
-
- public static List<OrdersDetails> GetAllRecords()
- {
- if (order.Count() == 0)
- {
- int code = 10000;
- for (int i = 1; i < 10; i++)
- {
- order.Add(new OrdersDetails(code + 1, "ALFKI", i + 0, 2.3 * i, false, new DateTime(1991, 05, 15), "Berlin", "Simons bistro", "Denmark", new DateTime(1996, 7, 16), "Kirchgasse 6"));
- order.Add(new OrdersDetails(code + 2, "ANATR", i + 2, 3.3 * i, true, new DateTime(1990, 04, 04), "Madrid", "Queen Cozinha", "Brazil", new DateTime(1996, 9, 11), "Avda. Azteca 123"));
- order.Add(new OrdersDetails(code + 3, "ANTON", i + 1, 4.3 * i, true, new DateTime(1957, 11, 30), "Cholchester", "Frankenversand", "Germany", new DateTime(1996, 10, 7), "Carrera 52 con Ave. Bolívar #65-98 Llano Largo"));
- order.Add(new OrdersDetails(code + 4, "BLONP", i + 3, 5.3 * i, false, new DateTime(1930, 10, 22), "Marseille", "Ernst Handel", "Austria", new DateTime(1996, 12, 30), "Magazinweg 7"));
- order.Add(new OrdersDetails(code + 5, "BOLID", i + 4, 6.3 * i, true, new DateTime(1953, 02, 18), "Tsawassen", "Hanari Carnes", "Switzerland", new DateTime(1997, 12, 3), "1029 - 12th Ave. S."));
- code += 5;
- }
- }
- return order;
- }
-
- public int? OrderID { get; set; }
- public string? CustomerID { get; set; }
- public int? EmployeeID { get; set; }
- public double? Freight { get; set; }
- public string? ShipCity { get; set; }
- public bool? Verified { get; set; }
- public DateTime OrderDate { get; set; }
- public string? ShipName { get; set; }
- public string? ShipCountry { get; set; }
- public DateTime ShippedDate { get; set; }
- public string? ShipAddress { get; set; }
- }
-}
-
-```
-
-The following screenshot shows how to pass selected records to the server:
-
-
-
-## Pass selected records to server using FETCH
-
-The Syncfusion ASP.NET MVC Grid allows you to select multiple or single records and send them to the server using Fetch requests. This feature is useful for scenarios where you need to process or manipulate selected data on the server side.
-
-To achieve passing selected records to the server using Fetch requests in the Syncfusion ASP.NET MVC Grid, follow these steps:
-
-**Step 1:** Open Visual Studio and create an ASP.NET MVC project named **SelectRecord**. To create an ASP.NET MVC application, follow the documentation [link](https://learn.microsoft.com/en-us/aspnet/mvc/overview/getting-started/introduction/getting-started#create-your-first-app) for detailed steps.
-
-**Step 2 :** Create a simple Syncfusion ASP.NET MVC Grid by following the [Getting Started](https://ej2.syncfusion.com/aspnetmvc/documentation/grid/getting-started-mvc) documentation link.
-
-**Step 3:** In your HTML file (e.g., **Index.cshtml**), add a button to trigger the Fetch call and include the Syncfusion ASP.NET MVC Grid with necessary configurations:
-
-```html
-@Html.EJS().Button("passRecords").Content("Pass the selected records to controller").CssClass("e-primary").Render()
-<div style="padding: 20px 17px 0 0">
- @*Replace **** with your actual port number.*@
- @Html.EJS().Grid("Grid").DataSource(ds => ds.Url("https://localhost:****/Grid/UrlDatasource").Adaptor("UrlAdaptor")).Columns(col =>
- {
- col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width("100").Add();
- col.Field("EmployeeID").HeaderText("Employee ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
- col.Field("CustomerID").HeaderText("Customer Name").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width("120").Add();
- col.Field("OrderDate").HeaderText("Date").Width("150").Format("yMd").Add();
- }).SelectionSettings(select => select.Type(Syncfusion.EJ2.Grids.SelectionType.Multiple)).Render()
-</div>
-```
-
-**Step 4:** In your script section, you need to handle the button `click` event. When clicked, retrieve the selected records using the `getSelectedRecords` method from the Syncfusion ASP.NET MVC Grid and send them to the server using Fetch. Add the following code:
-
-```ts
-<script>
- // Button click event to send selected records.
- document.getElementById("passRecords").addEventListener("click", function () {
- var grid = document.querySelector("#Grid")?.ej2_instances?.[0]; // Get the Grid instance.
-
- var selectedRecords = grid.getSelectedRecords(); // Get selected rows.
- if (selectedRecords.length === 0) {
- alert("Please select at least one record.");
- return;
- }
-
- // Convert selected records to JSON.
- var rows = JSON.stringify(selectedRecords);
-
- // Send data to the server using Fetch.
- var fetch = new ej.base.Fetch({
- url: 'https://localhost:****/Grid/SelectRecord', // Replace **** with actual server port.
- type: 'POST',
- contentType: 'application/json; charset=utf-8',
- data: rows
- });
-
- fetch.onSuccess = function (result) {
- console.log("Records sent successfully:", result);
- };
- fetch.send();
- });
-
-</script>
-```
-
-**Step 5:** On the server side, create a controller named **GridController.cs** under the **Controllers** folder to handle incoming requests and process selected records. Add the following code:
-
-```cs
-namespace SelectRecord.Controllers
-{
- public class GridController : Controller
- {
- private static List<OrdersDetails> order = OrdersDetails.GetAllRecords();
- [System.Web.Mvc.HttpPost]
- public ActionResult UrlDatasource(DataManagerRequest DataManagerRequest)
- {
- // Retrieve data source and convert to queryable.
- IEnumerable<OrdersDetails> DataSource = order;
- DataOperations queryableOperation = new DataOperations(); // Initialize DataOperations instance.
-
- // Handling searching operation.
- if (DataManagerRequest.Search != null && DataManagerRequest.Search.Count > 0)
- {
- DataSource = queryableOperation.PerformSearching(DataSource, DataManagerRequest.Search);
- }
- // Handling filtering operation.
- if (DataManagerRequest.Where != null && DataManagerRequest.Where.Count > 0)
- {
- foreach (var condition in DataManagerRequest.Where)
- {
- foreach (var predicate in condition.predicates)
- {
- DataSource = queryableOperation.PerformFiltering(DataSource, DataManagerRequest.Where, predicate.Operator);
- }
- }
- }
- // Handling sorting operation.
- if (DataManagerRequest.Sorted != null && DataManagerRequest.Sorted.Count > 0)
- {
- DataSource = queryableOperation.PerformSorting(DataSource, DataManagerRequest.Sorted);
- }
- // Get the total count of records.
- int totalRecordsCount = DataSource.Count();
-
- // Handling paging operation.
- if (DataManagerRequest.Skip != 0)
- {
- DataSource = queryableOperation.PerformSkip(DataSource, DataManagerRequest.Skip);
- }
- if (DataManagerRequest.Take != 0)
- {
- DataSource = queryableOperation.PerformTake(DataSource, DataManagerRequest.Take);
- }
-
- // Get the total records count.
- int count = DataSource.Count();
-
- // Return result and total record count.
- return DataManagerRequest.RequiresCounts ? Json(new { result = DataSource, count }) : Json(DataSource);
- }
-
- [System.Web.Mvc.HttpPost]
- public ActionResult SelectRecord(List<Gridcolumns> row)
- {
- return Json(row);
- }
- public class SelectedModel
- {
- public List<Gridcolumns> rowData { get; set; }
- }
- public class Gridcolumns
- {
- public int OrderID { get; set; }
- public string CustomerID { get; set; }
- public int EmployeeID { get; set; }
- public DateTime OrderDate { get; set; }
- }
- }
-}
-```
-
-**Step 6:** Create a model class named **OrdersDetails.cs** under the **Models** folder in the server-side project to represent the order data. Add the following code:
-
-```cs
-namespace SelectRecord.Models
-{
- public class OrdersDetails
- {
- public static List<OrdersDetails> order = new List<OrdersDetails>();
- public OrdersDetails()
- {
-
- }
- public OrdersDetails(
- int OrderID, string CustomerId, int EmployeeId, double Freight, bool Verified,
- DateTime OrderDate, string ShipCity, string ShipName, string ShipCountry,
- DateTime ShippedDate, string ShipAddress)
- {
- this.OrderID = OrderID;
- this.CustomerID = CustomerId;
- this.EmployeeID = EmployeeId;
- this.Freight = Freight;
- this.ShipCity = ShipCity;
- this.Verified = Verified;
- this.OrderDate = OrderDate;
- this.ShipName = ShipName;
- this.ShipCountry = ShipCountry;
- this.ShippedDate = ShippedDate;
- this.ShipAddress = ShipAddress;
- }
-
- public static List<OrdersDetails> GetAllRecords()
- {
- if (order.Count() == 0)
- {
- int code = 10000;
- for (int i = 1; i < 10; i++)
- {
- order.Add(new OrdersDetails(code + 1, "ALFKI", i + 0, 2.3 * i, false, new DateTime(1991, 05, 15), "Berlin", "Simons bistro", "Denmark", new DateTime(1996, 7, 16), "Kirchgasse 6"));
- order.Add(new OrdersDetails(code + 2, "ANATR", i + 2, 3.3 * i, true, new DateTime(1990, 04, 04), "Madrid", "Queen Cozinha", "Brazil", new DateTime(1996, 9, 11), "Avda. Azteca 123"));
- order.Add(new OrdersDetails(code + 3, "ANTON", i + 1, 4.3 * i, true, new DateTime(1957, 11, 30), "Cholchester", "Frankenversand", "Germany", new DateTime(1996, 10, 7), "Carrera 52 con Ave. Bolívar #65-98 Llano Largo"));
- order.Add(new OrdersDetails(code + 4, "BLONP", i + 3, 5.3 * i, false, new DateTime(1930, 10, 22), "Marseille", "Ernst Handel", "Austria", new DateTime(1996, 12, 30), "Magazinweg 7"));
- order.Add(new OrdersDetails(code + 5, "BOLID", i + 4, 6.3 * i, true, new DateTime(1953, 02, 18), "Tsawassen", "Hanari Carnes", "Switzerland", new DateTime(1997, 12, 3), "1029 - 12th Ave. S."));
- code += 5;
- }
- }
- return order;
- }
-
- public int? OrderID { get; set; }
- public string? CustomerID { get; set; }
- public int? EmployeeID { get; set; }
- public double? Freight { get; set; }
- public string? ShipCity { get; set; }
- public bool? Verified { get; set; }
- public DateTime OrderDate { get; set; }
- public string? ShipName { get; set; }
- public string? ShipCountry { get; set; }
- public DateTime ShippedDate { get; set; }
- public string? ShipAddress { get; set; }
- }
-}
-
-```
-
-The following screenshot shows how to pass selected records to the server:
-
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/columns/column-template.md b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/columns/column-template.md
index 2424777bc2..30bbc723a3 100644
--- a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/columns/column-template.md
+++ b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/columns/column-template.md
@@ -48,7 +48,7 @@ The following example demonstrates, how to render hyperlink column in the Grid u
{% endhighlight %}
{% endtabs %}
-
+
>The window.open() method is a built-in JavaScript function that opens a new browser window or tab with the specified URL.
@@ -187,26 +187,6 @@ function queryCellInfo(args) {
-### Render RadioButton in a column
-
-The Syncfusion ASP.NET Core Grid supports rendering the [RadioButton](https://ej2.syncfusion.com/aspnetcore/documentation/radio-button/getting-started) within a column using the [template](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridColumn.html#Syncfusion_EJ2_Grids_GridColumn_Template) property. This feature is particularly useful for displaying selection options, such as order statuses, payment methods, or approval choices, within the Grid.
-
-In the following example, a `RadioButton` is rendered in the **Order Status** column of the Syncfusion ASP.NET Core Grid by defining the `template` property.
-
-{% tabs %}
-{% highlight cshtml tabtitle="CSHTML" %}
-{% include code-snippet/grid/columns/column-template-radiobutton/tagHelper %}
-{% endhighlight %}
-{% highlight c# tabtitle="Template.cs" %}
-{% include code-snippet/grid/columns/column-template-radiobutton/column-template-radiobutton.cs %}
-{% endhighlight %}
-{% highlight c# tabtitle="OrdersDetails.cs" %}
-{% include code-snippet/grid/columns/column-template-radiobutton/OrdersDetails.cs %}
-{% endhighlight %}
-{% endtabs %}
-
-
-
## Using condition template
The conditional column `template` allows you to display template elements based on specific conditions.
diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/columns/foreign-key-column.md b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/columns/foreign-key-column.md
index 2cbc977e12..713a746eab 100644
--- a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/columns/foreign-key-column.md
+++ b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/columns/foreign-key-column.md
@@ -141,31 +141,6 @@ In the provided example, the `customAggregateFn` function is used to filter the
-## Render foreign key value in column template
-
-The Syncfusion ASP.NET Core Grid allows for rendering foreign key values within a column template, enhancing the display of related data in a clear format. This feature is particularly useful when you want to show a more meaningful representation of a foreign key instead of its underlying value.
-
-To render foreign key values in a column template, you need to define a template for the column using the [template](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridColumn.html#Syncfusion_EJ2_Grids_GridColumn_Template) property. The `template` property can accept either an HTML element or a function that returns the desired HTML element.
-
-The following example demonstrates how to render foreign key values in a column template within the Grid:
-
-{% tabs %}
-{% highlight razor tabtitle="CSHTML" %}
-{% include code-snippet/grid/columns/foreignkey-columntemplate/tagHelper %}
-{% endhighlight %}
-{% highlight c# tabtitle="foreignkey-columntemplate.cs" %}
-{% include code-snippet/grid/columns/foreignkey-columntemplate/foreignkey-columntemplate.cs %}
-{% endhighlight %}
-{% highlight c# tabtitle="OrdersDetails.cs" %}
-{% include code-snippet/grid/columns/foreignkey-columntemplate/OrdersDetails.cs %}
-{% endhighlight %}
-{% highlight c# tabtitle="EmployeeDetails.cs" %}
-{% include code-snippet/grid/columns/foreignkey-columntemplate/EmployeeDetails.cs %}
-{% endhighlight %}
-{% endtabs %}
-
-
-
## Enable multiple foreign key columns
The Syncfusion Grid component supports the feature of enabling multiple foreign key columns with editing options. This allows users to display columns from foreign data sources in the Grid component.
@@ -181,4 +156,313 @@ In the following example, **Customer Name** and **Ship City** are foreign key co
{% endhighlight %}
{% endtabs %}
-
\ No newline at end of file
+
+
+## Edit template in foreign key column using remote data
+
+The Syncfusion ASP.NET Core Grid allows you to customize the edit template for foreign key columns when using remote data. By default, a [DropDownList](https://ej2.syncfusion.com/aspnetcore/documentation/drop-down-list/getting-started-core) component is used for editing foreign key column. However, you can render a different component by configuring the [column.edit](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridColumn.html#Syncfusion_EJ2_Grids_GridColumn_Edit) property.
+
+This example demonstrates how to use an edit template in a foreign key column with remote data. In this case, an [AutoComplete](https://ej2.syncfusion.com/aspnetcore/documentation/auto-complete/getting-started-core) component is rendered as the edit template for the **EmployeeID** foreign key column. The [dataSource](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.DropDowns.AutoComplete.html#Syncfusion_EJ2_DropDowns_AutoComplete_DataSource) property of the **AutoComplete** component is set to the employees data, and the [field](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridColumn.html#Syncfusion_EJ2_Grids_GridColumn_Field) property is configured to display the **FirstName** field as the value. Follow the steps below to achieve this:
+
+**Step 1:** Open Visual Studio and create an ASP.NET Core project named **UrlAdaptor**. To create an ASP.NET Core application, follow the documentation [link](https://learn.microsoft.com/en-us/aspnet/core/tutorials/razor-pages/razor-pages-start?view=aspnetcore-8.0&tabs=visual-studio#create-a-razor-pages-web-app) for detailed steps.
+
+**Step 2 :** Create a simple Syncfusion ASP.NET Core Grid by following the [Getting Started](https://ej2.syncfusion.com/aspnetcore/documentation/grid/getting-started-core) documentation link.
+
+**Step 3:** In your ASP.NET Core file (e.g., **Index.cshtml**), define the Syncfusion ASP.NET Core Grid with the necessary configurations, including a foreign key column for **EmployeeID**, and implement the required logic to manage its behavior.
+
+```cs
+@page
+@model IndexModel
+@{
+ ViewData["Title"] = "Home page";
+}
+// Replace **** with your actual port number
+<ejs-grid id="grid" height="348px" toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })" allowPaging="true">
+ <e-data-manager url="https://localhost:****/api/Grid" adaptor="UrlAdaptor" insertUrl="https://localhost:****/api/Grid/Insert" updateUrl="https://localhost:****/api/Grid/Update" removeUrl="https://localhost:****/api/Grid/Remove"></e-data-manager>
+ <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Normal"></e-grid-editSettings>
+ <e-grid-columns>
+ <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="120"></e-grid-column>
+ <e-grid-column field="EmployeeID" headerText="Employee Name" foreignKeyField="EmployeeID" foreignKeyValue="FirstName" width="150" edit="@(new { create = "create", read = "read", destroy = "destroy", write = "write" })">
+ <e-data-manager url="https://localhost:****/api/Employees" adaptor="UrlAdaptor"></e-data-manager>
+ </e-grid-column>
+ <e-grid-column field="Freight" headerText="Freight" textAlign="Right" editType="numericedit" format="C2" width="120"></e-grid-column>
+ <e-grid-column field="ShipCity" headerText="Ship City" width="150"></e-grid-column>
+ </e-grid-columns>
+</ejs-grid>
+
+<script>
+ let autoComplete;
+ let employeeData = new ej.data.DataManager({
+ url: 'https://localhost:****/api/Employees', // Replace **** with your actual port number.
+ adaptor: new ej.data.UrlAdaptor(),
+ crossDomain: true,
+ });
+
+ function create() {
+ return ej.base.createElement('input');
+ }
+
+ function destroy() {
+ if (autoComplete) autoComplete.destroy();
+ }
+
+ function read() {
+ return autoComplete ? autoComplete.value : '';
+ }
+
+ function write(args) {
+ let selectedValue = args.rowData ? args.rowData.employeeID : '';
+ employeeData.executeQuery(new ej.data.Query()).then((data) => {
+ let employees = data.result;
+ autoComplete = new ej.dropdowns.AutoComplete({
+ dataSource: employees,
+ fields: { value: "employeeID", text: "firstName" },
+ value: selectedValue,
+ placeholder: "Select Employee",
+ allowFiltering: true,
+ filtering: function (e) {
+ let query = new ej.data.Query();
+ query = e.text ? query.where("firstName", "startswith", e.text, true) : query;
+ e.updateData(employees, query);
+ },
+ change: function (e) {
+ if (e.itemData) {
+ args.rowData.employeeID = e.itemData.employeeID;
+ }
+ }
+ });
+ autoComplete.appendTo(args.element);
+ }).catch((error) => {
+ console.error("Error fetching employee data:", error);
+ });
+ }
+</script>
+
+```
+
+**Step 4:** On the server side, create a controller named **GridController.cs** and **EmployeesController.cs** under the **Controllers** folder to handle API requests:
+
+```cs
+using Microsoft.AspNetCore.Http;
+using Microsoft.AspNetCore.Mvc;
+using Syncfusion.EJ2.Base;
+using EditTemplate.Models;
+namespace EditTemplate.Controllers
+{
+ [ApiController]
+ public class GridController : Controller
+ {
+ [HttpPost]
+ [Route("api/[controller]")]
+ public object Post([FromBody] DataManagerRequest DataManagerRequest)
+ {
+ // Retrieve data from the data source (e.g., database).
+ IQueryable<OrdersDetails> DataSource = GetOrderData().AsQueryable();
+
+ // Get the total count of records.
+ int totalRecordsCount = DataSource.Count();
+
+ // Return data based on the request.
+ return new { result = DataSource, count = totalRecordsCount };
+ }
+
+ [HttpGet]
+ [Route("api/[controller]")]
+ public List<OrdersDetails> GetOrderData()
+ {
+ var data = OrdersDetails.GetAllRecords().ToList();
+ return data;
+ }
+
+ /// <summary>
+ /// Inserts a new data item into the data collection.
+ /// </summary>
+ /// <param name="newRecord">It contains the new record detail which is need to be inserted.</param>
+ /// <returns>Returns void.</returns>
+ [HttpPost]
+ [Route("api/Grid/Insert")]
+ public void Insert([FromBody] CRUDModel<OrdersDetails> newRecord)
+ {
+ if (newRecord.value != null)
+ {
+ OrdersDetails.GetAllRecords().Insert(0, newRecord.value);
+ }
+ }
+
+ /// <summary>
+ /// Update a existing data item from the data collection.
+ /// </summary>
+ /// <param name="Order">It contains the updated record detail which is need to be updated.</param>
+ /// <returns>Returns void.</returns>
+ [HttpPost]
+ [Route("api/Grid/Update")]
+ public void Update([FromBody] CRUDModel<OrdersDetails> Order)
+ {
+ var updatedOrder = Order.value;
+ if (updatedOrder != null)
+ {
+ var data = OrdersDetails.GetAllRecords().FirstOrDefault(or => or.OrderID == updatedOrder.OrderID);
+ if (data != null)
+ {
+ // Update the existing record.
+ data.OrderID = updatedOrder.OrderID;
+ data.CustomerID = updatedOrder.CustomerID;
+ data.ShipCity = updatedOrder.ShipCity;
+ data.ShipCountry = updatedOrder.ShipCountry;
+ // Update other properties similarly.
+ }
+ }
+
+ }
+ /// <summary>
+ /// Remove a specific data item from the data collection.
+ /// </summary>
+ /// <param name="value">It contains the specific record detail which is need to be removed.</param>
+ /// <return>Returns void.</return>
+ [HttpPost]
+ [Route("api/Grid/Remove")]
+ public void Remove([FromBody] CRUDModel<OrdersDetails> deletedRecord)
+ {
+ int orderId = int.Parse(deletedRecord.key.ToString()); // Get key value from the deletedRecord.
+ var data = OrdersDetails.GetAllRecords().FirstOrDefault(orderData => orderData.OrderID == orderId);
+ if (data != null)
+ {
+ // Remove the record from the data collection.
+ OrdersDetails.GetAllRecords().Remove(data);
+ }
+ }
+
+ public class CRUDModel<T> where T : class
+ {
+ public string? action { get; set; }
+ public string? keyColumn { get; set; }
+ public object? key { get; set; }
+ public T? value { get; set; }
+ public List<T>? added { get; set; }
+ public List<T>? changed { get; set; }
+ public List<T>? deleted { get; set; }
+ public IDictionary<string, object>? @params { get; set; }
+ }
+ }
+}
+```
+
+```cs
+namespace EditTemplate.Controllers
+{
+ [Route("api/[controller]")]
+ [ApiController]
+ public class EmployeesController : ControllerBase
+ {
+ [HttpPost]
+ public object Post([FromBody] DataManagerRequest DataManagerRequest)
+ {
+ // Retrieve data from the data source (e.g., database).
+ IQueryable<EmployeeDetails> DataSource = EmployeeDetails.GetAllRecords().AsQueryable();
+
+ // Get the total count of records.
+ int totalRecordsCount = DataSource.Count();
+
+ // Return result and total record count.
+ return DataManagerRequest.RequiresCounts ? Ok(new { result = DataSource, totalRecordsCount }) : Ok(DataSource);
+ }
+
+ [HttpGet]
+ public List<EmployeeDetails> GetOrderData()
+ {
+ var data = EmployeeDetails.GetAllRecords().ToList();
+ return data;
+ }
+ }
+}
+
+```
+**Step 5:** Create a model class named **OrdersDetails.cs** under the **Models** folder in the server-side project to represent the order data and employee data:
+
+```cs
+namespace EditTemplate.Models
+{
+ public class OrdersDetails
+ {
+ private static List<OrdersDetails> order = new List<OrdersDetails>();
+ public OrdersDetails() { }
+ public OrdersDetails(int OrderID, string CustomerId, int EmployeeId, double Freight, bool Verified,
+ DateTime OrderDate, string ShipCity, string ShipName, string ShipCountry,
+ DateTime ShippedDate, string ShipAddress)
+ {
+ this.OrderID = OrderID;
+ this.CustomerID = CustomerId;
+ this.EmployeeID = EmployeeId;
+ this.Freight = Freight;
+ this.ShipCity = ShipCity;
+ this.Verified = Verified;
+ this.OrderDate = OrderDate;
+ this.ShipName = ShipName;
+ this.ShipCountry = ShipCountry;
+ this.ShippedDate = ShippedDate;
+ this.ShipAddress = ShipAddress;
+ }
+ public static List<OrdersDetails> GetAllRecords()
+ {
+ if (order.Count == 0)
+ {
+ int code = 10000;
+ List<Employee> employees = Employee.GetAllEmployees();
+ int employeeCount = employees.Count;
+ for (int i = 1; i < 10; i++)
+ {
+ order.Add(new OrdersDetails(code++, "ALFKI", employees[(code + 0) % employeeCount].EmployeeID, 2.3 * i, false, new DateTime(1991, 05, 15), "Berlin", "Simons bistro", "Denmark", new DateTime(1996, 7, 16), "Kirchgasse 6"));
+ order.Add(new OrdersDetails(code++, "ANATR", employees[(code + 1) % employeeCount].EmployeeID, 3.3 * i, true, new DateTime(1990, 04, 04), "Madrid", "Queen Cozinha", "Brazil", new DateTime(1996, 9, 11), "Avda. Azteca 123"));
+ order.Add(new OrdersDetails(code++, "ANTON", employees[(code + 2) % employeeCount].EmployeeID, 4.3 * i, true, new DateTime(1957, 11, 30), "Cholchester", "Frankenversand", "Germany", new DateTime(1996, 10, 7), "Carrera 52 con Ave. Bolívar #65-98 Llano Largo"));
+ order.Add(new OrdersDetails(code++, "BLONP", employees[(code + 3) % employeeCount].EmployeeID, 5.3 * i, false, new DateTime(1930, 10, 22), "Marseille", "Ernst Handel", "Austria", new DateTime(1996, 12, 30), "Magazinweg 7"));
+ order.Add(new OrdersDetails(code++, "BOLID", employees[(code + 4) % employeeCount].EmployeeID, 6.3 * i, true, new DateTime(1953, 02, 18), "Tsawassen", "Hanari Carnes", "Switzerland", new DateTime(1997, 12, 3), "1029 - 12th Ave. S."));
+ }
+ }
+ return order;
+ }
+ public int? OrderID { get; set; }
+ public string? CustomerID { get; set; }
+ public int? EmployeeID { get; set; }
+ public double? Freight { get; set; }
+ public string? ShipCity { get; set; }
+ public bool? Verified { get; set; }
+ public DateTime OrderDate { get; set; }
+ public string? ShipName { get; set; }
+ public string? ShipCountry { get; set; }
+ public DateTime ShippedDate { get; set; }
+ public string? ShipAddress { get; set; }
+ }
+ public class Employee
+ {
+ public int EmployeeID { get; set; }
+ public string? FirstName { get; set; }
+ public string? LastName { get; set; }
+ public string? Department { get; set; }
+ public string? Email { get; set; }
+ public string? PhoneNumber { get; set; }
+ public static List<Employee> GetAllEmployees()
+ {
+ return new List<Employee>
+ {
+ new Employee { EmployeeID = 1, FirstName = "John", LastName = "Doe", Department = "Sales", Email = "john.doe@example.com", PhoneNumber = "123-456-7890" },
+ new Employee { EmployeeID = 2, FirstName = "David", LastName = "Smith", Department = "Marketing", Email = "david.smith@example.com", PhoneNumber = "987-654-3210" },
+ new Employee { EmployeeID = 3, FirstName = "Maria", LastName = "Gonzalez", Department = "HR", Email = "maria.gonzalez@example.com", PhoneNumber = "456-789-0123" },
+ new Employee { EmployeeID = 4, FirstName = "Sophia", LastName = "Brown", Department = "Finance", Email = "sophia.brown@example.com", PhoneNumber = "321-654-0987" },
+ new Employee { EmployeeID = 5, FirstName = "James", LastName = "Wilson", Department = "IT", Email = "james.wilson@example.com", PhoneNumber = "654-321-7654" },
+ new Employee { EmployeeID = 6, FirstName = "Emma", LastName = "Taylor", Department = "Operations", Email = "emma.taylor@example.com", PhoneNumber = "213-546-8790" },
+ new Employee { EmployeeID = 7, FirstName = "Daniel", LastName = "Anderson", Department = "Logistics", Email = "daniel.anderson@example.com", PhoneNumber = "789-654-3210" },
+ new Employee { EmployeeID = 8, FirstName = "Olivia", LastName = "Thomas", Department = "Procurement", Email = "olivia.thomas@example.com", PhoneNumber = "567-890-1234" },
+ new Employee { EmployeeID = 9, FirstName = "Michael", LastName = "Harris", Department = "R&D", Email = "michael.harris@example.com", PhoneNumber = "890-123-4567" },
+ new Employee { EmployeeID = 10, FirstName = "Lucas", LastName = "Martin", Department = "Customer Service", Email = "lucas.martin@example.com", PhoneNumber = "345-678-9012" },
+ new Employee { EmployeeID = 11, FirstName = "Elijah", LastName = "Clark", Department = "Support", Email = "elijah.clark@example.com", PhoneNumber = "741-852-9630" },
+ new Employee { EmployeeID = 12, FirstName = "Isabella", LastName = "Hall", Department = "Legal", Email = "isabella.hall@example.com", PhoneNumber = "963-852-7410" },
+ new Employee { EmployeeID = 13, FirstName = "Ethan", LastName = "Young", Department = "Administration", Email = "ethan.young@example.com", PhoneNumber = "258-963-1470" },
+ new Employee { EmployeeID = 14, FirstName = "Charlotte", LastName = "Scott", Department = "Design", Email = "charlotte.scott@example.com", PhoneNumber = "147-258-3690" },
+ new Employee { EmployeeID = 15, FirstName = "Alexander", LastName = "Allen", Department = "Engineering", Email = "alexander.allen@example.com", PhoneNumber = "369-147-2580" }
+ };
+ }
+ }
+}
+```
+
+
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/data-binding/data-binding.md b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/data-binding/data-binding.md
index 861fc9a708..d091e21d51 100644
--- a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/data-binding/data-binding.md
+++ b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/data-binding/data-binding.md
@@ -238,6 +238,25 @@ Here’s a sample implementation demonstrating how to set up the Grid for CRUD o
{% endhighlight %}
{% endtabs %}
+## Prevent to convert local time zone format for date column
+
+By default, Syncfusion ASP.NET Core Grid automatically converts date values to the local time zone of the client system. However, in some scenarios, you may need to display the original date as received from the server without any timezone conversion.
+
+To prevent timezone conversion for a date column, use the `serverTimezoneOffset` property from `DataUtil`. Setting this property to **0** ensures that dates remain in the original format received from the server without conversion to the local timezone.
+
+The following example demonstrates how to prevent local time zone conversion for date columns in Syncfusion ASP.NET Core Grid by using the `DataUtil.serverTimezoneOffset` property:
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/grid/data-binding/localtime/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="localtime.cs" %}
+{% include code-snippet/grid/data-binding/localtime/localtime.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+
+
## Troubleshoot: Syncfusion ASP.NET Core Grid render rows without data
In ASP.NET Core, by default the JSON results are returned in camelCase format. So Grid field names are also changed in camelCase.
diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/data-binding/remote-data.md b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/data-binding/remote-data.md
index 4e7eb4d590..1ad469e933 100644
--- a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/data-binding/remote-data.md
+++ b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/data-binding/remote-data.md
@@ -671,70 +671,44 @@ The following code example demonstrates how to export all records on the client
{% endhighlight %}
{% endtabs %}
-## Offline mode
+## Sending additional parameters to the server
-On remote data binding, all grid actions such as paging, sorting, editing, grouping, filtering, etc, will be processed on server-side. To avoid post back for every action, set the grid to load all data on initialization and make the actions process in client-side. To enable this behavior, use the `Offline` property of `e-data-manager` tag helper.
+The Syncfusion ASP.NET Core Grid component allows you to include custom parameters in data requests. This feature is particularly useful when you need to provide additional information to the server enhanced processing.
+
+By utilizing the `query` property of the Grid along with the `addParams` method of the **Query** class, you can easily incorporate custom parameters into data requests for every Grid action.
+
+To enable custom parameters in data requests for the Grid, follow these steps:
+
+**1. Bind the Query Object to the Grid**: Assign the initialized query object to the `query` property of the Grid.
+
+**2. Initialize the Query Object:** Create a new instance of the **Query** class and use the `addParams` method to add the custom parameters.
+
+**3. Handle Data State Changes:** If you need to dynamically update the data based on interactions, implement the [dataStateChange](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_DataStateChange) event handler to execute the query with the updated state.
+
+**4. Execute Data Request:** In the service, execute the data request by combining the custom parameters with other query parameters such as paging and sorting.
+
+The following example demonstrates how to send additional parameters to the server:
{% tabs %}
{% highlight cshtml tabtitle="CSHTML" %}
-{% include code-snippet/grid/data-binding/offline/tagHelper %}
+{% include code-snippet/grid/data-binding/remote-prams/tagHelper %}
{% endhighlight %}
-{% highlight c# tabtitle="Offline.cs" %}
-{% include code-snippet/grid/data-binding/offline/offline.cs %}
+{% highlight c# tabtitle="remotedata.cs" %}
+{% include code-snippet/grid/data-binding/remote-prams/custombindingcore.cs %}
{% endhighlight %}
{% endtabs %}
-## Fetch result from the DataManager query using external button
-
-By default, Syncfusion ASP.NET Core Grid automatically binds a remote data source using the `DataManager`. However, in some scenarios, you may need to fetch data dynamically from the server using a query triggered by an external button. This approach allows greater control over when and how data is loaded into the Grid.
+
-To achieve this, you can use the `executeQuery` method of `DataManager` with a `Query` object. This method allows you to run a custom query and retrieve results dynamically.
+## Offline mode
-The following example demonstrates how to fetch data from the server when an external button is clicked and display a status message indicating the data fetch status:
+On remote data binding, all grid actions such as paging, sorting, editing, grouping, filtering, etc, will be processed on server-side. To avoid post back for every action, set the grid to load all data on initialization and make the actions process in client-side. To enable this behavior, use the `Offline` property of `e-data-manager` tag helper.
{% tabs %}
{% highlight cshtml tabtitle="CSHTML" %}
-
-@page
-@model IndexModel
-<div id='container'>
- <ejs-button id="fetchButton" cssClass="e-primary" content="Execute Query"></ejs-button>
- <p id="statusMessage" style="text-align:center;color:blue"></p>
- <ejs-grid id="Grid">
- <e-grid-columns>
- <e-grid-column field="OrderID" headerText="Order ID" width="120" textAlign="Right"></e-grid-column>
- <e-grid-column field="CustomerID" headerText="Customer ID" width="160"></e-grid-column>
- <e-grid-column field="EmployeeID" headerText="Employee ID" width="120" textAlign="Right"></e-grid-column>
- <e-grid-column field="Freight" headerText="Freight" width="150" format="C2" textAlign="Right"></e-grid-column>
- <e-grid-column field="ShipCountry" headerText="Ship Country" width="150"></e-grid-column>
- </e-grid-columns>
- </ejs-grid>
-</div>
-<script>
- document.addEventListener("DOMContentLoaded", function () {
- let SERVICE_URL = 'https://ej2services.syncfusion.com/production/web-services/api/Orders';
- let statusMessage = document.getElementById("statusMessage");
-
- fetchButton.addEventListener("click", function () {
- statusMessage.textContent = "Fetching data...";
- var grid = document.getElementById("Grid")?.ej2_instances?.[0];
- let getData = new ej.data.DataManager({
- url: SERVICE_URL,
- adaptor: new ej.data.WebApiAdaptor()
- });
- getData.executeQuery(new ej.data.Query()).then(function (e) {
- grid.dataSource = e.result;
- statusMessage.textContent = "Data fetched successfully! Total Records: " + e.result.length;
- statusMessage.style.color = "green";
- }).catch(function () {
- statusMessage.textContent = "Error fetching data!";
- statusMessage.style.color = "red";
- });
- });
- });
-</script>
-
+{% include code-snippet/grid/data-binding/offline/tagHelper %}
{% endhighlight %}
-{% endtabs %}
-
-
\ No newline at end of file
+{% highlight c# tabtitle="Offline.cs" %}
+{% include code-snippet/grid/data-binding/offline/offline.cs %}
+{% endhighlight %}
+{% endtabs %}
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/editing/validation.md b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/editing/validation.md
index 8fd666ff43..3b8e4e8cc4 100644
--- a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/editing/validation.md
+++ b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/editing/validation.md
@@ -8,7 +8,8 @@ publishingplatform: ##Platform_Name##
documentation: ug
---
-# Validation in ASP.NET Core Syncfusion Grid component
+
+# Validation in ASP.NET Core Grid component
Validation is a crucial aspect of data integrity in any application. The ASP.NET Core Grid component in Syncfusion<sup style="font-size:70%">®</sup> provides built-in support for easy and effective data validation. This feature ensures that the data entered or modified adheres to predefined rules, preventing errors and guaranteeing the accuracy of the displayed information.
@@ -120,221 +121,3 @@ Here's an example that demonstrates how to change the position of the validation
-## Show custom error message while performing CRUD actions
-
-While performing CRUD actions in the Syncfusion ASP.NET Core Grid, errors may occur due to various reasons such as validation failures, network issues, or server-side exceptions. Handling these errors effectively is essential for providing meaningful error messages when an operation fails.
-
-To achieve this, you can use the [ActionFailure](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_ActionFailure) event, which is triggered when an action (such as update, delete, or insert) fails. This event allows you to retrieve the error message from the server response and display it in the UI.
-
-The following sample demonstrates how to retrieve and display error messages in the Syncfusion ASP.NET Core Grid:
-
-{% tabs %}
-{% highlight cshtml tabtitle="CSHTML" %}
-@page
-@model IndexModel
-
-<div><p style="color: red; text-align: center" id="errorMessage"></p></div>
-<ejs-grid id="Grid" allowFiltering="true" actionFailure="actionFailure" allowSorting="true" allowPaging="true" toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel","Search" })">
- //Replace xxxx with your actual port number
- <e-data-manager url='https://localhost:xxxx/api/Grid' insertUrl='https://localhost:xxxx/api/Grid/Insert' updateUrl='https://localhost:xxxx/api/Grid/Update' removeUrl='https://localhost:xxxx/api/Grid/Remove' adaptor="UrlAdaptor">
- </e-data-manager>
- <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Normal"></e-grid-editSettings>
- <e-grid-columns>
- <e-grid-column field="OrderID" headerText="Order ID" width="120" textAlign="Right" isPrimaryKey="true" type="number"></e-grid-column>
- <e-grid-column field="CustomerID" headerText="Customer ID" width="150" type="string"></e-grid-column>
- <e-grid-column field="ShipCity" headerText="Ship City" width="150"></e-grid-column>
- <e-grid-column field="ShipCountry" headerText="Ship Country" width="150"></e-grid-column>
- </e-grid-columns>
-</ejs-grid>
-
-<script>
-let errorMessage = document.getElementById("errorMessage");
-function actionFailure(args) {
- if (args.error && Array.isArray(args.error) && args.error.length > 0 && args.error[0].error){
- args.error[0].error.json().then(function (data) {
- errorMessage.innerHTML = data.message || "An unknown error occurred.";
- }).catch(function () {
- errorMessage.innerHTML = "Error occurred, but message could not be retrieved.";
- });
- }
- else{
- errorMessage.innerHTML = "An unexpected error occurred.";
- }
-}
-</script>
-
-{% endhighlight %}
-
-{% highlight cs tabtitle="GridController.cs" %}
-
-using Microsoft.AspNetCore.Http;
-using Microsoft.AspNetCore.Mvc;
-using Syncfusion.EJ2.Base;
-using UrlAdaptor.Models;
-
-namespace UrlAdaptor.Controllers
-{
- [ApiController]
- public class GridController : Controller
- {
- [HttpPost]
- [Route("api/[controller]")]
- public object Post([FromBody] DataManagerRequest DataManagerRequest)
- {
- // Retrieve data from the data source (e.g., database).
- IQueryable<OrdersDetails> DataSource = GetOrderData().AsQueryable();
-
- // Initialize DataOperations instance.
- QueryableOperation queryableOperation = new QueryableOperation();
-
- // Handling searching operation.
- if (DataManagerRequest.Search != null && DataManagerRequest.Search.Count > 0)
- {
- DataSource = queryableOperation.PerformSearching(DataSource, DataManagerRequest.Search);
- }
-
- // Handling filtering operation.
- if (DataManagerRequest.Where != null && DataManagerRequest.Where.Count > 0)
- {
- foreach (var condition in DataManagerRequest.Where)
- {
- foreach (var predicate in condition.predicates)
- {
- DataSource = queryableOperation.PerformFiltering(DataSource, DataManagerRequest.Where, predicate.Operator);
- }
- }
- }
-
- // Handling sorting operation.
- if (DataManagerRequest.Sorted != null && DataManagerRequest.Sorted.Count > 0)
- {
- DataSource = queryableOperation.PerformSorting(DataSource, DataManagerRequest.Sorted);
- }
-
- // Get the total count of records.
- int totalRecordsCount = DataSource.Count();
-
- // Handling paging operation.
- if (DataManagerRequest.Skip != 0)
- {
- DataSource = queryableOperation.PerformSkip(DataSource, DataManagerRequest.Skip);
- }
- if (DataManagerRequest.Take != 0)
- {
- DataSource = queryableOperation.PerformTake(DataSource, DataManagerRequest.Take);
- }
-
- // Return data based on the request.
- return new { result = DataSource, count = totalRecordsCount };
- }
-
- [HttpGet]
- [Route("api/[controller]")]
- public List<OrdersDetails> GetOrderData()
- {
- var data = OrdersDetails.GetAllRecords().ToList();
- return data;
- }
-
- /// <summary>
- /// Inserts a new data item into the data collection.
- /// </summary>
- /// <param name="addRecord">The order to be inserted.</param>
- /// <returns>It returns the newly inserted record detail.</returns>
- [HttpPost]
- [Route("api/[controller]/Insert")]
- public IActionResult Insert([FromBody] CRUDModel<OrdersDetails> value)
- {
- if (value == null)
- {
- return BadRequest(new { message = "Invalid data received." });
- }
- var existingOrder = OrdersDetails.order.FirstOrDefault(or => or.OrderID == value.value.OrderID);
- if (existingOrder == null)
- {
- OrdersDetails.order.Insert(0, value.value);
- return Ok(new { success = true, message = "Order added successfully.", data = value });
- }
- else
- {
- return BadRequest(new { success = false, message = "Duplicate values cannot be inserted." });
- }
- }
-
- /// <summary>
- /// Updates an existing order.
- /// </summary>
- /// <param name="updateRecord">The updated order details.</param>
- /// <returns>It returns the updated order details.</returns>
- [HttpPost]
- [Route("api/[controller]/Update")]
- public IActionResult Update([FromBody] CRUDModel<OrdersDetails> Order)
- {
- var updatedOrder = Order.value;
-
- if (updatedOrder.OrderID < 10010 || updatedOrder.OrderID > 10030)
- {
- return BadRequest(new { message = "OrderID must be between 10010 and 10030 to update." });
- }
-
- var data = OrdersDetails.GetAllRecords().FirstOrDefault(or => or.OrderID == updatedOrder.OrderID);
- if (data == null)
- {
- return NotFound(new { message = "Order not found." });
- }
-
- // Update the existing record.
- data.CustomerID = updatedOrder.CustomerID;
- data.ShipCity = updatedOrder.ShipCity;
- data.ShipCountry = updatedOrder.ShipCountry;
- return Ok(new { success = true, message = "Order updated successfully." });
- }
-
- /// <summary>
- /// Deletes an order.
- /// </summary>
- /// <param name="deletedRecord">It contains the specific record detail which is need to be removed.</param>
- /// <returns>It returns the deleted record detail.</returns>
- [HttpPost]
- [Route("api/[controller]/Remove")]
- public IActionResult Remove([FromBody] CRUDModel<OrdersDetails> value)
- {
- int orderId;
- if (!int.TryParse(value.key.ToString(), out orderId))
- {
- return BadRequest(new { message = "Invalid OrderID format." });
- }
-
- if (orderId < 10031 || orderId > 10045)
- {
- return BadRequest(new { message = "OrderID must be between 10031 and 10045 to delete." });
- }
-
- var data = OrdersDetails.GetAllRecords().FirstOrDefault(orderData => orderData.OrderID == orderId);
- if (data == null)
- {
- return NotFound(new { message = "Order not found." });
- }
-
- OrdersDetails.GetAllRecords().Remove(data);
- return Ok(new { success = true, message = "Order deleted successfully." });
- }
-
- public class CRUDModel<T> where T : class
- {
- public string? action { get; set; }
- public string? keyColumn { get; set; }
- public object? key { get; set; }
- public T? value { get; set; }
- public List<T>? added { get; set; }
- public List<T>? changed { get; set; }
- public List<T>? deleted { get; set; }
- public IDictionary<string, object>? @params { get; set; }
- }
- }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/excel-export/excel-export-options.md b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/excel-export/excel-export-options.md
index 2822ae330d..9bfcb417d6 100644
--- a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/excel-export/excel-export-options.md
+++ b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/excel-export/excel-export-options.md
@@ -128,33 +128,6 @@ In the following example, the **CustomerID** is initially a hidden column in the
-## Show or hide columns while exporting with stacked header
-
-The Syncfusion ASP.NET Core Grid allows you to control the visibility of columns during export operations. This feature is particularly useful when customizing the data presented in exported files while using stacked headers.
-
-To implement the show or hide columns feature during Excel export in the Syncfusion ASP.NET Core Grid, follow these steps:
-
-1. Handle the [toolbarClick](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_ToolbarClick) event of the Syncfusion ASP.NET Core Grid.
-
-2. Update the visibility of the desired columns by setting the [visible](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridColumn.html#Syncfusion_EJ2_Grids_GridColumn_Visible) property of the column to **true** or **false**.
-
-3. Export the Syncfusion ASP.NET Core Grid to Excel document using the `ExcelExport` or `CsvExport` method.
-
-4. Handle the [excelExportComplete](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_ExcelExportComplete) event to restore the column visibility to its original state.
-
-In the following example, the **ShipName** is initially a hidden column in the Syncfusion ASP.NET Core Grid. However, during the Excel export process, the **ShipName** column is made visible, while the **OrderDate** column is hidden:
-
-{% tabs %}
-{% highlight cshtml tabtitle="CSHTML" %}
-{% include code-snippet/grid/excel-export/excelexport-show-hide/tagHelper %}
-{% endhighlight %}
-{% highlight c# tabtitle="excel-export.cs" %}
-{% include code-snippet/grid/excel-export/excelexport-show-hide/excel-export.cs %}
-{% endhighlight %}
-{% endtabs %}
-
-
-
## Enable filtering in the exported excel file
The Grid allows you to export data to Excel or CSV with filter options and also export only filtered records. This feature is especially beneficial when you need to share data with others while preserving the ability for them to filter and analyze the data in Excel or CSV.
diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/filtering/filtering.md b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/filtering/filtering.md
index 4f9dc87bd9..88d0a86792 100644
--- a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/filtering/filtering.md
+++ b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/filtering/filtering.md
@@ -172,37 +172,6 @@ Consider the following sample where the `ignoreAccent` property is set to true i
-## Perform ENUM column filtering
-
-The Syncfusion ASP.NET Core Grid allows you to filter enum-type data using the [filterBarTemplate](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridColumn.html#Syncfusion_EJ2_Grids_GridColumn_FilterBarTemplate) feature. This is particularly useful for filtering predefined values, such as categories or statuses.
-
-To achieve this functionality:
-
-1. Render [DropDownList](https://ej2.syncfusion.com/aspnetcore/documentation/drop-down-list/getting-started) in the `filterBarTemplate` for the enum-type column.
-
-2. Bind the enumerated list data to the column.
-
-3. Convert the `enum` values to a readable format using a computed column (e.g., TypeText) in the data model.
- ```cs
- public FileType Type { get; set; }
- public string TypeText => Type.ToString();
- ```
-
-4. In the [change](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.DropDowns.DropDownList.html#Syncfusion_EJ2_DropDowns_DropDownList_Change) event of the **DropDownList**, dynamically filter the column using the `filterByColumn` method of the Syncfusion ASP.NET Core Grid.
-
-Below is an example demonstrating how to filter enum-type data in a Syncfusion ASP.NET Core Grid:
-
-{% tabs %}
-{% highlight cshtml tabtitle="CSHTML" %}
-{% include code-snippet/grid/filtering/enum-filtering/tagHelper %}
-{% endhighlight %}
-{% highlight c# tabtitle="filter-bar.cs" %}
-{% include code-snippet/grid/filtering/enum-filtering/filter.cs %}
-{% endhighlight %}
-{% endtabs %}
-
-
-
## Filtering with case sensitivity
The Syncfusion<sup style="font-size:70%">®</sup> ASP.NET Core Grid provides the flexibility to enable or disable case sensitivity during filtering. This feature is useful when you want to control whether filtering operations should consider the case of characters. It can be achieved by using the [enableCaseSensitivity](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridFilterSettings.html#Syncfusion_EJ2_Grids_GridFilterSettings_EnableCaseSensitivity) property within the [filterSettings](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_FilterSettings) of the grid.
diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/pdf-export/pdf-export-options.md b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/pdf-export/pdf-export-options.md
index 30ab320744..3c5722b762 100644
--- a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/pdf-export/pdf-export-options.md
+++ b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/pdf-export/pdf-export-options.md
@@ -1,6 +1,6 @@
---
layout: post
-title: PDF Export Options in ##Platform_Name## Syncfusion Grid Component
+title: PDF Export Options in ##Platform_Name## Grid Component
description: Learn here all about PDF Export Options in Syncfusion ##Platform_Name## Grid component of Syncfusion Essential JS 2 and more.
platform: ej2-asp-core-mvc
control: PDF Export Options
@@ -135,33 +135,6 @@ In the following example, the **CustomerID** is initially a hidden column in the
-## Show or hide columns while exporting with stacked header
-
-The Syncfusion ASP.NET Core Grid allows you to control the visibility of columns during export operations. This feature is particularly useful when customizing the data presented in exported files while using stacked headers.
-
-To implement the show or hide columns feature during PDF export in the Syncfusion ASP.NET Core Grid, follow these steps:
-
-1. Handle the [toolbarClick](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_ToolbarClick) event of the Syncfusion ASP.NET Core Grid.
-
-2. Update the visibility of the desired columns by setting the [visible](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridColumn.html#Syncfusion_EJ2_Grids_GridColumn_Visible) property of the column to **true** or **false**.
-
-3. Export the Syncfusion ASP.NET Core Grid to PDF document using `pdfExport` method.
-
-4. Handle the [pdfExportComplete](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_PdfExportComplete) event to restore the column visibility to its original state.
-
-In the following example, the **ShipName** is initially a hidden column in the Syncfusion ASP.NET Core Grid. However, during the PDF export process, the **ShipName** column is made visible, while the **OrderDate** column is hidden:
-
-{% tabs %}
-{% highlight cshtml tabtitle="CSHTML" %}
-{% include code-snippet/grid/pdf-export/pdfexport-show-hide/tagHelper %}
-{% endhighlight %}
-{% highlight c# tabtitle="pdf-export.cs" %}
-{% include code-snippet/grid/pdf-export/pdfexport-show-hide/pdf-export.cs %}
-{% endhighlight %}
-{% endtabs %}
-
-
-
## Change page orientation
The Syncfusion ASP.NET Core Grid component allows you to change the page orientation of the exported PDF document from the default portrait mode to landscape mode. This feature provides the flexibility to adjust the layout and presentation of the exported PDF according to your needs.
@@ -372,7 +345,7 @@ The following example demonstrate how to customize the background color of the *
## Export grid as blob
-The Grid offers an option to export the data as a Blob instead of downloading it as a file in the browser. To export the grid as a Blob, set the `isBlob` parameter to **true** in the `pdfExport` method. The grid returns the promise of a blob in the [pdfExportComplete](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.grids.grid.html#Syncfusion_EJ2_Grids_Grid_PdfExportComplete) event.
+The Grid offers an option to export the data as a Blob instead of downloading it as a file in the browser. To export the grid as a Blob, set the `isBlob` parameter to **true** in the `pdfExport` method. The grid returns the promise of a blob in the [pdfExportComplete](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.grids.grid.html#Syncfusion_EJ2_Grids_Grid_PdfExportComplete) event.
The following example demonstrates how to obtain the blob data of the exported grid by executing the promise in the `pdfExportComplete` event.
diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/selection/row-selection.md b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/selection/row-selection.md
index 6556301e49..5c8188c1ac 100644
--- a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/selection/row-selection.md
+++ b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/selection/row-selection.md
@@ -210,7 +210,7 @@ To achieve this, you can leverage the `getSelectedRowIndexes` method, which retu
The Grid component allows you to retrieve the selected records even when navigating to different pages. This feature is useful when working with large data sets and allows you to perform actions on the selected records across multiple pages.
-To persist the selection across pages, you need to enable the [persistSelection](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridSelectionSettings.html#Syncfusion_EJ2_Grids_GridSelectionSettings_PersistSelection) property. By default, this property is set to **false**. To enable it, set the value to **true** in the [selectionSettings](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridSelectionSettings.html) property of the Grid component.
+To persist the selection across pages, you need to enable the [persistselection](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridSelectionSettings.html#Syncfusion_EJ2_Grids_GridSelectionSettings_PersistSelection) property. By default, this property is set to **false**. To enable it, set the value to **true** in the [selectionSettings](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridSelectionSettings.html) property of the Grid component.
To retrieve the selected records from different pages, you can use the `getSelectedRecords` method. This method returns an array of the selected records.
@@ -290,440 +290,4 @@ In the following example, row selection is canceled when the value of **Customer
{% endhighlight %}
{% endtabs %}
-
-
-## Pass selected records to server using AJAX
-
-The Syncfusion ASP.NET Core Grid allows you to select multiple or single records and send them to the server using AJAX requests. This feature is useful for scenarios where you need to process or manipulate selected data on the server side.
-
-To achieve passing selected records to the server using AJAX requests in the Syncfusion ASP.NET Core Grid, follow these steps:
-
-**Step 1:** Open Visual Studio and create an ASP.NET Core project named **SelectRecord**. To create an ASP.NET Core application, follow the documentation [link](https://learn.microsoft.com/en-us/aspnet/core/tutorials/razor-pages/razor-pages-start?view=aspnetcore-8.0&tabs=visual-studio#create-a-razor-pages-web-app) for detailed steps.
-
-**Step 2 :** Create a simple Syncfusion ASP.NET Core Grid by following the [Getting Started](https://ej2.syncfusion.com/aspnetcore/documentation/grid/getting-started-core) documentation link.
-
-**Step 3:** In your HTML file (e.g., **Index.cshtml**), add a button to trigger the AJAX call and include the Syncfusion ASP.NET Core Grid with necessary configurations:
-
-```html
-<!-- Button to pass selected records -->
-<ejs-button id="passRecords" content="Pass the selected records to controller" cssClass="e-primary"></ejs-button>
-
-<div style="padding: 20px 17px 0 0">
-<ejs-grid id="Grid" height="273px">
- <!-- Replace **** with actual server port. -->
- <e-data-manager url="https://localhost:****/api/grid" adaptor="UrlAdaptor"></e-data-manager>
- <e-grid-selectionsettings type="Multiple"></e-grid-selectionsettings>
- <e-grid-columns>
- <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="100"></e-grid-column>
- <e-grid-column field="EmployeeID" headerText="Employee ID" width="120" textAlign="Right"></e-grid-column>
- <e-grid-column field="CustomerID" headerText="Customer Name" width="120"></e-grid-column>
- <e-grid-column field="OrderDate" headerText="Date" width="150" format="yMd"></e-grid-column>
- </e-grid-columns>
-</ejs-grid>
-</div>
-```
-
-**Step 4:** In your script section, you need to handle the button `click` event. When clicked, retrieve the selected records using the `getSelectedRecords` method from the Syncfusion ASP.NET Core Grid and send them to the server using AJAX. Add the following code:
-
-```ts
-<script>
- // Button click event to send selected records.
- document.getElementById("passRecords").addEventListener("click", function () {
- var grid = document.querySelector("#Grid")?.ej2_instances?.[0]; // Get the Grid instance.
- var selectedRecords = grid.getSelectedRecords(); // Get selected rows.
- if (selectedRecords.length === 0) {
- alert("Please select at least one record.");
- return;
- }
- // Convert selected records to JSON.
- var rows = JSON.stringify(selectedRecords);
- // Send data to the server using Ajax.
- var ajax = new ej.base.Ajax({
- url: 'https://localhost:7108/api/grid/SelectRecord', // Replace **** with actual server port.
- type: 'POST',
- contentType: 'application/json; charset=utf-8',
- data: rows
- });
-
- ajax.onSuccess = function (result) {
- console.log("Records sent successfully:", result);
- };
- ajax.send();
- });
-</script>
-```
-
-**Step 5:** On the server side, create a controller named **GridController.cs** under the **Controllers** folder to handle incoming requests and process selected records. Add the following code:
-
-```cs
-using Microsoft.AspNetCore.Http;
-using Microsoft.AspNetCore.Mvc;
-using SelectRecord.Models;
-using Syncfusion.EJ2.Base;
-
-namespace SelectRecord.Controllers
-{
- [Route("api/[controller]")]
- [ApiController]
- public class GridController : Controller
- {
- [HttpPost]
- public object Post([FromBody] DataManagerRequest DataManagerRequest)
- {
- // Retrieve data from the data source (e.g., database).
- IQueryable<OrdersDetails> DataSource = GetOrderData().AsQueryable();
- DataOperations queryableOperation = new DataOperations(); // Initialize DataOperations instance.
-
- // Handling searching operation.
- if (DataManagerRequest.Search != null && DataManagerRequest.Search.Count > 0)
- {
- DataSource = queryableOperation.PerformSearching(DataSource, DataManagerRequest.Search);
- }
- // Handling filtering operation.
- if (DataManagerRequest.Where != null && DataManagerRequest.Where.Count > 0)
- {
- foreach (var condition in DataManagerRequest.Where)
- {
- foreach (var predicate in condition.predicates)
- {
- DataSource = queryableOperation.PerformFiltering(DataSource, DataManagerRequest.Where, predicate.Operator);
- }
- }
- }
- // Handling sorting operation.
- if (DataManagerRequest.Sorted != null && DataManagerRequest.Sorted.Count > 0)
- {
- DataSource = queryableOperation.PerformSorting(DataSource, DataManagerRequest.Sorted);
- }
- // Get the total count of records.
- int totalRecordsCount = DataSource.Count();
-
- // Handling paging operation.
- if (DataManagerRequest.Skip != 0)
- {
- DataSource = queryableOperation.PerformSkip(DataSource, DataManagerRequest.Skip);
- }
- if (DataManagerRequest.Take != 0)
- {
- DataSource = queryableOperation.PerformTake(DataSource, DataManagerRequest.Take);
- }
-
- // Get the total records count.
- int count = DataSource.Count();
-
- // Return result and total record count.
- return DataManagerRequest.RequiresCounts ? Ok(new { result = DataSource, count }) : Ok(DataSource);
- }
-
- [HttpGet]
- public List<OrdersDetails> GetOrderData()
- {
- var data = OrdersDetails.GetAllRecords().ToList();
- return data;
- }
-
- [HttpPost("SelectRecord")] // Make sure this route matches the AJAX request.
- public ActionResult SelectRecord([FromBody] List<Gridcolumns> row)
- {
- return Json(row);
- }
- public class SelectedModel
- {
- public List<Gridcolumns> rowData { get; set; }
- }
- public class Gridcolumns
- {
- public int OrderID { get; set; }
- public string CustomerID { get; set; }
- public int EmployeeID { get; set; }
- public DateTime OrderDate { get; set; }
- }
- }
-}
-```
-
-**Step 6:** Create a model class named **OrdersDetails.cs** under the **Models** folder in the server-side project to represent the order data. Add the following code:
-
-```cs
-namespace SelectRecord.Models
-{
- public class OrdersDetails
- {
- public static List<OrdersDetails> order = new List<OrdersDetails>();
- public OrdersDetails()
- {
-
- }
- public OrdersDetails(
- int OrderID, string CustomerId, int EmployeeId, double Freight, bool Verified,
- DateTime OrderDate, string ShipCity, string ShipName, string ShipCountry,
- DateTime ShippedDate, string ShipAddress)
- {
- this.OrderID = OrderID;
- this.CustomerID = CustomerId;
- this.EmployeeID = EmployeeId;
- this.Freight = Freight;
- this.ShipCity = ShipCity;
- this.Verified = Verified;
- this.OrderDate = OrderDate;
- this.ShipName = ShipName;
- this.ShipCountry = ShipCountry;
- this.ShippedDate = ShippedDate;
- this.ShipAddress = ShipAddress;
- }
-
- public static List<OrdersDetails> GetAllRecords()
- {
- if (order.Count() == 0)
- {
- int code = 10000;
- for (int i = 1; i < 10; i++)
- {
- order.Add(new OrdersDetails(code + 1, "ALFKI", i + 0, 2.3 * i, false, new DateTime(1991, 05, 15), "Berlin", "Simons bistro", "Denmark", new DateTime(1996, 7, 16), "Kirchgasse 6"));
- order.Add(new OrdersDetails(code + 2, "ANATR", i + 2, 3.3 * i, true, new DateTime(1990, 04, 04), "Madrid", "Queen Cozinha", "Brazil", new DateTime(1996, 9, 11), "Avda. Azteca 123"));
- order.Add(new OrdersDetails(code + 3, "ANTON", i + 1, 4.3 * i, true, new DateTime(1957, 11, 30), "Cholchester", "Frankenversand", "Germany", new DateTime(1996, 10, 7), "Carrera 52 con Ave. Bolívar #65-98 Llano Largo"));
- order.Add(new OrdersDetails(code + 4, "BLONP", i + 3, 5.3 * i, false, new DateTime(1930, 10, 22), "Marseille", "Ernst Handel", "Austria", new DateTime(1996, 12, 30), "Magazinweg 7"));
- order.Add(new OrdersDetails(code + 5, "BOLID", i + 4, 6.3 * i, true, new DateTime(1953, 02, 18), "Tsawassen", "Hanari Carnes", "Switzerland", new DateTime(1997, 12, 3), "1029 - 12th Ave. S."));
- code += 5;
- }
- }
- return order;
- }
-
- public int? OrderID { get; set; }
- public string? CustomerID { get; set; }
- public int? EmployeeID { get; set; }
- public double? Freight { get; set; }
- public string? ShipCity { get; set; }
- public bool? Verified { get; set; }
- public DateTime OrderDate { get; set; }
- public string? ShipName { get; set; }
- public string? ShipCountry { get; set; }
- public DateTime ShippedDate { get; set; }
- public string? ShipAddress { get; set; }
- }
-}
-
-```
-
-The following screenshot shows how to pass selected records to the server:
-
-
-
-## Pass selected records to server using FETCH
-
-The Syncfusion ASP.NET Core Grid allows you to select multiple or single records and send them to the server using Fetch requests. This feature is useful for scenarios where you need to process or manipulate selected data on the server side.
-
-To achieve passing selected records to the server using Fetch requests in the Syncfusion ASP.NET Core Grid, follow these steps:
-
-**Step 1:** Open Visual Studio and create an ASP.NET Core project named **SelectRecord**. To create an ASP.NET Core application, follow the documentation [link](https://learn.microsoft.com/en-us/aspnet/core/tutorials/razor-pages/razor-pages-start?view=aspnetcore-8.0&tabs=visual-studio#create-a-razor-pages-web-app) for detailed steps.
-
-**Step 2 :** Create a simple Syncfusion ASP.NET Core Grid by following the [Getting Started](https://ej2.syncfusion.com/aspnetcore/documentation/grid/getting-started-core) documentation link.
-
-**Step 3:** In your HTML file (e.g., **Index.cshtml**), add a button to trigger the Fetch call and include the Syncfusion ASP.NET Core Grid with necessary configurations:
-
-```html
-<!-- Button to pass selected records -->
-<ejs-button id="passRecords" content="Pass the selected records to controller" cssClass="e-primary"></ejs-button>
-
-<div style="padding: 20px 17px 0 0">
-<ejs-grid id="Grid" height="273px">
- <!-- Replace **** with actual server port. -->
- <e-data-manager url="https://localhost:****/api/grid" adaptor="UrlAdaptor"></e-data-manager>
- <e-grid-selectionsettings type="Multiple"></e-grid-selectionsettings>
- <e-grid-columns>
- <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="100"></e-grid-column>
- <e-grid-column field="EmployeeID" headerText="Employee ID" width="120" textAlign="Right"></e-grid-column>
- <e-grid-column field="CustomerID" headerText="Customer Name" width="120"></e-grid-column>
- <e-grid-column field="OrderDate" headerText="Date" width="150" format="yMd"></e-grid-column>
- </e-grid-columns>
-</ejs-grid>
-</div>
-```
-
-**Step 4:** In your script section, you need to handle the button `click` event. When clicked, retrieve the selected records using the `getSelectedRecords` method from the Syncfusion ASP.NET Core Grid and send them to the server using Fetch. Add the following code:
-
-```ts
-<script>
- // Button click event to send selected records.
- document.getElementById("passRecords").addEventListener("click", function () {
- var grid = document.querySelector("#Grid")?.ej2_instances?.[0]; // Get the Grid instance.
- var selectedRecords = grid.getSelectedRecords(); // Get selected rows.
- if (selectedRecords.length === 0) {
- alert("Please select at least one record.");
- return;
- }
- // Convert selected records to JSON.
- var rows = JSON.stringify(selectedRecords);
- // Send data to the server using Fetch.
- var fetch = new ej.base.Fetch({
- url: 'https://localhost:****/api/grid/SelectRecord', // Replace **** with actual server port.
- type: 'POST',
- contentType: 'application/json; charset=utf-8',
- data: rows
- });
-
- fetch.onSuccess = function (result) {
- console.log("Records sent successfully:", result);
- };
- fetch.send();
- });
-</script>
-```
-
-**Step 5:** On the server side, create a controller named **GridController.cs** under the **Controllers** folder to handle incoming requests and process selected records. Add the following code:
-
-```cs
-using Microsoft.AspNetCore.Http;
-using Microsoft.AspNetCore.Mvc;
-using SelectRecord.Models;
-using Syncfusion.EJ2.Base;
-
-namespace SelectRecord.Controllers
-{
- [Route("api/[controller]")]
- [ApiController]
- public class GridController : Controller
- {
- [HttpPost]
- public object Post([FromBody] DataManagerRequest DataManagerRequest)
- {
- // Retrieve data from the data source (e.g., database).
- IQueryable<OrdersDetails> DataSource = GetOrderData().AsQueryable();
- DataOperations queryableOperation = new DataOperations(); // Initialize DataOperations instance.
-
- // Handling searching operation.
- if (DataManagerRequest.Search != null && DataManagerRequest.Search.Count > 0)
- {
- DataSource = queryableOperation.PerformSearching(DataSource, DataManagerRequest.Search);
- }
- // Handling filtering operation.
- if (DataManagerRequest.Where != null && DataManagerRequest.Where.Count > 0)
- {
- foreach (var condition in DataManagerRequest.Where)
- {
- foreach (var predicate in condition.predicates)
- {
- DataSource = queryableOperation.PerformFiltering(DataSource, DataManagerRequest.Where, predicate.Operator);
- }
- }
- }
- // Handling sorting operation.
- if (DataManagerRequest.Sorted != null && DataManagerRequest.Sorted.Count > 0)
- {
- DataSource = queryableOperation.PerformSorting(DataSource, DataManagerRequest.Sorted);
- }
- // Get the total count of records.
- int totalRecordsCount = DataSource.Count();
-
- // Handling paging operation.
- if (DataManagerRequest.Skip != 0)
- {
- DataSource = queryableOperation.PerformSkip(DataSource, DataManagerRequest.Skip);
- }
- if (DataManagerRequest.Take != 0)
- {
- DataSource = queryableOperation.PerformTake(DataSource, DataManagerRequest.Take);
- }
-
- // Get the total records count.
- int count = DataSource.Count();
-
- // Return result and total record count.
- return DataManagerRequest.RequiresCounts ? Ok(new { result = DataSource, count }) : Ok(DataSource);
- }
-
- [HttpGet]
- public List<OrdersDetails> GetOrderData()
- {
- var data = OrdersDetails.GetAllRecords().ToList();
- return data;
- }
-
- [HttpPost("SelectRecord")] // Make sure this route matches the Fetch request.
- public ActionResult SelectRecord([FromBody] List<Gridcolumns> row)
- {
- return Json(row);
- }
- public class SelectedModel
- {
- public List<Gridcolumns> rowData { get; set; }
- }
- public class Gridcolumns
- {
- public int OrderID { get; set; }
- public string CustomerID { get; set; }
- public int EmployeeID { get; set; }
- public DateTime OrderDate { get; set; }
- }
- }
-}
-```
-
-**Step 6:** Create a model class named **OrdersDetails.cs** under the **Models** folder in the server-side project to represent the order data. Add the following code:
-
-```cs
-namespace SelectRecord.Models
-{
- public class OrdersDetails
- {
- public static List<OrdersDetails> order = new List<OrdersDetails>();
- public OrdersDetails()
- {
-
- }
- public OrdersDetails(
- int OrderID, string CustomerId, int EmployeeId, double Freight, bool Verified,
- DateTime OrderDate, string ShipCity, string ShipName, string ShipCountry,
- DateTime ShippedDate, string ShipAddress)
- {
- this.OrderID = OrderID;
- this.CustomerID = CustomerId;
- this.EmployeeID = EmployeeId;
- this.Freight = Freight;
- this.ShipCity = ShipCity;
- this.Verified = Verified;
- this.OrderDate = OrderDate;
- this.ShipName = ShipName;
- this.ShipCountry = ShipCountry;
- this.ShippedDate = ShippedDate;
- this.ShipAddress = ShipAddress;
- }
-
- public static List<OrdersDetails> GetAllRecords()
- {
- if (order.Count() == 0)
- {
- int code = 10000;
- for (int i = 1; i < 10; i++)
- {
- order.Add(new OrdersDetails(code + 1, "ALFKI", i + 0, 2.3 * i, false, new DateTime(1991, 05, 15), "Berlin", "Simons bistro", "Denmark", new DateTime(1996, 7, 16), "Kirchgasse 6"));
- order.Add(new OrdersDetails(code + 2, "ANATR", i + 2, 3.3 * i, true, new DateTime(1990, 04, 04), "Madrid", "Queen Cozinha", "Brazil", new DateTime(1996, 9, 11), "Avda. Azteca 123"));
- order.Add(new OrdersDetails(code + 3, "ANTON", i + 1, 4.3 * i, true, new DateTime(1957, 11, 30), "Cholchester", "Frankenversand", "Germany", new DateTime(1996, 10, 7), "Carrera 52 con Ave. Bolívar #65-98 Llano Largo"));
- order.Add(new OrdersDetails(code + 4, "BLONP", i + 3, 5.3 * i, false, new DateTime(1930, 10, 22), "Marseille", "Ernst Handel", "Austria", new DateTime(1996, 12, 30), "Magazinweg 7"));
- order.Add(new OrdersDetails(code + 5, "BOLID", i + 4, 6.3 * i, true, new DateTime(1953, 02, 18), "Tsawassen", "Hanari Carnes", "Switzerland", new DateTime(1997, 12, 3), "1029 - 12th Ave. S."));
- code += 5;
- }
- }
- return order;
- }
-
- public int? OrderID { get; set; }
- public string? CustomerID { get; set; }
- public int? EmployeeID { get; set; }
- public double? Freight { get; set; }
- public string? ShipCity { get; set; }
- public bool? Verified { get; set; }
- public DateTime OrderDate { get; set; }
- public string? ShipName { get; set; }
- public string? ShipCountry { get; set; }
- public DateTime ShippedDate { get; set; }
- public string? ShipAddress { get; set; }
- }
-}
-
-```
-
-The following screenshot shows how to pass selected records to the server:
-
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/grid/images/column-template/column-template-radiobutton.png b/ej2-asp-core-mvc/grid/images/column-template/column-template-radiobutton.png
deleted file mode 100644
index 901a452ad1..0000000000
Binary files a/ej2-asp-core-mvc/grid/images/column-template/column-template-radiobutton.png and /dev/null differ
diff --git a/ej2-asp-core-mvc/grid/images/databinding/fetch-data.png b/ej2-asp-core-mvc/grid/images/databinding/fetch-data.png
deleted file mode 100644
index 7f38dc74a3..0000000000
Binary files a/ej2-asp-core-mvc/grid/images/databinding/fetch-data.png and /dev/null differ
diff --git a/ej2-asp-core-mvc/grid/images/databinding/local-time.gif b/ej2-asp-core-mvc/grid/images/databinding/local-time.gif
new file mode 100644
index 0000000000..fe789ec8cb
Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/databinding/local-time.gif differ
diff --git a/ej2-asp-core-mvc/grid/images/editing/custom-message.png b/ej2-asp-core-mvc/grid/images/editing/custom-message.png
deleted file mode 100644
index 61bdba0e40..0000000000
Binary files a/ej2-asp-core-mvc/grid/images/editing/custom-message.png and /dev/null differ
diff --git a/ej2-asp-core-mvc/grid/images/excel-exporting/excelexporting-custom.png b/ej2-asp-core-mvc/grid/images/excel-exporting/excelexporting-custom.png
index a39014cba6..9a289de588 100644
Binary files a/ej2-asp-core-mvc/grid/images/excel-exporting/excelexporting-custom.png and b/ej2-asp-core-mvc/grid/images/excel-exporting/excelexporting-custom.png differ
diff --git a/ej2-asp-core-mvc/grid/images/excel-exporting/excelexporting-formula.png b/ej2-asp-core-mvc/grid/images/excel-exporting/excelexporting-formula.png
index 7de44ec0d9..8d197be88e 100644
Binary files a/ej2-asp-core-mvc/grid/images/excel-exporting/excelexporting-formula.png and b/ej2-asp-core-mvc/grid/images/excel-exporting/excelexporting-formula.png differ
diff --git a/ej2-asp-core-mvc/grid/images/excel-exporting/exportoption-show-hide-stacked-header.png b/ej2-asp-core-mvc/grid/images/excel-exporting/exportoption-show-hide-stacked-header.png
deleted file mode 100644
index 1e84132e49..0000000000
Binary files a/ej2-asp-core-mvc/grid/images/excel-exporting/exportoption-show-hide-stacked-header.png and /dev/null differ
diff --git a/ej2-asp-core-mvc/grid/images/filtering/enum-filtering.png b/ej2-asp-core-mvc/grid/images/filtering/enum-filtering.png
deleted file mode 100644
index ce384555e8..0000000000
Binary files a/ej2-asp-core-mvc/grid/images/filtering/enum-filtering.png and /dev/null differ
diff --git a/ej2-asp-core-mvc/grid/images/foreign/edit-template.gif b/ej2-asp-core-mvc/grid/images/foreign/edit-template.gif
new file mode 100644
index 0000000000..afab2e981f
Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/foreign/edit-template.gif differ
diff --git a/ej2-asp-core-mvc/grid/images/foreign/foreign-key-in-column-template.png b/ej2-asp-core-mvc/grid/images/foreign/foreign-key-in-column-template.png
deleted file mode 100644
index 564532bcfe..0000000000
Binary files a/ej2-asp-core-mvc/grid/images/foreign/foreign-key-in-column-template.png and /dev/null differ
diff --git a/ej2-asp-core-mvc/grid/images/pdf-export/exportoption-show-hide-stacked-header.png b/ej2-asp-core-mvc/grid/images/pdf-export/exportoption-show-hide-stacked-header.png
deleted file mode 100644
index af807a8421..0000000000
Binary files a/ej2-asp-core-mvc/grid/images/pdf-export/exportoption-show-hide-stacked-header.png and /dev/null differ
diff --git a/ej2-asp-core-mvc/grid/images/selection/row-selected-record.png b/ej2-asp-core-mvc/grid/images/selection/row-selected-record.png
deleted file mode 100644
index 4f8cab9105..0000000000
Binary files a/ej2-asp-core-mvc/grid/images/selection/row-selected-record.png and /dev/null differ