starred/radzen-blazor
1
0
Fork 0
mirror of https://github.com/radzenhq/radzen-blazor.git synced 2026-04-05 22:01:04 +00:00
Code Issues 1.3k Packages Projects Releases 28 Wiki Activity
Files
aff8743e92a4fff6120279a7023daceebbe1c029
radzen-blazor/RadzenBlazorDemos/Services/ExampleService.cs
Atanas Korchev aff8743e92 Update component count from 100+ to 110+
2026-03-12 13:40:10 +02:00

2527 lines
160 KiB
C#
Raw Blame History

using System;
using System.Collections.Generic;
using System.Linq;
namespace RadzenBlazorDemos
{
public class KeyboardShortcut
{
public string Key { get; set; }
public string Action { get; set; }
}
public class ExampleService
{
Example[] allExamples = new[] {
new Example
{
Name = "Overview",
Path = "/",
Description = "110+ free, open-source Blazor UI components for data-rich web apps. DataGrid, Scheduler, Charts, Forms, and more. MIT licensed.",
Icon = "\ue88a"
},
new Example
{
Name = "Get Started",
Path = "/get-started",
Title = "Get Started | Free UI Components by Radzen",
Description = "How to get started with the Radzen Blazor Components library.",
Icon = "\ue1c4"
},
new Example
{
Name = "AI",
Path = "/ai",
Title = "AI and Radzen Blazor | Free UI Components by Radzen",
Description = "Learn now how to integrate AI with the Radzen Blazor Components library.",
Icon = "\uefac",
Tags = new [] { "chat", "ai", "conversation", "message", "streaming", "mcp", "nuget" },
New = true
},
new Example
{
Name = "Support",
Path = "/support",
Title = "Support | Free UI Components by Radzen",
Description = "How to get support for the Radzen Blazor Components library.",
Icon = "\ue0c6"
},
new Example
{
Toc = [ new () { Text = "Applying guidelines", Anchor = "#applying-guidelines" }, new () { Text = "WCAG 2.2", Anchor = "#wcag" }, new () { Text = "WCAG compliant theme colors (AA level of conformance)", Anchor = "#wcag-colors" }, new () { Text = "ARIA attributes", Anchor = "#wai-aria" }, new () { Text = "Semantic HTML", Anchor = "#semantic-html" }, new () { Text = "Screen reader compatibility", Anchor = "#screen-readers" }, new () { Text = "Responsive design", Anchor = "#responsive-design" }, new () { Text = "Keyboard compatibility", Anchor = "#keyboard-compatibility" }, new () { Text = "Accessibility Conformance Report", Anchor = "#acr" } ],
Name = "Accessibility",
Path = "/accessibility",
Title = "Blazor Accessibility | Free UI Components by Radzen",
Description = "Accessible Blazor components compliant with WAI-ARIA, WCAG 2.2, Section 508, and keyboard navigation standards.",
Icon = "\ue92c",
Tags = new[] { "keyboard", "accessibility", "standard", "508", "wai-aria", "wcag", "shortcut"}
},
new Example
{
Toc = [ new () { Text = "Customize themes in Radzen Blazor Studio", Anchor = "#text-tag-name" } ],
Name = "UI Fundamentals",
Icon = "\ue749",
Children = new [] {
new Example
{
Name = "Themes",
Path = "themes",
Updated = true,
Title = "Blazor Themes | Free UI Components by Radzen",
Description = "Free and premium Blazor themes for Radzen components. Choose the style that best suits your project.",
Icon = "\ue40a",
Tags = new[] { "theme", "color", "background", "border", "utility", "css", "var"}
},
new Example
{
Toc = [ new () { Text = "Persist the Theme", Anchor = "#persist" }, new () { Text = "Video: Changing themes at runtime in Radzen Blazor Studio", Anchor = "#video-changing-themes-at-runtime" } ],
Name = "ThemeService",
Path = "theme-service",
Title = "Blazor ThemeService | Free UI Components by Radzen",
Description = "The ThemeService allows to change the theme of the application at runtime.",
Icon = "\ue3ae",
Tags = ["theme", "service", "change", "runtime", "rtl", "right to left", "direction", "wcag", "accessibility"]
},
new Example
{
Toc = [ new () { Text = "Switch between light and dark mode", Anchor = "#light-dark-mode" }, new () { Text = "Video: AppearanceToggle in Radzen Blazor Studio", Anchor = "#video-radzen-blazor-studio-config" }, new () { Text = "Keyboard Navigation", Anchor = "#keyboard-navigation" } ],
Name = "AppearanceToggle",
Path = "appearance-toggle",
Title = "Blazor Appearance Toggle | Free UI Components by Radzen",
Description = "The AppearanceToggle button allows you to switch between two predefined themes, most commonly light and dark.",
Icon = "\ueb37",
Tags = new[] { "theme", "light", "dark", "mode", "appearance", "toggle", "switch"}
},
new Example
{
Toc = [ new () { Text = "Theme Colors", Anchor = "#theme-colors" }, new () { Text = "Utility CSS Classes", Anchor = "#utility-css-classes" }, new () { Text = "Video: Theme Colors in Radzen Blazor Studio", Anchor = "#video-theme-colors" } ],
Name = "Colors",
Path = "colors",
Title = "Blazor Color Utilities | Free UI Components by Radzen",
Description = "List of colors and utility CSS classes available in Radzen Blazor Components library.",
Icon = "\ue997",
Tags = new[] { "color", "background", "border", "utility", "css", "var"}
},
new Example
{
Toc = [ new () { Text = "Text Style", Anchor = "#text-style" }, new () { Text = "Text Style and Tag Name", Anchor = "#text-tag-name" }, new () { Text = "Display headings", Anchor = "#text-display-headings" }, new () { Text = "Text Align", Anchor = "#text-align" }, new () { Text = "Text Functional Colors", Anchor = "#text-color" }, new () { Text = "Text Transform", Anchor = "#text-transform" }, new () { Text = "Text Wrap", Anchor = "#text-wrap" }, new () { Text = "Video: How Typography Works in Radzen Blazor Studio", Anchor = "#video-radzen-text" } ],
Name = "Typography",
Path = "typography",
Title = "Blazor Text Component | Free UI Components by Radzen",
Description = "Use the RadzenText component to format text in your applications. The TextStyle property applies a predefined text style such as H1, H2, etc.",
Icon = "\ue264",
Tags = new [] { "typo", "typography", "text", "paragraph", "header", "heading", "caption", "overline", "content" }
},
new Example
{
Toc = [ new () { Text = "Material Icons", Anchor = "#material-icons" }, new () { Text = "Icon color", Anchor = "#icon-color" }, new () { Text = "Filled icons", Anchor = "#filled-icons" }, new () { Text = "Styled icons", Anchor = "#styled-icons" }, new () { Text = "Using RadzenIcon with other icon fonts", Anchor = "#icons-width-other-fonts" }, new () { Text = "Video: RadzenIcon in Radzen Blazor Studio", Anchor = "#video-icons" } ],
Name = "Icons",
Path = "icon",
Updated = true,
Title = "Blazor Icon Component | Free UI Components by Radzen",
Description = "Demonstration and configuration of the Radzen Blazor Icon component.",
Icon = "\ue148",
Tags = new [] { "icon", "content" }
},
new Example
{
Toc = [ new () { Text = "Video: Styling Borders in Radzen Blazor Studio", Anchor = "#video-borders" }, new () { Text = "Border radius", Anchor = "#border-radius" }, new () { Text = "Add or remove borders arbitrarily", Anchor = "#add-remove-css-classes" }, new () { Text = "Border color utility CSS classes", Anchor = "#color-css-classes" }, new () { Text = "Border with color utility CSS classes", Anchor = "#utility-css-classes" }, new () { Text = "Set border width via CSS variable", Anchor = "#border-width" }, new () { Text = "Borders with CSS variables", Anchor = "#css-variables" } ],
Name = "Borders",
Path = "borders",
Title = "Blazor Border Utilities | Free UI Components by Radzen",
Description = "Border styles and utility CSS classes for borders available in Radzen Blazor Components library.",
Icon = "\ue3c6",
Tags = new [] { "border", "utility", "css", "var"}
},
new Example
{
Toc = [ new () { Text = "Breakpoints", Anchor = "#breakpoints" }, new () { Text = "Usage of Breakpoints", Anchor = "#usage" } ],
Name = "Breakpoints",
Title = "Blazor Responsive Breakpoints | Free UI Components by Radzen",
Description = "Responsive breakpoints are used to adjust the layout based on the screen size of the device in use.",
Path = "breakpoints",
Icon = "\ue1b1",
Tags = new [] { "breakpoints", "spacing", "margin", "padding", "gutter", "gap", "utility", "css", "responsive", "layout"}
},
new Example
{
Toc = [ new () { Text = "Responsive display", Anchor = "#responsive-spacing" } ],
Name = "Display",
Title = "Blazor Display Utilities | Free UI Components by Radzen",
Description = "Display styles and utility CSS classes available in Radzen Blazor Components library.",
Path = "display",
Icon = "\uf023",
Tags = new [] { "display", "hide", "show", "flex", "block", "inline", "utility", "css", "var"}
},
new Example
{
Toc = [ new () { Text = "Responsive overflow", Anchor = "#responsive-spacing" } ],
Name = "Overflow",
Title = "Blazor Overflow Utilities | Free UI Components by Radzen",
Description = "Overflow styles and utility CSS classes available in Radzen Blazor Components library.",
Path = "overflow",
Icon = "\uf829",
Tags = new [] { "overflow", "content", "width", "height", "size", "wrap", "hide", "hidden", "visible", "utility", "css", "var"}
},
new Example
{
Toc = [ new () { Text = "Basic Usage", Anchor = "#basic-usage" }, new () { Text = "Show/Hide Content Based on Screen Size", Anchor = "#responsive-content" }, new () { Text = "Multiple Breakpoints", Anchor = "#multiple-breakpoints" }, new () { Text = "Device Orientation", Anchor = "#orientation" } ],
Name = "MediaQuery",
Title = "Blazor MediaQuery Component | Free UI Components by Radzen",
Description = "Respond to browser viewport size changes using CSS media queries. Perfect for creating responsive Blazor applications.",
Path = "media-query",
Icon = "\ue337",
Tags = new [] { "mediaquery", "media", "query", "responsive", "breakpoint", "viewport", "screen", "mobile", "tablet", "desktop", "orientation", "utility"}
},
new Example
{
Toc = [ new () { Text = "Ripple RadzenButton", Anchor = "#ripple-button" }, new () { Text = "Ripple RadzenLink", Anchor = "#ripple-link" }, new () { Text = "Ripple HTML div", Anchor = "#ripple-div" } ],
Name = "Ripple",
Title = "Blazor Ripple Effect | Free UI Components by Radzen",
Description = "See how to apply the ripple effect to various UI elements.",
Path = "ripple",
Icon = "\ue762",
Tags = new [] { "ripple", "utility", "css", "var"}
},
new Example
{
Toc = [ new () { Text = "Utility CSS classes", Anchor = "#shadow-css-classes" }, new () { Text = "Custom CSS properties (CSS Variables)", Anchor = "#shadow-css-variables" } ],
Name = "Shadows",
Path = "shadows",
Title = "Blazor Shadow Utilities | Free UI Components by Radzen",
Description = "Shadow styles and utility CSS classes for shadows available in Radzen Blazor Components library.",
Icon = "\ue9df",
Tags = new [] { "shadow", "utility", "css", "var"}
},
new Example
{
Toc = [ new () { Text = "Width percentage CSS classes", Anchor = "#width-percentage-css-classes" }, new () { Text = "Width keyword CSS classes", Anchor = "#width-keyword-css-classes" }, new () { Text = "Width viewport CSS classes", Anchor = "#width-viewport-css-classes" }, new () { Text = "Max-width and min-width CSS classes", Anchor = "#border-radius" }, new () { Text = "Height percentage CSS classes", Anchor = "#height-percentage-css-classes" }, new () { Text = "Height viewport CSS classes", Anchor = "#height-viewport-css-classes" }, new () { Text = "Max-height and min-height CSS classes", Anchor = "#border-radius" }, new () { Text = "Responsive sizing", Anchor = "#responsive-spacing" } ],
Name = "Sizing",
Title = "Blazor Sizing Utilities | Free UI Components by Radzen",
Description = "Sizing styles and utility CSS classes for width and height available in Radzen Blazor Components library.",
Path = "sizing",
Icon = "\uf730",
Tags = new [] { "sizing", "width", "height", "size", "max", "min", "utility", "css", "var"}
},
new Example
{
Toc = [ new () { Text = "Basic Usage", Anchor = "#basic-usage" }, new () { Text = "Text Size", Anchor = "#text-size" }, new () { Text = "Animations", Anchor = "#animations" }, new () { Text = "Complex Example", Anchor = "#complex-example" }, new () { Text = "DataGrid Loading", Anchor = "#datagrid-loading" } ],
Name = "Skeleton",
Title = "Blazor Skeleton Component | Free UI Components by Radzen",
Description = "RadzenSkeleton component displays loading placeholders with various shapes and animations.",
Path = "skeleton",
Icon = "\uf486",
Tags = new [] { "skeleton", "load", "loading", "placeholder", "animation", "wave", "pulse", "text", "circular", "rectangular", "rounded" }
},
new Example
{
Toc = [ new () { Text = "Margin CSS classes", Anchor = "#margin-css-classes" }, new () { Text = "Padding CSS classes", Anchor = "#padding-css-classes" }, new () { Text = "Sizes", Anchor = "#sizes" }, new () { Text = "Responsive spacing", Anchor = "#responsive-spacing" } ],
Name = "Spacing",
Title = "Blazor Spacing Utilities | Free UI Components by Radzen",
Description = "Spacing styles and utility CSS classes for margin and padding available in Radzen Blazor Components library.",
Path = "spacing",
Icon = "\uf773",
Tags = new [] { "spacing", "margin", "padding", "gutter", "gap", "utility", "css", "var"}
}
}
},
new Example
{
Toc = [ new () { Text = "Get and set the text", Anchor = "#text" }, new () { Text = "Markdown with Blazor components inside", Anchor = "#blazor" } ],
Name = "Markdown",
Icon = "\uf552",
Path = "markdown",
Description = "Use Radzen Blazor Markdown component to render markdown content.",
Tags = new[] { "markdown", "text", "content" }
},
new Example
{
Toc = [ new () { Text = "Centered CTA", Anchor = "#centered-cta" }, new () { Text = "Left-aligned CTA", Anchor = "#left-aligned-cta" }, new () { Text = "Justified CTA", Anchor = "#left-aligned-cta" }, new () { Text = "Image to the left", Anchor = "#image-to-the-left" }, new () { Text = "Image to the right", Anchor = "#image-to-the-right" } ],
Name = "UI Blocks",
Pro = true,
Title = "Blazor UI Blocks | Free UI Components by Radzen",
Description = "Ready to use UI building blocks and templates",
Icon = "\uf51d",
Children = new[] {
new Example
{
Name = "Call-to-Action",
Title = "Blazor Call-to-Action | UI Blocks by Radzen",
Icon = "\ue06c",
Description = "Examples of CTA UI Blocks",
Path = "ui-blocks-cta",
Tags = new [] { "cta", "call-to-action", "call", "action", "button" }
},
new Example
{
Toc = [ new () { Text = "Simple stats", Anchor = "#simple-stats" }, new () { Text = "Simple stats with icon", Anchor = "#simple-stats-with-icon" }, new () { Text = "Stats with trends", Anchor = "#stats-with-trends" }, new () { Text = "Stats with trends to the right", Anchor = "#stats-with-trends-to-the-right" }, new () { Text = "Stats with square icon", Anchor = "#stats-with-square-icon" } ],
Name = "Cards",
Title = "Blazor Cards | UI Blocks by Radzen",
Icon = "\ue991",
Description = "Examples of Card Blocks",
Path = "ui-blocks-cards",
Tags = new [] { "card", "stats", "products" }
},
new Example
{
Toc = [ new () { Text = "FAQ in 2 columns", Anchor = "#faq-in-2-columns" }, new () { Text = "FAQ to the right", Anchor = "#faq-to-the-right" }, new () { Text = "FAQ Accordion to the right", Anchor = "#faq-accordion-to-the-right" }, new () { Text = "FAQ in centered Accordion", Anchor = "#faq-in-centered-accordion" } ],
Name = "FAQ",
Title = "Blazor FAQ - Frequently Asked Questions | UI Blocks by Radzen",
Icon = "\uf04c",
Description = "Examples of FAQ Blocks",
Path = "ui-blocks-faq",
Tags = new [] { "faq", "question", "answer" }
},
new Example
{
Toc = [ new () { Text = "Features with small icons", Anchor = "#features-with-small-icons" }, new () { Text = "Features with large icons on top", Anchor = "#features-with-large-icons-on-top" }, new () { Text = "Centered features", Anchor = "#centered-features" } ],
Name = "Features",
Title = "Blazor Features | UI Blocks by Radzen",
Icon = "\ue031",
Description = "Examples of Features Blocks",
Path = "ui-blocks-features",
Tags = new [] { "feature", "list" }
},
new Example
{
Toc = [ new () { Text = "Footer with a sitemap", Anchor = "#footer-with-sitemap" }, new () { Text = "Centered Footer", Anchor = "#centered-footer" }, new () { Text = "Simple Footer", Anchor = "#simple-footer" } ],
Name = "Footers",
Title = "Blazor Footer | UI Blocks by Radzen",
Icon = "\uf7e6",
Description = "Preconfigured Footer UI Blocks",
Path = "ui-blocks-footers",
Tags = new [] { "footer" }
},
new Example
{
Toc = [ new () { Text = "Centered Logos", Anchor = "#centered-logos" }, new () { Text = "Logos to the right", Anchor = "#logos-to-the-right" } ],
Name = "Logo Clouds",
Title = "Blazor Logo Clouds | UI Blocks by Radzen",
Icon = "\ue574",
Description = "Examples of Customers Logo Blocks",
Path = "ui-blocks-logos",
Tags = new [] { "logo", "customer", "logos" }
},
new Example
{
Toc = [ new () { Text = "Centered layout", Anchor = "#centered-layout" }, new () { Text = "Left-aligned with image", Anchor = "#left-aligned-with-image" } ],
Name = "Newsletter",
Title = "Blazor Newsletter | UI Blocks by Radzen",
Icon = "\uf18c",
Description = "Examples of Newsletter subscription form UI Blocks",
Path = "ui-blocks-newsletter",
Tags = new [] { "newsletter", "subscribe", "subscription" }
},
new Example
{
Toc = [ new () { Text = "Title with actions", Anchor = "#title-with-actions" }, new () { Text = "Title with breadcrumbs", Anchor = "#title-with-breadcrumbs" }, new () { Text = "Title with breadcrumbs and actions", Anchor = "#title-with-breadcrumbs-and-actions" } ],
Name = "Page Headings",
Title = "Blazor Page Heading | UI Blocks by Radzen",
Icon = "\ue9ea",
Description = "Preconfigured Page Heading UI Blocks",
Path = "ui-blocks-page-headings",
Tags = new [] { "headings", "heading", "page", "title" }
},
new Example
{
Toc = [ new () { Text = "Pricing Cards", Anchor = "#pricing-cards" }, new () { Text = "Basic pricing", Anchor = "#basic-pricing" } ],
Name = "Pricing",
Title = "Blazor Pricing | UI Blocks by Radzen",
Icon = "\uf05b",
Description = "Examples of Pricing UI Blocks",
Path = "ui-blocks-pricing",
Tags = new [] { "pricing", "table" }
},
new Example
{
Toc = [ new () { Text = "Quotes in Carousel", Anchor = "#quotes-in-carousel" }, new () { Text = "Quotes on a row", Anchor = "#quotes-on-a-row" }, new () { Text = "Quotes in Cards", Anchor = "#quotes-in-cards" }, new () { Text = "Quotes in a CardGroup", Anchor = "#quotes-in-cardgroup" }, new () { Text = "Centered quotes", Anchor = "#centered-quotes" }, new () { Text = "Single quote", Anchor = "#single-quote" } ],
Name = "Testimonials",
Title = "Blazor Customer Testimonials | UI Blocks by Radzen",
Icon = "\uf054",
Description = "Examples of Customer Testimonials UI Blocks",
Path = "ui-blocks-testimonials",
Tags = new [] { "testimonial", "quote", "customer" }
}
}
},
new Example
{
Name = "App Templates",
Title = "Blazor App Templates | Free UI Components by Radzen",
Description = "Ready to use Blazor application and website templates",
Icon = "\ue5c3",
Children = new[] {
new Example
{
Name = "Issues Dashboard",
Path = "/dashboard",
Title = "Sample Dashboard | Free UI Components by Radzen",
Description = "Rich dashboard created with the Radzen Blazor Components library.",
Icon = "\ue868"
},
new Example
{
Name = "Healthcare",
Pro = true,
Title = "Healthcare Blazor Website | Premium App Templates by Radzen",
Icon = "\ueb4c",
Description = "A modern, responsive healthcare blazor website template.",
Path = "templates-healthcare",
Tags = new [] { "template", "health", "healthcare", "website", "app", "application", "page", "landing" }
},
new Example
{
Name = "Real Estate",
Pro = true,
Title = "Real Estate Blazor Website | Premium App Templates by Radzen",
Icon = "\ue73a",
Description = "A real estate website template designed to showcase listings, build trust, and convert leads. Featuring clean layout and responsive design.",
Path = "templates-realestate",
Tags = new [] { "template", "real estate", "apartment", "home", "website", "app", "application", "page", "landing" }
},
new Example
{
Name = "Repair Workshop",
Pro = true,
Title = "Repair Workshop Blazor Website | Premium App Templates by Radzen",
Icon = "\uf56c",
Description = "A modern, responsive auto repair blazor website template.",
Path = "templates-repairshop",
Tags = new [] { "template", "repair", "workshop", "website", "app", "application", "page", "landing" }
}
}
},
new Example
{
Toc = [ new () { Text = "Keyboard Navigation", Anchor = "#keyboard-navigation" } ],
Name = "DataGrid",
Updated = true,
Icon = "\uf191",
Children = new [] {
new Example
{
Name = "Data-binding",
Icon = "\ue3ec",
Children = new [] {
new Example
{
Name = "IQueryable",
Title = "Blazor DataGrid - IQueryable Data Source | Free UI Components by Radzen",
Description = "Use RadzenDataGrid to display tabular data with ease. Perform paging, sorting and filtering through Entity Framework without extra code.",
Path = "datagrid",
Tags = new [] { "datatable", "datagridview", "dataview", "grid", "table" }
},
new Example
{
Name = "LoadData event",
Path = "datagrid-loaddata",
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" }
},
new Example
{
Name = "OData service",
Path = "datagrid-odata",
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" }
},
new Example
{
Name = "Dynamic data",
Path = "datagrid-dynamic",
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" }
},
new Example
{
Name = "DataTable data",
Path = "datagrid-datatable",
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" }
},
new Example
{
Name = "Real-time data",
Path = "datagrid-realtime",
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" }
},
new Example
{
Name = "Crosstab data",
Path = "datagrid-crosstab",
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" }
},
new Example
{
Name = "Performance",
Path = "datagrid-performance",
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" }
},
}
},
new Example
{
Name = "Virtualization",
Icon = "\ue871",
Children = new []
{
new Example
{
Name = "IQueryable support",
Path = "datagrid-virtualization",
Title = "Blazor DataGrid - Virtualization | Free UI Components by Radzen",
Description = "Virtualization allows you to render large amounts of data on demand. The RadzenDataGrid component uses Entity Framework to query the visible data.",
Tags = new [] { "datagrid", "bind", "load", "data", "virtualization", "ondemand" }
},
new Example
{
Name = "LoadData support",
Path = "datagrid-virtualization-loaddata",
Title = "Blazor DataGrid - LoadData Virtualization | Free UI Components by Radzen",
Description = "RadzenDataGrid supports virtualization with custom data-binding scenarios. Handle the LoadData event as usual.",
Tags = new [] { "datagrid", "bind", "load", "data", "loaddata", "virtualization", "ondemand" }
},
}
},
new Example
{
Name = "Columns",
Icon = "\ue336",
Updated = true,
Children = new []
{
new Example
{
Name = "Template",
Path = "datagrid-column-template",
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"}
},
new Example
{
Name = "Resizing",
Path = "datagrid-column-resizing",
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"}
},
new Example
{
Name = "Column Picker",
Path = "datagrid-column-picker",
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" }
},
new Example
{
Updated = true,
Name = "Reorder",
Path = "datagrid-column-reorder",
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"}
},
new Example
{
Name = "Footer Totals",
Path = "datagrid-footer-totals",
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" }
},
new Example
{
Name = "Frozen Columns",
Path = "datagrid-frozen-columns",
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" }
},
new Example
{
Name = "Composite Columns",
Path = "datagrid-composite-columns",
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" }
},
new Example
{
Name = "Conditional Columns",
Path = "datagrid-conditional-columns-render",
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" }
}
}
},
new Example
{
Updated = true,
Name = "Filtering",
Icon = "\uef4f",
Children = new []
{
new Example
{
Name = "Simple Mode",
Path = "datagrid-simple-filter",
Title = "Blazor DataGrid - Simple Filter Mode | Free UI Components by Radzen",
Description = "RadzenDataGrid simple mode filtering.",
Tags = new [] { "filter", "simple", "grid", "datagrid", "table"}
},
new Example
{
Name = "Simple with menu",
Path = "datagrid-simple-filter-menu",
Title = "Blazor DataGrid - Simple Filter with Menu | Free UI Components by Radzen",
Description = "RadzenDataGrid simple mode filtering with Menu.",
Tags = new [] { "filter", "simple", "grid", "datagrid", "table", "menu" }
},
new Example
{
Name = "Advanced Mode",
Path = "datagrid-advanced-filter",
Title = "Blazor DataGrid - Advanced Filter Mode | Free UI Components by Radzen",
Description = "RadzenDataGrid advanced mode filtering.",
Tags = new [] { "filter", "advanced", "grid", "datagrid", "table"}
},
new Example
{
Name = "CheckBoxList (Excel like)",
Path = "datagrid-checkboxlist-filter",
Title = "Blazor DataGrid - Excel like filtering | Free UI Components by Radzen",
Description = "RadzenDataGrid Excel like filtering.",
Tags = new [] { "filter", "excel", "grid", "datagrid", "table", "menu", "checkbox", "list" }
},
new Example
{
Name = "CheckBoxList with OData",
Path = "datagrid-checkboxlist-filter-odata",
Title = "Blazor DataGrid - Excel Filter with OData | Free UI Components by Radzen",
Description = "RadzenDataGrid Excel like filtering with OData.",
Tags = new [] { "filter", "excel", "grid", "datagrid", "table", "menu", "checkbox", "list", "odata" }
},
new Example
{
Name = "Mixed Mode",
Path = "datagrid-mixed-filter",
Title = "Blazor DataGrid - Mixed Filter Mode | Free UI Components by Radzen",
Description = "RadzenDataGrid Excel like and advanced mixed mode filtering.",
Tags = new [] { "filter", "advanced", "grid", "datagrid", "table"}
},
new Example
{
Name = "Enum filtering",
Path = "datagrid-enum-filter",
Title = "Blazor DataGrid - Enum Filtering | Free UI Components by Radzen",
Description = "This example demonstrates how to use enums in the RadzenDataGrid column filter.",
Tags = new [] { "filter", "enum", "grid", "datagrid", "table"}
},
new Example
{
Name = "Filtering sub properties",
Path = "datagrid-sub-properties-filter",
Title = "Blazor DataGrid - Sub Property Filter | Free UI Components by Radzen",
Description = "This example demonstrates how to use sub properties in the RadzenDataGrid column filter.",
Tags = new [] { "filter", "sub properties", "grid", "datagrid", "table"}
},
new Example
{
Name = "Filter API",
Path = "datagrid-filter-api",
Title = "Blazor DataGrid - Filter API | Free UI Components by Radzen",
Description = "Set the initial filter of your RadzenDataGrid via the FilterValue and FilterOperator column properties.",
Tags = new [] { "filter", "api", "grid", "datagrid", "table"}
},
new Example
{
Name = "Filter Template",
Path = "datagrid-filter-template",
Title = "Blazor DataGrid - Custom Filtering | Free UI Components by Radzen",
Description = "This example demonstrates how to define custom RadzenDataGrid column filter template.",
Tags = new [] { "datagrid", "column", "filter", "template" }
},
new Example
{
Name = "Filter Value Template",
Path = "datagrid-filtervalue-template",
Title = "Blazor DataGrid - Filter Value Template | Free UI Components by Radzen",
Description = "This example demonstrates how to define custom RadzenDataGrid column filter value template.",
Tags = new [] { "datagrid", "column", "filter", "template", "value" }
},
}
},
new Example
{
Name = "Hierarchy",
Updated = true,
Icon = "\ue23e",
Children = new []
{
new Example
{
Name = "Hierarchy",
Path = "master-detail-hierarchy",
Title = "Blazor DataGrid - Hierarchy | Free UI Components by Radzen",
Description = "This example demonstrates how to use templates to create a hierarchy in a Blazor RadzenDataGrid.",
Tags = new [] { "master", "detail", "datagrid", "table", "dataview" }
},
new Example
{
Name = "Hierarchy on demand",
Path = "master-detail-hierarchy-demand",
Title = "Blazor DataGrid - Hierarchy on Demand | Free UI Components by Radzen",
Description = "This example demonstrates how to use templates to create a Radzen Blazor DataGrid hierarchy and load data on demand.",
Tags = new [] { "master", "detail", "datagrid", "table", "dataview", "on-demand" }
},
new Example
{
Name = "Self-reference hierarchy",
Path = "datagrid-selfref-hierarchy",
Title = "Blazor DataGrid - Self-Reference Hierarchy | Free UI Components by Radzen",
Description = "This example demonstrates how to develop and show a self-referencing hierarchy.",
Tags = new [] { "master", "detail", "datagrid", "table", "dataview", "hierarchy", "self-reference" }
},
new Example
{
Name = "Master/Detail",
Path = "master-detail",
Title = "Blazor DataGrid - Master and Detail | Free UI Components by Radzen",
Description = "This example demonstrates how to create a master/detail relationship between two Blazor RadzenDataGrid components.",
Tags = new [] { "master", "detail", "datagrid", "table", "dataview" }
},
}
},
new Example
{
Updated = true,
Name = "Selection",
Icon = "\uf0c5",
Children = new []
{
new Example
{
Name = "Single selection",
Path = "datagrid-single-selection",
Title = "Blazor DataGrid - Single Selection | Free UI Components by Radzen",
Description = "This example demonstrates how to enable single selection in Blazor RadzenDataGrid component.",
Tags = new [] { "single", "selection", "datagrid", "table", "dataview" }
},
new Example
{
Updated = true,
Name = "Multiple selection",
Path = "datagrid-multiple-selection",
Title = "Blazor DataGrid - Multi Selection | Free UI Components by Radzen",
Description = "This example demonstrates how to enable multiple selection in Blazor RadzenDataGrid component.",
Tags = new [] { "multiple", "selection", "datagrid", "table", "dataview" }
},
new Example
{
Name = "Cell selection",
Path = "datagrid-cell-selection",
Title = "Blazor DataGrid - Cell Selection | Free UI Components by Radzen",
Description = "This example demonstrates how to enable cell selection in Blazor RadzenDataGrid component.",
Tags = new [] { "cell", "selection", "datagrid", "table", "dataview" }
},
}
},
new Example
{
Name = "Sorting",
Icon = "\ue164",
Children = new []
{
new Example
{
Name = "Single Column Sorting",
Path = "datagrid-sort",
Title = "Blazor DataGrid - Sorting | Free UI Components by Radzen",
Description = "This example demonstrates sorting in Blazor RadzenDataGrid component.",
Tags = new [] { "single", "sort", "datagrid", "table", "dataview" }
},
new Example
{
Name = "Multiple Column Sorting",
Path = "datagrid-multi-sort",
Title = "Blazor DataGrid - Multi-Column Sorting | Free UI Components by Radzen",
Description = "This example demonstrates multiple column sorting in Blazor RadzenDataGrid component.",
Tags = new [] { "multi", "sort", "datagrid", "table", "dataview" }
},
new Example
{
Name = "Sort API",
Path = "datagrid-sort-api",
Title = "Blazor DataGrid - Sort API | Free UI Components by Radzen",
Description = "Set the initial sort order of your RadzenDataGrid via the SortOrder column property.",
Tags = new [] { "api", "sort", "datagrid", "table", "dataview" }
}
}
},
new Example
{
Name = "Paging",
Updated = true,
Icon = "\ue5dd",
Children = new []
{
new Example
{
Name = "Pager Position",
Path = "datagrid-pager-position",
Title = "Blazor DataGrid - Pager Position | Free UI Components by Radzen",
Description = "Set the pager position to Top, Bottom, or TopAndBottom.",
Tags = new [] { "pager", "paging", "datagrid", "table", "dataview" }
},
new Example
{
Name = "Pager Horizontal Align",
Path = "datagrid-pager-horizontal-align",
Title = "Blazor DataGrid - Pager Alignment | Free UI Components by Radzen",
Description = "See how to change the horizontal alignment of the pager in a RadzenDataGrid.",
Tags = new [] { "pager", "paging", "datagrid", "table", "dataview" }
},
new Example
{
Name = "Pager API",
Path = "datagrid-pager-api",
Title = "Blazor DataGrid - Pager API | Free UI Components by Radzen",
Description = "Blazor RadzenDataGrid Pager API.",
Tags = new [] { "pager", "paging", "api", "datagrid", "table", "dataview" }
}
}
},
new Example
{
Updated = true,
Name = "Grouping",
Icon = "\uf1be",
Children = new []
{
new Example
{
Updated = true,
Name = "Grouping API",
Path = "datagrid-grouping-api",
Title = "Blazor DataGrid - Grouping API | Free UI Components by Radzen",
Description = "Enable DataGrid grouping with AllowGrouping. Localize group panel text and disable grouping per column.",
Tags = new [] { "group", "grouping", "datagrid", "table", "dataview", "api" }
},
new Example
{
Updated = true,
Name = "Group Header Template",
Path = "datagrid-group-header-template",
Title = "Blazor DataGrid - Group Header | Free UI Components by Radzen",
Description = "Use GroupHeaderTemplate to customize DataGrid group header rows.",
Tags = new [] { "group", "grouping", "template", "datagrid", "table", "dataview" }
},
new Example
{
Name = "Group Footer Template",
Path = "datagrid-group-footer-template",
Title = "Blazor DataGrid - Group Footer | Free UI Components by Radzen",
Description = "The GroupFooterTemplate column property allows you to display aggregated data (totals) in the column footer for each group.",
Tags = new [] { "group", "grouping", "footer", "template", "datagrid", "table", "dataview" }
}
}
},
new Example
{
Name = "Density",
Path = "datagrid-density",
Title = "Blazor DataGrid - Density | Free UI Components by Radzen",
Description = "See how to set a compact density mode of Blazor RadzenDataGrid.",
Icon = "\ueb9e",
Tags = new [] { "density", "compact", "small", "large", "tight" }
},
new Example
{
Name="Custom Header",
Icon = "\ue051",
Children = new [] {
new Example
{
Name = "Header with button",
Path="datagrid-custom-header",
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" }
},
new Example
{
Name = "Header with column picker",
Path="datagrid-custom-header-columnpicker",
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" }
}
}
},
new Example
{
Name = "GridLines",
Path = "datagrid-grid-lines",
Title = "Blazor DataGrid - Grid Lines | Free UI Components by Radzen",
Description = "Deside where to display grid lines in your Blazor RadzenDataGrid.",
Icon = "\uf016",
Tags = new [] { "grid", "lines", "border", "gridlines" }
},
new Example
{
Name = "Cell Context Menu",
Path = "datagrid-cell-contextmenu",
Title = "Blazor DataGrid - Cell Menu | Free UI Components by Radzen",
Description = "Right click on a table cell to open the context menu.",
Icon = "\ue22b",
Tags = new [] { "cell", "row", "contextmenu", "menu", "rightclick" }
},
new Example
{
Updated = true,
Name = "Save/Load settings",
Icon = "\uf02e",
Children = new []
{
new Example
{
Name = "IQueryable",
Path = "datagrid-save-settings",
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" }
},
new Example
{
Name = "LoadData binding",
Path = "datagrid-save-settings-loaddata",
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" }
}
}
},
new Example
{
Updated = true,
Name = "Drag & Drop",
Icon = "\ue945",
Children = new []
{
new Example
{
Name = "Rows reorder",
Path = "/datagrid-rowreorder",
Title = "Blazor DataGrid - Reorder rows | Free UI Components by Radzen",
Description = "This example demonstrates custom DataGrid rows reoder.",
Tags = new [] { "datagrid", "reorder", "row" }
},
new Example
{
Name = "Drag row between two DataGrids",
Path = "/datagrid-rowdragbetween",
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" }
},
new Example
{
Name = "Drag row between DataGrid and Scheduler",
Path = "/datagrid-rowdrag-scheduler",
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" }
}
}
},
new Example
{
Name = "InLine Editing",
Path = "datagrid-inline-edit",
Title = "Blazor DataGrid - InLine Editing | Free UI Components by Radzen",
Description = "This example demonstrates how to configure the Razden Blazor DataGrid for inline editing.",
Icon = "\ue22b",
Tags = new [] { "inline", "editor", "datagrid", "table", "dataview" }
},
new Example
{
Name = "InCell Editing",
Path = "datagrid-incell-edit",
Title = "Blazor DataGrid - InCell Editing | Free UI Components by Radzen",
Description = "This example demonstrates how to configure the Razden Blazor DataGrid for in-cell editing.",
Icon = "\ue745",
Tags = new [] { "in-cell", "editor", "datagrid", "table", "dataview" }
},
new Example
{
Name = "Conditional formatting",
Path = "datagrid-conditional-template",
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",
Tags = new [] { "conditional", "template", "style", "datagrid", "table", "dataview" }
},
new Example
{
Name = "Export to Excel and CSV",
Path = "export-excel-csv",
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",
Tags = new [] { "export", "excel", "csv" }
},
new Example
{
Name = "Cascading DropDowns",
Path = "cascading-dropdowns",
Title = "Blazor DataGrid - Cascading DropDown | Free UI Components by Radzen",
Description = "This example demonstrates cascading Radzen Blazor DropDown components.",
Icon = "\ue915",
Tags = new [] { "related", "parent", "child" }
},
new Example
{
Name = "Empty Data Grid",
Path = "/datagrid-empty",
Title = "Blazor DataGrid - Empty Data Grid | Free UI Components by Radzen",
Description = "This example demonstrates Blazor DataGrid without data.",
Icon = "\ue661",
Tags = new [] { "datagrid", "databinding" }
}
}
},
new Example
{
New = true,
Name = "PivotDataGrid",
Icon = "\ue9ce",
Tags = new [] { "pivot", "crosstab", "analysis", "aggregation", "drill-down", "datagrid", "table" },
Children = new[]
{
new Example
{
Name = "IQueryable",
Path = "/pivot-data-grid",
Title = "Blazor Pivot DataGrid - IQueryable | Free UI Components by Radzen",
Description = "The RadzenPivotDataGrid component allows you to create cross-tabulation aggregates from IQueryable.",
Tags = new [] { "pivot", "crosstab", "analysis", "aggregation", "drill-down", "datagrid", "table", "query", "IQueryable" }
},
new Example
{
Name = "LoadData",
Path = "/pivot-data-grid-load-data",
Title = "Blazor Pivot DataGrid - LoadData Binding | Free UI Components by Radzen",
Description = "The RadzenPivotDataGrid component allows you to create cross-tabulation aggregates from IQueryable.",
Tags = new [] { "pivot", "crosstab", "analysis", "aggregation", "drill-down", "datagrid", "table", "query", "IQueryable" }
},
new Example
{
Name = "Dynamic data",
Path = "/pivot-data-grid-dynamic",
Title = "Blazor Pivot DataGrid - Dynamic Data | Free UI Components by Radzen",
Description = "Bind RadzenPivotDataGrid to schema-less IDictionary<string, object> records and configure fields dynamically.",
Tags = new [] { "pivot", "dynamic", "dictionary", "analysis", "aggregation", "drill-down", "datagrid", "table" }
},
new Example
{
Name = "OData",
Path = "/pivot-data-grid-odata",
Title = "Blazor Pivot DataGrid - OData Binding | Free UI Components by Radzen",
Description = "The RadzenPivotDataGrid component allows you to create cross-tabulation aggregates from IQueryable.",
Tags = new [] { "odata", "pivot", "crosstab", "analysis", "aggregation", "drill-down", "datagrid", "table", "query", "IQueryable" }
}
}
},
new Example
{
Name = "Data",
Updated = true,
Icon = "\ue99c",
Children = new [] {
new Example
{
Name = "DataList",
Icon = "\ue896",
Tags = new[] { "dataview", "grid", "table" },
Children = new[] {
new Example
{
Name = "IQueryable",
Title = "Blazor DataList Component | Free UI Components by Radzen",
Description = "Demonstration and configuration of the Radzen Blazor DataList component.",
Path = "datalist",
Tags = new [] { "dataview", "grid", "table", "list"},
},
new Example
{
Name = "OData service",
Title = "Blazor DataList - OData Service | Free UI Components by Radzen",
Description = "Demonstration and configuration of the Radzen Blazor DataList component using LoadData event.",
Path = "datalist-loaddata",
Tags = new [] { "dataview", "grid", "table", "list", "odata" },
}
}
},
new Example
{
Name = "DataFilter",
Icon = "\uef4f",
Tags = new[] { "dataview", "grid", "table", "filter" },
Children = new[] {
new Example
{
Toc = [ new () { Text = "Keyboard Navigation", Anchor = "#keyboard-navigation" } ],
Name = "IQueryable",
Title = "Blazor DataFilter Component | Free UI Components by Radzen",
Description = "Filter Entity Framework IQueryable without extra code.",
Path = "datafilter",
Tags = new [] { "dataview", "grid", "table", "filter" },
},
new Example
{
Name = "LoadData",
Title = "Blazor DataFilter - LoadData event | Free UI Components by Radzen",
Description = "This example demonstrates DataFilter with DataGrid LoadData event.",
Path = "datafilter-loaddata",
Tags = new [] { "dataview", "grid", "table", "filter", "loaddata" },
},
new Example
{
Name = "OData service",
Title = "Blazor DataFilter - OData Service | Free UI Components by Radzen",
Description = "This example demonstrates data filter with OData service.",
Path = "datafilter-odata",
Tags = new [] { "dataview", "grid", "table", "filter", "odata" },
}
}
},
new Example
{
Toc = [ new () { Text = "Pager Density", Anchor = "#pager-density" }, new () { Text = "Keyboard Navigation", Anchor = "#keyboard-navigation" } ],
Name = "Pager",
Path = "pager",
Description = "Demonstration and configuration of the Radzen Blazor Pager component.",
Icon = "\ueb8d",
Tags = new[] { "pager", "paging" }
},
new Example
{
Name = "PickList",
Description = "Use Radzen Blazor PickList component to transfer items between two collections.",
Path = "picklist",
Icon = "\ue0b8",
Tags = new[] { "picklist", "list", "listbox" }
},
new Example
{
Name = "Empty PickList",
Path = "/picklist-empty",
Title = "Blazor PickList - Empty PickList | Free UI Components by Radzen",
Description = "This example demonstrates Blazor PickList with empty text and empty template.",
Icon = "\ue0b8",
Tags = new[] { "picklist", "empty", "list", "listbox" }
},
new Example
{
Toc = [ new () { Text = "Day, week and month views", Anchor="#views"}, new () { Text = "Year Planner and Timeline views", Anchor = "#timeline" }, new () { Text = "Display additional content when the user hovers an appointment", Anchor = "#tooltips" }, new () { Text = "Display any number of days side-by-side", Anchor = "#multiday" }, new () { Text = "Keyboard Navigation", Anchor = "#keyboard-navigation" } ],
Name = "Scheduler",
Path = "scheduler",
Updated = true,
Description = "Blazor Scheduler component with daily, weekly and monthly views.",
Icon = "\ue616",
Tags = new[] { "scheduler", "calendar", "event", "appointment" }
},
new Example
{
Name = "Gantt",
New = true,
Icon = "\ueb85",
Tags = new[] { "gantt", "timeline", "project", "task", "schedule" },
Children = new[]
{
new Example
{
Name = "Overview",
Path = "gantt",
Title = "Blazor Gantt Component | Free UI Components by Radzen",
Description = "Blazor Gantt component with a hierarchical task list and a timeline view.",
Tags = new[] { "gantt", "timeline", "project", "task", "schedule" }
},
new Example
{
Name = "Tooltips",
Path = "gantt-tooltips",
Title = "Blazor Gantt Tooltips | Free UI Components by Radzen",
Description = "Show tooltips when hovering over Gantt task bars using TaskMouseEnter and TaskMouseLeave events.",
Tags = new[] { "gantt", "tooltip", "hover", "task", "mouse" }
},
new Example
{
Name = "Filtering",
Path = "gantt-filtering",
Title = "Blazor Gantt Filtering | Free UI Components by Radzen",
Description = "Filter Gantt tasks using Simple, SimpleWithMenu, or Advanced filter modes.",
Tags = new[] { "gantt", "filter", "filtermode", "simple", "advanced" }
},
new Example
{
Name = "InLine Editing",
Path = "gantt-inline-edit",
Title = "Blazor Gantt Inline Editing | Free UI Components by Radzen",
Description = "Edit Gantt tasks inline with add, edit, and save actions.",
Tags = new[] { "gantt", "edit", "inline", "row", "tasks" }
},
new Example
{
Name = "In-Cell Editing",
Path = "gantt-incell-edit",
Title = "Blazor Gantt In-Cell Editing | Free UI Components by Radzen",
Description = "Edit Gantt task fields in-cell with inline editors per column.",
Tags = new[] { "gantt", "edit", "incell", "cell", "tasks" }
},
new Example
{
Name = "Drag & Resize",
Path = "gantt-drag-resize",
Title = "Blazor Gantt Drag & Resize | Free UI Components by Radzen",
Description = "Drag task bars to move them and drag their edges to resize. Zero-duration tasks render as milestone diamonds.",
Tags = new[] { "gantt", "drag", "resize", "move", "milestone", "diamond", "interactive" }
},
new Example
{
Name = "Dependency Types",
Path = "gantt-dependency-types",
Title = "Blazor Gantt Dependency Types | Free UI Components by Radzen",
Description = "All four dependency types: Finish-to-Start, Start-to-Start, Finish-to-Finish, and Start-to-Finish.",
Tags = new[] { "gantt", "dependency", "link", "finish-to-start", "start-to-start", "finish-to-finish", "start-to-finish" }
},
new Example
{
Name = "Dependency Data",
Path = "gantt-dependency-data",
Title = "Blazor Gantt Dependency Data Binding | Free UI Components by Radzen",
Description = "Bind dependencies using a separate POCO collection with ID-based references — ideal for relational databases.",
Tags = new[] { "gantt", "dependency", "data", "binding", "database", "id", "predecessor", "successor" }
},
new Example
{
Name = "Critical Path",
Path = "gantt-critical-path",
Title = "Blazor Gantt Critical Path | Free UI Components by Radzen",
Description = "Highlight the longest chain of dependent tasks that determines the project end date.",
Tags = new[] { "gantt", "critical", "path", "highlight", "schedule", "dependency" }
},
new Example
{
Name = "Baselines",
Path = "gantt-baselines",
Title = "Blazor Gantt Baselines | Free UI Components by Radzen",
Description = "Show planned vs. actual schedule side by side using baseline bars.",
Tags = new[] { "gantt", "baseline", "planned", "actual", "schedule", "comparison" }
},
new Example
{
Name = "Customization",
Path = "gantt-customization",
Title = "Blazor Gantt Customization | Free UI Components by Radzen",
Description = "Customize the Gantt with a today line, weekend shading, vertical markers, per-bar styling via TaskRender, and custom bar templates.",
Tags = new[] { "gantt", "today", "marker", "weekend", "taskrender", "template", "customize" }
}
}
},
new Example
{
Toc = [ new () { Text = "Dynamic Table", Anchor = "#dynamic" }, new () { Text = "Scrollable Table", Anchor = "#scrollable" }, new () { Text = "Table with merged cells", Anchor = "#scrollable" } ],
Name = "Table",
Description = "Blazor RadzenTable component is used to create a HTML table with rows and cells.",
Path = "table",
Icon = "\uf101",
Tags = new [] { "table", "cells", "row", "grid" }
},
new Example
{
Name = "Tree",
Icon = "\ue94b",
Tags = new[] { "tree", "treeview", "nodes", "hierarchy" },
Children = new[] {
new Example
{
Toc = [ new () { Text = "Keyboard Navigation", Anchor = "#keyboard-navigation" } ],
Name = "Inline definition",
Title = "Blazor Tree Component | Free UI Components by Radzen",
Description = "Demonstration and configuration of the Blazor RadzenTree component.",
Path = "tree",
Tags = new [] { "tree", "treeview", "nodes", "inline" },
},
new Example
{
Name = "Data-binding",
Title = "Blazor Tree - Data-binding | Free UI Components by Radzen",
Description = "This example demonstrates how to populate RadzenTree from a database via Entity Framework.",
Path = "tree-data-binding",
Tags = new [] { "tree", "treeview", "nodes", "data", "table" },
},
new Example
{
Name = "Files and directories",
Title = "Blazor Tree - File & Directory Binding | Free UI Components by Radzen",
Description = "This example demonstrates how to populate Blazor RadzenTree from the file system.",
Path = "tree-file-system",
Tags = new [] { "tree", "treeview", "nodes", "file", "directory" },
},
new Example
{
Name = "Selection",
Title = "Blazor Tree - Selection | Free UI Components by Radzen",
Description = "This example demonstrates how to get or set the selected items of RadzenTree.",
Path = "tree-selection",
Tags = new [] { "tree", "treeview", "nodes", "selection" },
},
new Example
{
Name = "Checkboxes",
Title = "Blazor Tree - Tri-State Checkboxes | Free UI Components by Radzen",
Description = "This example demonstrates tri-state checkboxes in RadzenTree.",
Path = "tree-checkboxes",
Tags = new [] { "tree", "treeview", "nodes", "check" },
},
new Example
{
Name = "Drag & Drop",
Title = "Blazor Tree - Drag & Drop items | Free UI Components by Radzen",
Description = "This example demonstrates custom drag & drop logic in RadzenTree.",
Path = "tree-dragdrop",
Tags = new [] { "tree", "treeview", "nodes", "drag", "drop" },
},
new Example
{
Name = "Context menu",
Title = "Blazor Tree - Context menu | Free UI Components by Radzen",
Description = "This example demonstrates context menu in RadzenTree.",
Path = "tree-contextmenu",
Tags = new [] { "tree", "treeview", "nodes", "context", "menu" },
},
new Example
{
Name = "Refreshing tree data-binding",
Title = "Blazor Tree - Refresh Data Binding | Free UI Components by Radzen",
Description = "This example demonstrates how to refresh a lazily loaded RadzenTree.",
Path = "tree-data-binding-refresh",
Tags = new [] { "tree", "treeview", "nodes" },
},
new Example
{
Name = "Tree filtering",
Title = "Blazor Tree - Filtering | Free UI Components by Radzen",
Description = "This example demonstrates how to filter RadzenTree.",
Path = "tree-filter",
Tags = new [] { "tree", "treeview", "filter" },
}
}
}
}
},
new Example
{
Toc = [ new () { Text = "Gravatar with email (info@radzen.com)", Anchor = "#gravatar-with-email" } ],
Name = "Images",
Icon = "\ue3d3",
Children = new[] {
new Example
{
Name = "Gravatar",
Description = "Demonstration and configuration of the Radzen Blazor Gravatar component.",
Path = "gravatar",
Icon = "\ue420"
},
new Example
{
Toc = [ new () { Text = "Image from application assets", Anchor = "#image-from-application-assets" }, new () { Text = "Image from url", Anchor = "#image-from-url" }, new () { Text = "Image from base64 encoded string", Anchor = "#image-from-base64" }, new () { Text = "Image from binary data", Anchor = "#image-from-binary-data" } ],
Name = "Image",
Description = "Demonstration and configuration of the Radzen Blazor Image component.",
Path = "image",
Icon = "\ue3c4"
},
}
},
new Example
{
Name = "Layout",
Updated = true,
Icon = "\ue8f1",
Children = new[] {
new Example
{
Toc = [ new () { Text = "Sidebar, Header and Footer", Anchor = "#sidebar-header-footer" }, new () { Text = "Full height Sidebar", Anchor = "#full-height-sidebar" }, new () { Text = "Overlay Sidebar", Anchor = "#overlay" }, new () { Text = "Full height overlay Sidebar", Anchor = "#overlay-full" }, new () { Text = "Right Sidebar", Anchor = "#right-sidebar" }, new () { Text = "Right full height Sidebar", Anchor = "#right-full-height-sidebar" }, new () { Text = "Right and Left Sidebar", Anchor = "#right-left-sidebar" }, new () { Text = "Start and End Sidebar", Anchor = "#start-end-sidebar" }, new () { Text = "Icon Sidebar", Anchor = "#icon-sidebar" } ],
Name = "Layout",
Updated = true,
Description = "Blazor RadzenLayout allows you to define the global layout of your application.",
Path = "layout",
Icon = "\ue8f1",
Tags = new [] { "layout", "sidebar", "drawer", "header", "body", "footer" }
},
new Example
{
Name = "Stack",
Description = "Use RadzenStack component to create a stack layout - a way of arranging elements in a vertical or horizontal stack.",
Path = "stack",
Icon = "\ue8e9",
Tags = new [] { "stack", "layout" }
},
new Example
{
Name = "Row",
Description = "Blazor RadzenRow component is used to create a row in a responsive grid layout.",
Path = "row",
Icon = "\uf676",
Tags = new [] { "row", "layout", "responsive", "grid" }
},
new Example
{
Toc = [ new () { Text = "Auto-layout columns", Anchor = "#auto-layout-columns" }, new () { Text = "Column sizes", Anchor = "#column-sizes" }, new () { Text = "Responsive column sizes", Anchor = "#responsive-column-sizes" }, new () { Text = "Column wrapping", Anchor = "#column-wrapping" }, new () { Text = "Column offset", Anchor = "#column-offset" }, new () { Text = "Responsive offsetting", Anchor = "#column-responsive-offset" }, new () { Text = "Column order", Anchor = "#column-order" }, new () { Text = "Responsive column ordering", Anchor = "#column-responsive-order" }, new () { Text = "Nested Layouts", Anchor = "#nested-layouts" }, new () { Text = "Gutters", Anchor = "#gutters" } ],
Name = "Column",
Description = "Blazor RadzenColumn component is used within a RadzenRow to create a structured grid layout. Columns are positioned on a 12-column based responsive grid.",
Path = "column",
Icon = "\uf674",
Tags = new [] { "column", "col", "layout", "responsive", "grid" }
},
new Example
{
Toc = [ new () { Text = "Card Variant", Anchor = "#card-variant" } ],
Name = "Card",
Description = "Use the Blazor RadzenCard component to display a piece of content, like an image and text.",
Path = "card",
Icon = "\uefad",
Tags = new [] { "card", "container" }
},
new Example
{
Name = "CardGroup",
Description = "Use the Blazor RadzenCardGroup component to visually stick RadzenCards next to each other.",
Path = "card-group",
Icon = "\ue8f3",
Tags = new [] { "card", "group", "deck", "container" }
},
new Example
{
Toc = [ new () { Text = "Open page as a dialog", Anchor = "#open-page-as-dialog" }, new () { Text = "Inline Dialog", Anchor = "#inline-dialog" }, new () { Text = "Busy Dialog", Anchor = "#busy-dialog" }, new () { Text = "Confirm Dialog", Anchor = "#confirm-dialog" }, new () { Text = "Alert Dialog", Anchor = "#alert-dialog" }, new () { Text = "Close Dialog by clicking outside", Anchor = "#close-dialog-by-clicking-outside" }, new () { Text = "Side Dialog", Anchor = "#side-dialog" }, new () { Text = "Dialog with custom CSS classes", Anchor = "#custom-css-classes" }, new () { Text = "Update dialog properties", Anchor = "#cascading-value" } ],
Name = "Dialog",
Description = "Demonstration and configuration of the Blazor RadzenDialog component.",
Path = "dialog",
Icon = "\ue069",
Tags = new [] { "popup", "window" },
},
new Example
{
Toc = [ new () { Text = "Define can-drop and no-drop styles", Anchor = "#can-drop-no-drop-styles" }, new () { Text = "Define a Footer Template per Drop Zone", Anchor = "#footer-template" } ],
Name = "DropZone",
Description = "Demonstration and configuration of the Radzen Blazor DropZone component.",
Path = "dropzone",
Icon = "\ue945",
Tags = new [] { "dropzone", "drag", "drop" }
},
new Example
{
Name = "Panel",
Description = "Demonstration and configuration of the Blazor RadzenPanel component.",
Path = "panel",
Icon = "\uf732",
Tags = new [] { "container" }
},
new Example
{
Name = "Popup",
Description = "Demonstration and configuration of the Radzen Blazor Popup component.",
Path = "popup",
Icon = "\ue0ca",
Tags = new [] { "popup", "dropdown"}
},
new Example
{
Name = "Splitter",
Description = "Demonstration and configuration of the Blazor RadzenSplitter component.",
Path = "splitter",
Icon = "\ue42a",
Tags = new [] { "splitter", "layout"}
}
}
},
new Example
{
Name = "Navigation",
Icon = "\ue762",
Children = new[] {
new Example
{
Toc = [ new () { Text = "Accordion with single expand", Anchor = "#single-expand" }, new () { Text = "Accordion with multiple expand", Anchor = "#multiple-expand" }, new () { Text = "Dynamically create Accordion items", Anchor = "#dynamic-items" }, new () { Text = "Expand/Collapse events", Anchor = "#expand-collapse-events" }, new () { Text = "Disable expand/collapse", Anchor = "#disable-expand-collapse" }, new () { Text = "Keyboard Navigation", Anchor = "#keyboard-navigation" } ],
Name = "Accordion",
Path = "accordion",
Description = "Demonstration and configuration of the Blazor RadzenAccordion component.",
Icon = "\ue8fe",
Tags = new [] { "panel", "container" }
},
new Example
{
Toc = [ new () { Text = "Default Radzen BreadCrumb", Anchor = "#default-breadcrumb" }, new () { Text = "BreadCrumb width template", Anchor = "#breadcrumb-template" }, new () { Text = "BreadCrumb with child content", Anchor = "#breadcrumb-child-template" } ],
Name = "BreadCrumb",
Description = "The Blazor RadzenBreadCrumb component provides a navigation trail to help users keep track of their location.",
Path = "breadcrumb",
Icon = "\uea50",
Tags = new [] { "breadcrumb", "navigation", "menu" }
},
new Example
{
Toc = [ new () { Text = "Navigation button styles", Anchor = "#navigation-style" }, new () { Text = "Navigation button content", Anchor = "#navigation-content" }, new () { Text = "Paging", Anchor = "#paging" }, new () { Text = "Data-binding", Anchor = "#data-binding" }, new () { Text = "Carousel with RadzenPager", Anchor = "#pager" } ],
Name = "Carousel",
Description = "Demonstration and configuration of the Radzen Blazor Carousel component.",
Path = "carousel",
Icon = "\ue8eb",
Tags = new [] { "carousel", "gallery", "slide", "deck", "container" }
},
new Example
{
Toc = [ new () { Text = "Show ContextMenu with items", Anchor = "#contextmenu-with-items" }, new () { Text = "Show ContextMenu with custom content and separator", Anchor = "#contextmenu-with-custom-content" }, new () { Text = "Show ContextMenu for HTML element", Anchor = "#contextmenu-for-html-element" } ],
Name = "ContextMenu",
Description = "Demonstration and configuration of the Radzen Blazor Context Menu component.",
Path = "contextmenu",
Icon = "\ue8de",
Tags = new [] { "popup", "dropdown", "menu" }
},
new Example
{
Toc = [ new () { Text = "Link to path in application", Anchor = "#link-to-path" }, new () { Text = "Link to path in application with icon", Anchor = "#link-with-icon" }, new () { Text = "Link to url", Anchor = "#link-to-url" }, new () { Text = "Link with child content", Anchor = "#link-child-content" }, new () { Text = "Link disabled", Anchor = "#link-disabled" } ],
Name = "Link",
Description = "Demonstration and configuration of the Blazor RadzenLink component. Use Path and Target properties to specify Link component navigation.",
Path = "link",
Icon = "\ue157"
},
new Example
{
Toc = [ new () { Text = "Login Events", Anchor = "#login-events" }, new () { Text = "Simple Login", Anchor = "#simple-login" }, new () { Text = "Login with Register (hide password reset)", Anchor = "#login-with-register" }, new () { Text = "Remember me", Anchor = "#remember-me" }, new () { Text = "Form fields", Anchor = "#form-fields" }, new () { Text = "Localization", Anchor = "#localization" }, new () { Text = "Horizontal login layout example", Anchor = "#horizontal-login-example" }, new () { Text = "Vertical login layout example", Anchor = "#vertical-login-example" } ],
Name = "Login",
Description = "Demonstration and configuration of the Blazor RadzenLogin component.",
Path = "login",
Icon = "\uea77"
},
new Example
{
Toc = [ new () { Text = "Keyboard Navigation", Anchor = "#keyboard-navigation" } ],
Name = "Menu",
Description = "Demonstration and configuration of the Blazor RadzenMenu component.",
Path = "menu",
Icon = "\ue5d2",
Tags = new [] { "navigation", "dropdown" }
},
new Example
{
Toc = [ new () { Text = "Statically declared items", Anchor = "#panelmenu-static" }, new () { Text = "Programmatically created items with Expanded binding", Anchor = "#panelmenu-programmatic" }, new () { Text = "Set the display style of menu items", Anchor = "#panelmenu-display-style" }, new () { Text = "Keyboard Navigation", Anchor = "#keyboard-navigation" } ],
Name = "PanelMenu",
Path = "panelmenu",
Updated = true,
Description = "Demonstration and configuration of the Blazor RadzenPanelMenu component.",
Icon = "\ue875",
Tags = new [] { "navigation", "menu" }
},
new Example
{
Toc = [ new () { Text = "Keyboard Navigation", Anchor = "#keyboard-navigation" } ],
Name = "ProfileMenu",
Description = "Demonstration and configuration of the Blazor RadzenProfileMenu component.",
Path = "profile-menu",
Icon = "\ue851",
Tags = new [] { "navigation", "dropdown", "menu" }
},
new Example
{
Toc = [ new () { Text = "CanChange event", Anchor = "#canchange-event" } ],
Name = "Steps",
Description = "Blazor Steps component to guide users through a process with numbered steps representing each stage.",
Path = "steps",
Icon = "\ue8be",
Tags = new [] { "step", "steps", "wizard" }
},
new Example
{
Toc = [ new () { Text = "Tabs position", Anchor = "#tabs-position" }, new () { Text = "Server render mode", Anchor = "#server-render-mode" }, new () { Text = "Client render mode", Anchor = "#client-render-mode" }, new () { Text = "TabItems modify", Anchor = "#tabs-modify" }, new () { Text = "Tab items wrap", Anchor = "#tabs-wrap" }, new () { Text = "Prevent Tab change", Anchor = "#prevent-tab-change" }, new () { Text = "Keyboard Navigation", Anchor = "#keyboard-navigation" } ],
Name = "Tabs",
Description = "Demonstration and configuration of the Radzen Blazor Tabs component.",
Path = "tabs",
Icon = "\ue8d8",
Tags = new [] { "tabstrip", "tabview", "container" }
},
new Example
{
Toc = [ new () { Text = "Sticky TOC", Anchor = "#sticky" }, new () { Text = "Orientation", Anchor = "#orientation" } ],
Name = "Toc",
Description = "Table of contents component",
Path = "toc",
Icon = "\ue241",
Tags = [ "toc", "content", "navigation" ]
}
}
},
new Example
{
Name = "Forms",
Icon = "\uf1c1",
Children = new[] {
new Example
{
Name = "AIChat",
Path = "aichat",
Updated = true,
Description = "A modern chat component with AI integration that provides a conversational interface similar to popular chat applications.",
Icon = "\ue0b7",
Tags = new [] { "chat", "ai", "conversation", "message", "streaming" }
},
new Example
{
Name = "Chat",
Path = "chat",
New = true,
Description = "A modern chat component for multi-participant conversations with support for distinct user identities and real-time messaging.",
Icon = "\uefd1",
Tags = new [] { "chat", "conversation", "message", "users", "team", "group" }
},
new Example
{
Toc = [ new () { Text = "Basic Label with Input", Anchor = "#basic-usage" }, new () { Text = "Labels with Different Input Types", Anchor = "#input-types" }, new () { Text = "Label with Custom Content", Anchor = "#custom-content" }, new () { Text = "Required Field Indicators", Anchor = "#required-fields" }, new () { Text = "Label Styling", Anchor = "#styling" } ],
Name = "Label",
Title = "Blazor Label Component | Free UI Components by Radzen",
Description = "Associate descriptive text labels with form inputs for better accessibility and usability. Clicking a label focuses its associated input.",
Path = "label",
Icon = "\ue893",
Tags = new [] { "label", "form", "input", "accessibility", "required", "validation", "formfield", "association", "aria" }
},
new Example
{
Toc = [ new () { Text = "Get and Set the value of AutoComplete", Anchor = "#get-set-value" }, new () { Text = "Get and Set the value of AutoComplete using Value and Change event", Anchor = "#value-and-change-event" }, new () { Text = "Get the selected item of AutoComplete", Anchor = "#get-selected" }, new () { Text = "Define AutoComplete placeholder", Anchor = "#placeholder" }, new () { Text = "Define AutoComplete template", Anchor = "#template" }, new () { Text = "Change AutoComplete filter operator, case sensitivity and delay", Anchor = "#filter-operator" }, new () { Text = "Load data on-demand in AutoComplete and apply custom filter and sort", Anchor = "#load-on-demand" }, new () { Text = "AutoComplete with a List of Strings", Anchor = "#list-of-strings" }, new () { Text = "Multiline AutoComplete", Anchor = "#multiline" }, new () { Text = "Open on Focus", Anchor = "#open-on-focus" }, new () { Text = "Disabled AutoComplete", Anchor = "#disabled-autocomplete" }, new () { Text = "Keyboard Navigation", Anchor = "#keyboard-navigation" } ],
Name = "AutoComplete",
Path = "autocomplete",
Description = "Demonstration and configuration of the Radzen Blazor AutoComplete textbox component.",
Icon = "\ue03b",
Tags = new [] { "form", "complete", "suggest", "edit" }
},
new Example
{
Toc = [ new () { Text = "Filled Buttons", Anchor = "#filled-buttons" }, new () { Text = "Flat Buttons", Anchor = "#flat-buttons" }, new () { Text = "Outlined Buttons", Anchor = "#outlined-buttons" }, new () { Text = "Text Buttons", Anchor = "#text-buttons" }, new () { Text = "Content in Buttons", Anchor = "#content-in-buttons" }, new () { Text = "Button Sizes", Anchor = "#button-sizes" }, new () { Text = "FAB", Anchor = "#fab" }, new () { Text = "Disabled Button", Anchor = "#disabled-button" }, new () { Text = "Busy button", Anchor = "#busy-button" }, new () { Text = "Keyboard Navigation", Anchor = "#keyboard-navigation" } ],
Name = "Button",
Description = "Demonstration and configuration of the RadzenButton Blazor component.",
Path = "button",
Icon = "\ue72f"
},
new Example
{
Toc = [ new () { Text = "Bound ToggleButton", Anchor = "#bound-toggle-button" }, new () { Text = "ToggleButton Shade", Anchor = "#shade" }, new () { Text = "ToggleButton Style", Anchor = "#style" }, new () { Text = "ToggleButton Variants", Anchor = "#variants" }, new () { Text = "Content in ToggleButtons", Anchor = "#content" }, new () { Text = "ToggleButton Sizes", Anchor = "#sizes" }, new () { Text = "Disabled ToggleButton", Anchor = "#disabled" }, new () { Text = "Keyboard Navigation", Anchor = "#keyboard-navigation" } ],
Name = "ToggleButton",
Description = "Radzen Blazor ToggleButton is a button that changes its appearance or color when activated and returns to its original state when deactivated.",
Path = "toggle-button",
Icon = "\ue8e0",
Tags = new [] { "button", "switch", "toggle" }
},
new Example
{
Toc = [ new () { Text = "Get and Set the value of CheckBox", Anchor = "#get-set-value" }, new () { Text = "Get and Set the value of CheckBox using Value and Change event", Anchor = "#value-and-change-event" }, new () { Text = "TriState CheckBox", Anchor = "#tristate-checkbox" }, new () { Text = "Disabled CheckBox", Anchor = "#disabled-checkbox" }, new () { Text = "ReadOnly CheckBox", Anchor = "#readonly-checkbox" }, new () { Text = "Keyboard Navigation", Anchor = "#keyboard-navigation" } ],
Name = "CheckBox",
Path = "checkbox",
Description = "Demonstration and configuration of the Radzen Blazor CheckBox component with optional tri-state support.",
Icon = "\ue834",
Tags = new [] { "form", "edit" }
},
new Example
{
Toc = [ new () { Text = "Get and Set the value of CheckBoxList", Anchor = "#get-set-value" }, new () { Text = "Get and Set the value of CheckBoxList using Value and Change event", Anchor = "#value-and-change-event" }, new () { Text = "Set CheckBoxList orientation and layout", Anchor = "#orientation" }, new () { Text = "Populate CheckBoxList items from data", Anchor = "#populate-items" }, new () { Text = "Statically declared and populated CheckBoxList items from data", Anchor = "#statically-declared" }, new () { Text = "Select all CheckBoxList items", Anchor = "#select-all-items" }, new () { Text = "Disabled CheckBoxList item", Anchor = "#disabled-item" }, new () { Text = "ReadOnly CheckBoxList item", Anchor = "#readonly-item" }, new () { Text = "Templated CheckBoxList item", Anchor = "#templated-item" }, new () { Text = "Keyboard Navigation", Anchor = "#keyboard-navigation" } ],
Name = "CheckBoxList",
Path = "checkboxlist",
Updated = true,
Description = "Demonstration and configuration of the Radzen Blazor CheckBoxList component.",
Icon = "\ue6b1",
Tags = new [] { "form", "edit" }
},
new Example
{
Toc = [ new () { Text = "Keyboard Navigation", Anchor = "#keyboard-navigation" } ],
Name = "ColorPicker",
Description = "Demonstration and configuration of the Radzen Blazor ColorPicker component. HSV Picker. RGBA Picker.",
Path = "colorpicker",
Icon = "\ue40a",
Tags = new [] { "form", "edit" }
},
new Example
{
Toc = [ new () { Text = "Get and Set the value of DatePicker", Anchor = "#get-set-value" }, new () { Text = "Get and Set the value of DatePicker using Value and Change event", Anchor = "#value-and-change-event" }, new () { Text = "DatePicker with time", Anchor = "#datepicker-with-time" }, new () { Text = "Define hour format", Anchor = "#hour-format" }, new () { Text = "Time-only DatePicker", Anchor = "#time-only-datepicker" }, new () { Text = "DatePicker with special or disabled dates", Anchor = "#special-disabled-dates" }, new () { Text = "DatePicker with initial view date and year range", Anchor = "#initial-view-date-and-year-change" }, new () { Text = "Set Min and Max dates", Anchor = "#min-max-dates" }, new () { Text = "DatePicker with custom footer", Anchor = "#custom-footer" }, new () { Text = "DatePicker with custom input parsing", Anchor = "#custom-input-parsing" }, new () { Text = "DatePicker as calendar", Anchor = "#calendar" }, new () { Text = "DatePicker for year/month selection", Anchor = "#year-month-selection" }, new () { Text = "DatePicker binds to types DateOnly or TimeOnly", Anchor = "#dateonly-timeonly" }, new () { Text = "Keyboard Navigation", Anchor = "#keyboard-navigation" } ],
Name = "DatePicker",
Path = "datepicker",
Updated = true,
Description = "Demonstration and configuration of the Radzen Blazor Datepicker component with calendar mode. Time Picker.",
Icon = "\ue916",
Tags = new [] { "calendar", "time", "form", "edit" }
},
new Example
{
Name = "DropDown",
Icon = "\ue172",
Children = new [] {
new Example
{
Toc = [ new () { Text = "Get and Set the value of DropDown", Anchor = "#get-set-value" }, new () { Text = "Get and Set the value of DropDown using Value and Change event", Anchor = "#value-and-change-event" }, new () { Text = "Define Text and Value properties", Anchor = "#text-and-value-properties" }, new () { Text = "DropDown with template", Anchor = "#template" }, new () { Text = "Disable specific item", Anchor = "#disable-item" }, new () { Text = "Clear selected item", Anchor = "#clear-selected-item" }, new () { Text = "Editable DropDown", Anchor = "#editable-dropdown" }, new () { Text = "Open and close events", Anchor = "#open-and-close-event" }, new () { Text = "Keyboard Navigation", Anchor = "#keyboard-navigation" } ],
Name = "Single selection",
Path = "dropdown",
Title = "Blazor DropDown Component | Free UI Components by Radzen",
Description = "Demonstration and configuration of the Radzen Blazor DropDown component.",
Tags = new [] { "select", "picker", "form" , "edit", "dropdown" },
},
new Example
{
Toc = [ new () { Text = "Define max labels and selected items text", Anchor = "#define-max-labels-and-selected-items-text" }, new () { Text = "Specify an Equality Comparer for item selection. Useful when binding directly to an object collection.", Anchor = "#item-comparer" } ],
Name = "Multiple selection",
Path = "dropdown-multiple",
Title = "Blazor DropDown - Multi Selection | Free UI Components by Radzen",
Description = "This example demonstrates multiple selection support in Radzen Blazor DropDown component.",
Tags = new [] { "select", "picker", "form" , "edit", "multiple", "dropdown" },
},
new Example
{
Name = "Virtualization",
Path = "dropdown-virtualization",
Title = "Blazor DropDown - Virtualization | Free UI Components by Radzen",
Description = "This example demonstrates virtualization using IQueryable.",
Tags = new [] { "select", "picker", "form" , "edit", "multiple", "dropdown", "virtualization", "paging" },
},
new Example
{
Name = "Filtering",
Path = "dropdown-filtering",
Title = "Blazor DropDown - Filtering | Free UI Components by Radzen",
Description = "This example demonstrates Blazor DropDown component filtering case sensitivity and filter operator.",
Tags = new [] { "select", "picker", "form" , "edit", "multiple", "dropdown", "filter" },
},
new Example
{
Name = "Grouping",
Path = "dropdown-grouping",
Title = "Blazor DropDown - Grouping | Free UI Components by Radzen",
Description = "This example demonstrates Blazor DropDown component with grouping.",
Tags = new [] { "select", "picker", "form" , "edit", "multiple", "dropdown", "grouping" },
},
new Example
{
Toc = [ new () { Text = "DropDown data binding to enum", Anchor = "#data-binding-to-enum" } ],
Name = "Custom objects binding",
Path = "dropdown-custom-objects",
Title = "Blazor DropDown - Custom Objects | Free UI Components by Radzen",
Description = "This example demonstrates Blazor DropDown component binding to custom objects.",
Tags = new [] { "select", "picker", "form" , "edit", "dropdown", "custom" },
},
new Example
{
Toc = [ new () { Text = "Single selection", Anchor = "#single-selection" }, new () { Text = "Multiple selection with checkboxes", Anchor = "#multiple-selection" }, new () { Text = "Filtering", Anchor = "#filtering" } ],
Name = "DropDown with Tree",
Path = "dropdown-tree",
Title = "Blazor DropDown Tree | Free UI Components by Radzen",
Description = "Combine Popup and Tree to create a DropDownTree for hierarchical selection.",
Tags = new [] { "select", "picker", "form", "edit", "dropdown", "tree", "hierarchical" },
New = true,
},
}
},
new Example
{
Toc = [ new () { Text = "Get and Set the value of DropDownDataGrid", Anchor = "#get-set-value" }, new () { Text = "Get and Set the value of DropDownDataGrid using Value and Change event", Anchor = "#value-and-change-event" }, new () { Text = "Define Text and Value properties", Anchor = "#text-value-properties" }, new () { Text = "DropDownDataGrid with custom header, footer, value and item templates", Anchor = "#template" }, new () { Text = "Define multiple columns", Anchor = "#multiple-columns" }, new () { Text = "Filtering case sensitivity and filter operator", Anchor = "#filtering-case-sensitivity-and-filter-operator" }, new () { Text = "Multiple selection", Anchor = "#multiple-selection" }, new () { Text = "DropDownDataGrid binding to dynamic data", Anchor = "#dynamic" }, new () { Text = "Keyboard Navigation", Anchor = "#keyboard-navigation" } ],
Name = "DropDownDataGrid",
Path = "dropdown-datagrid",
Description = "Blazor DropDown component with columns and multiple selection support.",
Icon = "\ue99c",
Tags = new [] { "select", "picker", "form", "edit" }
},
new Example
{
Toc = [ new () { Text = "Basic usage", Anchor = "#basic-usage" }, new () { Text = "FAB position", Anchor = "#position" }, new () { Text = "Multiple FABs", Anchor = "#multiple-fabs" }, new () { Text = "Busy FAB", Anchor = "#busy-fab" }, new () { Text = "Keyboard Navigation", Anchor = "#keyboard-navigation" } ],
Name = "Fab",
Path = "fab",
Description = "Demonstration and configuration of the Radzen Blazor Fab component.",
Icon = "\ue147",
New = true,
Tags = new [] { "fab", "button", "floating", "action" }
},
new Example
{
Toc = [ new () { Text = "Basic usage", Anchor = "#basic-usage" }, new () { Text = "FAB menu with icon only buttons", Anchor = "#icons" }, new () { Text = "Expand direction", Anchor = "#direction" }, new () { Text = "Keyboard Navigation", Anchor = "#keyboard-navigation" } ],
Name = "FabMenu",
Path = "fab-menu",
Description = "Demonstration and configuration of the Radzen Blazor FabMenu component.",
Icon = "\ue091",
New = true,
Tags = new [] { "fab", "menu", "button", "floating", "action" }
},
new Example
{
Toc = [ new () { Text = "Keyboard Navigation", Anchor = "#keyboard-navigation" } ],
Name = "Fieldset",
Path = "fieldset",
Description = "Demonstration and configuration of the Radzen Blazor Fieldset component.",
Icon = "\ue728",
Tags = new [] { "form", "container" }
},
new Example
{
Toc = [ new () { Text = "Byte Array Support", Anchor = "#byte-array" }, new () { Text = "Keyboard Navigation", Anchor = "#keyboard-navigation" } ],
Name = "FileInput",
Path = "fileinput",
Description = "Blazor File input component with preview support.",
Icon = "\ue226",
Tags = new [] { "upload", "form", "edit" }
},
new Example
{
Toc = [ new () { Text = "Variants", Anchor = "#variants" }, new () { Text = "Input types", Anchor = "#input-types" }, new () { Text = "Start, End, and ChildContent", Anchor = "#start-end-child-content" }, new () { Text = "Floating Label", Anchor = "#floating-label" }, new () { Text = "Helper text", Anchor = "#helper-text" }, new () { Text = "Validation", Anchor = "#form-field-validation" }, new () { Text = "Disabled FormField", Anchor = "#disabled-form-field" } ],
Name = "FormField",
Path = "form-field",
Description = "Blazor FormField with floating labels, helper text, validation, and multiple input variants.",
Icon = "\ue578",
Tags = new [] { "form", "label", "floating", "float", "edit", "outline", "input", "helper", "valid" }
},
new Example
{
Toc = [ new () { Text = "Get and set the value", Anchor = "#get-set-value" }, new () { Text = "All tools", Anchor = "#all-tools" }, new () { Text = "Custom set of tools (text-editing only)", Anchor = "#custom-set-of-tools" }, new () { Text = "Upload images", Anchor = "#upload" }, new () { Text = "Focus", Anchor = "#focus" }, new () { Text = "Keyboard Navigation", Anchor = "#keyboard-navigation" } ],
Name="HtmlEditor",
Icon = "\ue3c9",
Children = new [] {
new Example
{
Name = "Default Tools",
Path = "html-editor",
Title = "Blazor HTML Editor Component | Free UI Components by Radzen",
Description = "Blazor HTML editor component with lots of built-in tools.",
Tags = new [] { "html", "editor", "rich", "text" }
},
new Example
{
Toc = [ new () { Text = "Custom command on Execute event", Anchor = "#command-execute-event" }, new () { Text = "Custom tool with template", Anchor = "#command-template" }, new () { Text = "Custom dialog", Anchor = "#command-dialog" } ],
Name = "Custom Tools",
Path = "html-editor-custom-tools",
Title = "Blazor HTML Editor - Custom Tools | Free UI Components by Radzen",
Description = "Blazor HTML editor with custom tools. Create custom tools via the RadzenHtmlEditorCustomTool tag.",
Tags = new [] { "html", "editor", "rich", "text", "tool", "custom" }
},
}
},
new Example
{
Toc = [ new () { Text = "Get and Set the value of ListBox", Anchor = "#get-set-value" }, new () { Text = "Get and Set the value of ListBox using Value and Change event", Anchor = "#value-and-change-event" }, new () { Text = "Define Text and Value properties", Anchor = "#text-value-properties" }, new () { Text = "ListBox with template", Anchor = "#template" }, new () { Text = "Multiple selection", Anchor = "#multiple-selection" }, new () { Text = "Filtering case sensitivity and filter operator", Anchor = "#filtering" }, new () { Text = "Custom filtering with LoadData event", Anchor = "#loaddata-event" }, new () { Text = "Virtualization using IQueryable", Anchor = "#virtualization-using-iqueryable" }, new () { Text = "Virtualization with LoadData event", Anchor = "#virtualization-with-loaddata" }, new () { Text = "Keyboard Navigation", Anchor = "#keyboard-navigation" } ],
Name = "ListBox",
Path = "listbox",
Icon = "\ue0ee",
Description = "Demonstration and configuration of the Radzen Blazor ListBox component.",
Tags = new [] { "select", "picker", "form", "edit" }
},
new Example
{
Name = "Mask",
Path = "mask",
Description = "Demonstration and configuration of the Radzen Blazor masked textbox component.",
Icon = "\ue262",
Tags = new [] { "input", "form", "edit", "mask" }
},
new Example
{
Toc = [ new () { Text = "Get and Set the value of Numeric", Anchor = "#get-set-value" }, new () { Text = "Get and Set the value of Numeric using Value and Change event", Anchor = "#value-and-change-event" }, new () { Text = "Min set to 1 and Max set to 10", Anchor = "#min-max" }, new () { Text = "Placeholder and 0.5 step", Anchor = "#placeholder-and-step" }, new () { Text = "Without Up/Down", Anchor = "#without-up-down" }, new () { Text = "Formatted value", Anchor = "#formatted-value" }, new () { Text = "Align value", Anchor = "#align-value" }, new () { Text = "Custom Value convert", Anchor = "#custom-value-convert" }, new () { Text = "Custom Numeric Type Support", Anchor = "#custom-numeric-type" }, new () { Text = "Keyboard Navigation", Anchor = "#keyboard-navigation" } ],
Name = "Numeric",
Path = "numeric",
Description = "Demonstration and configuration of the Radzen Blazor numeric textbox component.",
Icon = "\uf04a",
Tags = new [] { "input", "number", "form", "edit" }
},
new Example
{
Toc = [ new () { Text = "Get and Set the value of Password", Anchor = "#get-set-value" }, new () { Text = "Get and Set the value of Password using Value and Change event", Anchor = "#value-and-change-event" }, new () { Text = "Define placeholder", Anchor = "#placeholder" }, new () { Text = "Without auto-complete", Anchor = "#without-auto-complete" } ],
Name = "Password",
Path = "password",
Description = "Demonstration and configuration of the Radzen Blazor password textbox component.",
Icon = "\uf042",
Tags = new [] { "input", "form", "edit" }
},
new Example
{
Toc = [ new () { Text = "Get and Set the value of RadioButtonList", Anchor = "#get-set-value" }, new () { Text = "Get and Set the value of RadioButtonList using Value and Change event", Anchor = "#value-and-change-event" }, new () { Text = "Set RadioButtonList orientation and layout", Anchor = "#orientation" }, new () { Text = "Populate RadioButtonList items from data", Anchor = "#populate-items" }, new () { Text = "Statically declared and populated RadioButtonList items from data", Anchor = "#populate-items-statically" }, new () { Text = "RadioButtonList with null value", Anchor = "#null-value" }, new () { Text = "Populate items programmatically and disable item", Anchor = "#populate-items-programmatically" }, new () { Text = "Keyboard Navigation", Anchor = "#keyboard-navigation" } ],
Name = "RadioButtonList",
Path = "radiobuttonlist",
Updated = true,
Description = "Demonstration and configuration of the Radzen Blazor radio button list component.",
Icon = "\ue837",
Tags = new [] { "toggle", "form", "edit" }
},
new Example
{
Toc = [ new () { Text = "Get and Set the value of Rating", Anchor = "#get-set-value" }, new () { Text = "Get and Set the value of Rating using Value and Change event", Anchor = "#value-and-change-event" }, new () { Text = "Set number of stars", Anchor = "#number-of-stars" }, new () { Text = "Disabled Rating", Anchor = "#disabled-rating" }, new () { Text = "Read-only Rating", Anchor = "#readonly-rating" }, new () { Text = "Keyboard Navigation", Anchor = "#keyboard-navigation" } ],
Name = "Rating",
Path = "rating",
Description = "Demonstration and configuration of the Radzen Blazor Rating component.",
Icon = "\ue839",
Tags = new [] { "star", "form", "edit" }
},
new Example
{
Name = "SecurityCode",
Path = "security-code",
Description = "Demonstration and configuration of the Radzen Blazor SecurityCode component.",
Icon = "\uf045",
Tags = new [] { "security", "code", "input" }
},
new Example
{
Toc = [ new () { Text = "Chip Style", Anchor = "#chip-style" }, new () { Text = "Variant", Anchor = "#variant" }, new () { Text = "Sizes", Anchor = "#sizes" }, new () { Text = "Icons", Anchor = "#icons" }, new () { Text = "Selected", Anchor = "#selected" }, new () { Text = "Disabled", Anchor = "#disabled" }, new () { Text = "Events", Anchor = "#events" }, new () { Text = "Add / Remove", Anchor = "#add-remove" }, new () { Text = "Keyboard Navigation", Anchor = "#keyboard-navigation" } ],
Name = "Chip",
Path = "chip",
Updated = true,
Description = "Demonstration and configuration of the Radzen Blazor Chip component.",
Icon = "\uf852",
Tags = new [] { "chip", "tag", "label", "status" }
},
new Example
{
Toc = [ new () { Text = "Single selection", Anchor = "#single-selection" }, new () { Text = "Multiple selection", Anchor = "#multiple-selection" }, new () { Text = "Events", Anchor = "#events" }, new () { Text = "Templates", Anchor = "#templates" }, new () { Text = "Keyboard Navigation", Anchor = "#keyboard-navigation" } ],
Name = "ChipList",
Path = "chiplist",
New = true,
Description = "Demonstration and configuration of the Radzen Blazor ChipList component.",
Icon = "\uf852",
Tags = new [] { "chip", "chiplist", "tag", "form", "edit", "selection" }
},
new Example
{
Toc = [ new () { Text = "Get and Set the value of SelectBar", Anchor = "#get-set-value" }, new () { Text = "Get and Set the value of SelectBar using Value and Change event", Anchor = "#value-and-change-event" }, new () { Text = "Multiple selection", Anchor = "#multiple-selection" }, new () { Text = "Populate SelectBar items from data", Anchor = "#populate-from-data" }, new () { Text = "Statically declared and populated SelectBar items from data", Anchor = "#populate-items-statically" }, new () { Text = "Populate items programmatically and disable item", Anchor = "#populate-items-programmatically" }, new () { Text = "SelectBar with icons", Anchor = "#icons" }, new () { Text = "SelectBar with images", Anchor = "#images" }, new () { Text = "SelectBar with template", Anchor = "#template" }, new () { Text = "SelectBar Size", Anchor = "#size" }, new () { Text = "SelectBar Orientation", Anchor = "#orientation" }, new () { Text = "Keyboard Navigation", Anchor = "#keyboard-navigation" } ],
Name = "SelectBar",
Path = "selectbar",
Updated = true,
Description = "Demonstration and configuration of the Radzen Blazor SelectBar component.",
Icon = "\uf8e8",
Tags = new [] { "form", "edit" }
},
new Example
{
Toc = [ new () { Text = "Get and Set the value of Slider", Anchor = "#get-set-value" }, new () { Text = "Get and Set the value of Slider using Value and Change event", Anchor = "#value-and-change-event" }, new () { Text = "Slider from -100 to 100", Anchor = "#min-max-value" }, new () { Text = "Slider with Step=10", Anchor = "#step" }, new () { Text = "Range Slider", Anchor = "#range-slider" }, new () { Text = "Disabled Slider", Anchor = "#disabled-slider" }, new () { Text = "Vertical Slider", Anchor = "#vertical-slider" }, new () { Text = "Keyboard Navigation", Anchor = "#keyboard-navigation" } ],
Name = "Slider",
Path = "slider",
Description = "Demonstration and configuration of the Radzen Blazor Slider component.",
Icon = "\ue429",
Tags = new [] { "form", "slider" }
},
new Example
{
Toc = [ new () { Text = "Keyboard Navigation", Anchor = "#keyboard-navigation" } ],
Name = "SpeechToTextButton",
Description = "Demonstration and configuration of the Radzen Blazor speech to text button component.",
Path = "speechtotextbutton",
Icon = "\ue029"
},
new Example
{
Toc = [ new () { Text = "Filled SplitButton", Anchor = "#filled" }, new () { Text = "Flat SplitButton", Anchor = "#flat" }, new () { Text = "Outlined SplitButton", Anchor = "#outlined" }, new () { Text = "Text SplitButton", Anchor = "#text" }, new () { Text = "Content in SplitButton", Anchor = "#content" }, new () { Text = "SplitButton Sizes", Anchor = "#sizes" }, new () { Text = "Disabled SplitButton", Anchor = "#disabled" }, new () { Text = "Busy SplitButton", Anchor = "#busy" }, new () { Text = "AlwaysOpenPopup SplitButton", Anchor = "#always-open-popup" }, new () { Text = "DropDown icon of SplitButton", Anchor = "#customize-dropdown-icon" }, new () { Text = "Keyboard Navigation", Anchor = "#keyboard-navigation" } ],
Name = "SplitButton",
Description = "Demonstration and configuration of the Radzen Blazor split button component",
Path = "splitbutton",
Icon = "\uf756"
},
new Example
{
Toc = [ new () { Text = "Get and set the value", Anchor = "#get-set-value" }, new () { Text = "Keyboard Navigation", Anchor = "#keyboard-navigation" }, new () { Text = "Disabled Switch", Anchor = "#disabled-switch" } ],
Name = "Switch",
Path = "switch",
Description = "Demonstration and configuration of the Radzen Blazor Switch component.",
Icon = "\ue9f6",
Tags = new [] { "form", "edit", "switch" }
},
new Example
{
Toc = [ new () { Text = "Basic Usage", Anchor = "#basic-usage" }, new () { Text = "Custom EditContext", Anchor = "#custom-edit-context" }, new () { Text = "Form Action", Anchor = "#form-action" } ],
Name = "TemplateForm",
Path = "templateform",
Description = "Demonstration and configuration of the Radzen Blazor template form component with validation support.",
Icon = "\uebed",
Tags = new [] { "form", "edit", "validation", "submit", "editcontext" }
},
new Example
{
Name = "TextArea",
Path = "textarea",
Description = "Demonstration and configuration of the Radzen Blazor TextArea component.",
Icon = "\ue167",
Tags = new [] { "input", "form", "edit" }
},
new Example
{
Name = "TextBox",
Path = "textbox",
Description = "Demonstration and configuration of the Radzen Blazor TextBox input component.",
Icon = "\ue9f1",
Tags = new [] { "input", "form", "edit" }
},
new Example
{
Toc = [ new () { Text = "Bind the value of TimeSpanPicker", Anchor = "#bind-value" }, new () { Text = "Get and Set the value of TimeSpanPicker using Value and Change event.", Anchor = "#value-and-change-event" }, new () { Text = "Min and Max values", Anchor = "#min-max-values" }, new () { Text = "Inline picker", Anchor = "#inline" }, new () { Text = "Various configurations", Anchor = "#various-config" }, new () { Text = "Time span format", Anchor = "#format" }, new () { Text = "Custom input parsing", Anchor = "#custom-input-parsing" }, new () { Text = "Keyboard Navigation", Anchor = "#keyboard-navigation" } ],
Name = "TimeSpanPicker",
Path = "timespanpicker",
Description = "Demonstration and configuration of the Radzen Blazor TimeSpanPicker component.",
Icon = "\ue425",
Tags = new [] { "duration", "form", "edit" }
},
new Example
{
Toc = [
new () { Text = "Upload files", Anchor = "#change" },
new () { Text = "Upload files to server", Anchor = "#url" },
new () { Text = "Upload multiple files", Anchor = "#multiple" },
new () { Text = "Trigger from code", Anchor = "#from-code" },
new () { Text = "File filter", Anchor = "#filter" },
new () { Text = "Use parameters", Anchor = "#parameters" },
new () { Text = "Show upload progress", Anchor = "#progress" },
new () { Text = "Drag and drop to upload", Anchor = "#drag-drop" },
new () { Text = "Custom HTTP headers", Anchor = "#custom-headers" },
new () { Text = "Specify parameter name", Anchor = "#parameter-name" },
new () { Text = "Keyboard Navigation", Anchor = "#keyboard-navigation" }
],
Name = "Upload",
Description = "Demonstration and configuration of the Radzen Blazor Upload component.",
Path = "example-upload",
Icon = "\uf09b",
Tags = new [] { "upload", "file"}
},
},
},
new Example
{
Name = "Data Visualization",
Icon = "\ue4fb",
Children = new[] {
new Example
{
Name="Chart",
Icon = "\ue922",
Children = new [] {
new Example
{
Toc = [ new () { Text = "Chart Series", Anchor = "#series" }, new () { Text = "Basic usage", Anchor = "#basic-usage" }, new () { Text = "Keyboard Navigation", Anchor = "#keyboard-navigation" } ],
Name = "Series",
Path = "chart-series",
Title = "Blazor Chart - Series Config | Free UI Components by Radzen",
Description = "Use the Radzen Blazor Chart component to display data in a graphical format.",
Tags = new [] { "chart", "graph", "series" }
},
new Example
{
Name = "Area Chart",
Path = "area-chart",
Description = "Radzen Blazor Chart with area series.",
Tags = new [] { "chart", "graph", "area" }
},
new Example
{
Name = "Bar Chart",
Path = "bar-chart",
Description = "Radzen Blazor Chart with bar series.",
Tags = new [] { "chart", "graph", "column", "bar" }
},
new Example
{
Name = "Column Chart",
Path = "column-chart",
Description = "Radzen Blazor Chart with column series.",
Tags = new [] { "chart", "graph", "column", "bar" }
},
new Example
{
Name = "Donut Chart",
Path = "donut-chart",
Description = "Radzen Blazor Chart with donut series.",
Tags = new [] { "chart", "graph", "donut" }
},
new Example
{
Name = "Line Chart",
Path = "line-chart",
Description = "Radzen Blazor Chart with line series.",
Tags = new [] { "chart", "graph", "line" }
},
new Example
{
Name = "Pie Chart",
Path = "pie-chart",
Description = "Radzen Blazor Chart with pie series.",
Tags = new [] { "chart", "graph", "pie" }
},
new Example
{
Name = "Scatter Chart",
Path = "scatter-chart",
Description = "Radzen Blazor Chart with scatter series for plotting numeric X/Y data points.",
Tags = new [] { "chart", "graph", "scatter", "point", "xy" }
},
new Example
{
Name = "Bubble Chart",
Path = "bubble-chart",
Description = "Radzen Blazor Chart with bubble series for visualizing three dimensions of data.",
Tags = new [] { "chart", "graph", "bubble", "scatter", "size" }
},
new Example
{
Name = "Stacked Area Chart",
Path = "stacked-area-chart",
Description = "Radzen Blazor Chart with stacked area series.",
Tags = new [] { "chart", "stack", "graph", "area" }
},
new Example
{
Name = "Stacked Bar Chart",
Path = "stacked-bar-chart",
Description = "Radzen Blazor Chart with stacked bar series.",
Tags = new [] { "chart", "stack", "graph", "column", "bar" }
},
new Example
{
Name = "Stacked Column Chart",
Path = "stacked-column-chart",
Description = "Radzen Blazor Chart with stacked column series.",
Tags = new [] { "chart", "stack", "graph", "column", "bar" }
},
new Example
{
Toc = [ new () { Text = "Min, max and step", Anchor = "#min-max-and-step" }, new () { Text = "Format axis values", Anchor = "#format-axis-values" }, new () { Text = "Display grid lines", Anchor = "#display-grid-lines" }, new () { Text = "Set axis title", Anchor = "#set-axis-title" } ],
Name = "Axis",
Path = "chart-axis",
Title = "Blazor Chart - Axis Config | Free UI Components by Radzen",
Description = "By default the Radzen Blazor Chart determines the Y axis minimum and maximum based on the range of values.",
Tags = new [] { "chart", "graph", "series" }
},
new Example
{
Toc = [ new () { Text = "Legend position", Anchor = "#legend-position" }, new () { Text = "Hide the legend", Anchor = "#hide-the-legend" } ],
Name = "Legend",
Path = "chart-legend",
Title = "Blazor Chart - Legend Config | Free UI Components by Radzen",
Description = "The Radzen Blazor Chart displays a legend by default. It uses the Title property of the series (or category values for pie series) as items in the legend.",
Tags = new [] { "chart", "graph", "legend" }
},
new Example
{
Toc = [ new () { Text = "Customize tooltip content", Anchor = "#customize-tooltip-content" }, new () { Text = "Disable tooltips", Anchor = "#disable-tooltips" } ],
Name = "ToolTip",
Path = "chart-tooltip",
Title = "Blazor Chart - ToolTip Config | Free UI Components by Radzen",
Description = "Blazor Chart tooltip shown on hover. Customize content or disable tooltips per series.",
Tags = new [] { "chart", "graph", "legend" }
},
new Example
{
Toc = [ new () { Text = "Auto Rotation", Anchor = "#auto-rotation" }, new () { Text = "Predefined Rotation", Anchor = "#rotation" } ],
Name = "Label Rotation",
Path = "chart-label-rotation",
Title = "Blazor Chart - Label Rotation | Free UI Components by Radzen",
Description = "The Radzen Blazor Chart can rotate the labels of the horizontal axis.",
Tags = new [] { "chart", "label", "rotate", "rotation" }
},
new Example
{
Name = "Trends",
Path = "chart-trends",
Title = "Blazor Chart - Trends | Free UI Components by Radzen",
Description = "Blazor Chart trend lines displaying mean, median, and mode measures of central tendency.",
Tags = new [] { "chart", "trend", "median", "mean", "mode" }
},
new Example
{
Name = "Annotations",
Path = "chart-annotations",
Title = "Blazor Chart - Annotations | Free UI Components by Radzen",
Description = "This example demonstrates RadzenSeriesAnnotation.",
Tags = new [] { "chart", "annotation", "label" }
},
new Example
{
Name = "Interpolation",
Path = "chart-interpolation",
Title = "Blazor Chart - Interpolation | Free UI Components by Radzen",
Description = "This example demonstrates Radzen Blazor Chart interpolation mode.",
Tags = new [] { "chart", "interpolation", "spline", "step" }
},
new Example
{
Name = "Styling Chart",
Path = "styling-chart",
Title = "Blazor Chart - Styling | Free UI Components by Radzen",
Description = "This example demonstrates different color schemes, custom colors and styling of Radzen Blazor Chart component.",
Tags = new [] { "chart", "graph", "styling" }
},
}
},
new Example
{
Name = "Sparkline",
Path = "sparkline",
Description = "Demonstration and configuration of RadzenSparkline component.",
Icon = "\uf64f",
Tags = new [] { "chart", "sparkline" }
},
new Example
{
Toc = [ new () { Text = "Basic Usage", Anchor = "#basic-usage" }, new () { Text = "Grid Shape", Anchor = "#grid-shape" }, new () { Text = "Color Scheme", Anchor = "#color-scheme" }, new () { Text = "Legend", Anchor = "#legend" }, new () { Text = "Value Format", Anchor = "#value-format" }, new () { Text = "Markers", Anchor = "#markers" } ],
Name = "Spider Chart",
Path = "spider-chart",
Title = "Blazor Spider Chart Component | Free UI Components by Radzen",
Description = "Radzen Blazor Spider Chart for displaying multivariate data in a radial format.",
Tags = new [] { "spider", "radar", "chart", "multivariate", "radial", "web" },
Icon = "\ueb39",
New = true
},
new Example
{
Name = "Arc Gauge",
Path = "arc-gauge",
Description = "Demonstration and configuration of Radzen Blazor Arc Gauge component.",
Icon = "\ue9e4",
Tags = new [] { "gauge", "graph", "arc", "progress" }
},
new Example
{
Name = "Linear Gauge",
New = true,
Path = "linear-gauge",
Description = "Display values on a linear scale with configurable ticks, ranges, and pointer orientation.",
Icon = "\ue260",
Tags = new [] { "gauge", "graph", "linear", "scale", "bar" },
Toc =
[
new () { Text = "Basic Usage", Anchor = "#basic-usage" },
new () { Text = "Ranges and Value Display", Anchor = "#ranges" },
new () { Text = "Rounded Ranges", Anchor = "#rounded-ranges" },
new () { Text = "Reversed Scale", Anchor = "#reversed" },
new () { Text = "Draggable Pointer", Anchor = "#draggable" },
new () { Text = "Vertical Orientation", Anchor = "#vertical" },
new () { Text = "Multiple Scales", Anchor = "#multiple-scales" },
]
},
new Example
{
Name = "Radial Gauge",
Path = "radial-gauge",
Description = "Demonstration and configuration of Radzen Blazor Radial Gauge component.",
Icon = "\ue01b",
Tags = new [] { "gauge", "graph", "radial", "circle" }
},
new Example
{
Name = "Styling Gauge",
Path = "styling-gauge",
Title = "Blazor Gauge - Styling | Free UI Components by Radzen",
Description = "This example demonstrates multiple pointers with RadzenRadialGauge and multiple scales with RadzenArcGauge component.",
Icon = "\ue41d",
Tags = new [] { "gauge", "graph", "styling" }
},
new Example
{
Toc = [ new () { Text = "Basic", Anchor = "#basic" }, new () { Text = "Large", Anchor = "#large" }, new () { Text = "Styled", Anchor = "#styled" } ],
Name = "QRCode",
Description = "Generate and display QR codes as SVG using RadzenQRCode.",
Path = "qrcode",
Icon = "\uef6b",
Tags = new [] { "qr", "qrcode", "barcode", "svg" },
New = true
},
new Example
{
Name = "Barcode",
Description = "Generate and display 1D barcodes as SVG using RadzenBarcode.",
Path = "barcode",
Icon = "\ue70b",
Tags = new [] { "barcode", "svg" },
New = true
},
new Example
{
Toc = [ new () { Text = "Basic Usage", Anchor = "#basic-usage" }, new () { Text = "Orientation and Position", Anchor = "#orientation-and-position" }, new () { Text = "Align Items", Anchor = "#align-items" }, new () { Text = "Styling", Anchor = "#line-width" }, new () { Text = "Point Size", Anchor = "#point-size" }, new () { Text = "Point Style", Anchor = "#point-style" }, new () { Text = "Point Variant", Anchor = "#point-variant" }, new () { Text = "Point Shadow", Anchor = "#point-shadow" }, new () { Text = "Point Content", Anchor = "#point-content" } ],
Name = "Timeline",
Path = "timeline",
Description = "Blazor Timeline component for displaying a chronological sequence of events with flexible orientation and styling.",
Icon = "\ue00d",
Tags = new [] { "timeline", "time", "line" }
},
new Example
{
Name = "GoogleMap",
Path = "googlemap",
Description = "Demonstration and configuration of Radzen Blazor Google Map component.",
Icon = "\ue55b"
},
new Example
{
Toc = [ new () { Text = "Parameters", Anchor = "#parameters" }, new () { Text = "Proxy", Anchor = "#proxy" }, new () { Text = "Provide credentials", Anchor = "#credentials" } ],
Name = "SSRS Viewer",
Path = "ssrsviewer",
Description = "Demonstration and configuration of Radzen SSRS Viewer Radzen Blazor Arc Gauge component.",
Icon = "\ue9e4",
Tags = new [] { "report", "ssrs" }
},
new Example
{
Toc = [ new () { Text = "Basic Usage", Anchor = "#basic-usage" }, new () { Text = "Color Scheme", Anchor = "#color-scheme" }, new () { Text = "Node Properties", Anchor = "#node-properties" }, new () { Text = "Custom Colors", Anchor = "#custom-colors" }, new () { Text = "Custom Tooltips", Anchor = "#custom-tooltips" }, new () { Text = "Animation", Anchor = "#animation" } ],
Name = "Sankey Diagram",
Path = "sankey-diagram",
Description = "Radzen Blazor Sankey Diagram for visualizing flow and relationships between nodes.",
Icon = "\uf38d",
Tags = new [] { "sankey", "flow", "diagram", "visualization", "relationships" }
},
}
},
new Example
{
Name = "Feedback",
Icon = "\ue0cb",
Children = new[] {
new Example
{
Name = "Alert",
Title = "Blazor Alert Component | Free UI Components by Radzen",
Icon = "\ue88e",
Tags = new [] { "message", "alert" },
Children = new [] {
new Example
{
Name = "Alert Configuration",
Title = "Blazor Alert Component | Free UI Components by Radzen",
Description = "Demonstration and configuration of the Radzen Blazor Alert component.",
Path = "alert",
Tags = new [] { "message", "alert" },
},
new Example
{
Name = "Alert Styling",
Title = "Blazor Alert - Styling | Free UI Components by Radzen",
Description = "This example demonstrates different styles, shades and variants of Radzen Blazor Alert component.",
Path = "alert-styling",
Tags = new [] { "message", "alert" },
}
}
},
new Example
{
Toc = [ new () { Text = "Badge Style", Anchor = "#badge-style" }, new () { Text = "Badge Shade", Anchor = "#badge-shade" }, new () { Text = "Badge Variant", Anchor = "#badge-variant" }, new () { Text = "Pill", Anchor = "#pill" }, new () { Text = "Child Content", Anchor = "#child-content" } ],
Name = "Badge",
Path = "badge",
Description = "Blazor Badge component for displaying counts, labels, and status indicators with multiple styles and variants.",
Icon = "\uf7f1",
Tags = new[] { "badge", "link"}
},
new Example
{
Toc = [ new () { Text = "Severity", Anchor = "#severity" }, new () { Text = "Position", Anchor = "#position" }, new () { Text = "Custom click handler", Anchor = "#click-handler" }, new () { Text = "Custom content", Anchor = "#custom-content" }, new () { Text = "Duration progress", Anchor = "#duration-progress" } ],
Name = "Notification",
Path = "notification",
Description = "Demonstration and configuration of the Radzen Blazor Notification component.",
Icon = "\ue87f",
Tags = new [] { "message", "notification" }
},
new Example
{
Toc = [ new () { Text = "ProgressBar in determinate mode, Get and Set the value", Anchor = "#progressbar-determinate" }, new () { Text = "ProgressBar in indeterminate mode", Anchor = "#progressbar-indeterminate" }, new () { Text = "ProgressBar Min and Max values", Anchor = "#progressbar-min-max-values" } ],
Name = "ProgressBar",
Description = "Demonstration and configuration of the Radzen Blazor ProgressBar component.",
Path = "progressbar",
Icon = "\ue9e3",
Tags = new [] { "progress", "spinner", "bar", "linear" }
},
new Example
{
Toc = [ new () { Text = "ProgressBarCircular in determinate mode, Get and Set the value", Anchor = "#progressbarcircular-determinate" }, new () { Text = "ProgressBarCircular in indeterminate mode", Anchor = "#progressbarcircular-indeterminate" }, new () { Text = "ProgressBarCircular sizes", Anchor = "#progressbarcircular-sizes" }, new () { Text = "ProgressBarCircular Min and Max values", Anchor = "#progressbarcircular-min-max-values" } ],
Name = "ProgressBarCircular",
Description = "Demonstration and configuration of the Radzen Blazor circular progress bar component.",
Path = "progressbarcircular",
Icon = "\ue9d0",
Tags = new [] { "progress", "spinner", "circle", "circular" }
},
new Example
{
Toc = [ new () { Text = "Show tooltip with string message", Anchor = "#tooltip-string-message" }, new () { Text = "Tooltip positions", Anchor = "#tooltip-positions" }, new () { Text = "Show tooltip with HTML content", Anchor = "#tooltip-html-content" }, new () { Text = "Tooltip delay and duration", Anchor = "#tooltip-delay-duration" }, new () { Text = "Close Tooltip on page click", Anchor = "#tooltip-close-on-page-click" }, new () { Text = "Tooltip on HTML element", Anchor = "#tooltip-html-element" } ],
Name = "Tooltip",
Description = "Blazor Tooltip component with configurable positions, HTML content, delay, and duration settings.",
Path = "tooltip",
Icon = "\ue9f8",
Tags = new [] { "popup", "tooltip" }
},
}
},
new Example
{
Name = "Validators",
Icon = "\uf1c2",
Children = new[] {
new Example
{
Toc = [ new () { Text = "Basic Usage", Anchor = "#basic-usage" }, new () { Text = "Coditional Validation", Anchor = "#conditional-validation" }, new () { Text = "Comparison operator", Anchor = "#comparison-operator" }, new () { Text = "Appearance", Anchor = "#appearance" } ],
Name = "CompareValidator",
Path = "comparevalidator",
Description = "The Blazor RadzenCompareValidator compares the user input against a predefined value or another component.",
Icon = "\ue877",
Tags = new [] { "validator", "validation", "required", "compare"}
},
new Example
{
Name = "DataAnnotationValidator",
Path = "dataannotationvalidator",
Description = "Demonstration and configuration of the Radzen Blazor Data Annotation Validator component.",
Icon = "\ue6b3",
Tags = new [] { "validator", "validation", "pattern", "annotations" }
},
new Example
{
Name = "EmailValidator",
Path = "emailvalidator",
Description = "Demonstration and configuration of the Radzen Blazor Email Validator component.",
Icon = "\uf18c",
Tags = new [] { "validator", "validation", "required", "email"}
},
new Example
{
Name = "LengthValidator",
Path = "lengthvalidator",
Description = "Demonstration and configuration of the Radzen Blazor Length Validator component.",
Icon = "\ue90a",
Tags = new [] { "validator", "validation", "required", "length"}
} ,
new Example
{
Name = "NumericRangeValidator",
Path = "numericrangevalidator",
Description = "Demonstration and configuration of the Radzen Blazor Numeric Range Validator component.",
Icon = "\ue3d0",
Tags = new [] { "validator", "validation", "required", "range"}
},
new Example
{
Name = "RegexValidator",
Path = "regexvalidator",
Description = "Demonstration and configuration of the Radzen Blazor Regex Validator component.",
Icon = "\ue53f",
Tags = new [] { "validator", "validation", "pattern", "regex", "regular", "expression"}
},
new Example
{
Toc = [ new () { Text = "Validate RadzenDropDown", Anchor = "#validate-radzendropdown" } ],
Name = "RequiredValidator",
Path = "requiredvalidator",
Description = "Demonstration and configuration of the Radzen Blazor Required Validator component.",
Icon = "\ue578",
Tags = new [] { "validator", "validation", "required"}
},
new Example
{
Name = "CustomValidator",
Path = "customvalidator",
Description = "Demonstration and configuration of the Radzen Blazor Custom Validator component.",
Icon = "\ue7d8",
Tags = new [] { "validator", "validation", "custom", "unique"}
},
}
},
new Example
{
Name = "Changelog",
Path = "/changelog",
Updated = true,
Title = "Blazor Components Changelog | Free UI Components by Radzen",
Description = "See what's new in Radzen Blazor Components",
Icon = "\ue8e1"
},
};
public IEnumerable<Example> Examples
{
get
{
return allExamples;
}
}
public IEnumerable<Example> Filter(string term)
{
if (string.IsNullOrEmpty(term))
return allExamples;
bool contains(string value) => value != null && value.Contains(term, StringComparison.OrdinalIgnoreCase);
bool filter(Example example) => contains(example.Name) || (example.Tags != null && example.Tags.Any(contains));
bool deepFilter(Example example) => filter(example) || example.Children?.Any(filter) == true;
return Examples.Where(category => category.Children?.Any(deepFilter) == true || filter(category))
.Select(category => new Example
{
Name = category.Name,
Path = category.Path,
Icon = category.Icon,
Expanded = true,
Children = category.Children?.Where(deepFilter).Select(example => new Example
{
Name = example.Name,
Path = example.Path,
Icon = example.Icon,
Expanded = true,
Children = example.Children
}
).ToArray()
}).ToList();
}
public Example FindCurrent(Uri uri)
{
IEnumerable<Example> Flatten(IEnumerable<Example> e)
{
return e.SelectMany(c => c.Children != null ? Flatten(c.Children) : new[] { c });
}
return Flatten(Examples)
.FirstOrDefault(example => example.Path == uri.AbsolutePath || $"/{example.Path}" == uri.AbsolutePath);
}
public string TitleFor(Example example)
{
if (example != null && example.Name != "Overview")
{
return example.Title ?? $"Blazor {example.Name} | Free UI Components by Radzen";
}
return "Free Blazor Components | 110+ UI controls by Radzen";
}
public string DescriptionFor(Example example)
{
return example?.Description ?? "The Radzen Blazor component library provides more than 100 UI controls for building rich ASP.NET Core web applications.";
}
}
}
Reference in New Issue View Git Blame Copy Permalink