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 new file mode 100644 index 0000000000..6a5ab5d499 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/columns/column-template-radiobutton/OrdersDetails.cs @@ -0,0 +1,61 @@ +using System.ComponentModel.DataAnnotations; +namespace GridSample.Models +{ + public class OrdersDetails + { + public 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, 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 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 new file mode 100644 index 0000000000..a313f00f64 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/columns/column-template-radiobutton/column-template-radiobutton.cs @@ -0,0 +1,6 @@ +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 new file mode 100644 index 0000000000..9d472a66e4 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/columns/column-template-radiobutton/razor @@ -0,0 +1,40 @@ +@{ + ViewBag.Title = "Home Page"; +} + +@using Syncfusion.EJ2 + +@Html.EJS().Grid("grid").DataSource((IEnumerable)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() + + + + \ 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 new file mode 100644 index 0000000000..f7965e8f59 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/columns/column-template-radiobutton/tagHelper @@ -0,0 +1,41 @@ +@page +@model IndexModel +@{ + ViewData["Title"] = "Home page"; +} + + + + + + + + + + + + + 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 new file mode 100644 index 0000000000..f1a3faeb2d --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/columns/foreignkey-columntemplate/EmployeeDetails.cs @@ -0,0 +1,71 @@ +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 GetAllRecords() + { + List Emp = new List(); + 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 new file mode 100644 index 0000000000..6a5ab5d499 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/columns/foreignkey-columntemplate/OrdersDetails.cs @@ -0,0 +1,61 @@ +using System.ComponentModel.DataAnnotations; +namespace GridSample.Models +{ + public class OrdersDetails + { + public 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, 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 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 new file mode 100644 index 0000000000..26d54f6cf4 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/columns/foreignkey-columntemplate/foreignkey-columntemplate.cs @@ -0,0 +1,6 @@ +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 new file mode 100644 index 0000000000..6e82ba1055 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/columns/foreignkey-columntemplate/razor @@ -0,0 +1,40 @@ +@{ + ViewBag.Title = "Home Page"; +} + +@using Syncfusion.EJ2 + +@Html.EJS().Grid("grid").DataSource((IEnumerable)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)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() + + + \ 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 new file mode 100644 index 0000000000..6d230328dd --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/columns/foreignkey-columntemplate/tagHelper @@ -0,0 +1,39 @@ +@page +@model IndexModel +@{ + ViewData["Title"] = "Home page"; +} + + + + + + + + + + + \ 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 eb15481f46..5b34aaf92b 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,6 +187,26 @@ function queryCellInfo(args) { ![Column Template ProgressBar](../images/column-template/column-template-progressbar.png) +### 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 %} + +![Column Template RadioButton](../images/column-template/column-template-radiobutton.png) + ## 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 b572e99c7e..06e0eed649 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,6 +141,31 @@ In the provided example, the `customAggregateFn` function is used to filter the ![Customize filter UI of foreign key column](../images/foreign/foreign-aggergate.png) +## 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 %} + +![Render foreign key value in column template](../images/foreign/foreign-key-in-column-template.png) + ## 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. 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 30bbc723a3..2424777bc2 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 %} -![Column Template HyberLink](../images/column-template/column-template-hyperlink.png) +![Column Template HyperLink](../images/column-template/column-template-hyperlink.png) >The window.open() method is a built-in JavaScript function that opens a new browser window or tab with the specified URL. @@ -187,6 +187,26 @@ function queryCellInfo(args) { ![Column Template ProgressBar](../images/column-template/column-template-progressbar.png) +### 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 %} + +![Column Template RadioButton](../images/column-template/column-template-radiobutton.png) + ## 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 c6819d8bd3..2cbc977e12 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,6 +141,31 @@ In the provided example, the `customAggregateFn` function is used to filter the ![Customize filter UI of foreign key column](../images/foreign/foreign-aggergate.png) +## 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 %} + +![Render foreign key value in column template](../images/foreign/foreign-key-in-column-template.png) + ## 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. 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 new file mode 100644 index 0000000000..901a452ad1 Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/column-template/column-template-radiobutton.png 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 new file mode 100644 index 0000000000..564532bcfe Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/foreign/foreign-key-in-column-template.png differ