Blazor Ribbon – Modify Blazor Grid Settings and Execute Commands

This example uses DxRibbon to modify the following DxGrid settings and execute commands:

• Add and delete rows
• Switch Grid edit modes
• Display/hide the column chooser, search box, filter panel, and group panel
• Modify the number of items on a page
• Export data to CSV, PDF, and XLSX

Implementation Details

Control States of DxGrid Panels

DxRibbon items update properties that are bound to DxGrid panel settings. For example, the following code snippet controls the grid's filter panel:

<DxRibbon>
    @* ... *@
	<DxRibbonTab Text="Home">
		<DxRibbonGroup Text="Grid Customization">
			<DxRibbonToggleItem Text="@(ShowFilterPanel ? "Hide Filter Panel" : "Show Filter Panel")"
								Tooltip="Toggle Filter Panel"
								IconUrl="@Icon.Filter"
								Click="Grid_ToggleFilterPanel" />
        </DxRibbonGroup>
    </DxRibbonTab>
</DxRibbon>

<DxGrid ShowFilterRow="@ShowFilterPanel"
        @* ... *@ >
</DxGrid>

@code{
    // ...
	bool ShowFilterPanel { get; set; } = false;

	async Task Grid_ToggleFilterPanel() {
		ShowFilterPanel = !ShowFilterPanel;
		await Task.CompletedTask;
	}
}

This approach is also used to control search box, group panel, and column chooser visibility.

Switch DxGrid Edit Modes

Both DxRibbonComboBoxItem and DxGrid.EditMode are bound to CurrentEditMode:

<DxRibbon>
    @* ... *@
	<DxRibbonTab Text="Data">
		<DxRibbonGroup Text="Data">
            @* ... *@
			<DxRibbonComboBoxItem Data="EditModes"
								  @bind-Value="CurrentEditMode"
								  TextFieldName="@nameof(GridEditMode)" />
        </DxRibbonGroup>
    </DxRibbonTab>
</DxRibbon>

<DxGrid EditMode="@CurrentEditMode"
    @* ... *@ >
</DxGrid>

@code {
    // ...
	public static readonly GridEditMode[] EditModes = new GridEditMode[] {
				GridEditMode.EditCell,
				GridEditMode.EditForm,
				GridEditMode.PopupEditForm,
				GridEditMode.EditRow
	};

	private GridEditMode CurrentEditMode { get; set; } = EditModes[0];
}

Define an EditFormTemplate to use pop-up and inline edit forms:

<DxGrid EditMode="@CurrentEditMode"
        @* ... *@ >
	<EditFormTemplate Context="editFormContext">
		@{
			var product = (Product)editFormContext.EditModel;
		}
		<DxFormLayout>
			<DxFormLayoutItem Caption="Product Name:">
				@editFormContext.GetEditor("ProductName")
			</DxFormLayoutItem>
			<DxFormLayoutItem Caption="Category:">
				<DxComboBox Data="@categories"
							Value="@product.CategoryID"
							ValueChanged="@((int? newValue) => product.CategoryID = newValue)"
							ValidationEnabled="false"
							SearchMode="@ListSearchMode.AutoSearch"
							SearchFilterCondition="@ListSearchFilterCondition.Contains"
							TextFieldName="@nameof(Category.CategoryName)"
							ValueFieldName="@nameof(Category.CategoryID)">
				</DxComboBox>
			</DxFormLayoutItem>
			<DxFormLayoutItem Caption="Unit Price:">
				@editFormContext.GetEditor("UnitPrice")
			</DxFormLayoutItem>
			<DxFormLayoutItem Caption="Units In Stock:">
				@editFormContext.GetEditor("UnitsInStock")
			</DxFormLayoutItem>
			<DxFormLayoutItem Caption="Restock Date:">
				@editFormContext.GetEditor("RestockDate")
			</DxFormLayoutItem>
			<DxFormLayoutItem Caption="Discontinued:">
				@editFormContext.GetEditor("Discontinued")
			</DxFormLayoutItem>
		</DxFormLayout>
	</EditFormTemplate>
    @* ... *@
</DxGrid>

Synchronize Togge Item States

The Total Summary ribbon item's menu contains three independent toggles. You can keep their states in sync as follows:

<DxRibbonItem Text="Total Summary"
              SplitDropDownButton="true"
              Tooltip="Total Summary"
              Click="Grid_ToggleSummaries"
              IsPrimary="true" >
    <DxRibbonToggleItem Text="Product Name" Checked="@productNameSummary" Click="ToggleProductNameSummary" />
    <DxRibbonToggleItem Text="Unit Price" Checked="@unitPriceSummary" Click="ToggleUnitPriceSummary" />
    <DxRibbonToggleItem Text="Units in Stock" Checked="@unitsInStockSummary" Click="ToggleUnitsInStockSummary" />
</DxRibbonItem>

@code{
	async Task Grid_ToggleSummaries() {
		bool allOff = !productNameSummary && !unitPriceSummary && !unitsInStockSummary;

		productNameSummary = allOff;
		unitPriceSummary = allOff;
		unitsInStockSummary = allOff;

		StateHasChanged();
		await Task.CompletedTask;
	}
}

Once you change toggle values in code, call the StateHasChanged method to force a re-render and reflect these changes in the UI.

Files to Review

• Index.razor
• site.css

Documentation

• DxRibbon
• Editing and Validation in Blazor Grid

Does This Example Address Your Development Requirements/Objectives?

(you will be redirected to DevExpress.com to submit your response)