25.2.5+

CS/GridWithContextMenu/Data/WeatherForecastService.cs

@@ -8,7 +8,7 @@ public enum Summaries {
         public Task<List<WeatherForecast>> GetForecastAsync() {
             if (Forecasts == null) {
                 var rnd = new Random();
-                Forecasts = Enumerable.Range(1, 5).Select(index => new WeatherForecast {
+                Forecasts = Enumerable.Range(1, 25).Select(index => new WeatherForecast {
                     ID = index,
                     Date = DateTime.Today.AddDays(index),
                     TemperatureC = rnd.Next(-20, 55),

CS/GridWithContextMenu/GridWithContextMenu.csproj

@@ -8,6 +8,6 @@
     <Folder Include="wwwroot\images\" />
   </ItemGroup>
   <ItemGroup>
-    <PackageReference Include="DevExpress.Blazor" Version="25.1.3" />
+    <PackageReference Include="DevExpress.Blazor" Version="25.2.5" />
   </ItemGroup>
 </Project>

CS/GridWithContextMenu/Pages/GridContextMenuContainer.razor

@@ -1,9 +1,9 @@
 @using GridWithContextMenu.Data
 @using System.Collections
 
-<DxContextMenu @ref="ColumnContextMenu"
-               Data="ColumnContextMenuData"
-               ItemClick="ColumnContextMenu_ItemClick">
+<DxContextMenu @ref="CustomContextMenu"
+               Data="CustomContextMenuData"
+               ItemClick="CustomContextMenu_ItemClick">
     <DataMappings>	
         <DxContextMenuDataMapping Text="@nameof(ContextMenuItem.Text)"
                                   Visible="@nameof(ContextMenuItem.Visible)"
@@ -28,28 +28,26 @@
 </DxContextMenu>
 
 @code {
-    DxContextMenu ColumnContextMenu { get; set; }
+    DxContextMenu CustomContextMenu { get; set; }
     DxContextMenu RowContextMenu { get; set; }
 
-    IEnumerable ColumnContextMenuData { get; set; }
+    IEnumerable CustomContextMenuData { get; set; }
     IEnumerable RowContextMenuData { get; set; }
 
-    IGridColumn ContextMenuColumn { get; set; }
     int ContextMenuRowIndex { get; set; }
 
     [Parameter] public IGrid Grid { get; set; }
 
-    void ColumnContextMenu_ItemClick(ContextMenuItemClickEventArgs e)
-        => GridContextMenuHelper.ProcessColumnMenuItemClick((ContextMenuItem)e.ItemInfo.DataItem, ContextMenuColumn, Grid);
+    async Task CustomContextMenu_ItemClick(ContextMenuItemClickEventArgs e)
+        => await GridContextMenuHelper.ProcessCustomMenuItemClick((ContextMenuItem)e.ItemInfo.DataItem, Grid);
 
     async Task RowContextMenu_ItemClick(ContextMenuItemClickEventArgs e)
         => await GridContextMenuHelper.ProcessRowMenuItemClickAsync((ContextMenuItem)e.ItemInfo.DataItem, ContextMenuRowIndex, Grid);
 
     public async Task Grid_ContextMenu(GridCustomizeElementEventArgs e, MouseEventArgs mouseArgs) {
-    	if(GridContextMenuHelper.IsColumnContextMenuElement(e.ElementType)) {
-    		ContextMenuColumn = e.Column;
-    		ColumnContextMenuData = GridContextMenuHelper.GetColumnItems(e);
-    		await ColumnContextMenu.ShowAsync(mouseArgs);
+    	if(GridContextMenuHelper.IsCustomContextMenuElement(e.ElementType)) {
+            CustomContextMenuData = GridContextMenuHelper.GetCustomItems(e);
+            await CustomContextMenu.ShowAsync(mouseArgs);
     	}
     	if(GridContextMenuHelper.IsRowContextMenuElement(e.ElementType)) {
     		ContextMenuRowIndex = e.VisibleIndex;

CS/GridWithContextMenu/Pages/Index.razor

@@ -8,14 +8,38 @@
         EditMode="GridEditMode.EditRow"
         CssClass="mw-1100"
         CustomizeElement="Grid_CustomizeElement"
-        @oncontextmenu:preventDefault
         EditModelSaving="Grid_EditModelSaving"
-        DataItemDeleting="Grid_DataItemDeleting">
+        DataItemDeleting="Grid_DataItemDeleting"
+        ContextMenus="GridContextMenus.All"
+        CustomizeContextMenu="Grid_CustomizeContextMenu"
+        @oncontextmenu:preventDefault>
+    <ToolbarTemplate>
+        <DxToolbar ItemRenderStyleMode="ToolbarRenderStyleMode.Plain">
+            <DxToolbarItem Text="New" Click="NewItem_Click" />
+            <DxToolbarItem Text="Column Chooser" BeginGroup="true" Click="ColumnChooserItem_Click" />
+            <DxToolbarItem Text="Export">
+                <Items>
+                    <DxToolbarItem Text="To CSV" Click="ExportCsvItem_Click" />
+                    <DxToolbarItem Text="To XLSX" Click="ExportXlsxItem_Click" />
+                    <DxToolbarItem Text="To XLS" Click="ExportXlsItem_Click" />
+                    <DxToolbarItem Text="To PDF" Click="ExportPdfItem_Click" />
+                </Items>
+            </DxToolbarItem>
+            <DxToolbarItem BeginGroup="true">
+                <Template Context="toolbar_item_context">
+                    <DxSearchBox @bind-Text="GridSearchText"
+                                 BindValueMode="BindValueMode.OnInput"
+                                 ClearButtonDisplayMode="DataEditorClearButtonDisplayMode.Auto"
+                                 aria-label="Search" />
+                </Template>
+            </DxToolbarItem>
+        </DxToolbar>
+    </ToolbarTemplate>
     <Columns>
-        <DxGridDataColumn FieldName="Date" SortIndex="0" />
+        <DxGridDataColumn FieldName="Date" />
         <DxGridDataColumn FieldName="TemperatureC" />
         <DxGridDataColumn FieldName="TemperatureF" />
-        <DxGridDataColumn FieldName="Summary" />
+        <DxGridDataColumn FieldName="Summary" GroupIndex="0" />
     </Columns>
     <TotalSummary>
         <DxGridSummaryItem SummaryType="GridSummaryItemType.Avg" FieldName="TemperatureC" />
@@ -28,11 +52,15 @@
     IGrid Grid { get; set; }
     GridContextMenuContainer ContextMenuContainer { get; set; }
     object GridData { get; set; }
+    string GridSearchText = "";
+    const string ExportFileName = "ExportResult";
 
     protected override async Task OnInitializedAsync() {
         GridData = await ForecastService.GetForecastAsync();
     }
 
+    void Grid_CustomizeContextMenu(GridCustomizeContextMenuEventArgs args) => GridContextMenuHelper.CustomizeContextMenu(args);
+
     void Grid_CustomizeElement(GridCustomizeElementEventArgs e) {
         if(GridContextMenuHelper.IsContextMenuElement(e.ElementType)) {
         	e.Attributes["oncontextmenu"] = EventCallback.Factory.Create<MouseEventArgs>(
@@ -51,4 +79,11 @@
             await ForecastService.Remove(item);
         }
     }
+
+    async Task NewItem_Click() => await Grid.StartEditNewRowAsync();
+    void ColumnChooserItem_Click(ToolbarItemClickEventArgs e) => Grid.ShowColumnChooser();
+    async Task ExportXlsxItem_Click() => await Grid.ExportToXlsxAsync(ExportFileName);
+    async Task ExportXlsItem_Click() => await Grid.ExportToXlsAsync(ExportFileName);
+    async Task ExportCsvItem_Click() => await Grid.ExportToCsvAsync(ExportFileName);
+    async Task ExportPdfItem_Click() => await Grid.ExportToPdfAsync(ExportFileName);
 }

CS/GridWithContextMenu/wwwroot/css/icons.css

@@ -31,7 +31,8 @@
 .grid-context-menu-item-collapse-detail-row,
 .grid-context-menu-item-new-row,
 .grid-context-menu-item-edit-row,
-.grid-context-menu-item-delete-row {
+.grid-context-menu-item-delete-row,
+.grid-context-menu-item-export {
     width: 16px;
     height: 16px;
     background-repeat: no-repeat;
@@ -58,7 +59,8 @@
 .dropdown-item:active .grid-context-menu-item-collapse-detail-row,
 .dropdown-item:active .grid-context-menu-item-new-row,
 .dropdown-item:active .grid-context-menu-item-edit-row,
-.dropdown-item:active .grid-context-menu-item-delete-row {
+.dropdown-item:active .grid-context-menu-item-delete-row,
+.dropdown-item:active .grid-context-menu-item-export {
     background-color: white;
 }
 
@@ -78,7 +80,8 @@
 .dropdown-item.disabled .grid-context-menu-item-collapse-detail-row,
 .dropdown-item.disabled .grid-context-menu-item-new-row,
 .dropdown-item.disabled .grid-context-menu-item-edit-row,
-.dropdown-item.disabled .grid-context-menu-item-delete-row {
+.dropdown-item.disabled .grid-context-menu-item-delete-row,
+.dropdown-item.disabled .grid-context-menu-item-export {
     background-color: #c3c2c2;
 }
 
@@ -166,6 +169,10 @@
     mask-image: url(../images/icons/delete-row.svg);
     -webkit-mask-image: url(../images/icons/delete-row.svg);
 }
+.grid-context-menu-item-export {
+    mask-image: url(../images/icons/export-grid.svg);
+    -webkit-mask-image: url(../images/icons/export-grid.svg);
+}
 
 
 .grid-context-menu-item-filter-row,

README.md

@@ -1,5 +1,5 @@
 <!-- default badges list -->
-![](https://img.shields.io/endpoint?url=https://codecentral.devexpress.com/api/v1/VersionRange/520791644/25.1.3%2B)
+![](https://img.shields.io/endpoint?url=https://codecentral.devexpress.com/api/v1/VersionRange/520791644/25.2.5%2B)
 [![](https://img.shields.io/badge/Open_in_DevExpress_Support_Center-FF7200?style=flat-square&logo=DevExpress&logoColor=white)](https://supportcenter.devexpress.com/ticket/details/T1106945)
 [![](https://img.shields.io/badge/📖_How_to_use_DevExpress_Examples-e9f6fc?style=flat-square)](https://docs.devexpress.com/GeneralInformation/403183)
 [![](https://img.shields.io/badge/💬_Leave_Feedback-feecdd?style=flat-square)](#does-this-example-address-your-development-requirementsobjectives)