mirror of
https://github.com/radzenhq/radzen-blazor.git
synced 2026-07-08 18:16:08 +00:00
Remove redundant AI-generated Subtitle2 blocks from demo pages
This commit is contained in:
Atanas Korchev
@@ -9,10 +9,6 @@
|
||||
A conversational AI chat interface for building intelligent assistants and chatbot experiences.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
|
||||
These demos showcase an AI-powered chat interface with custom styling options, compact layouts, event handling for messages, conversation memory with session management, and runtime configuration for model selection, temperature, max tokens, system prompts, and API endpoints.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenExample ComponentName="AIChat" Example="AIChatConfig">
|
||||
<AIChatConfig />
|
||||
</RadzenExample>
|
||||
|
||||
@@ -11,10 +11,6 @@
|
||||
Radzen Blazor Components library prioritizes accessibility for all users by adhering to the highest levels of web accessibility guidelines and recommendations. It can help you make your Blazor app accessible and compliant with WAI-ARIA, WCAG 2.2, Section 508, and keyboard compatibility standards.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
|
||||
This page covers accessibility implementation including WCAG 2.2 AA compliant theme colors, High Contrast themes, ARIA attributes, semantic HTML, screen reader compatibility, responsive design, keyboard navigation with focus management, and an Accessibility Conformance Report (ACR) based on VPAT® format.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText Anchor="accessibility#applying-guidelines" TextStyle="TextStyle.H4" TagName="TagName.H2" class="rz-pt-12">
|
||||
Applying guidelines
|
||||
</RadzenText>
|
||||
|
||||
@@ -7,10 +7,6 @@
|
||||
Single or multiple expand modes, dynamic items, and expand/collapse events.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
|
||||
These demos showcase expandable accordion panels with single or multiple expand modes, dynamically created items with two-way binding, expand/collapse events, and the ability to disable expand/collapse functionality.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText Anchor="accordion#single-expand" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
|
||||
Accordion with single expand
|
||||
</RadzenText>
|
||||
|
||||
@@ -7,10 +7,6 @@
|
||||
Configurable severity levels, styles, shades, and variants for displaying important messages.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
|
||||
In this demo five alerts demonstrate different configurations: with close button (warning), without close button (success), with title (info), without icon (danger), and with <code>bind-Visible</code> and <code>Close</code> event that shows a notification when closed.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenExample ComponentName="Alert" Example="AlertConfig">
|
||||
<AlertConfig />
|
||||
</RadzenExample>
|
||||
@@ -7,10 +7,6 @@
|
||||
Customize alert appearance with various styles, shades, and variants.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
|
||||
In this demo controls let you select <strong>AlertStyle</strong> (Primary, Secondary, Success, Danger, etc.), <strong>Size</strong> (ExtraSmall to Large), and <strong>Variant</strong> (Filled, Flat, Outlined, Text), showing five alerts with different <strong>Shades</strong> (Lighter, Light, Default, Dark, Darker) to compare visual appearances.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenExample ComponentName="Alert" Example="AlertStylingConfig">
|
||||
<AlertStylingConfig />
|
||||
</RadzenExample>
|
||||
|
||||
@@ -7,10 +7,6 @@
|
||||
A toggle button for switching application appearance between two preset themes, such as light and dark.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
|
||||
This demo shows a toggle button that switches between light and dark themes using <code>RadzenAppearanceToggle</code> with <code>RadzenTheme</code>, providing users with instant appearance customization.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText Anchor="appearance-toggle#light-dark-mode" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
|
||||
Switch between light and dark mode
|
||||
</RadzenText>
|
||||
|
||||
@@ -6,10 +6,6 @@
|
||||
Display values on a circular arc scale with configurable ranges.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
|
||||
In this demo a speedometer-style gauge displays 0-260 km/h with controls to adjust the <strong>value</strong> via slider, toggle <strong>tick position</strong> (Inside/Outside/None), and show/hide the pointer value which uses a custom <code>Template</code> to display km/h units.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenExample ComponentName="ArcGauge" Example="ArcGaugeConfig">
|
||||
<ArcGaugeConfig />
|
||||
</RadzenExample>
|
||||
|
||||
@@ -7,10 +7,6 @@
|
||||
Visualize data trends with filled area charts showing magnitude over time.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
|
||||
In this demo two <code>RadzenAreaSeries</code> compare revenue data for 2023 and 2024, with options to toggle smooth curves and data labels, plus custom USD formatting on the value axis.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenExample ComponentName="Chart" Example="AreaChartConfig" DocumentationLink="https://blazor.radzen.com/docs/guides/components/chart.html">
|
||||
<AreaChartConfig />
|
||||
</RadzenExample>
|
||||
|
||||
@@ -7,10 +7,6 @@
|
||||
Filtering, templates, custom filter operators, and on-demand data loading.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
|
||||
These demos showcase an autocomplete input with two-way data binding, custom templates, configurable filter operators and case sensitivity, on-demand data loading, support for string lists, multiline suggestions, open-on-focus behavior, and disabled states.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText Anchor="autocomplete#get-set-value" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
|
||||
Get and Set the value of AutoComplete
|
||||
</RadzenText>
|
||||
|
||||
@@ -6,10 +6,6 @@
|
||||
A small graphic for displaying counts, labels, and status indicators with multiple styles and variants.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-mb-8">
|
||||
These demos display badges with various styles (primary/secondary/success/danger/warning/info/light/dark), shades (lighter/light/default/dark/darker), variants (filled/outlined/text), pill shapes, and custom child content for flexible visual indicators.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenExample ComponentName="Badge" Example="BadgeUsage">
|
||||
<BadgeUsage />
|
||||
</RadzenExample>
|
||||
|
||||
@@ -7,10 +7,6 @@
|
||||
Display horizontal bar charts for comparing data across categories.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
|
||||
In this demo two charts compare <strong>2024</strong> (dashed line) vs <strong>2023</strong> quarterly revenue: one with auto-sized bars and one with custom <code>Height="20"</code>, both using <code>Radius="5"</code> for rounded corners and <code>SeriesClick</code> events logged to console.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenExample ComponentName="Chart" Example="BarChartConfig" DocumentationLink="https://blazor.radzen.com/docs/guides/components/chart.html">
|
||||
<BarChartConfig />
|
||||
</RadzenExample>
|
||||
|
||||
@@ -6,10 +6,6 @@
|
||||
Generate and display 1D barcodes as SVG images.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
|
||||
These demos showcase barcode generation with configurable <code>Value</code> and <code>Type</code>, and styling options including foreground/background colors, quiet zone, bar height, and value text rendering.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
|
||||
Pick a <code>Type</code>, enter a <code>Value</code>, and customize styling and layout.
|
||||
</RadzenText>
|
||||
|
||||
@@ -7,10 +7,6 @@
|
||||
Border styles and utility CSS classes.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
|
||||
This page showcases border styling with radius classes (<code>rz-border-radius-0</code> through <code>rz-border-radius-10</code>) and corresponding CSS variables, utilities to add/remove borders on specific sides (<code>rz-border-top/right/bottom/left</code>), border color classes with theme colors, shorthand border classes combining border and color, and border width customization using <code>--rz-border-width</code> CSS variable.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenRow>
|
||||
<RadzenColumn Size="12">
|
||||
<RadzenText Anchor="borders#video-borders" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
|
||||
|
||||
@@ -6,10 +6,6 @@
|
||||
A navigation trail that helps users keep track of their location within the application.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
|
||||
These demos show hierarchical navigation breadcrumbs with clickable links representing different levels, including examples with custom templates and child content for enhanced visual presentation.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText Anchor="breadcrumb#default-breadcrumb" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
|
||||
Default Radzen BreadCrumb
|
||||
</RadzenText>
|
||||
|
||||
@@ -11,10 +11,6 @@
|
||||
Responsive breakpoints are used to adjust the layout based on the screen size of the device in use. They allow a single layout to adapt to different screen sizes, from small mobile phone screens to large desktop monitors.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
|
||||
This page covers predefined breakpoints (xs/sm/md/lg/xl/xx) optimized for various devices, and their usage in layout components like <code>RadzenColumn</code> with responsive <code>Size</code> properties, display mode utilities (<code>rz-display-{breakpoint}-{value}</code>), content overflow classes (<code>rz-overflow-{breakpoint}-{value}</code>), sizing utilities (<code>rz-w-{breakpoint}-{size}</code>), and spacing classes (<code>rz-m-{breakpoint}-{size}</code>) for responsive margin/padding.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText Anchor="breakpoints#breakpoints" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
|
||||
Breakpoints
|
||||
</RadzenText>
|
||||
|
||||
@@ -6,10 +6,6 @@
|
||||
Filled, flat, outlined, and text variants in multiple sizes.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
|
||||
These demos showcase buttons with various variants (filled/flat/outlined/text), multiple content types (text/icons/images), different sizes (ExtraSmall/Small/Medium/Large), FAB-like styling, disabled states, and busy indicators.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText Anchor="buttons#filled-buttons" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
|
||||
Filled Buttons
|
||||
</RadzenText>
|
||||
|
||||
@@ -11,10 +11,6 @@
|
||||
By default the CardGroup is responsive and Cards wrap one below the other on screen sizes smaller than 576px. Use <code>Responsive="false"</code> to disable responsiveness.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
|
||||
In this demo three cards for <strong>Team 1</strong>, <strong>Team 2</strong>, and <strong>Team 3</strong> display progress percentages (55%, 32%, 76%) with progress bars, with controls to toggle <code>Responsive</code> behavior and select card <code>Variant</code> (Filled, Flat, Outlined, Text).
|
||||
</RadzenText>
|
||||
|
||||
<RadzenExample ComponentName="CardGroup" Example="CardGroupConfig">
|
||||
<CardGroupConfig />
|
||||
</RadzenExample>
|
||||
@@ -7,10 +7,6 @@
|
||||
Display a piece of content such as an image and text in a contained, styled container.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
|
||||
These demos show card containers displaying content like images and text with different variants (filled/outlined) to create visually distinct content blocks.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenExample ComponentName="Card" Example="CardConfig">
|
||||
<CardConfig />
|
||||
</RadzenExample>
|
||||
|
||||
@@ -7,10 +7,6 @@
|
||||
Cycle through content with navigation and paging support.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
|
||||
These demos showcase a slideshow carousel with customizable navigation button styles, custom icons and text for next/prev buttons, flexible paging configurations with overlay and position options, data-binding support, and integration with <code>RadzenPager</code>.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenExample ComponentName="Carousel" Example="CarouselConfig">
|
||||
<CarouselConfig />
|
||||
</RadzenExample>
|
||||
|
||||
@@ -7,10 +7,6 @@
|
||||
Cascading Radzen Blazor DropDown components.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
|
||||
In this demo selecting a <strong>Customer</strong> filters the <strong>Orders</strong> dropdown to show only that customer's orders (with custom template showing order dates), selecting an order loads <strong>Order Details</strong> grid, and clicking a detail row loads the <strong>Products</strong> grid.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenExample ComponentName="DropDown" Example="CascadingDropDowns">
|
||||
<CascadingDropDowns />
|
||||
</RadzenExample>
|
||||
|
||||
@@ -7,10 +7,6 @@
|
||||
Add text labels and visual markers to highlight specific data points on charts.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
|
||||
In this demo the <strong>2024 revenue</strong> line chart displays two annotations: "Acquisition" at August data point and "IPO" (red fill) at June data point, with a checkbox to toggle <code>RadzenSeriesAnnotation</code> visibility and <code>OffsetY</code> positioning above the points.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenExample ComponentName="Chart" Example="ChartAnnotations" Heading="false" DocumentationLink="https://blazor.radzen.com/docs/guides/components/chart.html">
|
||||
<ChartAnnotations />
|
||||
</RadzenExample>
|
||||
|
||||
@@ -7,10 +7,6 @@
|
||||
The Radzen Blazor Chart displays a legend by default. It uses the <code>Title</code> property of the series (or category values for pie series) as items in the legend.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
|
||||
These demos showcase chart axis configuration including automatic Y-axis min/max determination with "nice" numbers and manual override options, axis value formatting using <code>FormatString</code> or <code>Formatter</code> properties, grid line display with <code>RadzenGridLines</code>, and axis title customization using <code>RadzenAxisTitle</code>.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText Anchor="chart-axis#min-max-and-step" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
|
||||
Min, max and step
|
||||
</RadzenText>
|
||||
|
||||
@@ -7,10 +7,6 @@
|
||||
Control how data points connect in line and area charts with various interpolation modes.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
|
||||
In this demo a dropdown lets you switch between <code>Interpolation</code> modes (Line, Spline, Step, StepAfter, StepBefore) applied to both <strong>2023 line series</strong> (dashed) and <strong>2024 area series</strong> showing how each mode affects the curve between monthly revenue data points.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenExample ComponentName="Chart" Example="ChartInterpolationConfig" DocumentationLink="https://blazor.radzen.com/docs/guides/components/chart.html">
|
||||
<ChartInterpolationConfig />
|
||||
</RadzenExample>
|
||||
|
||||
@@ -7,10 +7,6 @@
|
||||
Rotate chart axis labels automatically or with predefined angles to prevent overlap.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
|
||||
These demos showcase chart axis label rotation with automatic rotation using <code>LabelAutoRotation</code> property to prevent label overlap based on available space, and predefined rotation angles using <code>LabelRotation</code> property for consistent label orientation.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText Anchor="chart-label-rotation#auto-rotation" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
|
||||
Auto Rotation
|
||||
</RadzenText>
|
||||
|
||||
@@ -7,10 +7,6 @@
|
||||
The Radzen Blazor Chart displays a legend by default. It uses the <code>Title</code> property of the series (or category values for pie series) as items in the legend.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
|
||||
These demos showcase chart legend configuration with customizable positioning using the <code>Position</code> property (right/left/top/bottom), and the ability to hide the legend by setting <code>Visible</code> to false.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText Anchor="chart-legend#legend-position" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
|
||||
Legend position
|
||||
</RadzenText>
|
||||
|
||||
@@ -6,10 +6,6 @@
|
||||
Use the Radzen Blazor Chart component to display data in a graphical format.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
|
||||
These demos showcase chart data visualization with multiple series types (area/bar/column/donut/line/pie), common properties including <code>Data</code> source, <code>ValueProperty</code> for Y-axis values, and <code>CategoryProperty</code> for X-axis categories, and a basic column chart example with minimal configuration.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText Anchor="chart-series#series" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
|
||||
Chart Series
|
||||
</RadzenText>
|
||||
|
||||
@@ -7,10 +7,6 @@
|
||||
The Radzen Blazor Chart displays a tooltip when the user hovers series with the mouse. The tooltip by default includes the series category, value and series name.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
|
||||
These demos showcase chart tooltips with default content (category/value/series name), custom content using <code>TooltipTemplate</code>, and the ability to disable tooltips by setting <code>Visible</code> property of <code>RadzenChartTooltipOptions</code> to false.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText Anchor="chart-tooltip#customize-tooltip-content" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
|
||||
Customize tooltip content
|
||||
</RadzenText>
|
||||
|
||||
@@ -7,10 +7,6 @@
|
||||
Overlay trend lines on charts to visualize data patterns and predictions.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
|
||||
In this demo the <strong>2023 revenue</strong> line chart can display four statistical overlays: <strong>Trend line</strong> (red, dashed), <strong>Median line</strong> (green, dotted), <strong>Mean line</strong> (blue, dotted), and <strong>Mode line</strong> (yellow, dotted) using <code>RadzenSeriesTrendLine</code>, <code>RadzenSeriesMedianLine</code>, <code>RadzenSeriesMeanLine</code>, and <code>RadzenSeriesModeLine</code> components.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenExample ComponentName="Chart" Example="ChartTrendsConfig" DocumentationLink="https://blazor.radzen.com/docs/guides/components/chart.html">
|
||||
<ChartTrendsConfig />
|
||||
</RadzenExample>
|
||||
|
||||
@@ -10,10 +10,6 @@
|
||||
Perfect for team chats, group discussions, and real-time messaging applications.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
|
||||
These demos showcase a multi-participant chat interface with distinct user identities, avatars, online status indicators, customization options for user visibility and display, event handling for messages and user actions, and compact layouts for smaller spaces.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenExample ComponentName="Chat" Example="ChatBasic">
|
||||
<ChatBasic />
|
||||
</RadzenExample>
|
||||
|
||||
@@ -7,10 +7,6 @@
|
||||
Data-binding, orientation, select all, and template support.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
|
||||
These demos showcase checkbox lists with two-way data binding, configurable orientation and layout (vertical/horizontal with alignment options), data-bound items, statically declared items, select-all functionality, disabled/read-only individual items, and custom templates.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText Anchor="checkboxlist#get-set-value" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
|
||||
Get and Set the value of CheckBoxList
|
||||
</RadzenText>
|
||||
|
||||
@@ -6,10 +6,6 @@
|
||||
Optional tri-state support and value binding.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
|
||||
These demos showcase checkbox inputs with two-way data binding, change event handling, tri-state support (checked/unchecked/indeterminate), and disabled or read-only states.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText Anchor="checkbox#get-set-value" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
|
||||
Get and Set the value of CheckBox
|
||||
</RadzenText>
|
||||
|
||||
@@ -6,10 +6,6 @@
|
||||
HSV and RGBA color selection modes.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
|
||||
In this demo a T-shirt SVG changes color based on the color picker selection, with toggles to show/hide <strong>HSV picker</strong>, <strong>RGBA picker</strong>, <strong>Predefined colors</strong>, and <strong>OK button</strong>, and <code>Change</code> event logging selected colors to console.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenExample ComponentName="ColorPicker" Example="ColorPickerConfig">
|
||||
<ColorPickerConfig />
|
||||
</RadzenExample>
|
||||
|
||||
@@ -11,10 +11,6 @@
|
||||
List of colors and utility CSS classes.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
|
||||
This page showcases root theme colors (base/primary/secondary/info/success/warning/danger/series) with theme-specific values, and comprehensive utility CSS classes for background colors (<code>rz-background-color-*</code>), text colors (<code>rz-color-*</code>), and border colors (<code>rz-border-color-*</code>) with multiple shade variations (lighter/light/default/dark/darker).
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText Anchor="colors#theme-colors" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
|
||||
Theme Colors
|
||||
</RadzenText>
|
||||
|
||||
@@ -7,10 +7,6 @@
|
||||
Visualize data comparisons using vertical column charts.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
|
||||
In this demo three charts show quarterly revenue comparisons: <strong>auto-size columns</strong>, <strong>custom width columns</strong> (<code>Width="20"</code>), and <strong>range fill columns</strong> using <code>FillRange</code> to color columns red (less than $275k), orange (between $275k-$324k), or green (greater than $324k).
|
||||
</RadzenText>
|
||||
|
||||
<RadzenExample ComponentName="Chart" Example="ColumnChartConfig" DocumentationLink="https://blazor.radzen.com/docs/guides/components/chart.html">
|
||||
<ColumnChartConfig />
|
||||
</RadzenExample>
|
||||
|
||||
@@ -7,10 +7,6 @@
|
||||
Used within a row to create a structured, responsive 12-column grid layout.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
|
||||
These demos showcase a 12-column based responsive grid system with auto-layout column sizing, explicit column sizes (1-12), responsive sizing with breakpoint properties (<code>SizeXS/SM/MD/LG/XL/XX</code>), column wrapping with <code>RowGap</code>, offset positioning, responsive offsetting, visual column ordering with <code>Order</code> property, responsive ordering, nested layouts, and customizable gutters via the parent <code>RadzenRow</code>'s <code>Gap</code> property.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenRow class="rz-text-align-center rz-border-info-light" Gap="1rem">
|
||||
<RadzenColumn class="rz-background-color-danger-lighter rz-color-on-danger-lighter rz-py-5">1</RadzenColumn>
|
||||
<RadzenColumn class="rz-background-color-danger-lighter rz-color-on-danger-lighter rz-py-5">2</RadzenColumn>
|
||||
|
||||
@@ -6,10 +6,6 @@
|
||||
Compares user input against a predefined value or another component.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
|
||||
These demos showcase form validation that compares user input against predefined values or other components (e.g., password confirmation), conditional validation using <code>Visible</code> property, customizable comparison operators (Equal/NotEqual/LessThan/GreaterThan), and flexible appearance options (inline/block/popup with <code>Popup</code> and <code>Style</code> properties).
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText Anchor="comparevalidator#basic-usage" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
|
||||
Basic Usage
|
||||
</RadzenText>
|
||||
|
||||
@@ -7,10 +7,6 @@
|
||||
Items, custom content, and HTML element support.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
|
||||
These demos show context menus triggered by right-clicking elements, using the <code>ContextMenuService</code> to display menu items, custom content with separators, and menus attached to HTML elements via <code>oncontextmenu</code> handlers.
|
||||
</RadzenText>
|
||||
|
||||
<HelpPrerequirements />
|
||||
|
||||
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
|
||||
|
||||
@@ -7,10 +7,6 @@
|
||||
Implement custom validation logic with flexible validation rules.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
|
||||
In this demo an <strong>Email</strong> input combines <code>RadzenRequiredValidator</code>, <code>RadzenEmailValidator</code>, and <code>RadzenCustomValidator</code> with a custom <code>Validator</code> function that checks if the email already exists in a predefined array (try "mail@example.com"), with a toggle for popup vs inline validation display.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenExample ComponentName="CustomValidator" Example="CustomValidatorConfig" Source="https://github.com/radzenhq/radzen-blazor/blob/master/Radzen.Blazor/RadzenCustomValidator.cs">
|
||||
<CustomValidatorConfig />
|
||||
</RadzenExample>
|
||||
|
||||
@@ -17,10 +17,6 @@
|
||||
A comprehensive dashboard demonstrating Radzen Blazor components working together.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
|
||||
In this demo a <strong>GitHub Issues</strong> dashboard displays ASP.NET repository data with KPI cards showing <strong>Progress</strong>, <strong>Open Issues</strong>, and <strong>Closed Issues</strong> with sparklines, an area chart comparing trends, donut charts for <strong>Top Contributors</strong> and <strong>Top Labels</strong>, and a filterable DataGrid with state badges, labels, and user avatars.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenExample ComponentName="Dashboard" Example="Dashboard" AdditionalSourceCodePages="@(["/demos/Services/GitHubService.cs"] )">
|
||||
<Dashboard />
|
||||
</RadzenExample>
|
||||
@@ -6,10 +6,6 @@
|
||||
Model-based validation using data annotation attributes.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
|
||||
In this demo the form validates using C# Data Annotations: <strong>Username</strong> requires 4-15 characters (<code>[StringLength]</code>), <strong>Password</strong> requires 6-100 characters, and <strong>Confirm Password</strong> must match using <code>[Compare]</code> attribute, with a toggle for popup vs inline validation display.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenExample ComponentName="DataAnnotationValidator" Example="DataAnnotationValidatorConfig" Source="https://github.com/radzenhq/radzen-blazor/blob/master/Radzen.Blazor/RadzenDataAnnotationValidator.cs">
|
||||
<DataAnnotationValidatorConfig />
|
||||
</RadzenExample>
|
||||
@@ -7,10 +7,6 @@
|
||||
Combine DataFilter with the DataGrid LoadData event for server-side filtering.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
|
||||
In this demo the DataFilter integrates with DataGrid <code>LoadData</code> event using <code>ViewChanged</code> to trigger grid reloads, <strong>Employee Title</strong> uses multi-select dropdown with <code>FilterTemplate</code>, and filters are applied to Entity Framework queries with automatic fallback to in-memory LINQ for complex collection expressions.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenExample ComponentName="DataFilter" Example="DataFilterLoadData">
|
||||
<DataFilterLoadData />
|
||||
</RadzenExample>
|
||||
|
||||
@@ -7,10 +7,6 @@
|
||||
Filter data from an OData endpoint using Radzen DataFilter.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
|
||||
In this demo the DataFilter converts filter criteria to OData query strings using <code>ToODataFilterString()</code> method, combining DataFilter conditions with DataGrid filters and passing them to the OData service via <code>LoadData</code> event, pre-filtered to "Buchanan".
|
||||
</RadzenText>
|
||||
|
||||
<RadzenExample ComponentName="DataFilter" Example="DataFilterOData">
|
||||
<DataFilterOData />
|
||||
</RadzenExample>
|
||||
|
||||
@@ -7,10 +7,6 @@
|
||||
Filter Entity Framework data sources without writing extra code.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
|
||||
In this demo filter <strong>Orders</strong> by OrderID (multi-select dropdown), ProductIds (nested collection), Products (through OrderDetails), Employee Last Name, Order Date (custom DatePicker template), and Freight, with toggle between auto-filter and manual <strong>Apply Filter</strong> button, pre-filtered to employees containing "Buchanan".
|
||||
</RadzenText>
|
||||
|
||||
<RadzenExample ComponentName="DataFilter" Example="DataFilterIQueryable">
|
||||
<DataFilterIQueryable />
|
||||
</RadzenExample>
|
||||
|
||||
@@ -7,10 +7,6 @@
|
||||
Enable complex filtering with multiple conditions and operators.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
|
||||
In this demo the <strong>EmployeeID</strong> column uses a custom <code>FilterValueTemplate</code> with a numeric input, while the <strong>Job Title</strong> column demonstrates multi-select dropdown filtering with support for multiple filter values and second filter conditions.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenExample ComponentName="DataGrid" Example="DataGridAdvancedFilter">
|
||||
<DataGridAdvancedFilter />
|
||||
</RadzenExample>
|
||||
|
||||
@@ -7,10 +7,6 @@
|
||||
Add a custom context menu for cells to trigger row or cell actions.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
|
||||
In this demo the DataGrid uses the <code>CellContextMenu</code> event to display a custom RadzenContextMenu when users right-click on cells, providing context-sensitive actions based on the clicked cell data.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenExample ComponentName="DataGrid" Example="DataGridCellContextMenu">
|
||||
<DataGridCellContextMenu />
|
||||
</RadzenExample>
|
||||
|
||||
@@ -7,10 +7,6 @@
|
||||
Enable cell-level selection for granular user interactions.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
|
||||
In this demo you can toggle between <strong>single</strong> and <strong>multiple</strong> cell selection modes, choose between <strong>Click</strong> or <strong>DoubleClick</strong> event types for selection, and <code>CellRender</code> highlights selected cells with a colored background.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenExample ComponentName="DataGrid" Example="DataGridCellSelect">
|
||||
<DataGridCellSelect />
|
||||
</RadzenExample>
|
||||
|
||||
@@ -7,10 +7,6 @@
|
||||
Use Excel-style checkbox filtering with OData services for server-side filtering.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
|
||||
In this demo <code>LoadColumnFilterData</code> event queries the OData service to get distinct column values using <code>groupby</code> and <code>$expand</code> for nested properties like <strong>Customer.CompanyName</strong>, with searchable checkbox lists for server-side filtering.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenExample ComponentName="DataGrid" Example="DataGridCheckBoxListFilterOData">
|
||||
<DataGridCheckBoxListFilterOData />
|
||||
</RadzenExample>
|
||||
|
||||
@@ -7,10 +7,6 @@
|
||||
Display Excel-style checkbox filters for columns to enable multi-value selection.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
|
||||
In this demo the <strong>Discontinued</strong> column shows custom Yes/No formatting for booleans, the <strong>Customer</strong> column disables virtualization for the checkbox list, and <strong>Product Name</strong> filters on nested order details data.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenExample ComponentName="DataGrid" Example="DataGridCheckBoxListFilter">
|
||||
<DataGridCheckBoxListFilter />
|
||||
</RadzenExample>
|
||||
|
||||
@@ -7,10 +7,6 @@
|
||||
This page demonstrates how to use enums in the DataGrid column filter.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
|
||||
In this demo the grid shows <strong>Gender</strong> (non-nullable), <strong>Status</strong> (nullable), and <strong>Favorite Color</strong> (using <code>Display</code> attributes for friendly names) columns, demonstrating how enum filters automatically appear in dropdown format.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenExample ComponentName="DataGrid" Example="DataGridColumnEnumFilter">
|
||||
<DataGridColumnEnumFilter />
|
||||
</RadzenExample>
|
||||
|
||||
@@ -7,10 +7,6 @@
|
||||
This page demonstrates how to define custom DataGrid column filter template.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
|
||||
In this demo <strong>ID</strong> uses <code>RadzenNumeric</code>, <strong>Customer</strong> and <strong>WorkStatus</strong> use multi-select <code>RadzenDropDown</code>, <strong>Hire Date</strong> uses <code>RadzenDatePicker</code>, and <strong>Title Of Courtesy</strong> uses a single-select dropdown with an "All" option for clearing filters.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenExample ComponentName="DataGrid" Example="DataGridColumnFilterTemplate">
|
||||
<DataGridColumnFilterTemplate />
|
||||
</RadzenExample>
|
||||
|
||||
@@ -7,10 +7,6 @@
|
||||
This page demonstrates how to define custom DataGrid column filter value template. Unlike FilterTemplate, which will replace the entire filtering UI, FilterValueTemplate allows you to define custom filter UI only for filter value part and will keep the rest of the default filtering UI. For FilterMode.Advanced you can define also SecondFilterValueTemplate.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
|
||||
In this demo the DataGrid columns use <code>FilterValueTemplate</code> to customize only the filter input control while keeping the default operator selector and buttons, providing a balance between customization and consistency.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenExample ComponentName="DataGrid" Example="DataGridColumnFilterValueTemplate">
|
||||
<DataGridColumnFilterValueTemplate />
|
||||
</RadzenExample>
|
||||
|
||||
@@ -12,10 +12,6 @@
|
||||
<a href="https://blazor.radzen.com/docs/api/Radzen.Blazor.RadzenDataGridColumn-1.html">column</a>.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
|
||||
In this demo the <strong>Photo</strong> column has <code>Pickable="false"</code> to prevent hiding it, the <strong>Extension</strong> column uses <code>ColumnPickerTitle="Phone Number Extension"</code> for a custom picker label, and <code>ColumnsPickerAllowFiltering</code> adds a search box in the picker.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenExample ComponentName="DataGrid" Example="DataGridColumnPicking">
|
||||
<DataGridColumnPicking />
|
||||
</RadzenExample>
|
||||
|
||||
@@ -7,10 +7,6 @@
|
||||
Enable column reorder by setting the AllowColumnReorder property to true. Define column initial order using column OrderIndex property.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
|
||||
In this demo <strong>ID</strong> and <strong>Photo</strong> columns have <code>Reorderable="false"</code> to prevent moving them, <strong>Last Name</strong> uses <code>OrderIndex="1"</code> and <strong>First Name</strong> uses <code>OrderIndex="2"</code> to set initial order, and reorder events are logged to the console.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenExample ComponentName="DataGrid" Example="DataGridColumnReoder">
|
||||
<DataGridColumnReoder />
|
||||
</RadzenExample>
|
||||
|
||||
@@ -7,10 +7,6 @@
|
||||
Enable column resizing by setting the AllowColumnResize property to true.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
|
||||
In this demo the <strong>Photo</strong> column has <code>MinWidth="100px"</code> and <code>MaxWidth="200px"</code> constraints to limit resizing, <code>ColumnResized</code> events log the new widths to the console, and vertical grid lines make column boundaries clearer.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenExample ComponentName="DataGrid" Example="DataGridColumnResizing">
|
||||
<DataGridColumnResizing />
|
||||
</RadzenExample>
|
||||
|
||||
@@ -7,10 +7,6 @@
|
||||
This page demonstrates how to use sub properties in the DataGrid column filter.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
|
||||
In this demo the grid filters on <strong>Customer.CompanyName</strong> (one level deep) and <strong>Product.ProductName</strong> through <code>OrderDetails</code> collection (two levels deep with <code>FilterProperty</code>), pre-filtered to show orders containing "Tofu".
|
||||
</RadzenText>
|
||||
|
||||
<RadzenExample ComponentName="DataGrid" Example="DataGridColumnSubPropertiesFilter">
|
||||
<DataGridColumnSubPropertiesFilter />
|
||||
</RadzenExample>
|
||||
|
||||
@@ -6,9 +6,6 @@
|
||||
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
|
||||
Customize the way data is displayed in each column using templates.
|
||||
</RadzenText>
|
||||
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
|
||||
In this demo the DataGrid columns use the <code>Template</code> property to render custom content including images, buttons, links, formatted text, or any Blazor component, giving you complete control over how cell data is displayed.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenExample ComponentName="DataGrid" Example="DataGridColumnTemplate" AdditionalSourceCodePages=@(new List<string>() { "/demos/Pages/DialogCardPage.razor" })>
|
||||
<DataGridColumnTemplate/>
|
||||
|
||||
@@ -7,10 +7,6 @@
|
||||
Use DataGrid column <code>Columns</code> property to define child columns.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
|
||||
In this demo the <strong>Title</strong> column contains <strong>FirstName</strong> (which contains Job Title, Birth Date, Hire Date) and <strong>LastName</strong> (which contains Address), creating a 3-level hierarchy. Toggle <code>AllowCompositeDataCells</code> to enable/disable data cell merging and adjust filter modes.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenExample ComponentName="DataGrid" Example="DataGridCompositeColumns">
|
||||
<DataGridCompositeColumns />
|
||||
</RadzenExample>
|
||||
|
||||
@@ -8,10 +8,6 @@
|
||||
Use this technique to render conditionally specific DataGrid column(s) and keep the render order as declared in the markup/code.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
|
||||
In this demo the <strong>Photo</strong> column uses <code>showPhoto</code> within a <code>RenderFragment</code> to conditionally render in the correct position (between ID and First Name), with a switch to toggle its visibility while preserving column order.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenExample ComponentName="DataGrid" Example="DataGridConditionalColumns">
|
||||
<DataGridConditionalColumns />
|
||||
</RadzenExample>
|
||||
|
||||
@@ -7,10 +7,6 @@
|
||||
This page demonstrates <b>DataGrid</b> with conditional rows and cells template/styles.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
|
||||
In this demo <code>RowRender</code> makes rows bold when Quantity > 20, <code>CellRender</code> colors <strong>Quantity</strong> cells green and adds <code>rowspan</code>/<code>colspan</code> attributes, and <strong>Quantity</strong> template displays values in contrast color conditionally.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenExample ComponentName="DataGrid" Example="DataGridConditionalTemplate">
|
||||
<DataGridConditionalTemplate />
|
||||
</RadzenExample>
|
||||
@@ -7,10 +7,6 @@
|
||||
Sometimes your data comes from crosstab queries and you need to present rows as columns.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
|
||||
In this demo a crosstab query groups Orders by <strong>Year</strong> and <strong>Company</strong>, calculates total amounts, then transposes years into columns to show two rows: one displaying company names and one showing amounts in currency format.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenExample ComponentName="DataGrid" Example="DataGridCrossTabData">
|
||||
<DataGridCrossTabData />
|
||||
</RadzenExample>
|
||||
@@ -7,10 +7,6 @@
|
||||
Gives the grid a custom header, allowing the adding of components to create custom tool bars in addtion to column grouping and column picker
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
|
||||
In this demo the <code>HeaderTemplate</code> contains a <strong>Toggle EmployeeID column visibility</strong> button that dynamically controls the <code>Visible</code> property of the ID column, starting hidden by default.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenExample ComponentName="DataGrid" Example="DataGridCustomHeader">
|
||||
<DataGridCustomHeader />
|
||||
</RadzenExample>
|
||||
|
||||
@@ -7,10 +7,6 @@
|
||||
Gives the grid a custom header, allowing the adding of components to create custom tool bars in addtion to column grouping and column picker
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
|
||||
In this demo the same <strong>Toggle EmployeeID</strong> button from the custom header is combined with <code>AllowColumnPicking="true"</code>, demonstrating how custom toolbar buttons and the built-in column picker icon work together.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenExample ComponentName="DataGrid" Example="DataGridCustomHeader">
|
||||
<DataGridCustomHeader WithColumnPicker="true" />
|
||||
</RadzenExample>
|
||||
|
||||
@@ -7,10 +7,6 @@
|
||||
Bind the DataGrid to legacy DataTable objects for backward compatibility.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
|
||||
In this demo the DataGrid binds directly to ADO.NET <code>DataTable</code> objects, allowing integration with legacy .NET code or stored procedures that return DataTables, with automatic column generation from DataTable schema.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenExample ComponentName="DataGrid" Example="DataGridDataTable">
|
||||
<DataGridDataTable />
|
||||
</RadzenExample>
|
||||
@@ -7,10 +7,6 @@
|
||||
Adjust row height and spacing to fit compact or comfortable layouts.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
|
||||
In this demo a <code>RadzenSelectBar</code> lets you switch between <strong>Compact</strong>, <strong>Default</strong>, and <strong>Comfortable</strong> density settings to see how cell padding and row height adjust in the OrderDetails grid.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenExample ComponentName="DataGrid" Example="DataGridDensity">
|
||||
<DataGridDensity />
|
||||
</RadzenExample>
|
||||
@@ -7,10 +7,6 @@
|
||||
Sometimes your data comes from external API and you don't have a C# model for it. This demo shows how to implement such a scenario.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
|
||||
In this demo the grid binds to <code>IDictionary<string, object></code> with 100 rows and 58 dynamically generated columns including various types (int, enum, string, DateTime, DateOnly, TimeOnly, Guid), demonstrating filtering and sorting on unknown schemas using <code>PropertyAccess.GetDynamicPropertyExpression</code>.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenExample ComponentName="DataGrid" Example="DataGridDynamicData">
|
||||
<DataGridDynamicData />
|
||||
</RadzenExample>
|
||||
@@ -7,10 +7,6 @@
|
||||
Showcase empty state when there is no data. Customize with placeholders or messages.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
|
||||
In this demo three grids demonstrate empty states: the first shows the <strong>default empty text</strong>, the second uses <code>EmptyText</code> property with a custom message input, and the third uses <code>EmptyTemplate</code> with custom styled HTML.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenExample ComponentName="DataGrid" Example="DataGridEmpty">
|
||||
<DataGridEmpty />
|
||||
</RadzenExample>
|
||||
@@ -7,10 +7,6 @@
|
||||
Set the initial filter of your RadzenDataGrid via the <code>FilterValue</code> and <code>FilterOperator</code> column properties.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
|
||||
In this demo the <strong>Birth Date</strong> column uses a custom <code>MyCustomDataGridColumn</code> component, and the <strong>First Name</strong> filter is programmatically set to "Nan" with <code>FilterOperator.StartsWith</code> on first render using <code>SetFilterValue</code> and <code>SetFilterOperator</code>.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenExample ComponentName="DataGrid" Example="DataGridFilterApi" AdditionalSourceCodePages=@(new [] { "/demos/Pages/MyCustomDataGridColumn.razor" })>
|
||||
<DataGridFilterApi />
|
||||
</RadzenExample>
|
||||
|
||||
@@ -7,10 +7,6 @@
|
||||
Display aggregated data such as sums and averages in column footers.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
|
||||
In this demo the grid shows <strong>#</strong> for record numbering (using <code>RenderOnceComponent</code> for performance), <strong>Order ID</strong> footer displays count of displayed vs total orders, <strong>Order Date</strong> shows last order date, and <strong>Freight</strong> shows total amount in USD currency format.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenExample ComponentName="DataGrid" Example="DataGridFooterTotals" AdditionalSourceCodePages="@(new [] {"/demos/Shared/RenderOnceComponent.razor"})">
|
||||
<DataGridFooterTotals />
|
||||
</RadzenExample>
|
||||
|
||||
@@ -8,10 +8,6 @@
|
||||
Lock columns to prevent them from scrolling out of view via the <code>Frozen</code> property.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
|
||||
In this demo <strong>ID</strong>, <strong>Photo</strong>, <strong>First Name</strong>, and <strong>Birth Date</strong> are frozen on the left, while <strong>Extension</strong> and <strong>Notes</strong> are frozen on the right using <code>FrozenPosition="FrozenColumnPosition.Right"</code>. The Photo column has a checkbox in its header to toggle freezing dynamically.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenExample ComponentName="DataGrid" Example="DataGridFrozenColumns">
|
||||
<DataGridFrozenColumns />
|
||||
</RadzenExample>
|
||||
|
||||
@@ -7,10 +7,6 @@
|
||||
Toggle grid line visibility to customize row and column separators.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
|
||||
In this demo a <code>RadzenSelectBar</code> lets you switch between <strong>Default</strong>, <strong>None</strong>, <strong>Horizontal</strong>, <strong>Vertical</strong>, and <strong>Both</strong> grid line options to see the visual differences in the OrderDetails grid.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenExample ComponentName="DataGrid" Example="DataGridGridLines">
|
||||
<DataGridGridLines />
|
||||
</RadzenExample>
|
||||
|
||||
@@ -7,10 +7,6 @@
|
||||
Display aggregated data in column footers for each group.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
|
||||
In this demo the grid is grouped by <strong>Employee</strong>, uses composite columns (<strong>Order ID</strong> contains <strong>Freight</strong> and <strong>Order Date</strong>), displays group totals and max values in <code>GroupFooterTemplate</code>, and a toggle controls <code>GroupFootersAlwaysVisible</code>.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenExample ComponentName="DataGrid" Example="DataGridGroupFooterTemplate">
|
||||
<DataGridGroupFooterTemplate />
|
||||
</RadzenExample>
|
||||
|
||||
@@ -7,10 +7,6 @@
|
||||
Customize group header rows with templates for enhanced display.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
|
||||
In this demo the grid is pre-grouped by <strong>Customer</strong> (descending), the <code>GroupHeaderTemplate</code> displays the group key, item count, and last order date, and a tri-state checkbox controls <code>GroupRowRender</code> to expand/collapse all groups at once.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenExample ComponentName="DataGrid" Example="DataGridGroupHeaderTemplate">
|
||||
<DataGridGroupHeaderTemplate />
|
||||
</RadzenExample>
|
||||
|
||||
@@ -7,10 +7,6 @@
|
||||
Set AllowGrouping="true" to enable group by column and GroupPanelText to localize the group panel text. Set Groupable="false" for column to disable grouping by that column.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
|
||||
In this demo the grid is pre-grouped by <strong>Title</strong> (descending) with <code>HideGroupedColumn="true"</code>, the <strong>Photo</strong> column has <code>Groupable="false"</code>, and controls toggle the group expand column visibility and expand/collapse all groups with events logged to the console.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenExample ComponentName="DataGrid" Example="DataGridGroupingApi">
|
||||
<DataGridGroupingApi />
|
||||
</RadzenExample>
|
||||
|
||||
@@ -7,10 +7,6 @@
|
||||
Configure the Radzen Blazor DataGrid for in-cell editing with inline editors per cell.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
|
||||
In this demo clicking any cell enters edit mode for that cell only, edited cells show a <strong>red triangle indicator</strong> in the top-right corner, and changes are automatically saved to the database when you click another cell.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenExample ComponentName="DataGrid" Example="DataGridInCellEdit">
|
||||
<DataGridInCellEdit />
|
||||
</RadzenExample>
|
||||
|
||||
@@ -7,10 +7,6 @@
|
||||
Configure the Radzen Blazor DataGrid for inline editing with add, edit, and save actions.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
|
||||
In this demo you can toggle between <strong>Single</strong> and <strong>Multiple</strong> edit modes, add new rows with the <strong>Add New Order</strong> button or insert rows after existing ones, and the <strong>Employee</strong> dropdown displays photos in its template.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenExample ComponentName="DataGrid" Example="DataGridInLineEdit">
|
||||
<DataGridInLineEdit />
|
||||
</RadzenExample>
|
||||
|
||||
@@ -7,10 +7,6 @@
|
||||
The <code>LoadData</code> event allows you to perform custom paging, sorting and filtering.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
|
||||
In this demo the <strong>Job Title</strong> column uses a multi-select dropdown filter with <code>FilterTemplate</code>, and a <strong>Reset button</strong> clears all grid state including filters, sorts, and paging to return to the initial view.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenExample ComponentName="DataGrid" Example="DataGridLoadData">
|
||||
<DataGridLoadData />
|
||||
</RadzenExample>
|
||||
|
||||
@@ -7,10 +7,6 @@
|
||||
This page demonstrates how to use templates to create a Radzen Blazor DataGrid hierarchy and load data on demand.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
|
||||
In this demo <strong>Orders</strong> expand to show <strong>Order Details</strong> only when clicked, with <code>RowRender</code> making only <strong>France</strong> and <strong>Brazil</strong> orders expandable, and <code>RowExpand</code> event loading child data on-demand from the database for performance.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenExample ComponentName="DataGrid" Example="DataGridMasterDetailHierarchyOnDemand">
|
||||
<DataGridMasterDetailHierarchyOnDemand />
|
||||
</RadzenExample>
|
||||
|
||||
@@ -7,10 +7,6 @@
|
||||
This page demonstrates how to use templates to create a Radzen Blazor DataGrid hierarchy.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
|
||||
In this demo a 4-level hierarchy shows <strong>Customers</strong> → <strong>Orders</strong> (with tabs) → <strong>Order Details</strong> → <strong>Employee Territories</strong>. You can toggle <code>ExpandMode</code> between Single/Multiple and use buttons to expand/collapse all rows on the current page.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenExample ComponentName="DataGrid" Example="DataGridMasterDetailHierarchy">
|
||||
<DataGridMasterDetailHierarchy />
|
||||
</RadzenExample>
|
||||
|
||||
@@ -7,10 +7,6 @@
|
||||
This page demonstrates how to create a master/detail relationship between two Radzen Blazor DataGrid components.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
|
||||
In this demo the master <strong>Orders</strong> grid on the left shows selected order's customer company name above, while the detail panel on the right displays <strong>Order Details</strong> grid and <strong>Products</strong> data list in tabs, with the first order pre-selected.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenExample ComponentName="DataGrid" Example="DataGridMasterDetail">
|
||||
<DataGridMasterDetail/>
|
||||
</RadzenExample>
|
||||
|
||||
@@ -8,12 +8,6 @@
|
||||
Advanced filter modes cannot be mixed with simple filter modes.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
|
||||
In this demo <strong>OrderID</strong> column is using <code>Advanced</code> while rest columns will use <code>CheckBoxList</code> filter mode or
|
||||
<strong>CompanyName</strong> column is using <code>SimpleWithMenu</code> while rest columns will use <code>Simple</code> filter mode.
|
||||
</RadzenText>
|
||||
|
||||
|
||||
<RadzenExample ComponentName="DataGrid" Example="DataGridMixedAdvancedFilter">
|
||||
<DataGridMixedAdvancedFilter />
|
||||
</RadzenExample>
|
||||
|
||||
@@ -7,10 +7,6 @@
|
||||
Enable multiple row selection to let users select or deselect several items.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
|
||||
In this demo the grid features a header checkbox for <strong>select all/none</strong>, individual row checkboxes, a toggle to enable/disable <code>AllowRowSelectOnRowClick</code> for clicking anywhere on the row, and a <strong>Clear selected rows</strong> button.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenExample ComponentName="DataGrid" Example="DataGridMultipleSelection">
|
||||
<DataGridMultipleSelection />
|
||||
</RadzenExample>
|
||||
|
||||
@@ -7,10 +7,6 @@
|
||||
Hold a modifier key (or use UI affordances) to sort by more than one column.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
|
||||
In this demo the grid is pre-sorted by <strong>Birth Date (descending)</strong> then <strong>Last Name (ascending)</strong>, with <code>ShowMultiColumnSortingIndex="true"</code> displaying sort numbers next to column headers showing the sort sequence.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenExample ComponentName="DataGrid" Example="DataGridMultipleSort">
|
||||
<DataGridMultipleSort />
|
||||
</RadzenExample>
|
||||
|
||||
@@ -7,10 +7,6 @@
|
||||
Use the <code>LoadData</code> event to get data from a REST service.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
|
||||
In this demo the Employees are loaded from an OData service with the <strong>Title</strong> and <strong>Customers</strong> columns using multi-select dropdown filters with <code>FilterTemplate</code> to query related data from the server.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenExample ComponentName="DataGrid" Example="DataGridOData" Heading="false" AdditionalSourceCodePages="@(new [] {"/demos/Services/NorthwindODataService.cs"})" Documentation="false">
|
||||
<DataGridOData />
|
||||
</RadzenExample>
|
||||
|
||||
@@ -7,10 +7,6 @@
|
||||
Display tabular data with ease. Perform paging, sorting and filtering through Entity Framework without extra code.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
|
||||
In this demo the Employee grid binds to <code>IQueryable</code> with the <strong>ID, Photo, and First Name</strong> columns frozen on the left for easy reference while scrolling horizontally through the many data columns.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenExample ComponentName="DataGrid" Example="DataGridIQueryable">
|
||||
<DataGridIQueryable />
|
||||
</RadzenExample>
|
||||
|
||||
@@ -7,10 +7,6 @@
|
||||
Control pager behavior programmatically using the available API.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
|
||||
In this demo buttons call <code>FirstPage()</code>, <code>GoToPage(9)</code> for the 10th page, and <code>LastPage()</code>, with a checkbox to toggle <code>ShowPagingSummary</code> which uses a custom <code>PagingSummaryTemplate</code> displaying an icon and page information.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenExample ComponentName="DataGrid" Example="DataGridPagerApi">
|
||||
<DataGridPagerApi />
|
||||
</RadzenExample>
|
||||
|
||||
@@ -7,10 +7,6 @@
|
||||
Align the pager left, center, or right to match your layout.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
|
||||
In this demo a dropdown lets you choose between <strong>Left</strong>, <strong>Center</strong>, <strong>Right</strong>, and <strong>Justify</strong> horizontal alignments to see how the pager alignment changes, with the OrderDetails grid starting at <code>HorizontalAlign.Justify</code>.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenExample ComponentName="DataGrid" Example="DataGridPagerHorizontalAlign">
|
||||
<DataGridPagerHorizontalAlign />
|
||||
</RadzenExample>
|
||||
@@ -7,10 +7,6 @@
|
||||
Configure pager placement at the top, bottom, or both positions of the grid.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
|
||||
In this demo a dropdown lets you select between <strong>Top</strong>, <strong>Bottom</strong>, and <strong>TopAndBottom</strong> pager positions to see how the pager placement changes, with the OrderDetails grid starting at <code>PagerPosition.Bottom</code>.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenExample ComponentName="DataGrid" Example="DataGridPagerPosition">
|
||||
<DataGridPagerPosition />
|
||||
</RadzenExample>
|
||||
|
||||
@@ -7,10 +7,6 @@
|
||||
This demo shows the DataGrid can handle large amounts of data (~50,000 rows) without any performance issues.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
|
||||
In this demo a custom <code>OrderAndDetail</code> class combines data from Orders, OrderDetails, and Employees tables using LINQ joins, with <code>IsLoading</code> flag set during Sort/Page/Group/Filter events to display loading state for performance monitoring.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenExample ComponentName="DataGrid" Example="DataGridPerformance">
|
||||
<DataGridPerformance />
|
||||
</RadzenExample>
|
||||
|
||||
@@ -7,10 +7,6 @@
|
||||
Sometimes your DataGrid should be updated real-time. This demo shows how to implement such a scenario.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
|
||||
In this demo columns are dynamically generated from a dictionary, data regenerates every second using a <code>System.Timers.Timer</code>, and the grid displays <strong>ID</strong> (Guid) and <strong>Date</strong> (DateTime) with new random values on each refresh.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenExample ComponentName="DataGrid" Example="DataGridRealtimeData">
|
||||
<DataGridRealtimeData />
|
||||
</RadzenExample>
|
||||
@@ -7,10 +7,6 @@
|
||||
Use <code>RowRender</code> event to add custom logic for drag and drop rows between two DataGrid components.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
|
||||
In this demo two side-by-side <strong>Employee</strong> grids (source starts with all employees, target starts empty) use <code>RowRender</code> with drag events and <code>ObservableCollection</code> to move employees between grids by dragging rows across boundaries.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenExample ComponentName="DataGrid" Example="DataGridRowDragBetween">
|
||||
<DataGridRowDragBetween />
|
||||
</RadzenExample>
|
||||
|
||||
@@ -7,10 +7,6 @@
|
||||
Use DataGrid <code>RowRender</code> event and Scheduler <code>SlotRender</code> event to add custom logic for drag and drop rows from DataGrid to Scheduler.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
|
||||
In this demo drag <strong>Dinner</strong> or <strong>Lunch</strong> appointments from the DataGrid on the left and drop them onto the <strong>Scheduler</strong> time slots on the right, with visual feedback (<code>my-class</code> background color) and drag/drop events logged to the console.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenExample ComponentName="DataGrid" Example="DataGridRowDragScheduler">
|
||||
<DataGridRowDragScheduler />
|
||||
</RadzenExample>
|
||||
|
||||
@@ -7,10 +7,6 @@
|
||||
Use <code>RowRender</code> event to add custom logic for drag and drop rows to reorder.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
|
||||
In this demo <code>RowRender</code> adds HTML5 drag-and-drop attributes (<code>draggable</code>, <code>ondragstart</code>, <code>ondrop</code>, etc.) to rows, using an <code>ObservableCollection</code> to reorder employees with visual border feedback via the <code>my-class</code> CSS style.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenExample ComponentName="DataGrid" Example="DataGridRowReorder">
|
||||
<DataGridRowReorder />
|
||||
</RadzenExample>
|
||||
|
||||
@@ -7,10 +7,6 @@
|
||||
Persist and reload grid settings (columns, sort, filters) with server-side data binding.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
|
||||
In this demo settings are saved to localStorage with <code>LoadData</code> binding, the <code>LoadSettings</code> event restores state on initialization, <strong>Order ship city</strong> and <strong>ShipPostalCode</strong> columns filter on nested Orders collections, and LoadData events are logged to the console with a 2-second simulated delay.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenExample ComponentName="DataGrid" Example="DataGridSaveSettingsLoadData">
|
||||
<DataGridSaveSettingsLoadData />
|
||||
</RadzenExample>
|
||||
|
||||
@@ -7,10 +7,6 @@
|
||||
Persist user preferences like column order, widths, sort, and filters between sessions.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
|
||||
In this demo the grid uses <code>bind-Settings</code> to save all state (page index, size, groups, filters, sorts, column order/width/visibility) to browser <code>localStorage</code>, with buttons to clear saved settings or reload the page to demonstrate persistence across sessions.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenExample ComponentName="DataGrid" Example="DataGridSaveSettings">
|
||||
<DataGridSaveSettings />
|
||||
</RadzenExample>
|
||||
|
||||
@@ -7,10 +7,6 @@
|
||||
Display hierarchical data where items reference their parent within the same collection.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
|
||||
In this demo the <strong>Employees</strong> hierarchy shows managers and their reports using <code>LoadChildData</code> event, starting with top-level employees (<code>ReportsTo == null</code>), with the first employee pre-expanded and filters automatically cleared on row collapse.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenExample ComponentName="DataGrid" Example="DataGridSelfReferenceHierarchy">
|
||||
<DataGridSelfReferenceHierarchy />
|
||||
</RadzenExample>
|
||||
|
||||
@@ -7,10 +7,6 @@
|
||||
Enable simplified filtering UI for quick, user-friendly filtering.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
|
||||
In this demo you can toggle between <strong>And/Or</strong> logical operators and <strong>case-sensitive/insensitive</strong> filtering to see how these settings affect the inline text filters in column headers.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenExample ComponentName="DataGrid" Example="DataGridSimpleFilter">
|
||||
<DataGridSimpleFilter />
|
||||
</RadzenExample>
|
||||
|
||||
@@ -7,10 +7,6 @@
|
||||
Combine simple filtering with a dropdown menu for operator selection.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
|
||||
In this demo the Orders grid displays employees with photos in the template, and filter menus allow choosing operators (contains, equals, etc.) with options to configure case sensitivity and logical operators.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenExample ComponentName="DataGrid" Example="DataGridSimpleFilterWithMenu">
|
||||
<DataGridSimpleFilterWithMenu />
|
||||
</RadzenExample>
|
||||
|
||||
@@ -7,10 +7,6 @@
|
||||
Allow one row to be selected at a time for focused interactions.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
|
||||
In this demo the first employee is pre-selected on load, the selected employee's name is displayed above the grid, and a <strong>Clear Selection</strong> button resets the selection binding to null.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenExample ComponentName="DataGrid" Example="DataGridSingleSelection">
|
||||
<DataGridSingleSelection />
|
||||
</RadzenExample>
|
||||
|
||||
@@ -7,10 +7,6 @@
|
||||
Set the initial sort order of your RadzenDataGrid via the <code>SortOrder</code> column property.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
|
||||
In this demo <strong>First Name</strong> has <code>SortOrder="SortOrder.Descending"</code> applied on load, and a checkbox toggles <code>GotoFirstPageOnSort</code> to control whether sorting resets to page 1 or stays on the current page.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenExample ComponentName="DataGrid" Example="DataGridSortApi">
|
||||
<DataGridSortApi />
|
||||
</RadzenExample>
|
||||
|
||||
@@ -7,10 +7,6 @@
|
||||
Click column headers to sort ascending/descending. Use multi-column sort if enabled.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
|
||||
In this demo the DataGrid shows the three-state sort cycle: click once for ascending, twice for descending, and three times to clear sorting and return to the original order.
|
||||
</RadzenText>
|
||||
|
||||
<RadzenExample ComponentName="DataGrid" Example="DataGridSort">
|
||||
<DataGridSort />
|
||||
</RadzenExample>
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user