Skip to content

Commit db93ad4

Browse files
Copilotcsharpfritz
Copilot
and
csharpfritz
authored
Add GridView row selection sample demonstrating DataKey retrieval (#311)
Co-authored-by: csharpfritz <78577+csharpfritz@users.noreply.github.com> Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
1 parent abef361 commit db93ad4

3 files changed

Lines changed: 176 additions & 0 deletions

File tree

‎samples/AfterBlazorServerSide/Components/Pages/ControlSamples/GridView/Nav.razor‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,5 @@
44
<NavLink href="./ControlSamples/GridView/AutoGeneratedColumns" class="component-link" Match="NavLinkMatch.All">AutoGenerated Columns</NavLink> |
55
<NavLink href="./ControlSamples/GridView/TemplateFields" class="component-link" Match="NavLinkMatch.All">Template Fields</NavLink> |
66
<NavLink href="./ControlSamples/GridView/BindAttribute" class="component-link" Match="NavLinkMatch.All">BindAttribute</NavLink> |
7+
<NavLink href="./ControlSamples/GridView/RowSelection" class="component-link" Match="NavLinkMatch.All">Row Selection</NavLink> |
78
</div>

‎samples/AfterBlazorServerSide/Components/Pages/ControlSamples/GridView/RowSelection.razor‎

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
@page "/ControlSamples/GridView/RowSelection"
2+
@using SharedSampleObjects.Models
3+
@using BlazorWebFormsComponents.DataBinding
4+
5+
<h2>GridView Row Selection Example</h2>
6+
7+
<Nav />
8+
9+
<p>This example demonstrates how to select a row in the GridView and retrieve the selected key value.</p>
10+
11+
<GridView ItemType="Customer"
12+
AutoGenerateColumns="false"
13+
DataKeyNames="CustomerID"
14+
Items="@_customers"
15+
EmptyDataText="No data available">
16+
<Columns>
17+
<TemplateField ItemType="Customer" HeaderText="">
18+
<ItemTemplate Context="customer">
19+
<button type="button" class="btn btn-sm btn-primary" @onclick="@(() => SelectCustomer(customer))">Select</button>
20+
</ItemTemplate>
21+
</TemplateField>
22+
<BoundField ItemType="Customer" DataField="CustomerID" HeaderText="ID" />
23+
<BoundField ItemType="Customer" DataField="CompanyName" HeaderText="Company" />
24+
<BoundField ItemType="Customer" DataField="FirstName" HeaderText="First Name"/>
25+
<BoundField ItemType="Customer" DataField="LastName" HeaderText="Last Name"/>
26+
</Columns>
27+
</GridView>
28+
29+
@if (SelectedCustomer != null)
30+
{
31+
<div style="margin-top: 20px; padding: 15px; border: 1px solid #ccc; background-color: #f9f9f9;">
32+
<h3>Selected Customer Details</h3>
33+
<p><strong>Customer ID:</strong> @SelectedCustomer.CustomerID</p>
34+
<p><strong>Company Name:</strong> @SelectedCustomer.CompanyName</p>
35+
<p><strong>First Name:</strong> @SelectedCustomer.FirstName</p>
36+
<p><strong>Last Name:</strong> @SelectedCustomer.LastName</p>
37+
</div>
38+
}
39+
40+
<hr />
41+
42+
<h3>Code Example</h3>
43+
<p>This sample demonstrates the master-detail pattern using GridView row selection:</p>
44+
45+
<pre><code>&lt;GridView ItemType="Customer"
46+
DataKeyNames="CustomerID"
47+
Items="@@_customers"&gt;
48+
&lt;Columns&gt;
49+
&lt;TemplateField ItemType="Customer" HeaderText=""&gt;
50+
&lt;ItemTemplate Context="customer"&gt;
51+
&lt;button type="button" class="btn btn-sm btn-primary" @@onclick="@@(() =&gt; SelectCustomer(customer))"&gt;Select&lt;/button&gt;
52+
&lt;/ItemTemplate&gt;
53+
&lt;/TemplateField&gt;
54+
&lt;BoundField DataField="CustomerID" HeaderText="ID" /&gt;
55+
&lt;BoundField DataField="CompanyName" HeaderText="Company" /&gt;
56+
&lt;BoundField DataField="FirstName" HeaderText="First Name"/&gt;
57+
&lt;BoundField DataField="LastName" HeaderText="Last Name"/&gt;
58+
&lt;/Columns&gt;
59+
&lt;/GridView&gt;
60+
61+
@@code {
62+
private Customer? SelectedCustomer;
63+
private List&lt;Customer&gt; _customers = new List&lt;Customer&gt;
64+
{
65+
new Customer { CustomerID = 1, FirstName = "John", LastName = "Smith", CompanyName = "Acme Corporation" },
66+
new Customer { CustomerID = 2, FirstName = "Jane", LastName = "Doe", CompanyName = "TechStart Inc." },
67+
new Customer { CustomerID = 3, FirstName = "Bob", LastName = "Johnson", CompanyName = "Global Solutions" },
68+
new Customer { CustomerID = 4, FirstName = "Alice", LastName = "Williams", CompanyName = "Innovation Labs" }
69+
};
70+
71+
private void SelectCustomer(Customer customer)
72+
{
73+
SelectedCustomer = customer;
74+
// CustomerID (the DataKey) is available via customer.CustomerID
75+
}
76+
}</code></pre>
77+
78+
@code {
79+
private Customer? SelectedCustomer;
80+
private List<Customer> _customers = new List<Customer>
81+
{
82+
new Customer
83+
{
84+
CustomerID = 1,
85+
FirstName = "John",
86+
LastName = "Smith",
87+
CompanyName = "Acme Corporation"
88+
},
89+
new Customer
90+
{
91+
CustomerID = 2,
92+
FirstName = "Jane",
93+
LastName = "Doe",
94+
CompanyName = "TechStart Inc."
95+
},
96+
new Customer
97+
{
98+
CustomerID = 3,
99+
FirstName = "Bob",
100+
LastName = "Johnson",
101+
CompanyName = "Global Solutions"
102+
},
103+
new Customer
104+
{
105+
CustomerID = 4,
106+
FirstName = "Alice",
107+
LastName = "Williams",
108+
CompanyName = "Innovation Labs"
109+
}
110+
};
111+
112+
private void SelectCustomer(Customer customer)
113+
{
114+
SelectedCustomer = customer;
115+
}
116+
}

‎src/BlazorWebFormsComponents.Test/GridView/RowSelection.razor‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
@inherits BunitContext
2+
@using SharedSampleObjects.Models
3+
@using Microsoft.AspNetCore.Routing
4+
@using Microsoft.AspNetCore.Http
5+
@using Moq
6+
7+
@code {
8+
9+
[Fact]
10+
public void GridView_RowSelection_SelectsCorrectCustomer()
11+
{
12+
// Register required services
13+
var mockLinkGenerator = new Mock<LinkGenerator>();
14+
Services.AddSingleton<LinkGenerator>(mockLinkGenerator.Object);
15+
16+
var mockHttpContextAccessor = new Mock<IHttpContextAccessor>();
17+
Services.AddSingleton<IHttpContextAccessor>(mockHttpContextAccessor.Object);
18+
19+
var customers = new List<Customer>
20+
{
21+
new Customer { CustomerID = 1, FirstName = "John", LastName = "Smith", CompanyName = "Acme" },
22+
new Customer { CustomerID = 2, FirstName = "Jane", LastName = "Doe", CompanyName = "TechStart" },
23+
new Customer { CustomerID = 3, FirstName = "Bob", LastName = "Johnson", CompanyName = "Global" }
24+
};
25+
26+
Customer? selectedCustomer = null;
27+
28+
var cut = Render(@<GridView ItemType="Customer"
29+
AutoGenerateColumns="false"
30+
DataKeyNames="CustomerID"
31+
Items="@customers">
32+
<Columns>
33+
<TemplateField ItemType="Customer">
34+
<ItemTemplate Context="customer">
35+
<button type="button" @onclick="@(() => selectedCustomer = customer)">Select</button>
36+
</ItemTemplate>
37+
</TemplateField>
38+
<BoundField ItemType="Customer" DataField="CustomerID" HeaderText="ID" />
39+
<BoundField ItemType="Customer" DataField="CompanyName" HeaderText="Company" />
40+
</Columns>
41+
</GridView>);
42+
43+
// Verify data is displayed
44+
var rows = cut.FindAll("tr");
45+
rows.Count.ShouldBeGreaterThan(1, "Should have data rows");
46+
47+
// Click the second row's select button
48+
var buttons = cut.FindAll("button");
49+
buttons.Count.ShouldBe(3, "Should have 3 select buttons");
50+
51+
buttons[1].Click();
52+
53+
// Verify correct customer was selected
54+
selectedCustomer.ShouldNotBeNull();
55+
selectedCustomer.CustomerID.ShouldBe(2);
56+
selectedCustomer.FirstName.ShouldBe("Jane");
57+
}
58+
59+
}

0 commit comments

Comments
 (0)