From 4391d920417dae44d6429473387ea9cf963ce4fa Mon Sep 17 00:00:00 2001 From: Gayathri4135 Date: Thu, 10 Sep 2026 13:21:11 +0530 Subject: [PATCH 1/3] Task(1053361) -Create the Overview page for Blazor component --- blazor-toc.html | 12 ++ blazor/chart/overview.md | 162 +++++++++++++++++++++ blazor/maps/overview.md | 194 ++++++++++++++++++++++++++ blazor/stock-chart/overview.md | 139 ++++++++++++++++++ blazor/treegrid/overview.md | 248 +++++++++++++++++++++++++++++++++ 5 files changed, 755 insertions(+) create mode 100644 blazor/chart/overview.md create mode 100644 blazor/maps/overview.md create mode 100644 blazor/stock-chart/overview.md create mode 100644 blazor/treegrid/overview.md diff --git a/blazor-toc.html b/blazor-toc.html index b8b96281f1..072191bba2 100644 --- a/blazor-toc.html +++ b/blazor-toc.html @@ -940,6 +940,9 @@ +
  • + Overview +
  • Data Binding
  • Custom Binding
  • GraphQL Adaptor
    • @@ -1073,6 +1076,9 @@ +
  • + Overview +
  • Working with Data
    • @@ -1758,6 +1764,9 @@ +
  • + Overview +
  • Populate Data
  • Shapefile
  • Layers
    • @@ -1863,6 +1872,9 @@
  • Blazor WASM App
    • +
  • + Overview +
  • Working with Data
  • Stock Chart Dimensions
  • Axis Types
    • diff --git a/blazor/chart/overview.md b/blazor/chart/overview.md new file mode 100644 index 0000000000..2c2133904e --- /dev/null +++ b/blazor/chart/overview.md @@ -0,0 +1,162 @@ +--- +layout: post +title: Blazor Charts Overview and Features | Syncfusion +description: Learn how to use Blazor Charts for data visualization with 50+ chart types, axes, data binding, legends, tooltips, zooming, and technical indicators. +platform: Blazor +control: Charts +documentation: ug +--- + +# Overview in Blazor Charts + +## Introduction to Syncfusion Blazor Charts + +The [Blazor Charts]((https://www.syncfusion.com/blazor-components/blazor-charts)) is a powerful and feature-rich UI component designed for visualizing business and analytical data with high performance and flexibility. It offers a comprehensive set of enterprise-grade capabilities, including 50+ chart types ranging from line and area to financial candle and box-and-whisker charts, multiple axis support, data-driven visual elements, and seamless integration with local and remote data sources. Built for scalability, it enables developers to create responsive, data-intensive dashboards and reports with ease. + +## Common use cases + +The Blazor Charts is ideal for a wide range of business scenarios: + +| Use Case | Description | Key Features | +|----------|-------------|--------------| +| **Sales & Revenue Dashboards** | Compare revenue across products, regions, and time periods | Combination Charts, Multiple Axis, Data Labels | +| **Financial Analysis** | Track stock prices, volatility, and trading signals | Candle, Hilo, Technical Indicators | +| **Trend Analysis** | Visualize performance trends and forecasts over time | Line, Spline, Trendlines | +| **Statistical Reporting** | Display distributions, quartiles, and outliers | Histogram, Box and Whisker, Error Bar | +| **Comparative Analysis** | Contrast categories and stacked contributions | Column, Bar, Stacking, 100% Stacking | +| **Live Monitoring** | Update charts in real time from streaming data | Live Chart, Data Editing, Events | + +## Data connectivity + +The Blazor Charts enables multiple data binding approaches, offering flexibility in choosing the right strategy for different application architectures. The chart can work with in-memory collections, connect to remote services, or leverage ORM frameworks for seamless database integration. + +**Data Binding Approaches** + +- **[List binding](./working-with-data#list-binding)** — Bind charts to local collections, lists, and arrays for fast data access without external dependencies. Ideal for small to medium datasets and rapid prototyping. +- **[Remote data](./working-with-data#remote-data)** — Connect to **web services, REST APIs**, and remote endpoints using DataManager adaptors for scalable applications. +- **[Entity Framework](./working-with-data#entity-framework)** — Bind directly to EF Core DbContext query results for simplified database model binding. + +## Chart types + +The Blazor Charts supports 50+ chart types for virtually every visualization requirement. Each type supports markers, data labels, tooltips, legends, and empty-point handling: + +| Category | Available Types | Best For | +|----------|----------------|----------| +| **Line & Spline** | [Line](./chart-types/line), [Step Line](./chart-types/step-line), [Stacked Line](./chart-types/stacked-line), [100% Stacked Line](./chart-types/stack-line), [Spline](./chart-types/spline) | Continuous trends over time | +| **Area** | [Area](./chart-types/area), [Range Area](./chart-types/range-area), [Range Step Area](./chart-types/range-step-area), [Spline Range Area](./chart-types/spline-range-area), [Stacked Area](./chart-types/stacked-area), [100% Stacked Area](./chart-types/stack-area), [Step Area](./chart-types/step-area), [Spline Area](./chart-types/spline-area) | Volume comparison beneath a line | +| **Column & Bar** | [Column](./chart-types/column), [Range Column](./chart-types/range-column), [Stacked Column](./chart-types/stacked-column), [100% Stacked Column](./chart-types/stack-column), [Bar](./chart-types/bar), [Stacked Bar](./chart-types/stacked-bar), [100% Stacked Bar](./chart-types/stack-bar) | Category magnitude comparison | +| **Distribution & Statistical** | [Scatter](./chart-types/scatter), [Bubble](./chart-types/bubble), [Histogram](./chart-types/histogram), [Box and Whisker](./chart-types/box-whisker), [Error Bar](./chart-types/error-bar), [Waterfall](./chart-types/waterfall), [Pareto](./chart-types/pare-to) | Statistical analysis and contribution | +| **Polar & Radar** | [Polar](./chart-types/polar), [Radar](./chart-types/radar) | Multivariate comparison | +| **Financial** | [Candle](./chart-types/candle), [Hilo](./chart-types/high-low), [High Low Open Close](./chart-types/high-low-open-close) | Stock and market data | +| **Mixed Charts** | [Mixed Chart](./chart-series) | Combining incompatible chart types in one plot | + +## Axes + +The Blazor Charts offers extensive axis options for precisely mapping data to the plot area: + +| Feature | Purpose | Key Benefit | +|---------|---------|-------------| +| **[Category Axis](./category-axis)** | Plot data against provided labels | Simple category comparison | +| **[Numeric Axis](./numeric-axis)** | Plot numeric data with range control | Continuous numeric scales | +| **[DateTime Axis](./date-time-axis)** | Plot date-time values with interval types | Time-series visualization | +| **[Logarithmic Axis](./logarithmic-axis)** | Plot values across exponential ranges | Wide-range scientific data | +| **[Axis Labels](./axis-labels)** | Style and rotate axis labels, handle label intersect | Readable tick labels | +| **[Axis Customization](./axis-customization)** | Axis crossing, titles, tick and grid lines, inversed axis | Precise axis control | +| **[Multiple Axis](./axis-customization#multiple-axis)** | Add multiple axes to one chart | Multi-unit comparison | +| **[Strip Lines](./strip-line)** | Highlight ranges or bands of interest on the axis | Threshold visualization | +| **[Multiple Panes](./multiple-panes)** | Divide the chart into stacked panes | Compact multi-series layouts | + +## Data visualization elements + +The Blazor Charts provides comprehensive elements for annotating and enhancing data points: + +| Feature | Purpose | Key Benefit | +|---------|---------|-------------| +| **[Data Labels](./data-labels)** | Display values on data points with position and format control | Direct value visibility | +| **[Data Label Template](./data-label-template)** | Use custom Blazor templates for data labels | Fully customized labels | +| **[Data Markers](./data-markers)** | Highlight data points with shapes and images | Point identification | +| **[Legend](./legend#enable-legend)** | Explain series and point colors with position control | Series differentiation | +| **[Tooltip](./tool-tip#enable-tooltip)** | Show point details on hover with template support | On-demand information | +| **[Chart Annotations](./chart-annotations)** | Place custom HTML content anywhere in the chart | In-plot contextual content | +| **[Gradient](./gradient)** | Apply linear and radial gradient color fills | Modern visual polish | +| **[Chart Appearance](./chart-appearance)** | Configure titles, margins, background, and themes | Complete visual control | + +## User experience & interaction + +The Blazor Charts provides a comprehensive, interactive user experience with extensive customization options, flexible interaction modes, and accessibility standards compliance: + +| Feature | Purpose | Key Benefit | +|---------|---------|-------------| +| **[Zooming](./zooming#enable-zooming)** | Zoom by pinch, mouse wheel, selection, or toolbar | Precise data inspection | +| **[Crosshair and Trackball](./cross-hair-and-track-ball)** | Track exact values along the axes | Value inspection without clutter | +| **[Selection](./selection)** | Select points, series, or clusters for user actions | Interactive point-level workflows | +| **[Data Editing](./data-editing)** | Drag data points to update underlying values | Interactive what-if scenarios | +| **[Data Sorting](./chart-sorting)** | Sort data points by value or label | Ordered presentation | +| **[Adaptive Layout](./adaptive-layout)** | Automatically arrange elements for any size | Optimal display across devices | + +## Advanced analytics + +The Blazor Charts includes sophisticated capabilities designed for complex financial and analytical scenarios: + +| Feature | Purpose | Key Benefit | +|---------|---------|-------------| +| **[Technical Indicators](./technical-indicators)** | Overlay indicators such as Bollinger Bands, RSI, MACD, and SMA on the chart | Informed trading analysis | +| **[Trendlines](./trend-lines)** | Project linear, exponential, and other trend lines onto series | Forecast direction analysis | + +## Print & export + +The Blazor Charts provides comprehensive output capabilities for reporting and sharing chart visuals: + +| Feature | Purpose | Key Benefit | +|---------|---------|-------------| +| **[Print](./chart-print#print)** | Print the chart with page setup options | On-demand physical output | +| **[Export](./chart-print#export)** | Export the chart to PDF, PNG, JPEG, and SVG | Professional document integration | +| **[Exporting event customization](./chart-print#customizing-the-exported-chart-using-exporting-event)** | Customize the exported chart using the Exporting event | Branded export output | + +## Globalization & accessibility + +The Blazor Charts is fully accessible and compliant with Web Content Accessibility Guidelines (WCAG) standards: + +- **[Globalization](./internationalization#globalization)** — Culture-aware number and date formatting +- **[Localization](./localization)** — Translate the chart UI into different languages +- **[WAI-ARIA attributes](./accessibility#wai-aria-attributes)** — Accessible roles and attributes for the chart UI +- **[Keyboard navigation](./accessibility#keyboard-navigation)** — Complete chart operation via keyboard +- **[Ensuring accessibility](./accessibility#ensuring-accessibility)** — Validation guidance for accessible charts +- **[Advanced Accessibility Configuration](./advanced-accessibility-configuration)** — Deeper accessibility customization options + +## System requirements + +The Blazor Charts works with: + +- **Blazor Version**: .NET 8.0 or higher +- **Hosting Models**: Blazor Server, Blazor WebAssembly, Blazor Web App +- **Browsers**: Chrome, Firefox, Safari, Edge (latest versions) +- **Mobile**: iOS Safari, Android Chrome + +## Quick links + +**Getting Started:** +- [Blazor Web App Guide](./getting-started-with-web-app) +- [Blazor WebAssembly Guide](./getting-started-wasm) +- [Blazor Server App Guide](./getting-started) +- [Blazor Hybrid MAUI App Guide](./getting-started-with-maui-app) + +**Popular Features:** +- [Chart Types](./chart-types/line) — 50+ chart types for any scenario +- [Data Labels](./data-labels) — Value display with templates +- [Legend](./legend) — Series explanation and interactivity +- [Tooltip](./tool-tip) — Rich point information on hover +- [Zooming](./zooming) — Interactive data inspection +- [Print and Export](./chart-print) — PDF, image, and print output + +**Resources:** +- [Live Chart Demos](https://blazor.syncfusion.com/demos/chart/overview?theme=fluent2) +- [Blazor Charts Blog Posts](https://www.syncfusion.com/blogs/category/blazor) + +## Support & Resources + +- **Questions?** Visit the [Syncfusion Support Portal](https://www.syncfusion.com/support) +- **Code Examples?** Browse [Charts Demos](https://www.syncfusion.com/blazor-components/blazor-charts) and samples +- **API Details?** See [Charts API Reference](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfChart.html) +- **Community?** Join the [Syncfusion Community Forum](https://www.syncfusion.com/forums/blazor-components) +- **What's New?** Check [Release Notes](../Release-Notes) diff --git a/blazor/maps/overview.md b/blazor/maps/overview.md new file mode 100644 index 0000000000..9abdd877d9 --- /dev/null +++ b/blazor/maps/overview.md @@ -0,0 +1,194 @@ +--- +layout: post +title: Blazor Maps Overview and Features | Syncfusion +description: Learn how to use Blazor Maps to visualize geographical data with shape and bubble layers, color mapping, markers, legends, zooming, and online map providers. +platform: Blazor +control: Maps +documentation: ug +--- + +# Overview in Blazor Maps + +## Introduction to Syncfusion Blazor Maps + +The [Blazor Maps]((https://www.syncfusion.com/blazor-components/blazor-maps)) is a powerful and feature-rich UI component designed for visualizing geographical data in an interactive and customizable map view. It offers a comprehensive set of enterprise-grade capabilities, including shape (geometry) rendering from GeoJSON, data-driven color mapping, bubbles, markers, and legends, along with seamless integration of online map providers. Built for scalability, it enables developers to create responsive, location-aware applications for business scenarios such as demographic analysis, sales dashboards, logistics tracking, and weather monitoring. + +## Common use cases + +The Blazor Maps is ideal for a wide range of business scenarios: + +| Use Case | Description | Key Features | +|----------|-------------|--------------| +| **Demographic & Sales Analysis** | Visualize population, revenue, or performance figures per country or region | Color Mapping, Legend, Tooltip | +| **Election Results** | Display winning parties or voting percentages across constituencies | Color Mapping, Data Labels, Annotations | +| **Logistics & Fleet Tracking** | Show distribution routes, warehouses, and vehicle locations | Markers, Navigation Lines, Zooming | +| **Weather & Environment** | Render temperature, rainfall, or pollution levels as proportional bubbles | Bubble, Color Mapping, Legend | +| **Field Service & Branch Locator** | Help users find offices, stores, or service centers near them | Markers, Marker Clustering, Selection | +| **Travel & Tourism** | Highlight destinations, attractions, and planned itineraries | Markers, Navigation Lines, Annotations | + +## Data sources & connectivity + +The Blazor Maps enables multiple ways to load and bind geographical and business data, offering flexibility in choosing the right strategy for different application architectures. The Maps can render shapes from GeoJSON or shapefile data, bind business data to those shapes, or display online tile maps from popular providers. + +**Shape Data** + +- **[Populate Data](./populate-data)** — Load GeoJSON shape data and bind business data to shapes using `ShapeDataPath` and `ShapePropertyPath` for automatic matching. +- **[Geometry types](./populate-data#geometry-types)** — Render `Geometry` (polygon) and `LineString` (line) shapes in the same or separate layers. +- **[Fetching data from JSON file](./populate-data#fetching-data-from-json-file)** — Load map data from local or remote JSON files in Blazor Server and WebAssembly apps. +- **[Shapefile](./shapefile)** — Convert ESRI shapefiles to GeoJSON for rendering static geographic boundaries. + +**Layer Types** + +| Layer Type | Purpose | Key Benefit | +|------------|---------|-------------| +| **[Shape Layer](./layers)** | Render geographic boundaries from GeoJSON data | Data-driven thematic maps | +| **[Tile / Provider Layer](./providers/openstreetmap)** | Display online tile maps from map providers | Real-world street and satellite imagery | +| **[Bing Maps](./providers/bing-maps) / [Google Maps](./providers/google-maps) tiles** | Integrate commercial provider tiles | Familiar, detailed map imagery | +| **[Other Maps](./providers/other-maps)** | Load tile maps from other online providers such as TomTom and MapBox | Provider flexibility | + +**Layer Organization** + +| Feature | Purpose | Key Benefit | +|---------|---------|-------------| +| **[Multilayer](./layers#multilayer)** | Render multiple geographic layers on top of each other | Subcontinent plus country-level views | +| **[Sublayer](./layers#sublayer)** | Layer a detailed shape inside a base shape layer | Drill-down visualization | +| **[Displaying different layer in the view](./layers#displaying-different-layer-in-the-view)** | Switch between layers on zoom level | Progressive disclosure of detail | +| **[Rendering custom shapes](./layers#rendering-custom-shapes)** | Render building, stadium, or indoor layouts as geometries | Floor plans and custom boundaries | + +**Online Map Providers** + +| Provider | Key Benefit | Best For | +|----------|--------------|----------| +| **[OpenStreetMap](./providers/openstreetmap)** | Free, community-maintained world map | General-purpose mapping | +| **[Google Maps](./providers/google-maps)** | High-quality street and satellite tiles | Consumer-facing applications | +| **[Azure Maps](./providers/azure-maps)** | Enterprise-grade geospatial services | Azure-based enterprise apps | +| **[Bing Maps](./providers/bing-maps)** | Reliable tile imagery with key-based access | Legacy and enterprise integrations | +| **[Other Maps](./providers/other-maps)** | Support for other tile providers | Specialized imagery requirements | + +## Shape & data visualization + +The Blazor Maps provides comprehensive data visualization capabilities that enable users to analyze, organize, and understand their geographical data efficiently: + +**Color Mapping** + +| Feature | Purpose | Key Benefit | +|---------|---------|-------------| +| **[Range Color Mapping](./color-mapping#range-color-mapping)** | Color shapes by value ranges such as population density | Intuitive thematic gradients | +| **[Equal Color Mapping](./color-mapping#equal-color-mapping)** | Assign a unique color per equal value such as winner party | Categorical comparisons | +| **[Desaturation Color Mapping](./color-mapping#desaturation-color-mapping)** | Vary color intensity by value | Subtle value emphasis | +| **[Multiple colors for a single shape](./color-mapping#multiple-colors-for-a-single-shape)** | Split a shape among multiple colors | Coalition or split-level data | + +**Data Elements** + +| Feature | Purpose | Key Benefit | +|---------|---------|-------------| +| **[Data Labels](./data-labels)** | Display shape names and values on the map | In-context information | +| **[Bubble](./bubble)** | Render proportional circles sized by underlying values | Comparative magnitude analysis | +| **[Legend](./legend)** | Explain shape, bubble, and marker color categories | Quick value decoding | +| **[Interactive Legend](./legend#interactive-mode)** | Toggle data ranges visibility by legend interaction | User-controlled filtering | + +**Markers & Overlays** + +| Feature | Purpose | Key Benefit | +|---------|---------|-------------| +| **[Adding marker](./markers#adding-marker)** | Pin locations by latitude and longitude | Location identification | +| **[Adding marker template](./markers#adding-marker-template)** | Use custom Blazor templates for markers | Fully customizable point visuals | +| **[Multiple marker groups](./markers#multiple-marker-groups)** | Categorize markers into distinct groups | Layered location categories | +| **[Marker clustering](./markers#marker-clustering)** | Group nearby markers into clusters at lower zoom levels | Readable dense point data | +| **[Reposition markers using drag and drop](./markers#repositioning-the-marker-using-drag-and-drop)** | Drag markers to adjust positions | Interactive editing | +| **[Tooltip for marker](./markers#tooltip-for-marker)** | Show details on marker hover | On-demand information | +| **[Polygon](./polygon)** | Draw multi-point shapes such as service areas on the map | Custom region overlay | +| **[Navigation Lines](./navigation-line)** | Connect locations with straight or curved direction lines | Route visualization | +| **[Annotations](./annotations)** | Place custom HTML content at coordinates or pixel positions | Rich in-map content | + +## Appearance & customization + +The Blazor Maps offers extensive layout and styling options for creating professional, on-brand map views: + +| Feature | Purpose | Key Benefit | +|---------|---------|-------------| +| **[Setting the size for Maps](./customization#setting-the-size-for-maps)** | Control map width and height | Predictable layout integration | +| **[Maps title](./customization#maps-title)** | Add and style a descriptive map title | Contextual storytelling | +| **[Setting theme](./customization#setting-theme)** | Apply built-in themes such as Material or Fluent | Consistent app theming | +| **[Customizing the shapes](./customization#customizing-the-shapes)** | Style shape fill, border, and dash arrays | Editorial control over geometry | +| **[Setting color to the shapes from the data source](./customization#setting-color-to-the-shapes-from-the-data-source)** | Drive shape colors from bound data values | Data-driven styling | +| **[Projection type](./customization#projection-type)** | Switch between Mercator, Equirectangular, and other projections | Accurate geospatial representation | + +## User experience & interaction + +The Blazor Maps provides a comprehensive, interactive user experience with zooming, selection, highlighting, and tooltip capabilities that make geographical exploration intuitive: + +| Feature | Purpose | Key Benefit | +|---------|---------|-------------| +| **[Zooming](./user-interactions#zooming)** | Zoom by toolbar, pinch, mouse wheel, double-click, or selection | Precise region focus | +| **[Selection](./user-interactions#selection)** | Select shapes, markers, bubbles, or polygons | Region-level user actions | +| **[Highlight](./user-interactions#highlight)** | Emphasize shapes, markers, bubbles, or polygons on hover | Visual feedback | +| **[Tooltip](./user-interactions#tooltip)** | Show additional details on shape or bubble hover | On-demand information without clutter | + +## Print & export + +The Blazor Maps provides output capabilities for reporting and sharing analytical map views: + +| Feature | Purpose | Key Benefit | +|---------|---------|-------------| +| **[Print](./print-and-export#print)** | Print the map with page orientation options | On-demand physical output | +| **[Image Export](./print-and-export#image-export)** | Export the map as PNG, JPEG, or SVG images | Slide decks and documentation | +| **[PDF Export](./print-and-export#pdf-export)** | Export the map as a PDF document | Professional reporting | + +## Advanced features + +The Blazor Maps includes sophisticated capabilities designed for complex enterprise scenarios. These advanced features help you persist state, respond to interactions, and serve maps under strict security policies. + +| Feature | Purpose | Use Case | Key Benefit | +|---------|---------|----------|-------------| +| **[State Persistence](./state-persistence)** | Save and restore the map state across sessions | Zoom, center, and selection retention | Personalized user experience | +| **[Globalization](./internationalization#globalization)** | Format data values using different cultures | Multi-region applications | Localized number and date display | +| **[Localization](./localization)** | Translate the UI into different languages | Global user bases | Native-language experience | +| **[Events](./maps-event)** | Handle rendering, interaction, and completion events | Custom workflows and integrations | Deep integration points | +| **[Methods](./maps-method)** | Programmatically zoom, pan, select, and export | Dynamic, code-driven control | Automation-friendly API | +| **[Content Security Policy](./content-security-policy)** | Configure CSP rules for tile and GeoJSON requests | Security-restricted environments | Compliant enterprise deployment | + +**Accessibility** + +The Blazor Maps is fully accessible and compliant with Web Content Accessibility Guidelines (WCAG) standards: + +- **[WAI-ARIA attributes](./accessibility#wai-aria-attributes)** — Accessible roles and attributes for the Maps UI +- **[Screen reading in Maps](./accessibility#screen-reading-in-maps)** — Full compatibility with assistive technologies +- **[Keyboard Navigation](./accessibility#keyboard-navigation)** — Complete map operation via keyboard + - Tab / Shift+Tab — Navigate between map areas + - Arrow Keys — Drag/pan the map in four directions + - Plus (+) and Minus (-) — Zoom in and zoom out +- **[Ensuring accessibility](./accessibility#ensuring-accessibility)** — Validation guidance for accessible maps + +## System requirements + +The Blazor Maps works with: + +- **Blazor Version**: .NET 8.0 or higher +- **Hosting Models**: Blazor Server, Blazor WebAssembly, Blazor Web App +- **Browsers**: Chrome, Firefox, Safari, Edge (latest versions) +- **Mobile**: iOS Safari, Android Chrome + +## Quick links + +**Getting Started:** +- [Blazor Web App Guide](./getting-started-webapp) +- [Blazor WebAssembly Guide](./getting-started) +- [Blazor Server App Guide](./getting-started-with-server-app) +- [Blazor Hybrid MAUI App Guide](./getting-started-with-maui-app) + +**Popular Features:** +- [Color Mapping](./color-mapping) — Thematic shape coloring by value +- [Bubble](./bubble) — Proportional symbol visualization +- [Markers](./markers) — Location visualization and clustering +- [Layers](./layers) — Multilayer and sublayer rendering +- [User Interactions](./user-interactions) — Zooming, selection, highlight, and tooltip +- [Print and Export](./print-and-export) — Print, image, and PDF output + +## Support & Resources + +- **Questions?** Visit the [Syncfusion Support Portal](https://www.syncfusion.com/support) +- **Code Examples?** Browse [Maps Demos](https://www.syncfusion.com/blazor-components/blazor-maps) and samples +- **API Details?** See [Maps API Reference](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html) +- **Community?** Join the [Syncfusion Community Forum](https://www.syncfusion.com/forums/blazor-components) +- **What's New?** Check [Release Notes](../Release-Notes) diff --git a/blazor/stock-chart/overview.md b/blazor/stock-chart/overview.md new file mode 100644 index 0000000000..053755fa9d --- /dev/null +++ b/blazor/stock-chart/overview.md @@ -0,0 +1,139 @@ +--- +layout: post +title: Blazor Stock Chart Overview and Features | Syncfusion +description: Learn how to use Blazor Stock Chart for financial data visualization with candle and hilo series, period selector, range selector, technical indicators, and stock events. +platform: Blazor +control: Stock Chart +documentation: ug +--- + +# Overview in Blazor Stock Chart + +## Introduction to Syncfusion Blazor Stock Chart + +The [Blazor Stock Chart]((https://www.syncfusion.com/blazor-components/blazor-stock-chart)) is a powerful and feature-rich UI component designed for visualizing stock market and financial time-series data with high performance and flexibility. It offers a comprehensive set of enterprise-grade capabilities, including candle, hilo, and OHLC financial series types, a built-in period selector and range selector for quick time-span navigation, technical indicators, and annotation of market-moving events. Built for scalability, it enables developers to create responsive, data-intensive financial dashboards for stock trading, portfolio tracking, and market analysis applications. + +## Common use cases + +The Blazor Stock Chart is ideal for a wide range of business scenarios: + +| Use Case | Description | Key Features | +|----------|-------------|--------------| +| **Stock Price Tracking** | Track daily, weekly, and monthly open, high, low, and close prices | Candle Series, Period Selector, Zooming | +| **Trading Analysis** | Identify trends, momentum, and reversal signals on price charts | Technical Indicators, Trendlines, Crosshair | +| **Market Event Annotation** | Mark earnings, splits, and dividend dates on the timeline | Stock Events | +| **Portfolio Dashboards** | Compare multiple instruments in compact, stacked views | Series Types, Legend, Gradient | +| **Historical Research** | Explore long price histories by selecting ranges interactively | Range Selector, Panning, Zooming | +| **Reporting & Sharing** | Export chart views into documents and presentations | Export, Print | + +## Data connectivity + +The Blazor Stock Chart enables multiple data binding approaches, offering flexibility in choosing the right strategy for different application architectures. The stock chart can work with in-memory collections, connect to remote services, or leverage ORM frameworks for seamless database integration. + +**Data Binding Approaches** + +- **[List binding](./working-with-data#list-binding)** — Bind charts to local collections of OHLC (open, high, low, close) records for fast data access without external dependencies. Ideal for small to medium datasets and rapid prototyping. +- **[Remote Data](./working-with-data#remote-data)** — Connect to **web services, REST APIs**, and remote endpoints using DataManager adaptors for scalable applications. +- **[Observable collection](./working-with-data#observable-collection)** — Automatically reflect added and removed data points without manual refresh. +- **[Entity Framework](./working-with-data#entity-framework)** — Bind directly to EF Core DbContext query results for simplified database model binding. +- **[Handling No Data](./working-with-data#handling-no-data)** — Display a meaningful message when the data source is empty. + +## Series types + +The Stock Chart supports six financial series types, switchable at runtime through the built-in series selector: + +| Series Type | Description | Best For | +|------------|-------------|----------| +| **Candle** | Open and close prices as a filled body with high-low wicks | Traditional price action reading | +| **[Hollow Candle](./series-types)** | Candle variant where bullish candles render hollow | Highlighting upward momentum | +| **[Hilo](./series-types)** | High-low bars without open and close detail | Minimal, compact price view | +| **[HiloOpenClose](./series-types)** | High-low bars with open and close tick marks | OHLC detail with compact body | +| **[Line](./series-types)** | Close prices connected by line segments | Clear closing trend | +| **[Spline](./series-types)** | Close prices connected by smooth curves | Smoothed trend visualization | + +## Axes & navigation + +The Blazor Stock Chart offers specialized axes and built-in navigation elements tailored for financial time-series exploration: + +| Feature | Purpose | Key Benefit | +|---------|---------|-------------| +| **[DateTime Axis](./axis-types#datetime-axis)** | Plot date-time values with interval types | Time-series visualization | +| **[DateTimeCategory Axis](./axis-types#datetimecategory-axis)** | Plot date-time values without interval breaks such as non-trading days | Gap-free trading calendars | +| **[Logarithmic Axis](./axis-types#logarithmic-axis)** | Plot values across exponential ranges | Wide-range price movements | +| **[Axis Customization](./axis-customization)** | Style axis labels, grid lines, and crossing behavior | Precise axis control | +| **[Period Selector](./period-selector#periods)** | Predefined time-span buttons such as 1M, 3M, and 1Y | One-click time navigation | +| **[Range Selector](./range-selector#selecting-range)** | Drag handles on a mini overview chart to select the visible range | Precise interactive range control | +| **[Zooming](./zooming#enable-zooming)** | Zoom by pinch, mouse wheel, selection, or toolbar | Precise data inspection | +| **[Panning](./panning)** | Drag the visible range across the timeline after zooming | Smooth timeline navigation | + +## Data visualization elements + +The Blazor Stock Chart provides comprehensive elements for annotating and enhancing financial charts: + +| Feature | Purpose | Key Benefit | +|---------|---------|-------------| +| **[Tooltip](./tool-tip#default-tooltip)** | Show OHLC details on hover with format support | On-demand price information | +| **[Crosshair](./cross-hair)** | Track exact values along the axes with axis tooltips | Value inspection without clutter | +| **[Last Data Label](./last-data-label)** | Highlight the most recent data point of each series | Latest price visibility | +| **[Legend](./legend#enable-legend)** | Explain series colors with position and alignment options | Series differentiation | +| **[Stock Events](./stock-events)** | Annotate earnings, splits, and market news on the timeline | Market context markers | +| **[Appearance](./appearance)** | Configure titles, margins, background, and themes | Complete visual control | +| **[Gradient](./gradient#linear-gradient)** | Apply gradient color fills to series | Modern visual polish | +| **[Stock Chart Dimensions](./chart-dimensions)** | Control chart width and height | Predictable layout integration | + +## Advanced analytics + +The Blazor Stock Chart includes sophisticated capabilities designed for complex financial analysis scenarios: + +| Feature | Purpose | Key Benefit | +|---------|---------|-------------| +| **[Technical Indicators](./technical-indicators)** | Overlay indicators such as Accumulation Distribution, ATR, EMA, and Momentum | Informed trading analysis | +| **[Trendlines](./trend-lines)** | Project linear, logarithmic, and exponential trend lines onto series | Trend and forecast analysis | + +## Print & export + +The Blazor Stock Chart provides comprehensive output capabilities for reporting and sharing chart visuals: + +| Feature | Purpose | Key Benefit | +|---------|---------|-------------| +| **[Print and Export](./export-print)** | Print the chart and export it to PDF, image, and Excel documents | Professional document integration | +| **[Customize the exported chart using the Exporting event](./export-print#customize-the-exported-chart-using-the-exporting-event)** | Modify the exported output | Branded export documents | + +## Accessibility + +The Blazor Stock Chart is fully accessible and compliant with Web Content Accessibility Guidelines (WCAG) standards: + +- **[WAI-ARIA attributes](./accessibility#wai-aria-attributes)** — Accessible roles and attributes for the stock chart UI +- **[Keyboard interaction](./accessibility#keyboard-interaction)** — Complete chart operation via keyboard +- **[Ensuring accessibility](./accessibility#ensuring-accessibility)** — Validation guidance for accessible charts + +## System requirements + +The Blazor Stock Chart works with: + +- **Blazor Version**: .NET 8.0 or higher +- **Hosting Models**: Blazor Server, Blazor WebAssembly, Blazor Web App +- **Browsers**: Chrome, Firefox, Safari, Edge (latest versions) +- **Mobile**: iOS Safari, Android Chrome + +## Quick links + +**Getting Started:** +- [Blazor Web App Guide](./getting-started-webapp) +- [Blazor WebAssembly Guide](./getting-started) + +**Popular Features:** +- [Series Types](./series-types) — Candle, Hilo, OHLC, and line series +- [Period Selector](./period-selector) — Predefined time-span navigation +- [Range Selector](./range-selector) — Interactive range selection on an overview chart +- [Technical Indicators](./technical-indicators) — Trading signal overlays +- [Stock Events](./stock-events) — Market event annotation +- [Print and Export](./export-print) — PDF, image, and Excel output + +## Support & Resources + +- **Questions?** Visit the [Syncfusion Support Portal](https://www.syncfusion.com/support) +- **Code Examples?** Browse [Stock Chart Demos](https://www.syncfusion.com/blazor-components/blazor-stock-chart) and samples +- **API Details?** See [Stock Chart API Reference](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfStockChart.html) +- **Community?** Join the [Syncfusion Community Forum](https://www.syncfusion.com/forums/blazor-components) +- **What's New?** Check [Release Notes](../Release-Notes) diff --git a/blazor/treegrid/overview.md b/blazor/treegrid/overview.md new file mode 100644 index 0000000000..d7b142aee5 --- /dev/null +++ b/blazor/treegrid/overview.md @@ -0,0 +1,248 @@ +--- +layout: post +title: Blazor TreeGrid Overview and Features | Syncfusion +description: Learn how to use Blazor TreeGrid for hierarchical data display, tree data binding, CRUD operations, sorting, filtering, paging, and virtualization. +platform: Blazor +control: Tree Grid +documentation: ug +--- + +# Overview in Blazor TreeGrid + +## Introduction to Syncfusion Blazor TreeGrid + +The [Blazor TreeGrid](https://www.syncfusion.com/blazor-components/blazor-tree-grid) is a powerful and feature-rich UI component designed for displaying and manipulating hierarchical (tree-structured) data in a tabular format with high performance and flexibility. It offers a comprehensive set of enterprise-grade capabilities, including self-referential and hierarchical data binding, advanced data operations, and extensive row and column customization options. Built for scalability, it enables developers to create responsive, data-intensive applications for parent-child data scenarios such as organizational charts, task trees, and file-system views. + +## Common use cases + +The Blazor TreeGrid is ideal for a wide range of business scenarios: + +| Use Case | Description | Key Features | +|----------|-------------|--------------| +| **Project & Task Management** | Display project breakdown structures with nested tasks and subtasks | Tree Data Binding, Editing, Row Drag and Drop | +| **Organizational Hierarchy** | Render reporting structures with parent-child employee relationships | Self-Referential Data, Selection, Export | +| **File System Explorer** | Navigate folders and files as an expandable tree structure | Hierarchical Data, Virtualization, Context Menu | +| **Financial & Cost Planning** | Build work breakdown and cost-allocation structures with roll-ups | Aggregates, Batch Editing, Export | +| **Manufacturing BOM** | Display multi-level bill-of-material structures with quantity roll-ups | Hierarchical Data, Aggregates, Column Templates | +| **Analytics Dashboards** | Visualize hierarchical KPIs with drill-down exploration | Filtering, Sorting, State Management | + +## Data Connectivity + +The Blazor TreeGrid enables multiple data binding approaches for rendering parent-child relationships, offering flexibility in choosing the right strategy for different application architectures. The TreeGrid can work with in-memory collections for self-referential or hierarchical records, or connect to remote services for scalable applications. + +**Data Binding Approaches** + +- **[Self-Referential Data (Flat Data)](./data-binding)** — Bind grids to local record lists where each row references its parent through `IdMapping` and `ParentIdMapping` fields. Ideal for flat database tables with hierarchical semantics. + +- **[Hierarchical Data](./data-binding)** — Bind nested object collections where child records are contained within parent objects. Perfect for JSON documents with tree structures. + +- **Remote Data Sources** — Connect to **web services, REST APIs**, and remote endpoints with automatic request handling and response parsing. + - [Remote Data Binding](./data-binding) — REST service integration through `SfDataManager` and adaptors + - [GraphQL Adaptor](./graphql) — Query modern APIs with optimized payloads + - [Custom Binding](./custom-binding) — Handle data operations manually when services require custom processing + +**Data Connectors** + +| Feature | Key Benefit | Best For | +|---------|---------------|----------| +| **[SfDataManager with adaptors](./data-binding)** | Automatic remote operation handling | Web services, REST endpoints | +| **[Custom Binding](./custom-binding)** | Full manual control over data operations | Specialized backends, performance-tuned services | +| **[Entity Framework](./editing/entity-frame-work)** | ORM-based editing with child record handling | ASP.NET backend, relational databases | + +> To learn about the adaptors supported by the TreeGrid and all remote data binding scenarios, refer to [Data Binding](./data-binding). + +## Data Operations + +The Blazor TreeGrid provides comprehensive data manipulation capabilities that enable users to analyze, organize, and understand their hierarchical data efficiently: + +| Feature | Purpose | Key Benefit | +|---------|---------|-------------| +| **[Sorting](./sorting)** | Arrange records in ascending or descending order while preserving the parent-child structure | Quick sort by clicking column headers | +| **[Filtering](./filter)** | Apply multi-level conditions across tree data with hierarchy-aware modes | [Filter hierarchy modes](./filter#filter-hierarchy-modes) preserve or filter entire tree branches | +| **[Filter Bar](./filtering/filter-bar)** | Quick filtering with inline text inputs in column headers | Immediate results without dialogs | +| **[Filter Menu](./filtering/filter-menu)** | Advanced filtering with complex conditions and multiple criteria | Powerful expression-based filtering | +| **[Excel-like Filter](./filtering/excel-like-filter)** | Familiar checkbox-based filtering interface from Excel | Multi-select from available values | +| **[Searching](./searching)** | Rapid text-based search across tree data with navigation | [Hierarchical Search](./searching) to locate records anywhere in the tree | +| **[Aggregates](./aggregate)** | Calculate summary values (sum, average, count) on tree data | [Footer aggregate](./aggregate#footer-aggregate) with built-in functions | +| **[Custom Sorting](./sorting#custom-sorting)** | Define custom sort logic beyond standard functions | Specialized business sort rules | + +## Large-scale rendering performance + +The Blazor TreeGrid is engineered for exceptional performance, enabling smooth operation with deep and wide hierarchical datasets. Advanced rendering techniques ensure responsive user interactions without performance degradation. + +| Feature | Benefit | Use Case | Key Benefit | +|---------|---------|----------|--------------| +| **[Row Virtualization](./virtualization#row-virtualization)** | Render only visible rows; load/unload as users scroll | Large trees (10K+ rows) | Smooth scrolling | +| **[Column Virtualization](./virtualization#column-virtualization)** | Render only visible columns; optimize for many-column grids | Wide grids (50+ columns) | Efficient horizontal scrolling | +| **[Managing Records Count](./virtualization#managing-records-count)** | Control additional records loaded per block during virtualization | Deep tree structures | Controlled memory usage | +| **[Paging](./paging)** | Divide the tree data across pages with page options | Browsing large forests | Navigable dataset segments | + +## Editing & CRUD Operations + +The Blazor TreeGrid enables seamless Create, Read, Update, and Delete (CRUD) operations directly within the grid interface, with full support for adding child rows to any tree node. Data modification occurs inline with immediate visual feedback, improving productivity and reducing context switching. + +**Editing Modes** + +Multiple editing modes support different workflow scenarios: + +| Mode | Description | Best For | Key Benefit | +|------|-------------|----------|-------------| +| **[Cell Editing](./editing/cell-editing)** | Edit cell content directly in the grid | Quick single-cell edits, power users | Direct editing without dialog overhead | +| **[Row Editing](./editing/row-editing)** | Edit an entire row at once | Comprehensive multi-field edits | All fields editable in one action | +| **[Dialog Editing](./editing/dialog-editing)** | Open a dedicated form dialog for editing | Comprehensive multi-field edits with validation | Organized form-based editing with validation | +| **[Batch Editing](./editing/batch-editing)** | Edit multiple records and submit together | Bulk operations, mass updates | Single submission of all changes | +| **[Template Editing](./editing/template-editing)** | Use custom Blazor templates for edit forms | Complex layouts, custom components inside edit dialogs | Flexible, custom-designed edit forms | +| **[Command Column Editing](./editing/command-column-editing)** | Edit, Delete, Save, Cancel buttons in dedicated column | Intuitive interface | One-click actions without keyboard interaction | + +**Data Validation** + +The Blazor TreeGrid includes built-in [validation with Data Annotations](./editing/column-validation) that enforces business rules using .NET attributes. Validation errors display inline with helpful messages, guiding users to correct data before submission. + +**Excel-like interactions** + +| Feature | Purpose | Key Benefit | +|---------|---------|-------------| +| **[Clipboard](./clipboard)** | Copy TreeGrid cells and paste them into Excel or text editors | Seamless data transfer to spreadsheets | +| **[AutoFill](./auto-fill-like-excel)** | Drag fill handle to extend or clear values like Excel AutoFill | Spreadsheet-like productivity | + +## Columns + +The Blazor TreeGrid offers extensive column and layout customization options for creating professional data displays tailored to any device or workflow: + +| Feature | Purpose | Key Benefit | +|---------|---------|-------------| +| **[Column Formatting](./column#format)** | Apply predefined or custom formats (currency, dates, percentages, etc.) | Professional number and date display | +| **[Header Template](./column#header-template)** | Customize column headers with icons, tooltips, complex formatting | Professional header design | +| **[Column Resizing](./columns/column-resizing)** | Manually adjust column widths with auto-fit and responsive options | Optimal content visibility | +| **[Column Reordering](./columns/column-reorder)** | Drag column headers to reorder display sequence | User-preferred column arrangement | +| **[Column Spanning](./columns/column-spanning)** | Extend cells across multiple columns for merged display areas | Grouped or summary information | +| **[Column Menu](./columns/column-menu)** | Dropdown menu for visibility, filtering, sorting, autofit | Quick column management | +| **[Column Chooser](./columns/column-chooser)** | Dialog to dynamically show/hide columns | User-controlled visibility | +| **[Column Template](./columns/column-template)** | Custom cell rendering with custom components | Rich data visualization | +| **[Lock Columns](./column#lock-columns)** | Fix columns so they stay visible during horizontal scrolling | Always visible critical information | +| **[Responsive Columns](./column#responsive-columns)** | Hide columns at different resolutions | Optimal display across all devices | +| **[Checkbox Column](./column#checkbox-column)** | Display boolean values as checkboxes | Interactive yes/no selection | +| **[Complex data binding](./column#complex-data-binding)** | Bind nested object properties | Deep object structures | + +## Rows + +The Blazor TreeGrid provides extensive row-level capabilities that leverage the hierarchical structure of the data: + +| Feature | Purpose | Key Benefit | +|---------|---------|-------------| +| **[Row Drag and Drop](./rows/row-drag-and-drop)** | Reorder rows or move a subtree to different parents within the same TreeGrid or another TreeGrid | Reorganize tree structures interactively | +| **[Row Height](./rows/row-height)** | Set custom row height for TreeGrid | Precise layout control | +| **[Row Spanning](./rows/row-spanning)** | Extend cells vertically across multiple rows | Specialized layouts | +| **[Row Template](./rows/row-template)** | Complete row customization with Blazor templates | Unique row presentations | +| **[Detail Template](./rows/detail-template)** | Expandable row sections for additional information | Drill-down exploration | + +## User experience & interaction + +The Blazor TreeGrid provides a comprehensive, accessible user experience with extensive customization options, flexible interaction modes, and accessibility standards compliance. Every aspect of the TreeGrid interface supports customization to match application design systems and workflow requirements. + +**Selection** + +| Feature | Purpose | Key Benefit | +|---------|---------|-------------| +| **[Row Selection](./selection)** | Single or multiple row selection modes | Flexible selection workflows | +| **[Cell Selection](./selection#cell-selection)** | Individual cell or range selection with copy-paste | Spreadsheet-like interaction | +| **[Checkbox Selection](./selection#checkbox-selection)** | Checkbox-based selection with select-all option | Bulk operation selection | +| **[Drag Selection](./selection#drag-selection)** | Drag to select a range of rows or cells | Mouse-friendly bulk selection | +| **[Toggle Selection](./selection#toggle-selection)** | Toggle multiple non-adjacent selections without Ctrl key | Touch-friendly multi-selection | + +**User interaction** + +| Feature | Purpose | Key Benefit | +|---------|---------|-------------| +| **[Toolbar](./toolbar)** | Add customizable toolbars with built-in and custom items | Quick access to actions | +| **[Context Menu](./context-menu)** | Right-click access to TreeGrid actions | Desktop-feel productivity | +| **[Adaptive Layout](./adaptive-layout)** | Automatically adjust layout based on screen space | Optimal display on mobile devices | +| **[State Management](./state-management)** | Save/restore user preferences across sessions | Personalized user experience | + +**Templating & Customization** + +Templating & Customization allows developers to personalize the TreeGrid's headers, cells, rows, editing experience, and detail views with custom UI and behavior. + +| Template Type | Purpose | Key Benefit | +|---------------|---------|--------------| +| **[Header Template](./column#header-template)** | Customize column headers with icons, tooltips, complex formatting | Professional header design | +| **[Column Template](./columns/column-template)** | Custom cell rendering with custom components | Rich data visualization | +| **[Row Template](./rows/row-template)** | Complete row customization for specialized layouts | Unique row presentations | +| **[Detail Template](./rows/detail-template)** | Expandable row sections for additional information | Hierarchical data display | +| **[Globalization](./globalization)** | Culture-aware formatting and right-to-left rendering | Global application support | + +**Accessibility & Keyboard Navigation** + +The Blazor TreeGrid is fully accessible and compliant with Web Content Accessibility Guidelines (WCAG) standards: + +- **[WAI-ARIA](./accessibility#wai-aria)** — Accessible roles and attributes for TreeGrid UI +- **[Keyboard interaction](./accessibility#keyboard-interaction)** — Complete TreeGrid operations via keyboard + - Tab/Shift+Tab — Navigate between cells + - Arrow Keys — Move between rows and columns + - Enter — Edit cells, confirm changes + - Escape — Cancel editing + - Ctrl+A — Select all rows +- **[Screen Reader Support](./accessibility)** — Full compatibility with assistive technologies +- **[Semantic HTML](./accessibility)** — Proper ARIA labels and semantic markup + +## Export & Reporting + +The Blazor TreeGrid provides comprehensive export and reporting capabilities, enabling users to extract, analyze, and distribute hierarchical grid data in professional document formats: + +| Format | Key Benefit | Best For | +|--------|---------------|----------| +| **[Excel Export](./excel-export)** | Export to XLSX with tree structure preserved, including indent level | Data analysis, spreadsheet workflows | +| **[PDF Export](./exporting)** | Generate formatted PDF documents with custom layouts | Professional reports, archiving | +| **[Print](./print)** | Printer-ready output with page orientation control | Hard copy reports, on-demand printing | + +## Advanced features + +The Blazor TreeGrid includes sophisticated capabilities designed for complex enterprise data scenarios. These advanced features enable developers to build powerful, scalable data management solutions that handle demanding business requirements. + +| Feature | Purpose | Use Case | Key Benefit | +|---------|---------|----------|-------------| +| **[State Management](./state-management)** | Save/restore user preferences across sessions | Column order, visibility, sort states | Personalized user experience | +| **[Detail Templates](./rows/detail-template)** | Expandable row sections for additional information | Product details, historical data | Drill-down exploration | +| **[Global/Local Formatting](./globalization)** | Consistent or column-specific formatting | Currency, dates, numbers, text | Professional presentation | +| **[Events](./events)** | Event handlers for every user and API action in the TreeGrid | Custom workflows and integrations | Deep integration points | + +**Enterprise Patterns** + +For specific implementation patterns, refer to feature documentation: + +- **Large Enterprises** — Use [State Management](./state-management) and [Row Drag and Drop](./rows/row-drag-and-drop) to reorganize large trees +- **Real-time Systems** — Implement [Custom Binding](./custom-binding) with live data streams +- **Bulk Data Transfer** — Combine [Clipboard](./clipboard) with [Batch Editing](./editing/batch-editing) + +## System requirements + +The Blazor TreeGrid works with: + +- **Blazor Version**: .NET 8.0 or higher +- **Hosting Models**: Blazor Server, Blazor WebAssembly, Blazor Web App +- **Browsers**: Chrome, Firefox, Safari, Edge (latest versions) +- **Mobile**: iOS Safari, Android Chrome + +## Quick links + +**Getting Started:** +- [Blazor Web App Guide](./getting-started-webapp) +- [Blazor WebAssembly Guide](./getting-started) +- [Blazor Server App Guide](./getting-started-with-server-app) +- [Blazor Hybrid MAUI App Guide](./getting-started-with-maui-app) + +**Popular Features:** +- [Row Drag and Drop](./rows/row-drag-and-drop) — Reorganize tree structures interactively +- [Filtering & Searching](./filter) — Search and filter capabilities +- [Sorting](./sorting) — Data organization and analysis +- [Editing & CRUD](./editing/edit) — Create, read, update, delete operations +- [Export & Reporting](./excel-export) — Excel, PDF, and print functionality +- [Data Validation](./editing/column-validation) — Built-in and custom validation rules + +## Support & Resources + +- **Questions?** Visit the [Syncfusion Support Portal](https://www.syncfusion.com/support) +- **Code Examples?** Browse [TreeGrid Demos](https://www.syncfusion.com/blazor-components/blazor-tree-grid) and samples +- **API Details?** See [TreeGrid API Reference](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html) +- **Community?** Join the [Syncfusion Community Forum](https://www.syncfusion.com/forums/blazor-components) +- **What's New?** Check [Release Notes](../Release-Notes) From 93c4ae8ed1870d600757cae43fbbb9e6292347f5 Mon Sep 17 00:00:00 2001 From: Gayathri4135 Date: Thu, 10 Sep 2026 16:14:58 +0530 Subject: [PATCH 2/3] updated the md file. --- blazor/chart/overview.md | 2 +- blazor/maps/overview.md | 2 +- blazor/stock-chart/overview.md | 4 ++-- blazor/treegrid/overview.md | 4 ++-- 4 files changed, 6 insertions(+), 6 deletions(-) diff --git a/blazor/chart/overview.md b/blazor/chart/overview.md index 2c2133904e..c8f5ce40d2 100644 --- a/blazor/chart/overview.md +++ b/blazor/chart/overview.md @@ -11,7 +11,7 @@ documentation: ug ## Introduction to Syncfusion Blazor Charts -The [Blazor Charts]((https://www.syncfusion.com/blazor-components/blazor-charts)) is a powerful and feature-rich UI component designed for visualizing business and analytical data with high performance and flexibility. It offers a comprehensive set of enterprise-grade capabilities, including 50+ chart types ranging from line and area to financial candle and box-and-whisker charts, multiple axis support, data-driven visual elements, and seamless integration with local and remote data sources. Built for scalability, it enables developers to create responsive, data-intensive dashboards and reports with ease. +The [Blazor Charts]((https://www.syncfusion.com/blazor-components/blazor-charts)) is a powerful and feature-rich UI component designed for visualizing business and analytical data with high performance and flexibility. It offers a comprehensive set of enterprise-grade capabilities, including support for financial and statistical charting, multiple axes, data-driven visual elements, and seamless integration with local and remote data sources. Built for scalability, it enables developers to create responsive, data-intensive dashboards and reports with ease. ## Common use cases diff --git a/blazor/maps/overview.md b/blazor/maps/overview.md index 9abdd877d9..5b0fcd158c 100644 --- a/blazor/maps/overview.md +++ b/blazor/maps/overview.md @@ -11,7 +11,7 @@ documentation: ug ## Introduction to Syncfusion Blazor Maps -The [Blazor Maps]((https://www.syncfusion.com/blazor-components/blazor-maps)) is a powerful and feature-rich UI component designed for visualizing geographical data in an interactive and customizable map view. It offers a comprehensive set of enterprise-grade capabilities, including shape (geometry) rendering from GeoJSON, data-driven color mapping, bubbles, markers, and legends, along with seamless integration of online map providers. Built for scalability, it enables developers to create responsive, location-aware applications for business scenarios such as demographic analysis, sales dashboards, logistics tracking, and weather monitoring. +The [Blazor Maps](https://www.syncfusion.com/blazor-components/blazor-maps) is a comprehensive and highly customizable UI component designed for visualizing geographical data in an interactive and customizable map view. It offers a wide range of enterprise-grade capabilities, including shape (geometry) rendering from GeoJSON, data-driven color mapping, bubbles, markers, and legends, along with seamless integration of online map providers. Built for scalability, it enables developers to create responsive, location aware applications for business scenarios such as demographic analysis, sales dashboards, logistics tracking, and weather monitoring. ## Common use cases diff --git a/blazor/stock-chart/overview.md b/blazor/stock-chart/overview.md index 053755fa9d..d1893a9e1d 100644 --- a/blazor/stock-chart/overview.md +++ b/blazor/stock-chart/overview.md @@ -1,7 +1,7 @@ --- layout: post title: Blazor Stock Chart Overview and Features | Syncfusion -description: Learn how to use Blazor Stock Chart for financial data visualization with candle and hilo series, period selector, range selector, technical indicators, and stock events. +description: Learn how to use Blazor Stock Chart for financial data visualization with candle and hilo series, period and range selector, technical indicators, and events. platform: Blazor control: Stock Chart documentation: ug @@ -11,7 +11,7 @@ documentation: ug ## Introduction to Syncfusion Blazor Stock Chart -The [Blazor Stock Chart]((https://www.syncfusion.com/blazor-components/blazor-stock-chart)) is a powerful and feature-rich UI component designed for visualizing stock market and financial time-series data with high performance and flexibility. It offers a comprehensive set of enterprise-grade capabilities, including candle, hilo, and OHLC financial series types, a built-in period selector and range selector for quick time-span navigation, technical indicators, and annotation of market-moving events. Built for scalability, it enables developers to create responsive, data-intensive financial dashboards for stock trading, portfolio tracking, and market analysis applications. +The [Blazor Stock Chart](https://www.syncfusion.com/blazor-components/blazor-stock-chart) is a powerful and feature-rich UI component designed for visualizing stock market and financial time-series data with high performance and flexibility. It offers a comprehensive set of enterprise-grade capabilities, including candle, hilo, and OHLC financial series types, a built-in period selector and range selector for quick time-span navigation, technical indicators, and annotation of market moving events. Built for scalability, it enables developers to create responsive, data-intensive financial dashboards for stock trading, portfolio tracking, and market analysis applications. ## Common use cases diff --git a/blazor/treegrid/overview.md b/blazor/treegrid/overview.md index d7b142aee5..fb5015585d 100644 --- a/blazor/treegrid/overview.md +++ b/blazor/treegrid/overview.md @@ -11,7 +11,7 @@ documentation: ug ## Introduction to Syncfusion Blazor TreeGrid -The [Blazor TreeGrid](https://www.syncfusion.com/blazor-components/blazor-tree-grid) is a powerful and feature-rich UI component designed for displaying and manipulating hierarchical (tree-structured) data in a tabular format with high performance and flexibility. It offers a comprehensive set of enterprise-grade capabilities, including self-referential and hierarchical data binding, advanced data operations, and extensive row and column customization options. Built for scalability, it enables developers to create responsive, data-intensive applications for parent-child data scenarios such as organizational charts, task trees, and file-system views. +The [Blazor TreeGrid](https://www.syncfusion.com/blazor-components/blazor-tree-grid) is a powerful and feature-rich UI component designed for displaying and manipulating hierarchical (tree-structured) data in a tabular format with high performance and flexibility. It offers a comprehensive set of enterprise-grade capabilities, including self-referential and hierarchical data binding, advanced data operations, and extensive row and column customization options. Built for scalability, it enables developers to create responsive, data-intensive applications for parent-child data scenarios such as organizational charts, task trees, and file system views. ## Common use cases @@ -46,7 +46,7 @@ The Blazor TreeGrid enables multiple data binding approaches for rendering paren | Feature | Key Benefit | Best For | |---------|---------------|----------| | **[SfDataManager with adaptors](./data-binding)** | Automatic remote operation handling | Web services, REST endpoints | -| **[Custom Binding](./custom-binding)** | Full manual control over data operations | Specialized backends, performance-tuned services | +| **[Custom Binding](./custom-binding)** | Full manual control over data operations | Specialized backend, performance-tuned services | | **[Entity Framework](./editing/entity-frame-work)** | ORM-based editing with child record handling | ASP.NET backend, relational databases | > To learn about the adaptors supported by the TreeGrid and all remote data binding scenarios, refer to [Data Binding](./data-binding). From 128ce613738e18c75c2fde78897d0bbbdaa48b55 Mon Sep 17 00:00:00 2001 From: Gayathri4135 Date: Thu, 10 Sep 2026 17:14:03 +0530 Subject: [PATCH 3/3] updated the md file --- blazor-toc.html | 3 - blazor/maps/overview.md | 194 ---------------------------- blazor/treegrid/overview.md | 248 ------------------------------------ 3 files changed, 445 deletions(-) delete mode 100644 blazor/maps/overview.md delete mode 100644 blazor/treegrid/overview.md diff --git a/blazor-toc.html b/blazor-toc.html index 0b12b088af..1edd75391c 100644 --- a/blazor-toc.html +++ b/blazor-toc.html @@ -1236,9 +1236,6 @@ -
  • - Overview -
  • Populate Data
  • Shapefile
  • Layers
    • diff --git a/blazor/maps/overview.md b/blazor/maps/overview.md deleted file mode 100644 index 5b0fcd158c..0000000000 --- a/blazor/maps/overview.md +++ /dev/null @@ -1,194 +0,0 @@ ---- -layout: post -title: Blazor Maps Overview and Features | Syncfusion -description: Learn how to use Blazor Maps to visualize geographical data with shape and bubble layers, color mapping, markers, legends, zooming, and online map providers. -platform: Blazor -control: Maps -documentation: ug ---- - -# Overview in Blazor Maps - -## Introduction to Syncfusion Blazor Maps - -The [Blazor Maps](https://www.syncfusion.com/blazor-components/blazor-maps) is a comprehensive and highly customizable UI component designed for visualizing geographical data in an interactive and customizable map view. It offers a wide range of enterprise-grade capabilities, including shape (geometry) rendering from GeoJSON, data-driven color mapping, bubbles, markers, and legends, along with seamless integration of online map providers. Built for scalability, it enables developers to create responsive, location aware applications for business scenarios such as demographic analysis, sales dashboards, logistics tracking, and weather monitoring. - -## Common use cases - -The Blazor Maps is ideal for a wide range of business scenarios: - -| Use Case | Description | Key Features | -|----------|-------------|--------------| -| **Demographic & Sales Analysis** | Visualize population, revenue, or performance figures per country or region | Color Mapping, Legend, Tooltip | -| **Election Results** | Display winning parties or voting percentages across constituencies | Color Mapping, Data Labels, Annotations | -| **Logistics & Fleet Tracking** | Show distribution routes, warehouses, and vehicle locations | Markers, Navigation Lines, Zooming | -| **Weather & Environment** | Render temperature, rainfall, or pollution levels as proportional bubbles | Bubble, Color Mapping, Legend | -| **Field Service & Branch Locator** | Help users find offices, stores, or service centers near them | Markers, Marker Clustering, Selection | -| **Travel & Tourism** | Highlight destinations, attractions, and planned itineraries | Markers, Navigation Lines, Annotations | - -## Data sources & connectivity - -The Blazor Maps enables multiple ways to load and bind geographical and business data, offering flexibility in choosing the right strategy for different application architectures. The Maps can render shapes from GeoJSON or shapefile data, bind business data to those shapes, or display online tile maps from popular providers. - -**Shape Data** - -- **[Populate Data](./populate-data)** — Load GeoJSON shape data and bind business data to shapes using `ShapeDataPath` and `ShapePropertyPath` for automatic matching. -- **[Geometry types](./populate-data#geometry-types)** — Render `Geometry` (polygon) and `LineString` (line) shapes in the same or separate layers. -- **[Fetching data from JSON file](./populate-data#fetching-data-from-json-file)** — Load map data from local or remote JSON files in Blazor Server and WebAssembly apps. -- **[Shapefile](./shapefile)** — Convert ESRI shapefiles to GeoJSON for rendering static geographic boundaries. - -**Layer Types** - -| Layer Type | Purpose | Key Benefit | -|------------|---------|-------------| -| **[Shape Layer](./layers)** | Render geographic boundaries from GeoJSON data | Data-driven thematic maps | -| **[Tile / Provider Layer](./providers/openstreetmap)** | Display online tile maps from map providers | Real-world street and satellite imagery | -| **[Bing Maps](./providers/bing-maps) / [Google Maps](./providers/google-maps) tiles** | Integrate commercial provider tiles | Familiar, detailed map imagery | -| **[Other Maps](./providers/other-maps)** | Load tile maps from other online providers such as TomTom and MapBox | Provider flexibility | - -**Layer Organization** - -| Feature | Purpose | Key Benefit | -|---------|---------|-------------| -| **[Multilayer](./layers#multilayer)** | Render multiple geographic layers on top of each other | Subcontinent plus country-level views | -| **[Sublayer](./layers#sublayer)** | Layer a detailed shape inside a base shape layer | Drill-down visualization | -| **[Displaying different layer in the view](./layers#displaying-different-layer-in-the-view)** | Switch between layers on zoom level | Progressive disclosure of detail | -| **[Rendering custom shapes](./layers#rendering-custom-shapes)** | Render building, stadium, or indoor layouts as geometries | Floor plans and custom boundaries | - -**Online Map Providers** - -| Provider | Key Benefit | Best For | -|----------|--------------|----------| -| **[OpenStreetMap](./providers/openstreetmap)** | Free, community-maintained world map | General-purpose mapping | -| **[Google Maps](./providers/google-maps)** | High-quality street and satellite tiles | Consumer-facing applications | -| **[Azure Maps](./providers/azure-maps)** | Enterprise-grade geospatial services | Azure-based enterprise apps | -| **[Bing Maps](./providers/bing-maps)** | Reliable tile imagery with key-based access | Legacy and enterprise integrations | -| **[Other Maps](./providers/other-maps)** | Support for other tile providers | Specialized imagery requirements | - -## Shape & data visualization - -The Blazor Maps provides comprehensive data visualization capabilities that enable users to analyze, organize, and understand their geographical data efficiently: - -**Color Mapping** - -| Feature | Purpose | Key Benefit | -|---------|---------|-------------| -| **[Range Color Mapping](./color-mapping#range-color-mapping)** | Color shapes by value ranges such as population density | Intuitive thematic gradients | -| **[Equal Color Mapping](./color-mapping#equal-color-mapping)** | Assign a unique color per equal value such as winner party | Categorical comparisons | -| **[Desaturation Color Mapping](./color-mapping#desaturation-color-mapping)** | Vary color intensity by value | Subtle value emphasis | -| **[Multiple colors for a single shape](./color-mapping#multiple-colors-for-a-single-shape)** | Split a shape among multiple colors | Coalition or split-level data | - -**Data Elements** - -| Feature | Purpose | Key Benefit | -|---------|---------|-------------| -| **[Data Labels](./data-labels)** | Display shape names and values on the map | In-context information | -| **[Bubble](./bubble)** | Render proportional circles sized by underlying values | Comparative magnitude analysis | -| **[Legend](./legend)** | Explain shape, bubble, and marker color categories | Quick value decoding | -| **[Interactive Legend](./legend#interactive-mode)** | Toggle data ranges visibility by legend interaction | User-controlled filtering | - -**Markers & Overlays** - -| Feature | Purpose | Key Benefit | -|---------|---------|-------------| -| **[Adding marker](./markers#adding-marker)** | Pin locations by latitude and longitude | Location identification | -| **[Adding marker template](./markers#adding-marker-template)** | Use custom Blazor templates for markers | Fully customizable point visuals | -| **[Multiple marker groups](./markers#multiple-marker-groups)** | Categorize markers into distinct groups | Layered location categories | -| **[Marker clustering](./markers#marker-clustering)** | Group nearby markers into clusters at lower zoom levels | Readable dense point data | -| **[Reposition markers using drag and drop](./markers#repositioning-the-marker-using-drag-and-drop)** | Drag markers to adjust positions | Interactive editing | -| **[Tooltip for marker](./markers#tooltip-for-marker)** | Show details on marker hover | On-demand information | -| **[Polygon](./polygon)** | Draw multi-point shapes such as service areas on the map | Custom region overlay | -| **[Navigation Lines](./navigation-line)** | Connect locations with straight or curved direction lines | Route visualization | -| **[Annotations](./annotations)** | Place custom HTML content at coordinates or pixel positions | Rich in-map content | - -## Appearance & customization - -The Blazor Maps offers extensive layout and styling options for creating professional, on-brand map views: - -| Feature | Purpose | Key Benefit | -|---------|---------|-------------| -| **[Setting the size for Maps](./customization#setting-the-size-for-maps)** | Control map width and height | Predictable layout integration | -| **[Maps title](./customization#maps-title)** | Add and style a descriptive map title | Contextual storytelling | -| **[Setting theme](./customization#setting-theme)** | Apply built-in themes such as Material or Fluent | Consistent app theming | -| **[Customizing the shapes](./customization#customizing-the-shapes)** | Style shape fill, border, and dash arrays | Editorial control over geometry | -| **[Setting color to the shapes from the data source](./customization#setting-color-to-the-shapes-from-the-data-source)** | Drive shape colors from bound data values | Data-driven styling | -| **[Projection type](./customization#projection-type)** | Switch between Mercator, Equirectangular, and other projections | Accurate geospatial representation | - -## User experience & interaction - -The Blazor Maps provides a comprehensive, interactive user experience with zooming, selection, highlighting, and tooltip capabilities that make geographical exploration intuitive: - -| Feature | Purpose | Key Benefit | -|---------|---------|-------------| -| **[Zooming](./user-interactions#zooming)** | Zoom by toolbar, pinch, mouse wheel, double-click, or selection | Precise region focus | -| **[Selection](./user-interactions#selection)** | Select shapes, markers, bubbles, or polygons | Region-level user actions | -| **[Highlight](./user-interactions#highlight)** | Emphasize shapes, markers, bubbles, or polygons on hover | Visual feedback | -| **[Tooltip](./user-interactions#tooltip)** | Show additional details on shape or bubble hover | On-demand information without clutter | - -## Print & export - -The Blazor Maps provides output capabilities for reporting and sharing analytical map views: - -| Feature | Purpose | Key Benefit | -|---------|---------|-------------| -| **[Print](./print-and-export#print)** | Print the map with page orientation options | On-demand physical output | -| **[Image Export](./print-and-export#image-export)** | Export the map as PNG, JPEG, or SVG images | Slide decks and documentation | -| **[PDF Export](./print-and-export#pdf-export)** | Export the map as a PDF document | Professional reporting | - -## Advanced features - -The Blazor Maps includes sophisticated capabilities designed for complex enterprise scenarios. These advanced features help you persist state, respond to interactions, and serve maps under strict security policies. - -| Feature | Purpose | Use Case | Key Benefit | -|---------|---------|----------|-------------| -| **[State Persistence](./state-persistence)** | Save and restore the map state across sessions | Zoom, center, and selection retention | Personalized user experience | -| **[Globalization](./internationalization#globalization)** | Format data values using different cultures | Multi-region applications | Localized number and date display | -| **[Localization](./localization)** | Translate the UI into different languages | Global user bases | Native-language experience | -| **[Events](./maps-event)** | Handle rendering, interaction, and completion events | Custom workflows and integrations | Deep integration points | -| **[Methods](./maps-method)** | Programmatically zoom, pan, select, and export | Dynamic, code-driven control | Automation-friendly API | -| **[Content Security Policy](./content-security-policy)** | Configure CSP rules for tile and GeoJSON requests | Security-restricted environments | Compliant enterprise deployment | - -**Accessibility** - -The Blazor Maps is fully accessible and compliant with Web Content Accessibility Guidelines (WCAG) standards: - -- **[WAI-ARIA attributes](./accessibility#wai-aria-attributes)** — Accessible roles and attributes for the Maps UI -- **[Screen reading in Maps](./accessibility#screen-reading-in-maps)** — Full compatibility with assistive technologies -- **[Keyboard Navigation](./accessibility#keyboard-navigation)** — Complete map operation via keyboard - - Tab / Shift+Tab — Navigate between map areas - - Arrow Keys — Drag/pan the map in four directions - - Plus (+) and Minus (-) — Zoom in and zoom out -- **[Ensuring accessibility](./accessibility#ensuring-accessibility)** — Validation guidance for accessible maps - -## System requirements - -The Blazor Maps works with: - -- **Blazor Version**: .NET 8.0 or higher -- **Hosting Models**: Blazor Server, Blazor WebAssembly, Blazor Web App -- **Browsers**: Chrome, Firefox, Safari, Edge (latest versions) -- **Mobile**: iOS Safari, Android Chrome - -## Quick links - -**Getting Started:** -- [Blazor Web App Guide](./getting-started-webapp) -- [Blazor WebAssembly Guide](./getting-started) -- [Blazor Server App Guide](./getting-started-with-server-app) -- [Blazor Hybrid MAUI App Guide](./getting-started-with-maui-app) - -**Popular Features:** -- [Color Mapping](./color-mapping) — Thematic shape coloring by value -- [Bubble](./bubble) — Proportional symbol visualization -- [Markers](./markers) — Location visualization and clustering -- [Layers](./layers) — Multilayer and sublayer rendering -- [User Interactions](./user-interactions) — Zooming, selection, highlight, and tooltip -- [Print and Export](./print-and-export) — Print, image, and PDF output - -## Support & Resources - -- **Questions?** Visit the [Syncfusion Support Portal](https://www.syncfusion.com/support) -- **Code Examples?** Browse [Maps Demos](https://www.syncfusion.com/blazor-components/blazor-maps) and samples -- **API Details?** See [Maps API Reference](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.SfMaps.html) -- **Community?** Join the [Syncfusion Community Forum](https://www.syncfusion.com/forums/blazor-components) -- **What's New?** Check [Release Notes](../Release-Notes) diff --git a/blazor/treegrid/overview.md b/blazor/treegrid/overview.md deleted file mode 100644 index fb5015585d..0000000000 --- a/blazor/treegrid/overview.md +++ /dev/null @@ -1,248 +0,0 @@ ---- -layout: post -title: Blazor TreeGrid Overview and Features | Syncfusion -description: Learn how to use Blazor TreeGrid for hierarchical data display, tree data binding, CRUD operations, sorting, filtering, paging, and virtualization. -platform: Blazor -control: Tree Grid -documentation: ug ---- - -# Overview in Blazor TreeGrid - -## Introduction to Syncfusion Blazor TreeGrid - -The [Blazor TreeGrid](https://www.syncfusion.com/blazor-components/blazor-tree-grid) is a powerful and feature-rich UI component designed for displaying and manipulating hierarchical (tree-structured) data in a tabular format with high performance and flexibility. It offers a comprehensive set of enterprise-grade capabilities, including self-referential and hierarchical data binding, advanced data operations, and extensive row and column customization options. Built for scalability, it enables developers to create responsive, data-intensive applications for parent-child data scenarios such as organizational charts, task trees, and file system views. - -## Common use cases - -The Blazor TreeGrid is ideal for a wide range of business scenarios: - -| Use Case | Description | Key Features | -|----------|-------------|--------------| -| **Project & Task Management** | Display project breakdown structures with nested tasks and subtasks | Tree Data Binding, Editing, Row Drag and Drop | -| **Organizational Hierarchy** | Render reporting structures with parent-child employee relationships | Self-Referential Data, Selection, Export | -| **File System Explorer** | Navigate folders and files as an expandable tree structure | Hierarchical Data, Virtualization, Context Menu | -| **Financial & Cost Planning** | Build work breakdown and cost-allocation structures with roll-ups | Aggregates, Batch Editing, Export | -| **Manufacturing BOM** | Display multi-level bill-of-material structures with quantity roll-ups | Hierarchical Data, Aggregates, Column Templates | -| **Analytics Dashboards** | Visualize hierarchical KPIs with drill-down exploration | Filtering, Sorting, State Management | - -## Data Connectivity - -The Blazor TreeGrid enables multiple data binding approaches for rendering parent-child relationships, offering flexibility in choosing the right strategy for different application architectures. The TreeGrid can work with in-memory collections for self-referential or hierarchical records, or connect to remote services for scalable applications. - -**Data Binding Approaches** - -- **[Self-Referential Data (Flat Data)](./data-binding)** — Bind grids to local record lists where each row references its parent through `IdMapping` and `ParentIdMapping` fields. Ideal for flat database tables with hierarchical semantics. - -- **[Hierarchical Data](./data-binding)** — Bind nested object collections where child records are contained within parent objects. Perfect for JSON documents with tree structures. - -- **Remote Data Sources** — Connect to **web services, REST APIs**, and remote endpoints with automatic request handling and response parsing. - - [Remote Data Binding](./data-binding) — REST service integration through `SfDataManager` and adaptors - - [GraphQL Adaptor](./graphql) — Query modern APIs with optimized payloads - - [Custom Binding](./custom-binding) — Handle data operations manually when services require custom processing - -**Data Connectors** - -| Feature | Key Benefit | Best For | -|---------|---------------|----------| -| **[SfDataManager with adaptors](./data-binding)** | Automatic remote operation handling | Web services, REST endpoints | -| **[Custom Binding](./custom-binding)** | Full manual control over data operations | Specialized backend, performance-tuned services | -| **[Entity Framework](./editing/entity-frame-work)** | ORM-based editing with child record handling | ASP.NET backend, relational databases | - -> To learn about the adaptors supported by the TreeGrid and all remote data binding scenarios, refer to [Data Binding](./data-binding). - -## Data Operations - -The Blazor TreeGrid provides comprehensive data manipulation capabilities that enable users to analyze, organize, and understand their hierarchical data efficiently: - -| Feature | Purpose | Key Benefit | -|---------|---------|-------------| -| **[Sorting](./sorting)** | Arrange records in ascending or descending order while preserving the parent-child structure | Quick sort by clicking column headers | -| **[Filtering](./filter)** | Apply multi-level conditions across tree data with hierarchy-aware modes | [Filter hierarchy modes](./filter#filter-hierarchy-modes) preserve or filter entire tree branches | -| **[Filter Bar](./filtering/filter-bar)** | Quick filtering with inline text inputs in column headers | Immediate results without dialogs | -| **[Filter Menu](./filtering/filter-menu)** | Advanced filtering with complex conditions and multiple criteria | Powerful expression-based filtering | -| **[Excel-like Filter](./filtering/excel-like-filter)** | Familiar checkbox-based filtering interface from Excel | Multi-select from available values | -| **[Searching](./searching)** | Rapid text-based search across tree data with navigation | [Hierarchical Search](./searching) to locate records anywhere in the tree | -| **[Aggregates](./aggregate)** | Calculate summary values (sum, average, count) on tree data | [Footer aggregate](./aggregate#footer-aggregate) with built-in functions | -| **[Custom Sorting](./sorting#custom-sorting)** | Define custom sort logic beyond standard functions | Specialized business sort rules | - -## Large-scale rendering performance - -The Blazor TreeGrid is engineered for exceptional performance, enabling smooth operation with deep and wide hierarchical datasets. Advanced rendering techniques ensure responsive user interactions without performance degradation. - -| Feature | Benefit | Use Case | Key Benefit | -|---------|---------|----------|--------------| -| **[Row Virtualization](./virtualization#row-virtualization)** | Render only visible rows; load/unload as users scroll | Large trees (10K+ rows) | Smooth scrolling | -| **[Column Virtualization](./virtualization#column-virtualization)** | Render only visible columns; optimize for many-column grids | Wide grids (50+ columns) | Efficient horizontal scrolling | -| **[Managing Records Count](./virtualization#managing-records-count)** | Control additional records loaded per block during virtualization | Deep tree structures | Controlled memory usage | -| **[Paging](./paging)** | Divide the tree data across pages with page options | Browsing large forests | Navigable dataset segments | - -## Editing & CRUD Operations - -The Blazor TreeGrid enables seamless Create, Read, Update, and Delete (CRUD) operations directly within the grid interface, with full support for adding child rows to any tree node. Data modification occurs inline with immediate visual feedback, improving productivity and reducing context switching. - -**Editing Modes** - -Multiple editing modes support different workflow scenarios: - -| Mode | Description | Best For | Key Benefit | -|------|-------------|----------|-------------| -| **[Cell Editing](./editing/cell-editing)** | Edit cell content directly in the grid | Quick single-cell edits, power users | Direct editing without dialog overhead | -| **[Row Editing](./editing/row-editing)** | Edit an entire row at once | Comprehensive multi-field edits | All fields editable in one action | -| **[Dialog Editing](./editing/dialog-editing)** | Open a dedicated form dialog for editing | Comprehensive multi-field edits with validation | Organized form-based editing with validation | -| **[Batch Editing](./editing/batch-editing)** | Edit multiple records and submit together | Bulk operations, mass updates | Single submission of all changes | -| **[Template Editing](./editing/template-editing)** | Use custom Blazor templates for edit forms | Complex layouts, custom components inside edit dialogs | Flexible, custom-designed edit forms | -| **[Command Column Editing](./editing/command-column-editing)** | Edit, Delete, Save, Cancel buttons in dedicated column | Intuitive interface | One-click actions without keyboard interaction | - -**Data Validation** - -The Blazor TreeGrid includes built-in [validation with Data Annotations](./editing/column-validation) that enforces business rules using .NET attributes. Validation errors display inline with helpful messages, guiding users to correct data before submission. - -**Excel-like interactions** - -| Feature | Purpose | Key Benefit | -|---------|---------|-------------| -| **[Clipboard](./clipboard)** | Copy TreeGrid cells and paste them into Excel or text editors | Seamless data transfer to spreadsheets | -| **[AutoFill](./auto-fill-like-excel)** | Drag fill handle to extend or clear values like Excel AutoFill | Spreadsheet-like productivity | - -## Columns - -The Blazor TreeGrid offers extensive column and layout customization options for creating professional data displays tailored to any device or workflow: - -| Feature | Purpose | Key Benefit | -|---------|---------|-------------| -| **[Column Formatting](./column#format)** | Apply predefined or custom formats (currency, dates, percentages, etc.) | Professional number and date display | -| **[Header Template](./column#header-template)** | Customize column headers with icons, tooltips, complex formatting | Professional header design | -| **[Column Resizing](./columns/column-resizing)** | Manually adjust column widths with auto-fit and responsive options | Optimal content visibility | -| **[Column Reordering](./columns/column-reorder)** | Drag column headers to reorder display sequence | User-preferred column arrangement | -| **[Column Spanning](./columns/column-spanning)** | Extend cells across multiple columns for merged display areas | Grouped or summary information | -| **[Column Menu](./columns/column-menu)** | Dropdown menu for visibility, filtering, sorting, autofit | Quick column management | -| **[Column Chooser](./columns/column-chooser)** | Dialog to dynamically show/hide columns | User-controlled visibility | -| **[Column Template](./columns/column-template)** | Custom cell rendering with custom components | Rich data visualization | -| **[Lock Columns](./column#lock-columns)** | Fix columns so they stay visible during horizontal scrolling | Always visible critical information | -| **[Responsive Columns](./column#responsive-columns)** | Hide columns at different resolutions | Optimal display across all devices | -| **[Checkbox Column](./column#checkbox-column)** | Display boolean values as checkboxes | Interactive yes/no selection | -| **[Complex data binding](./column#complex-data-binding)** | Bind nested object properties | Deep object structures | - -## Rows - -The Blazor TreeGrid provides extensive row-level capabilities that leverage the hierarchical structure of the data: - -| Feature | Purpose | Key Benefit | -|---------|---------|-------------| -| **[Row Drag and Drop](./rows/row-drag-and-drop)** | Reorder rows or move a subtree to different parents within the same TreeGrid or another TreeGrid | Reorganize tree structures interactively | -| **[Row Height](./rows/row-height)** | Set custom row height for TreeGrid | Precise layout control | -| **[Row Spanning](./rows/row-spanning)** | Extend cells vertically across multiple rows | Specialized layouts | -| **[Row Template](./rows/row-template)** | Complete row customization with Blazor templates | Unique row presentations | -| **[Detail Template](./rows/detail-template)** | Expandable row sections for additional information | Drill-down exploration | - -## User experience & interaction - -The Blazor TreeGrid provides a comprehensive, accessible user experience with extensive customization options, flexible interaction modes, and accessibility standards compliance. Every aspect of the TreeGrid interface supports customization to match application design systems and workflow requirements. - -**Selection** - -| Feature | Purpose | Key Benefit | -|---------|---------|-------------| -| **[Row Selection](./selection)** | Single or multiple row selection modes | Flexible selection workflows | -| **[Cell Selection](./selection#cell-selection)** | Individual cell or range selection with copy-paste | Spreadsheet-like interaction | -| **[Checkbox Selection](./selection#checkbox-selection)** | Checkbox-based selection with select-all option | Bulk operation selection | -| **[Drag Selection](./selection#drag-selection)** | Drag to select a range of rows or cells | Mouse-friendly bulk selection | -| **[Toggle Selection](./selection#toggle-selection)** | Toggle multiple non-adjacent selections without Ctrl key | Touch-friendly multi-selection | - -**User interaction** - -| Feature | Purpose | Key Benefit | -|---------|---------|-------------| -| **[Toolbar](./toolbar)** | Add customizable toolbars with built-in and custom items | Quick access to actions | -| **[Context Menu](./context-menu)** | Right-click access to TreeGrid actions | Desktop-feel productivity | -| **[Adaptive Layout](./adaptive-layout)** | Automatically adjust layout based on screen space | Optimal display on mobile devices | -| **[State Management](./state-management)** | Save/restore user preferences across sessions | Personalized user experience | - -**Templating & Customization** - -Templating & Customization allows developers to personalize the TreeGrid's headers, cells, rows, editing experience, and detail views with custom UI and behavior. - -| Template Type | Purpose | Key Benefit | -|---------------|---------|--------------| -| **[Header Template](./column#header-template)** | Customize column headers with icons, tooltips, complex formatting | Professional header design | -| **[Column Template](./columns/column-template)** | Custom cell rendering with custom components | Rich data visualization | -| **[Row Template](./rows/row-template)** | Complete row customization for specialized layouts | Unique row presentations | -| **[Detail Template](./rows/detail-template)** | Expandable row sections for additional information | Hierarchical data display | -| **[Globalization](./globalization)** | Culture-aware formatting and right-to-left rendering | Global application support | - -**Accessibility & Keyboard Navigation** - -The Blazor TreeGrid is fully accessible and compliant with Web Content Accessibility Guidelines (WCAG) standards: - -- **[WAI-ARIA](./accessibility#wai-aria)** — Accessible roles and attributes for TreeGrid UI -- **[Keyboard interaction](./accessibility#keyboard-interaction)** — Complete TreeGrid operations via keyboard - - Tab/Shift+Tab — Navigate between cells - - Arrow Keys — Move between rows and columns - - Enter — Edit cells, confirm changes - - Escape — Cancel editing - - Ctrl+A — Select all rows -- **[Screen Reader Support](./accessibility)** — Full compatibility with assistive technologies -- **[Semantic HTML](./accessibility)** — Proper ARIA labels and semantic markup - -## Export & Reporting - -The Blazor TreeGrid provides comprehensive export and reporting capabilities, enabling users to extract, analyze, and distribute hierarchical grid data in professional document formats: - -| Format | Key Benefit | Best For | -|--------|---------------|----------| -| **[Excel Export](./excel-export)** | Export to XLSX with tree structure preserved, including indent level | Data analysis, spreadsheet workflows | -| **[PDF Export](./exporting)** | Generate formatted PDF documents with custom layouts | Professional reports, archiving | -| **[Print](./print)** | Printer-ready output with page orientation control | Hard copy reports, on-demand printing | - -## Advanced features - -The Blazor TreeGrid includes sophisticated capabilities designed for complex enterprise data scenarios. These advanced features enable developers to build powerful, scalable data management solutions that handle demanding business requirements. - -| Feature | Purpose | Use Case | Key Benefit | -|---------|---------|----------|-------------| -| **[State Management](./state-management)** | Save/restore user preferences across sessions | Column order, visibility, sort states | Personalized user experience | -| **[Detail Templates](./rows/detail-template)** | Expandable row sections for additional information | Product details, historical data | Drill-down exploration | -| **[Global/Local Formatting](./globalization)** | Consistent or column-specific formatting | Currency, dates, numbers, text | Professional presentation | -| **[Events](./events)** | Event handlers for every user and API action in the TreeGrid | Custom workflows and integrations | Deep integration points | - -**Enterprise Patterns** - -For specific implementation patterns, refer to feature documentation: - -- **Large Enterprises** — Use [State Management](./state-management) and [Row Drag and Drop](./rows/row-drag-and-drop) to reorganize large trees -- **Real-time Systems** — Implement [Custom Binding](./custom-binding) with live data streams -- **Bulk Data Transfer** — Combine [Clipboard](./clipboard) with [Batch Editing](./editing/batch-editing) - -## System requirements - -The Blazor TreeGrid works with: - -- **Blazor Version**: .NET 8.0 or higher -- **Hosting Models**: Blazor Server, Blazor WebAssembly, Blazor Web App -- **Browsers**: Chrome, Firefox, Safari, Edge (latest versions) -- **Mobile**: iOS Safari, Android Chrome - -## Quick links - -**Getting Started:** -- [Blazor Web App Guide](./getting-started-webapp) -- [Blazor WebAssembly Guide](./getting-started) -- [Blazor Server App Guide](./getting-started-with-server-app) -- [Blazor Hybrid MAUI App Guide](./getting-started-with-maui-app) - -**Popular Features:** -- [Row Drag and Drop](./rows/row-drag-and-drop) — Reorganize tree structures interactively -- [Filtering & Searching](./filter) — Search and filter capabilities -- [Sorting](./sorting) — Data organization and analysis -- [Editing & CRUD](./editing/edit) — Create, read, update, delete operations -- [Export & Reporting](./excel-export) — Excel, PDF, and print functionality -- [Data Validation](./editing/column-validation) — Built-in and custom validation rules - -## Support & Resources - -- **Questions?** Visit the [Syncfusion Support Portal](https://www.syncfusion.com/support) -- **Code Examples?** Browse [TreeGrid Demos](https://www.syncfusion.com/blazor-components/blazor-tree-grid) and samples -- **API Details?** See [TreeGrid API Reference](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html) -- **Community?** Join the [Syncfusion Community Forum](https://www.syncfusion.com/forums/blazor-components) -- **What's New?** Check [Release Notes](../Release-Notes)