datagrid contextmenu

ComponentPractice/ComponentPractice/Components/Layout/MainLayout.razor

@@ -14,8 +14,6 @@
             @Body
         </article>
     </main>
-
-    <RadzenComponent />
 </div>
 
 <div id="blazor-error-ui">
@@ -23,3 +21,5 @@
     <a href="" class="reload">Reload</a>
     <a class="dismiss">🗙</a>
 </div>
+
+<RadzenComponents @rendermode="RenderMode.InteractiveServer"/>

ComponentPractice/ComponentPractice/Components/Pages/DataGrid.razor

@@ -26,7 +26,7 @@
             <RadzenDataGridColumn Property="@nameof(Employee.City)" Title="City" Width="160px" />
             <RadzenDataGridColumn Property="@nameof(Employee.Region)" Title="Region" Width="160px" />
             <RadzenDataGridColumn Property="@nameof(Employee.PostalCode)" Title="PostalCode" Width="160px" />
-            <RadzenDataGridColumn Property="@nameof(Employee.County)" Title="County" Width="160px" />
+            <RadzenDataGridColumn Property="@nameof(Employee.Country)" Title="County" Width="160px" />
             <RadzenDataGridColumn Property="@nameof(Employee.Phone)" Title="Phone" Width="160px" />
             <RadzenDataGridColumn Property="@nameof(Employee.Extension)" Title="Extension" Width="160px" />
             <RadzenDataGridColumn Property="@nameof(Employee.Notes)" Title="Notes" Width="300px" />

ComponentPractice/ComponentPractice/Components/Pages/DataGridAdv.razor

@@ -34,7 +34,7 @@
             <RadzenDataGridColumn Property="@nameof(Employee.City)" Title="City" Width="160px" />
             <RadzenDataGridColumn Property="@nameof(Employee.Region)" Title="Region" Width="160px" />
             <RadzenDataGridColumn Property="@nameof(Employee.PostalCode)" Title="PostalCode" Width="160px" />
-            <RadzenDataGridColumn Property="@nameof(Employee.County)" Title="County" Width="160px" />
+            <RadzenDataGridColumn Property="@nameof(Employee.Country)" Title="County" Width="160px" />
             <RadzenDataGridColumn Property="@nameof(Employee.Phone)" Title="Phone" Width="160px" />
             <RadzenDataGridColumn Property="@nameof(Employee.Extension)" Title="Extension" Width="160px" />
             <RadzenDataGridColumn Property="@nameof(Employee.Notes)" Title="Notes" Width="300px" />

ComponentPractice/ComponentPractice/Components/Pages/DataGridREST.razor

@@ -3,6 +3,7 @@
 @using System.Linq.Dynamic.Core
 
 @inject NorthwindDataService service;
+@inject ContextMenuService contextMenuService;
 
 @rendermode RenderMode.InteractiveServer
 
@@ -30,9 +31,10 @@
 </RadzenCard>
 
 <RadzenCard class="rz-p-12" Style="width: 900px">
-    <RadzenText TextStyle="TextStyle.H5">DataGrid <strong>Virtualization</strong></RadzenText>
+    <RadzenText TextStyle="TextStyle.H5">DataGrid <strong>Virtualization & ContextMenu</strong></RadzenText>
 
-    <RadzenDataGrid Data="@vtzdCustomers" Style="height:500px"
+    <RadzenDataGrid TItem="@Customer" Data="@vtzdCustomers" @bind-Value="selectedVtzdCustomers" Style="height:500px"
+                    CellContextMenu="@OnCellContextMenu"
                     AllowVirtualization="true"
                     SelectionMode="DataGridSelectionMode.Single"
                     AllowFiltering="true" AllowColumnResize="true" AllowAlternatingRows="false" FilterMode="FilterMode.CheckBoxList" AllowSorting="true">
@@ -49,10 +51,10 @@
             <RadzenDataGridColumn Property="@nameof(Customer.Fax)" Filterable="true" Title="Fax" Width="160px" TextAlign="TextAlign.Center" />
         </Columns>
     </RadzenDataGrid>
+    <RadzenText TextStyle="TextStyle.Body1" Text="@message"/>
 </RadzenCard>
 
 
-
 @code {
     readonly int PAGE_SIZE = 10;
 
@@ -94,10 +96,27 @@
 
     // Virtualization
     IEnumerable<Customer> vtzdCustomers;
-
+    IList<Customer> selectedVtzdCustomers;
+    string message = "Message: ";
     protected override async Task OnInitializedAsync()
     {
         var result = await service.GetCustomer();
         vtzdCustomers = result.Value;
     }
+
+    void OnCellContextMenu(DataGridCellMouseEventArgs<Customer> args)
+    {
+        selectedVtzdCustomers = new List<Customer>() { args.Data };
+
+        contextMenuService.Open(args,
+            new List<ContextMenuItem> {
+                new ContextMenuItem(){ Text = "ContextMenuItem 1", Value = 1, Icon = "home" },
+                new ContextMenuItem(){ Text = "ContextMenuItem 2", Value = 2, Icon = "search" },
+                new ContextMenuItem(){ Text = "ContextMenuItem 3", Value = 3, Icon = "info" },
+            },
+            e => {
+                message = $"Message: Menu item cliked! Value={e.Value} | Column: {args.Column.Property} | CustomerID: {args.Data.CustomerID}";
+                InvokeAsync(StateHasChanged);
+            });
+    }
 }

ComponentPractice/ComponentPractice/Data/InMemoryData.cs

@@ -33,7 +33,7 @@ namespace ComponentPractice.Data
                     City = cities[random.Next(cities.Length)],
                     Region = regions[random.Next(regions.Length)],
                     PostalCode = $"{random.Next(10000, 99999)}",
-                    County = counties[random.Next(counties.Length)],
+                    Country = counties[random.Next(counties.Length)],
                     Phone = $"{random.Next(100, 999)}-555-{random.Next(1000, 9999)}",
                     Extension = $"{random.Next(100, 9999)}",
                     Notes = "Generated demo data"

ComponentPractice/ComponentPractice/Models/Employee.cs

@@ -14,7 +14,7 @@
         public string City { get; set; }
         public string Region { get; set; }
         public string PostalCode { get; set; }
-        public string County { get; set; }
+        public string Country { get; set; }
         public string Phone { get; set; }
         public string Extension { get; set; }
         public string Notes { get; set; }