starred/radzen-blazor
1
0
Fork 0
mirror of https://github.com/radzenhq/radzen-blazor.git synced 2026-07-08 18:16:08 +00:00
Code Issues 1.3k Packages Projects Releases 28 Wiki Activity

Add SEO intros, FAQ and related links to remaining DataGrid demos

Browse Source 
Group 6 (14 pages): custom header + column picker, density, grid lines, cell
context menu, conditional formatting, Excel/CSV export, cascading dropdowns,
empty state, save/load settings (+ LoadData), row reorder and drag between
grids / to scheduler. Completes the DataGrid cluster enrichment.
This commit is contained in:
Atanas Korchev
2026-06-22 12:27:16 +03:00
parent 5cac28f5e8
commit ccc3eaa93e
15 changed files with 84 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
RadzenBlazorDemos/Pages/CascadingDropDownsPage.razor
View File

@@ -4,7 +4,7 @@
Cascading DropDowns
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
Cascading Radzen Blazor DropDown components.
Build cascading dropdowns in a Blazor DataGrid - filter one dropdown's options by another's selection, such as country then city, while editing.
</RadzenText>
<RadzenExample ComponentName="DropDown" Example="CascadingDropDowns">

2
RadzenBlazorDemos/Pages/DataGridCellContextMenuPage.razor
View File

@@ -4,7 +4,7 @@
DataGrid <strong>Cell context menu</strong>
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
Add a custom context menu for cells to trigger row or cell actions.
Add a right-click context menu to Blazor DataGrid cells - show custom actions for the clicked row and cell.
</RadzenText>
<RadzenExample ComponentName="DataGrid" Example="DataGridCellContextMenu">

2
RadzenBlazorDemos/Pages/DataGridConditionalTemplatePage.razor
View File

@@ -4,7 +4,7 @@
DataGrid conditional styles and templates
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
This page demonstrates <b>DataGrid</b> with conditional rows and cells template/styles.
Apply conditional formatting to a Blazor DataGrid - style rows and cells by value to highlight status, thresholds, or alerts.
</RadzenText>
<RadzenExample ComponentName="DataGrid" Example="DataGridConditionalTemplate">

2
RadzenBlazorDemos/Pages/DataGridCustomHeaderPage.razor
View File

@@ -4,7 +4,7 @@
DataGrid <strong>Custom Header with a button</strong>
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
Gives the grid a custom header, allowing the adding of components to create custom tool bars in addition to column grouping and column picker
Add a custom toolbar to a Blazor DataGrid header - place buttons, search boxes, or any components above the columns, alongside grouping and the column picker.
</RadzenText>
<RadzenExample ComponentName="DataGrid" Example="DataGridCustomHeader">

2
RadzenBlazorDemos/Pages/DataGridCustomHeaderWithColumnPickerPage.razor
View File

@@ -4,7 +4,7 @@
DataGrid <strong>Custom Header with a button</strong>
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
Gives the grid a custom header, allowing the adding of components to create custom tool bars in addition to column grouping and column picker
Add a column picker to the Blazor DataGrid header - let users show and hide columns from a custom header toolbar.
</RadzenText>
<RadzenExample ComponentName="DataGrid" Example="DataGridCustomHeader">

2
RadzenBlazorDemos/Pages/DataGridDensityPage.razor
View File

@@ -4,7 +4,7 @@
DataGrid <strong>Density</strong>
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
Adjust row height and spacing to fit compact or comfortable layouts.
Switch a Blazor DataGrid to compact density - fit more rows on screen with tighter spacing, or use the default comfortable layout.
</RadzenText>
<RadzenExample ComponentName="DataGrid" Example="DataGridDensity">

2
RadzenBlazorDemos/Pages/DataGridEmptyPage.razor
View File

@@ -4,7 +4,7 @@
Empty DataGrid
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
Showcase empty state when there is no data. Customize with placeholders or messages.
Show an empty Blazor DataGrid state - render a friendly message or custom template when there are no rows.
</RadzenText>
<RadzenExample ComponentName="DataGrid" Example="DataGridEmpty">

2
RadzenBlazorDemos/Pages/DataGridGridLinesPage.razor
View File

@@ -4,7 +4,7 @@
DataGrid <strong>GridLines</strong>
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
Toggle grid line visibility to customize row and column separators.
Control Blazor DataGrid grid lines - show horizontal, vertical, both, or no borders to match your design.
</RadzenText>
<RadzenExample ComponentName="DataGrid" Example="DataGridGridLines">

2
RadzenBlazorDemos/Pages/DataGridRowDragBetweenPage.razor
View File

@@ -4,7 +4,7 @@
Drag and drop rows between two DataGrids
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
Use <code>RowRender</code> event to add custom logic for drag and drop rows between two DataGrid components.
Drag rows between two Blazor DataGrids - move items from one grid to another with drag and drop.
</RadzenText>
<RadzenExample ComponentName="DataGrid" Example="DataGridRowDragBetween">

2
RadzenBlazorDemos/Pages/DataGridRowDragSchedulerPage.razor
View File

@@ -4,7 +4,7 @@
Drag and drop rows between DataGrid and Scheduler
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
Use DataGrid <code>RowRender</code> event and Scheduler <code>SlotRender</code> event to add custom logic for drag and drop rows from DataGrid to Scheduler.
Drag Blazor DataGrid rows onto a Scheduler - let users schedule items by dragging them from the grid into the Scheduler.
</RadzenText>
<RadzenExample ComponentName="DataGrid" Example="DataGridRowDragScheduler">

2
RadzenBlazorDemos/Pages/DataGridRowReorderPage.razor
View File

@@ -4,7 +4,7 @@
DataGrid row reorder
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
Use <code>RowRender</code> event to add custom logic for drag and drop rows to reorder.
Let users reorder Blazor DataGrid rows by dragging - drag a row to a new position and update the underlying data order.
</RadzenText>
<RadzenExample ComponentName="DataGrid" Example="DataGridRowReorder">

2
RadzenBlazorDemos/Pages/DataGridSaveSettingsLoadDataPage.razor
View File

@@ -4,7 +4,7 @@
DataGrid <strong>save settings</strong> using LoadData binding
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
Persist and reload grid settings (columns, sort, filters) with server-side data binding.
Save and load Blazor DataGrid state with LoadData binding - persist sort, filter, and paging when the grid fetches data via the LoadData event.
</RadzenText>
<RadzenExample ComponentName="DataGrid" Example="DataGridSaveSettingsLoadData">

2
RadzenBlazorDemos/Pages/DataGridSaveSettingsPage.razor
View File

@@ -4,7 +4,7 @@
DataGrid <strong>save settings</strong>
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
Persist user preferences like column order, widths, sort, and filters between sessions.
Save and restore Blazor DataGrid state - persist page, sort, filter, column width, order, and visibility so users return to the grid as they left it.
</RadzenText>
<RadzenExample ComponentName="DataGrid" Example="DataGridSaveSettings">

2
RadzenBlazorDemos/Pages/ExportToExcelCsvPage.razor
View File

@@ -4,7 +4,7 @@
Export to Excel and CSV
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
This page demonstrates how to export a Radzen Blazor DataGrid to Excel and CSV.
Export a Blazor DataGrid to Excel and CSV - download the data, respecting the current sort, filter, and column order.
</RadzenText>
<RadzenExample ComponentName="DataGrid" Example="ExportToExcelCsv" AdditionalSourceCodePages="@(new [] {"/demos/Services/NorthwindService.cs", "/demos/Controllers/ExportNorthwindController.cs", "/demos/Controllers/ExportController.cs"})">

70
RadzenBlazorDemos/Services/ExampleService.cs
View File

@@ -1305,6 +1305,11 @@ namespace RadzenBlazorDemos
{
Name = "Density",
Path = "datagrid-density",
Related = new [] { "datagrid-grid-lines", "datagrid-virtualization", "datagrid-iqueryable" },
Faq = new []
{
new FaqItem { Question = "How do I make the DataGrid more compact?", Answer = "Set Density to Compact to reduce row padding and fit more rows; the default is comfortable." }
},
Title = "Blazor DataGrid - Density | Free UI Components by Radzen",
Description = "See how to set a compact density mode of Blazor RadzenDataGrid.",
Icon = "\ueb9e",
@@ -1319,6 +1324,11 @@ namespace RadzenBlazorDemos
{
Name = "Header with button",
Path="datagrid-custom-header",
Related = new [] { "datagrid-custom-header-columnpicker", "datagrid-column-picker", "export-excel-csv" },
Faq = new []
{
new FaqItem { Question = "How do I add a toolbar to the DataGrid?", Answer = "Use the HeaderTemplate to render your own toolbar - buttons, search, or any components - above the grid's columns." }
},
Title = "Blazor DataGrid - Custom Header | Free UI Components by Radzen",
Description = "Gives the grid a custom header, allowing the adding of components to create custom tool bars in addtion to column grouping and column picker.",
Tags = new [] { "grid header","header" }
@@ -1327,6 +1337,11 @@ namespace RadzenBlazorDemos
{
Name = "Header with column picker",
Path="datagrid-custom-header-columnpicker",
Related = new [] { "datagrid-custom-header", "datagrid-column-picker", "datagrid-column-reorder" },
Faq = new []
{
new FaqItem { Question = "How do I put a column picker in a custom header?", Answer = "Render a RadzenDataGridColumnPicker inside the grid's HeaderTemplate so users toggle column visibility from your toolbar." }
},
Title = "Blazor DataGrid - Header Column Picker | Free UI Components by Radzen",
Description = "See how to add a column picker to your Blazor RadzenDataGrid.",
Tags = new [] { "grid header","header" }
@@ -1337,6 +1352,11 @@ namespace RadzenBlazorDemos
{
Name = "GridLines",
Path = "datagrid-grid-lines",
Related = new [] { "datagrid-density", "datagrid-conditional-template", "datagrid-iqueryable" },
Faq = new []
{
new FaqItem { Question = "How do I change the DataGrid grid lines?", Answer = "Set GridLines to Both, Horizontal, Vertical, or None to control which cell borders are shown." }
},
Title = "Blazor DataGrid - Grid Lines | Free UI Components by Radzen",
Description = "Deside where to display grid lines in your Blazor RadzenDataGrid.",
Icon = "\uf016",
@@ -1346,6 +1366,11 @@ namespace RadzenBlazorDemos
{
Name = "Cell Context Menu",
Path = "datagrid-cell-contextmenu",
Related = new [] { "datagrid-cell-selection", "datagrid-inline-edit", "datagrid-column-template" },
Faq = new []
{
new FaqItem { Question = "How do I add a context menu to DataGrid cells?", Answer = "Handle the CellContextMenu event and open a RadzenContextMenu with your actions for the clicked cell and row." }
},
Title = "Blazor DataGrid - Cell Menu | Free UI Components by Radzen",
Description = "Right click on a table cell to open the context menu.",
Icon = "\ue22b",
@@ -1362,6 +1387,11 @@ namespace RadzenBlazorDemos
{
Name = "IQueryable",
Path = "datagrid-save-settings",
Related = new [] { "datagrid-save-settings-loaddata", "datagrid-column-picker", "datagrid-iqueryable" },
Faq = new []
{
new FaqItem { Question = "How do I save and restore DataGrid state?", Answer = "Bind the Settings property (or handle its change) to capture page, sort, filter, and column layout, then reapply it on load." }
},
Title = "Blazor DataGrid - Save/Load Settings | Free UI Components by Radzen",
Description = "Save and load DataGrid state including page index, page size, column filters, sort order, width, and visibility.",
Tags = new [] { "save", "load", "settings" }
@@ -1371,6 +1401,11 @@ namespace RadzenBlazorDemos
{
Name = "LoadData binding",
Path = "datagrid-save-settings-loaddata",
Related = new [] { "datagrid-save-settings", "datagrid-loaddata", "datagrid-iqueryable" },
Faq = new []
{
new FaqItem { Question = "Does saving DataGrid state work with LoadData binding?", Answer = "Yes. Capture the Settings and reapply them; the grid raises LoadData with the restored sort, filter, and page so your query returns the right rows." }
},
Title = "Blazor DataGrid - Save/Load Settings | Free UI Components by Radzen",
Description = "This example shows how to save/load DataGrid state using Settings property when binding using LoadData event.",
Tags = new [] { "save", "load", "settings", "async", "loaddata" }
@@ -1388,6 +1423,11 @@ namespace RadzenBlazorDemos
{
Name = "Rows reorder",
Path = "/datagrid-rowreorder",
Related = new [] { "datagrid-rowdragbetween", "datagrid-column-reorder", "datagrid-inline-edit" },
Faq = new []
{
new FaqItem { Question = "How do I let users drag to reorder rows?", Answer = "Enable row reordering and handle the RowReorder event to update your data when a row is dropped in a new position." }
},
Title = "Blazor DataGrid - Reorder rows | Free UI Components by Radzen",
Description = "This example demonstrates custom DataGrid rows reoder.",
Tags = new [] { "datagrid", "reorder", "row" }
@@ -1396,6 +1436,11 @@ namespace RadzenBlazorDemos
{
Name = "Drag row between two DataGrids",
Path = "/datagrid-rowdragbetween",
Related = new [] { "datagrid-rowreorder", "datagrid-rowdrag-scheduler", "datagrid-multiple-selection" },
Faq = new []
{
new FaqItem { Question = "How do I drag rows from one DataGrid to another?", Answer = "Handle the row drag events on both grids to remove the item from the source and add it to the target collection." }
},
Title = "Blazor DataGrid - Drag Rows Between Grids | Free UI Components by Radzen",
Description = "This example demonstrates drag and drop rows between two DataGrid components.",
Tags = new [] { "datagrid", "drag", "row", "between" }
@@ -1404,6 +1449,11 @@ namespace RadzenBlazorDemos
{
Name = "Drag row between DataGrid and Scheduler",
Path = "/datagrid-rowdrag-scheduler",
Related = new [] { "datagrid-rowdragbetween", "datagrid-rowreorder", "datagrid-iqueryable" },
Faq = new []
{
new FaqItem { Question = "How do I drag DataGrid rows into the Scheduler?", Answer = "Make the rows draggable and handle the Scheduler's drop to create an appointment from the dropped row." }
},
Title = "Blazor DataGrid - Drag Rows to Scheduler | Free UI Components by Radzen",
Description = "This example demonstrates drag and drop rows between DataGrid and Scheduler.",
Tags = new [] { "datagrid", "drag", "row", "scheduler" }
@@ -1445,6 +1495,11 @@ namespace RadzenBlazorDemos
{
Name = "Conditional formatting",
Path = "datagrid-conditional-template",
Related = new [] { "datagrid-column-template", "datagrid-conditional-columns-render", "datagrid-grid-lines" },
Faq = new []
{
new FaqItem { Question = "How do I style DataGrid rows or cells by value?", Answer = "Use CellRender and RowRender to add CSS classes or inline styles based on the data, or a column Template to render conditional content." }
},
Title = "Blazor DataGrid - Conditional Format | Free UI Components by Radzen",
Description = "This example demonstrates RadzenDataGrid with conditional rows and cells template and styles.",
Icon = "\ue41d",
@@ -1454,6 +1509,11 @@ namespace RadzenBlazorDemos
{
Name = "Export to Excel and CSV",
Path = "export-excel-csv",
Related = new [] { "datagrid-footer-totals", "datagrid-grouping-api", "datagrid-iqueryable" },
Faq = new []
{
new FaqItem { Question = "How do I export the DataGrid to Excel or CSV?", Answer = "Call the grid's export and choose Excel or CSV; the export uses the current sort, filter, and columns." }
},
Title = "Blazor DataGrid - Excel & CSV Export | Free UI Components by Radzen",
Description = "This example demonstrates how to export a Radzen Blazor DataGrid to Excel and CSV.",
Icon = "\ue0c3",
@@ -1463,6 +1523,11 @@ namespace RadzenBlazorDemos
{
Name = "Cascading DropDowns",
Path = "cascading-dropdowns",
Related = new [] { "datagrid-inline-edit", "datagrid-incell-edit", "datagrid-column-template" },
Faq = new []
{
new FaqItem { Question = "How do I create cascading dropdowns in the DataGrid?", Answer = "Bind each dropdown's data to the value of the previous one and reload the dependent options when the parent selection changes." }
},
Title = "Blazor DataGrid - Cascading DropDown | Free UI Components by Radzen",
Description = "This example demonstrates cascading Radzen Blazor DropDown components.",
Icon = "\ue915",
@@ -1472,6 +1537,11 @@ namespace RadzenBlazorDemos
{
Name = "Empty Data Grid",
Path = "/datagrid-empty",
Related = new [] { "datagrid-iqueryable", "datagrid-loaddata", "datagrid-column-template" },
Faq = new []
{
new FaqItem { Question = "How do I customize the DataGrid's empty state?", Answer = "Use the EmptyTemplate to render your own message or content when the grid has no rows." }
},
Title = "Blazor DataGrid - Empty Data Grid | Free UI Components by Radzen",
Description = "This example demonstrates Blazor DataGrid without data.",
Icon = "\ue661",