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 DataGrid data-binding & column demos

Browse Source 
Group 1 (Data-binding): LoadData, OData, Dynamic, DataTable, Real-time,
Crosstab, Performance. Group 2 (Columns): Template, Resizing, Column Picker,
Reorder, Footer Totals, Frozen Columns, Composite Columns, Conditional Columns.

Each page gets a keyword-rich intro (preserving terms like Entity Framework,
OData, ExpandoObject), a FAQ (rendered + FAQPage JSON-LD), and Related links.
This commit is contained in:
Atanas Korchev
2026-06-22 11:42:08 +03:00
parent d64246a821
commit a50af13e54
16 changed files with 92 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
RadzenBlazorDemos/Pages/DataGridColumnPickingPage.razor
View File

@@ -4,7 +4,7 @@
DataGrid <strong>Column Picker</strong>
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
Enable a built-in column picker that lets users show or hide columns interactively.
Add a column picker to a Blazor DataGrid so users can show and hide columns at runtime to focus on the data they care about.
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
Documentation:

2
RadzenBlazorDemos/Pages/DataGridColumnReoderPage.razor
View File

@@ -4,7 +4,7 @@
DataGrid Column Reorder
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
Enable column reorder by setting the AllowColumnReorder property to true. Define column initial order using column OrderIndex property.
Let users reorder Blazor DataGrid columns by dragging headers, so they can arrange the grid to match how they work.
</RadzenText>
<RadzenExample ComponentName="DataGrid" Example="DataGridColumnReoder">

2
RadzenBlazorDemos/Pages/DataGridColumnResizingPage.razor
View File

@@ -4,7 +4,7 @@
DataGrid <strong>Column Resizing</strong>
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
Enable column resizing by setting the AllowColumnResize property to true.
Let users resize Blazor DataGrid columns by dragging the column borders, and set initial widths to fit your data.
</RadzenText>
<RadzenExample ComponentName="DataGrid" Example="DataGridColumnResizing">

2
RadzenBlazorDemos/Pages/DataGridColumnTemplatePage.razor
View File

@@ -4,7 +4,7 @@
DataGrid <strong>Column Template</strong>
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
Customize the way data is displayed in each column using templates.
Customize Blazor DataGrid cell content with column templates - render images, badges, buttons, links, or any markup in a column instead of plain text.
</RadzenText>
<RadzenExample ComponentName="DataGrid" Example="DataGridColumnTemplate" AdditionalSourceCodePages=@(new List<string>() { "/demos/Pages/DialogCardPage.razor" })>

2
RadzenBlazorDemos/Pages/DataGridCompositeColumnsPage.razor
View File

@@ -4,7 +4,7 @@
DataGrid <strong>Composite Columns</strong>
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
Use DataGrid column <code>Columns</code> property to define child columns.
Build multi-level Blazor DataGrid headers with composite columns - group related columns under a shared parent header for clearer, structured tables.
</RadzenText>
<RadzenExample ComponentName="DataGrid" Example="DataGridCompositeColumns">

3
RadzenBlazorDemos/Pages/DataGridConditionalColumnsPage.razor
View File

@@ -4,8 +4,7 @@
Blazor DataGrid
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
When adding Blazor components conditionally they always render at the end.
Use this technique to render conditionally specific DataGrid column(s) and keep the render order as declared in the markup/code.
Show, hide, or change Blazor DataGrid columns conditionally - render columns based on data, user role, or screen size, and keep the column order as declared.
</RadzenText>
<RadzenExample ComponentName="DataGrid" Example="DataGridConditionalColumns">

2
RadzenBlazorDemos/Pages/DataGridCrossTabDataPage.razor
View File

@@ -4,7 +4,7 @@
DataGrid <strong>crosstab</strong> data support
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
Sometimes your data comes from crosstab queries and you need to present rows as columns.
Display crosstab data in a Blazor DataGrid by pivoting rows into columns - summarize values across two dimensions, such as sales by product and month, in a single grid.
</RadzenText>
<RadzenExample ComponentName="DataGrid" Example="DataGridCrossTabData">

2
RadzenBlazorDemos/Pages/DataGridDataTablePage.razor
View File

@@ -4,7 +4,7 @@
DataGrid <strong>DataTable</strong> support
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
Bind the DataGrid to legacy DataTable objects for backward compatibility.
Bind a Blazor DataGrid to a System.Data.DataTable and render its columns and rows directly - ideal for ADO.NET results, stored procedures, or legacy data without a typed model.
</RadzenText>
<RadzenExample ComponentName="DataGrid" Example="DataGridDataTable">

2
RadzenBlazorDemos/Pages/DataGridDynamicDataPage.razor
View File

@@ -4,7 +4,7 @@
DataGrid <strong>dynamic</strong> data support
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
Sometimes your data comes from external API and you don't have a C# model for it. This demo shows how to implement such a scenario.
Bind a Blazor DataGrid to dynamic data with no compile-time model - dictionaries, ExpandoObject, or values from an external API - and define columns at runtime by property name.
</RadzenText>
<RadzenExample ComponentName="DataGrid" Example="DataGridDynamicData">

2
RadzenBlazorDemos/Pages/DataGridFooterTotalsPage.razor
View File

@@ -4,7 +4,7 @@
DataGrid <strong>Footer Totals</strong>
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
Display aggregated data such as sums and averages in column footers.
Show totals and aggregates in the Blazor DataGrid footer - sum, average, count, min, and max across the current data, including filtered and paged results.
</RadzenText>
<RadzenExample ComponentName="DataGrid" Example="DataGridFooterTotals" AdditionalSourceCodePages="@(new [] {"/demos/Shared/RenderOnceComponent.razor"})">

2
RadzenBlazorDemos/Pages/DataGridFrozenColumnsPage.razor
View File

@@ -5,7 +5,7 @@
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
Lock columns to prevent them from scrolling out of view via the <code>Frozen</code> property.
Freeze (pin) Blazor DataGrid columns so key columns stay visible while users scroll horizontally through the rest - pin to the left or right edge.
</RadzenText>
<RadzenExample ComponentName="DataGrid" Example="DataGridFrozenColumns">

2
RadzenBlazorDemos/Pages/DataGridLoadDataPage.razor
View File

@@ -4,7 +4,7 @@
DataGrid <strong>LoadData</strong>
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
The <code>LoadData</code> event allows you to perform custom paging, sorting and filtering.
Load Blazor DataGrid data on demand with the LoadData event - the grid passes you the current page, sort, and filter so you can fetch rows from a web API, stored procedure, or any custom data source and return just that page.
</RadzenText>
<RadzenExample ComponentName="DataGrid" Example="DataGridLoadData">

2
RadzenBlazorDemos/Pages/DataGridODataPage.razor
View File

@@ -4,7 +4,7 @@
DataGrid <strong>OData</strong>
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
Use the <code>LoadData</code> event to get data from a REST service.
Bind a Blazor DataGrid to an OData service and get server-side paging, sorting, and filtering for free - the grid translates its operations into OData query options ($skip, $top, $orderby, $filter) so only the rows in view are returned.
</RadzenText>
<RadzenExample ComponentName="DataGrid" Example="DataGridOData" Heading="false" AdditionalSourceCodePages="@(new [] {"/demos/Services/NorthwindODataService.cs"})" Documentation="false">

2
RadzenBlazorDemos/Pages/DataGridPerformancePage.razor
View File

@@ -4,7 +4,7 @@
Blazor DataGrid
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
This demo shows the DataGrid can handle large amounts of data (~50,000 rows) without any performance issues.
See how the Blazor DataGrid stays fast with large datasets - tens of thousands of rows - using virtualization and server-side paging so only the rows in view are rendered and fetched.
</RadzenText>
<RadzenExample ComponentName="DataGrid" Example="DataGridPerformance">

2
RadzenBlazorDemos/Pages/DataGridRealtimeDataPage.razor
View File

@@ -4,7 +4,7 @@
DataGrid <strong>real-time</strong> data support
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
Sometimes your DataGrid should be updated real-time. This demo shows how to implement such a scenario.
Update a Blazor DataGrid in real time as data changes - refresh rows from a timer, SignalR, or any live feed and call Reload so the grid reflects the latest values.
</RadzenText>
<RadzenExample ComponentName="DataGrid" Example="DataGridRealtimeData">

77
RadzenBlazorDemos/Services/ExampleService.cs
View File

@@ -636,6 +636,12 @@ namespace RadzenBlazorDemos
{
Name = "LoadData event",
Path = "datagrid-loaddata",
Related = new [] { "datagrid-odata", "datagrid-virtualization-loaddata", "datagrid-iqueryable" },
Faq = new []
{
new FaqItem { Question = "When should I use the LoadData event?", Answer = "Use LoadData when the data comes from a web API or any source you query yourself - the grid passes you the current page, sort, and filter, and you return that page plus the total count." },
new FaqItem { Question = "How is IQueryable binding different from LoadData?", Answer = "With IQueryable, such as Entity Framework, the grid builds and runs the query for you. With LoadData you run the query yourself and return the page, which suits REST APIs and custom back ends." }
},
Title = "Blazor DataGrid - LoadData Event | Free UI Components by Radzen",
Description = "Blazor Data Grid custom data-binding via the LoadData event.",
Tags = new [] { "datagrid", "bind", "load", "data", "loaddata", "custom" }
@@ -644,6 +650,11 @@ namespace RadzenBlazorDemos
{
Name = "OData service",
Path = "datagrid-odata",
Related = new [] { "datagrid-loaddata", "datagrid-checkboxlist-filter-odata", "datagrid-iqueryable" },
Faq = new []
{
new FaqItem { Question = "How do I bind a DataGrid to OData?", Answer = "Point the grid at the OData endpoint; it turns paging, sorting, and filtering into $skip, $top, $orderby, and $filter so the server returns only the rows in view." }
},
Title = "Blazor DataGrid - OData Service | Free UI Components by Radzen",
Description = "Blazor Data Grid supports data-binding to OData.",
Tags = new [] { "datagrid", "bind", "load", "data", "loaddata", "odata", "service", "rest" }
@@ -652,6 +663,11 @@ namespace RadzenBlazorDemos
{
Name = "Dynamic data",
Path = "datagrid-dynamic",
Related = new [] { "datagrid-datatable", "datagrid-iqueryable", "datagrid-column-template" },
Faq = new []
{
new FaqItem { Question = "Can the DataGrid display data without a C# model?", Answer = "Yes. Bind to dynamic rows such as dictionaries or ExpandoObject and declare columns at runtime by property name." }
},
Title = "Blazor DataGrid - Dynamic Data | Free UI Components by Radzen",
Description = "Blazor Data Grid supports dynamic data sources.",
Tags = new [] { "datagrid", "bind", "load", "data", "loaddata", "dynamic" }
@@ -660,6 +676,11 @@ namespace RadzenBlazorDemos
{
Name = "DataTable data",
Path = "datagrid-datatable",
Related = new [] { "datagrid-dynamic", "datagrid-iqueryable" },
Faq = new []
{
new FaqItem { Question = "How do I bind a DataGrid to a DataTable?", Answer = "Bind the grid to the DataTable and map each column by field name; sorting, filtering, and paging work as usual." }
},
Title = "Blazor DataGrid - DataTable Data | Free UI Components by Radzen",
Description = "Blazor Data Grid supports DataTable sources.",
Tags = new [] { "datagrid", "bind", "load", "data", "loaddata", "datatable" }
@@ -668,6 +689,11 @@ namespace RadzenBlazorDemos
{
Name = "Real-time data",
Path = "datagrid-realtime",
Related = new [] { "datagrid-iqueryable", "datagrid-loaddata" },
Faq = new []
{
new FaqItem { Question = "How do I refresh the DataGrid with real-time data?", Answer = "Update the bound collection as data arrives and call the grid's Reload to re-render the current page." }
},
Title = "Blazor DataGrid - Real-time Data | Free UI Components by Radzen",
Description = "Blazor Data Grid with real-time data sources.",
Tags = new [] { "datagrid", "bind", "load", "data", "loaddata", "real-time" }
@@ -676,6 +702,11 @@ namespace RadzenBlazorDemos
{
Name = "Crosstab data",
Path = "datagrid-crosstab",
Related = new [] { "datagrid-grouping-api", "datagrid-footer-totals", "datagrid-iqueryable" },
Faq = new []
{
new FaqItem { Question = "Can the DataGrid show a crosstab or pivot layout?", Answer = "Yes - project each cross dimension into its own column and define those columns; for a full pivot UI with row and column groups, use the PivotDataGrid." }
},
Title = "Blazor DataGrid - Crosstab Data | Free UI Components by Radzen",
Description = "Blazor Data Grid supports crosstab data sources.",
Tags = new [] { "datagrid", "bind", "load", "data", "loaddata", "crosstab", "rows", "columns" }
@@ -684,6 +715,12 @@ namespace RadzenBlazorDemos
{
Name = "Performance",
Path = "datagrid-performance",
Related = new [] { "datagrid-virtualization", "datagrid-loaddata", "datagrid-iqueryable" },
Faq = new []
{
new FaqItem { Question = "How do I make the DataGrid fast with large datasets?", Answer = "Enable virtualization or server-side paging via IQueryable or LoadData so only the visible rows render, and keep cell templates simple." },
new FaqItem { Question = "How many rows can the DataGrid handle?", Answer = "With virtualization or server-side paging it stays responsive on very large sets, since it only renders and fetches the rows currently in view." }
},
Title = "Blazor DataGrid - Performance | Free UI Components by Radzen",
Description = "Blazor Data Grid bound to a large collection of data",
Tags = new [] { "datagrid", "bind", "performance", "data", "large" }
@@ -724,6 +761,11 @@ namespace RadzenBlazorDemos
{
Name = "Template",
Path = "datagrid-column-template",
Related = new [] { "datagrid-composite-columns", "datagrid-conditional-columns-render", "datagrid-inline-edit" },
Faq = new []
{
new FaqItem { Question = "How do I customize a DataGrid column's cell content?", Answer = "Add a Template to the column and put any Razor markup inside; you get the row item as context to bind to." }
},
Title = "Blazor DataGrid - Column Template | Free UI Components by Radzen",
Description = "Blazor Data Grid custom appearance via column templates. The Template allows you to customize the way data is displayed.",
Tags = new [] { "column", "template", "grid", "datagrid", "table"}
@@ -732,6 +774,11 @@ namespace RadzenBlazorDemos
{
Name = "Resizing",
Path = "datagrid-column-resizing",
Related = new [] { "datagrid-column-reorder", "datagrid-frozen-columns", "datagrid-column-picker" },
Faq = new []
{
new FaqItem { Question = "How do I enable column resizing in the DataGrid?", Answer = "Set AllowColumnResize to true on the grid; users can then drag column borders to resize, and you can set each column's Width for the initial layout." }
},
Title = "Blazor DataGrid - Column Resizing | Free UI Components by Radzen",
Description = "Enable column resizing in RadzenDataGrid by setting the AllowColumnResizing property to true.",
Tags = new [] { "column", "resizing", "grid", "datagrid", "table"}
@@ -740,6 +787,11 @@ namespace RadzenBlazorDemos
{
Name = "Column Picker",
Path = "datagrid-column-picker",
Related = new [] { "datagrid-column-reorder", "datagrid-column-resizing", "datagrid-frozen-columns" },
Faq = new []
{
new FaqItem { Question = "How do I let users show and hide DataGrid columns?", Answer = "Enable column picking (AllowColumnPicking) and the grid renders a menu where users toggle column visibility." }
},
Title = "Blazor DataGrid - Column Picker | Free UI Components by Radzen",
Description = "Enable column picker in RadzenDataGrid by setting the AllowColumnPicking property to true.",
Tags = new [] { "datagrid", "column", "picker", "chooser" }
@@ -748,6 +800,11 @@ namespace RadzenBlazorDemos
{
Name = "Reorder",
Path = "datagrid-column-reorder",
Related = new [] { "datagrid-column-resizing", "datagrid-column-picker", "datagrid-frozen-columns" },
Faq = new []
{
new FaqItem { Question = "How do I enable column reordering?", Answer = "Set AllowColumnReorder to true; users can then drag column headers to change the column order." }
},
Title = "Blazor DataGrid - Column Reorder | Free UI Components by Radzen",
Description = "Enable column reorder in RadzenDataGrid by setting the AllowColumnReorder property to true. Define column initial order using column OrderIndex property.",
Tags = new [] { "column", "reorder", "grid", "datagrid", "table"}
@@ -756,6 +813,11 @@ namespace RadzenBlazorDemos
{
Name = "Footer Totals",
Path = "datagrid-footer-totals",
Related = new [] { "datagrid-grouping-api", "datagrid-crosstab", "datagrid-iqueryable" },
Faq = new []
{
new FaqItem { Question = "How do I show column totals in the DataGrid?", Answer = "Add a FooterTemplate to the column and compute the aggregate - sum, average, count, min, or max - over the grid's view; it updates as the data is filtered and paged." }
},
Title = "Blazor DataGrid - Footer Totals | Free UI Components by Radzen",
Description = "The FooterTemplate column property allows you to display aggregated data in the column footer.",
Tags = new [] { "summary", "total", "aggregate", "datagrid", "table", "dataview" }
@@ -764,6 +826,11 @@ namespace RadzenBlazorDemos
{
Name = "Frozen Columns",
Path = "datagrid-frozen-columns",
Related = new [] { "datagrid-column-resizing", "datagrid-column-reorder", "datagrid-virtualization" },
Faq = new []
{
new FaqItem { Question = "How do I freeze a column in the DataGrid?", Answer = "Set Frozen on the column, and FrozenPosition for left or right; it stays in place while the other columns scroll horizontally." }
},
Title = "Blazor DataGrid - Frozen Columns | Free UI Components by Radzen",
Description = "Lock columns in RadzenDataGrid to prevent them from scrolling out of view via the Frozen property.",
Tags = new [] { "datagrid", "column", "frozen", "locked" }
@@ -772,6 +839,11 @@ namespace RadzenBlazorDemos
{
Name = "Composite Columns",
Path = "datagrid-composite-columns",
Related = new [] { "datagrid-column-template", "datagrid-frozen-columns", "datagrid-grouping-api" },
Faq = new []
{
new FaqItem { Question = "How do I create grouped or multi-level column headers?", Answer = "Nest child columns inside a parent RadzenDataGridColumn; the parent renders as a spanning header above its children." }
},
Title = "Blazor DataGrid - Composite Columns | Free UI Components by Radzen",
Description = "Use RadzenDataGridColumn Columns property to define child columns.",
Tags = new [] { "datagrid", "column", "composite", "merged", "complex" }
@@ -780,6 +852,11 @@ namespace RadzenBlazorDemos
{
Name = "Conditional Columns",
Path = "datagrid-conditional-columns-render",
Related = new [] { "datagrid-column-template", "datagrid-column-picker", "datagrid-conditional-template" },
Faq = new []
{
new FaqItem { Question = "How do I show a DataGrid column conditionally?", Answer = "Bind the column's Visible property to your condition, or render columns with normal Razor control flow so they appear only when needed." }
},
Title = "Blazor DataGrid - Conditional Columns | Free UI Components by Radzen",
Description = "Use RadzenDataGridColumn Columns property to define child columns conditionally.",
Tags = new [] { "datagrid", "column", "conditional", "render", "complex" }