Skip to content

Commit a8e01ab

Browse files
farveensulthanafarveensulthana
authored
Merge pull request #4093 from syncfusion-content/945055-radio-hf
945055: Radio button and foreign key column hotfix
2 parents c4fce2b + 6d3b57d commit a8e01ab

File tree

15 files changed

+456
-1
lines changed

15 files changed

+456
-1
lines changed

‎ej2-asp-core-mvc/code-snippet/grid/columns/column-template-radiobutton/OrdersDetails.cs

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
using System.ComponentModel.DataAnnotations;
2+
namespace GridSample.Models
3+
{
4+
public class OrdersDetails
5+
{
6+
public static List<OrdersDetails> order = new List<OrdersDetails>();
7+
8+
public OrdersDetails() { }
9+
10+
public OrdersDetails(
11+
int OrderID, string CustomerId, int EmployeeId, double Freight, bool Verified,
12+
DateTime OrderDate, string ShipCity, string ShipName, string ShipCountry,
13+
DateTime ShippedDate, string ShipAddress, string OrderStatus)
14+
{
15+
this.OrderID = OrderID;
16+
this.CustomerID = CustomerId;
17+
this.EmployeeID = EmployeeId;
18+
this.Freight = Freight;
19+
this.ShipCity = ShipCity;
20+
this.Verified = Verified;
21+
this.OrderDate = OrderDate;
22+
this.ShipName = ShipName;
23+
this.ShipCountry = ShipCountry;
24+
this.ShippedDate = ShippedDate;
25+
this.ShipAddress = ShipAddress;
26+
this.OrderStatus = OrderStatus;
27+
}
28+
29+
public static List<OrdersDetails> GetAllRecords()
30+
{
31+
if (order.Count == 0)
32+
{
33+
int code = 10000;
34+
for (int i = 1; i < 10; i++)
35+
{
36+
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"));
37+
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"));
38+
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"));
39+
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"));
40+
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"));
41+
code += 5;
42+
}
43+
}
44+
return order;
45+
}
46+
47+
[Key]
48+
public int OrderID { get; set; }
49+
public string CustomerID { get; set; }
50+
public int? EmployeeID { get; set; }
51+
public double Freight { get; set; }
52+
public string ShipCity { get; set; }
53+
public bool Verified { get; set; }
54+
public DateTime OrderDate { get; set; }
55+
public string ShipName { get; set; }
56+
public string ShipCountry { get; set; }
57+
public DateTime ShippedDate { get; set; }
58+
public string ShipAddress { get; set; }
59+
public string OrderStatus { get; set; }
60+
}
61+
}

‎ej2-asp-core-mvc/code-snippet/grid/columns/column-template-radiobutton/column-template-radiobutton.cs

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
public IActionResult Index()
2+
{
3+
var Order = OrdersDetails.GetAllRecords();
4+
ViewBag.DataSource = Order;
5+
return View();
6+
}

‎ej2-asp-core-mvc/code-snippet/grid/columns/column-template-radiobutton/razor

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
@{
2+
ViewBag.Title = "Home Page";
3+
}
4+
5+
@using Syncfusion.EJ2
6+
7+
@Html.EJS().Grid("grid").DataSource((IEnumerable<object>)ViewBag.dataSource).Height("315px").Columns(col => {
8+
col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
9+
col.Field("CustomerID").HeaderText("Customer ID").Width("150").Add();
10+
col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").EditType("numericedit").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
11+
col.Field("OrderDate").HeaderText("OrderDate").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width("150").Add();
12+
col.Field("OrderStatus").HeaderText("Order Status").Template("#columnTemplate").Width("200").Add();
13+
}).QueryCellInfo("initializeRadioButtons").Render()
14+
15+
<script type="text/x-template" id="columnTemplate">
16+
<div style="display: flex; flex-direction: column; align-items: start; gap: 5px;">
17+
<input type='radio' class='order-status-radio' data-status='Pending' />
18+
<input type='radio' class='order-status-radio' data-status='Confirmed' />
19+
<input type='radio' class='order-status-radio' data-status='Shipped' />
20+
<input type='radio' class='order-status-radio' data-status='Cancelled' />
21+
</div>
22+
</script>
23+
24+
<script>
25+
function initializeRadioButtons(args) {
26+
if (args.column.field === 'OrderStatus') {
27+
let orderStatus = args.data['OrderStatus']; // Get current row status.
28+
let radioButtons = args.cell.querySelectorAll('.order-status-radio');
29+
radioButtons.forEach((radio) => {
30+
let status = radio.getAttribute('data-status');
31+
let radioButton = new ej.buttons.RadioButton({
32+
label: status,
33+
name: `orderStatus-${args.data['OrderID']}`, // Unique name per row.
34+
checked: status === orderStatus
35+
});
36+
radioButton.appendTo(radio);
37+
});
38+
}
39+
}
40+
</script>

‎ej2-asp-core-mvc/code-snippet/grid/columns/column-template-radiobutton/tagHelper

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
@page
2+
@model IndexModel
3+
@{
4+
ViewData["Title"] = "Home page";
5+
}
6+
<ejs-grid id="grid" dataSource="@ViewBag.dataSource" height="312px" queryCellInfo="initializeRadioButtons">
7+
<e-grid-columns>
8+
<e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" width="120"></e-grid-column>
9+
<e-grid-column field="CustomerID" headerText="Customer ID" width="150"></e-grid-column>
10+
<e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" width="120"></e-grid-column>
11+
<e-grid-column field="OrderDate" headerText="Order Date" format="yMd" width="150"></e-grid-column>
12+
<e-grid-column field="OrderStatus" headerText="Order Status" template="#columnTemplate" width="200"></e-grid-column>
13+
</e-grid-columns>
14+
</ejs-grid>
15+
16+
<script type="text/x-template" id="columnTemplate">
17+
<div style="display: flex; flex-direction: column; align-items: start; gap: 5px;">
18+
<input type='radio' class='order-status-radio' data-status='Pending' />
19+
<input type='radio' class='order-status-radio' data-status='Confirmed' />
20+
<input type='radio' class='order-status-radio' data-status='Shipped' />
21+
<input type='radio' class='order-status-radio' data-status='Cancelled' />
22+
</div>
23+
</script>
24+
25+
<script>
26+
function initializeRadioButtons(args) {
27+
if (args.column.field === 'OrderStatus') {
28+
let orderStatus = args.data['OrderStatus']; // Get current row status.
29+
let radioButtons = args.cell.querySelectorAll('.order-status-radio');
30+
radioButtons.forEach((radio) => {
31+
let status = radio.getAttribute('data-status');
32+
let radioButton = new ej.buttons.RadioButton({
33+
label: status,
34+
name: `orderStatus-${args.data['OrderID']}`, // Unique name per row.
35+
checked: status === orderStatus
36+
});
37+
radioButton.appendTo(radio);
38+
});
39+
}
40+
}
41+
</script>

‎ej2-asp-core-mvc/code-snippet/grid/columns/foreignkey-columntemplate/EmployeeDetails.cs

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
using System;
2+
using System.Collections.Generic;
3+
using System.Linq;
4+
using System.Web;
5+
6+
namespace GridSample.Models
7+
{
8+
public class EmployeeDetails
9+
{
10+
public EmployeeDetails()
11+
{
12+
13+
}
14+
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)
15+
{
16+
this.EmployeeID = EmployeeID;
17+
this.FirstName = FirstName;
18+
this.LastName = LastName;
19+
this.Title = Title;
20+
this.BirthDate = BirthDate;
21+
this.HireDate = HireDate;
22+
this.ReportsTo = ReportsTo;
23+
this.Address = Address;
24+
this.PostalCode = PostalCode;
25+
this.Phone = Phone;
26+
this.City = City;
27+
this.Country = Country;
28+
}
29+
public int EmployeeID { get; set; }
30+
public string FirstName { get; set; }
31+
public string LastName { get; set; }
32+
public string Title { get; set; }
33+
public DateTime BirthDate { get; set; }
34+
public DateTime HireDate { get; set; }
35+
public int ReportsTo { get; set; }
36+
public string Address { get; set; }
37+
public string PostalCode { get; set; }
38+
public string Phone { get; set; }
39+
public string City { get; set; }
40+
public string Country { get; set; }
41+
public static List<EmployeeDetails> GetAllRecords()
42+
{
43+
List<EmployeeDetails> Emp = new List<Models.EmployeeDetails>();
44+
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"));
45+
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"));
46+
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 "));
47+
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 "));
48+
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"));
49+
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 "));
50+
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"));
51+
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 "));
52+
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 "));
53+
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"));
54+
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"));
55+
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"));
56+
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"));
57+
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"));
58+
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"));
59+
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"));
60+
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"));
61+
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"));
62+
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"));
63+
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"));
64+
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"));
65+
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"));
66+
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"));
67+
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"));
68+
return Emp;
69+
}
70+
}
71+
}

‎ej2-asp-core-mvc/code-snippet/grid/columns/foreignkey-columntemplate/OrdersDetails.cs

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
using System.ComponentModel.DataAnnotations;
2+
namespace GridSample.Models
3+
{
4+
public class OrdersDetails
5+
{
6+
public static List<OrdersDetails> order = new List<OrdersDetails>();
7+
8+
public OrdersDetails() { }
9+
10+
public OrdersDetails(
11+
int OrderID, string CustomerId, int EmployeeId, double Freight, bool Verified,
12+
DateTime OrderDate, string ShipCity, string ShipName, string ShipCountry,
13+
DateTime ShippedDate, string ShipAddress, string OrderStatus)
14+
{
15+
this.OrderID = OrderID;
16+
this.CustomerID = CustomerId;
17+
this.EmployeeID = EmployeeId;
18+
this.Freight = Freight;
19+
this.ShipCity = ShipCity;
20+
this.Verified = Verified;
21+
this.OrderDate = OrderDate;
22+
this.ShipName = ShipName;
23+
this.ShipCountry = ShipCountry;
24+
this.ShippedDate = ShippedDate;
25+
this.ShipAddress = ShipAddress;
26+
this.OrderStatus = OrderStatus;
27+
}
28+
29+
public static List<OrdersDetails> GetAllRecords()
30+
{
31+
if (order.Count == 0)
32+
{
33+
int code = 10000;
34+
for (int i = 1; i < 10; i++)
35+
{
36+
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"));
37+
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"));
38+
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"));
39+
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"));
40+
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"));
41+
code += 5;
42+
}
43+
}
44+
return order;
45+
}
46+
47+
[Key]
48+
public int OrderID { get; set; }
49+
public string CustomerID { get; set; }
50+
public int? EmployeeID { get; set; }
51+
public double Freight { get; set; }
52+
public string ShipCity { get; set; }
53+
public bool Verified { get; set; }
54+
public DateTime OrderDate { get; set; }
55+
public string ShipName { get; set; }
56+
public string ShipCountry { get; set; }
57+
public DateTime ShippedDate { get; set; }
58+
public string ShipAddress { get; set; }
59+
public string OrderStatus { get; set; }
60+
}
61+
}

‎ej2-asp-core-mvc/code-snippet/grid/columns/foreignkey-columntemplate/foreignkey-columntemplate.cs

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
public IActionResult Index()
2+
{
3+
ViewBag.dataSource = OrdersDetails.GetAllRecords();
4+
ViewBag.foreignData = EmployeeDetails.GetAllRecords();
5+
return View();
6+
}

‎ej2-asp-core-mvc/code-snippet/grid/columns/foreignkey-columntemplate/razor

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
@{
2+
ViewBag.Title = "Home Page";
3+
}
4+
5+
@using Syncfusion.EJ2
6+
7+
@Html.EJS().Grid("grid").DataSource((IEnumerable<object>)ViewBag.dataSource).Height("348px").Columns(col =>
8+
{
9+
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();
10+
col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").EditType("numericedit").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
11+
col.Field("ShipName").HeaderText("Ship Name").Width("150").Add();
12+
col.Field("ShipCity").HeaderText("Ship City").EditType("dropdownedit").Width("150").Add();
13+
}).QueryCellInfo("navToAccount").Render()
14+
15+
<script type="text/x-template" id="columnTemplate">
16+
<div>
17+
<a href="javascript:void(0)">${foreignKeyData.FirstName}</a>
18+
</div>
19+
</script>
20+
<script>
21+
function navToAccount(args) {
22+
if (args.column.field === "EmployeeID" && args.data) {
23+
const anchor = args.cell.querySelector("a");
24+
if (anchor) {
25+
const accountId = args.data.OrderID; // Get the actual ID field.
26+
anchor.href = `../Account/AccountDetail.cshtml?custid=0&accountId=${accountId}`;
27+
28+
// Prevent default navigation and use history push.
29+
anchor.addEventListener("click", (event) => {
30+
event.preventDefault();
31+
window.history.pushState(
32+
'',
33+
'changed',
34+
`../Account/AccountDetail.cshtml?custid=0&accountId=${accountId}`
35+
);
36+
});
37+
}
38+
}
39+
}
40+
</script>

0 commit comments

Comments
 (0)