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..2468c716dd --- /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 timeZones = new List + { + 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(); + } + + \ No newline at end of file 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..cfdc7d5fa7 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/data-binding/localtime/razor @@ -0,0 +1,58 @@ +@{ + ViewBag.Title = "Syncfusion Grid with Timezone Selection"; +} + +@using Syncfusion.EJ2 + +
+ + @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() +
+
+ @Html.EJS().CheckBox("timezoneCheckbox").Label("Prevent Timezone Conversion").Change("onCheckboxChange").Render() +
+
+ @*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("Freight").HeaderText("Freight").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width("150").Add(); + col.Field("OrderDate").HeaderText("Order Date").Width("140").Format("dd/MM/yyyy HH:mm").Add(); + }).Load("load").Render() +
+ + 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..35b19d6114 --- /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; +} +
+ + +
+
+ +
+ + @* Replace **** with your actual port number.*@ + + + + + + + + + + \ No newline at end of file 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..e85b54938a 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 @@ -181,4 +181,299 @@ In the following example, **Customer Name** and **Ship City** are foreign key co {% endhighlight %} {% endtabs %} -![Enable multiple foreign key columns](../images/foreign/foreign-multiple.png) \ No newline at end of file +![Enable multiple foreign key columns](../images/foreign/foreign-multiple.png) + +## 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() { "Add", "Edit", "Delete", "Update", "Cancel" }).Render() + + +``` + +**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 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 GetOrderData() + { + var data = OrdersDetails.GetAllRecords().ToList(); + return data; + } + + /// + /// Inserts a new data item into the data collection. + /// + /// It contains the new record detail which is need to be inserted. + /// Returns void. + [HttpPost] + [Route("api/Grid/Insert")] + public void Insert(CRUDModel newRecord) + { + if (newRecord.value != null) + { + OrdersDetails.GetAllRecords().Insert(0, newRecord.value); + } + } + + /// + /// Update a existing data item from the data collection. + /// + /// It contains the updated record detail which is need to be updated. + /// Returns void. + [HttpPost] + [Route("api/Grid/Update")] + public void Update(CRUDModel 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. + } + } + + } + /// + /// Remove a specific data item from the data collection. + /// + /// It contains the specific record detail which is need to be removed. + /// Returns void. + [HttpPost] + [Route("api/Grid/Remove")] + public void Remove(CRUDModel 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 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? added { get; set; } + public List? changed { get; set; } + public List? deleted { get; set; } + public IDictionary? @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 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 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 order = new List(); + 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 GetAllRecords() + { + if (order.Count == 0) + { + int code = 10000; + List 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 GetAllEmployees() + { + return new List + { + 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" } + }; + } + } +} +``` + +![Edit template in foreign key column using remote data](../images/foreign/edit-template.gif) \ 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 %} + +![Prevent to convert local time zone format](../images/databinding/local-time.gif) + ## 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.NETCORE/columns/foreign-key-column.md b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/columns/foreign-key-column.md index 2cbc977e12..b429882f9e 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 @@ -181,4 +181,313 @@ In the following example, **Customer Name** and **Ship City** are foreign key co {% endhighlight %} {% endtabs %} -![Enable multiple foreign key columns](../images/foreign/foreign-multiple.png) \ No newline at end of file +![Enable multiple foreign key columns](../images/foreign/foreign-multiple.png) + +## 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. + + + + + + + + + + + + + + + +``` + +**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 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 GetOrderData() + { + var data = OrdersDetails.GetAllRecords().ToList(); + return data; + } + + /// + /// Inserts a new data item into the data collection. + /// + /// It contains the new record detail which is need to be inserted. + /// Returns void. + [HttpPost] + [Route("api/Grid/Insert")] + public void Insert([FromBody] CRUDModel newRecord) + { + if (newRecord.value != null) + { + OrdersDetails.GetAllRecords().Insert(0, newRecord.value); + } + } + + /// + /// Update a existing data item from the data collection. + /// + /// It contains the updated record detail which is need to be updated. + /// Returns void. + [HttpPost] + [Route("api/Grid/Update")] + public void Update([FromBody] CRUDModel 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. + } + } + + } + /// + /// Remove a specific data item from the data collection. + /// + /// It contains the specific record detail which is need to be removed. + /// Returns void. + [HttpPost] + [Route("api/Grid/Remove")] + public void Remove([FromBody] CRUDModel 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 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? added { get; set; } + public List? changed { get; set; } + public List? deleted { get; set; } + public IDictionary? @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 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 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 order = new List(); + 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 GetAllRecords() + { + if (order.Count == 0) + { + int code = 10000; + List 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 GetAllEmployees() + { + return new List + { + 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" } + }; + } + } +} +``` + +![Edit template in foreign key column using remote data](../images/foreign/edit-template.gif) 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 %} + +![Prevent to convert local time zone format](../images/databinding/local-time.gif) + ## 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/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/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