001: Overview changes for the grid sdk documentations

grid-sdk/blazor/data-grid/overview.md

@@ -0,0 +1,267 @@
+---
+layout: post
+title: Blazor DataGrid Component - Fast Data Management & CRUD | Syncfusion
+description: Learn how to use Syncfusion Blazor DataGrid for data management, CRUD operations, sorting, filtering, grouping, paging, virtualization, and customization.
+platform: Blazor
+control: DataGrid
+documentation: ug
+---
+
+# Overview of Syncfusion Blazor DataGrid Component
+
+## What is Syncfusion Blazor DataGrid?
+
+The Blazor DataGrid is a powerful and feature-rich UI component designed for displaying and managing tabular data with high performance and flexibility. It offers a comprehensive set of enterprise-grade capabilities, including advanced data operations, seamless integration with multiple data sources, and extensive customization options. Built for scalability, it enables developers to create responsive, data-intensive applications with ease.
+
+## Common Use Cases
+
+The Blazor DataGrid is ideal for a wide range of business scenarios:
+
+| Use Case | Description | Key Features |
+|----------|-------------|--------------|
+| **Customer Management** | Display and manage customer records with filtering, sorting, and inline editing | Search, Filter, Edit, Export |
+| **Sales & Orders** | Track orders, sales transactions, and order details with real-time updates | Grouping, Aggregates, Master-Detail |
+| **Employee Directory** | Manage employee information with hierarchical reporting structures | Hierarchical Grid, Selection, Export |
+| **Financial Data** | Display and analyze financial records with calculations and aggregations | Aggregates, Formatting, Virtualization |
+| **Analytics Dashboards** | Visualize KPIs and metrics with dynamic filtering and grouping | Filtering, Grouping, State Management |
+| **Inventory Management** | Track stock levels with batch updates and multi-column sorting | Batch Editing, Sorting, Paging |
+
+## Data Connectivity
+
+The Blazor DataGrid enables multiple data binding approaches, offering flexibility in choosing the right strategy for different application architectures. The DataGrid can work with in-memory collections for small datasets, connect to remote services for scalable applications, or leverage ORM frameworks for seamless database integration.
+
+### Data Binding Approaches
+
+- **[In-Memory Data](./data-binding/local-data)** — Bind grids to local collections and lists for fast data access without external dependencies. Ideal for small to medium datasets and rapid prototyping.
+
+- **[Remote Data Sources](./data-binding/remote-data)** — Connect to **web services, REST APIs**, and remote endpoints with automatic request handling and response parsing. Perfect for scalable applications with large or frequently updated datasets.
+
+- **ORM Integration** — Seamless integration with popular Object-Relational Mapping frameworks eliminates custom data mapping code and enables LINQ-based queries.
+  - [Entity Framework](./connecting-to-orm/entityframework) — Direct integration with EF Core for simplified database model binding
+  - [Dapper](./connecting-to-orm/dapper) — Lightweight ORM support for direct SQL control with minimal overhead
+
+- **Backend Services & Real-Time Sync** — Enterprise-grade integrations for live data synchronization and advanced operations
+  - [SignalR](./connecting-to-backends/signalr) — Real-time data updates across multiple users and browser instances
+  - [Elasticsearch](./connecting-to-backends/elasticsearch) — Full-text search and powerful aggregation capabilities for large-scale datasets
+
+### Database Compatibility
+
+The DataGrid integrates with virtually any data source through native connectors and adaptor patterns:
+
+| Database | Key Benefit | Best For |
+|----------|---------------|----------|
+| **[Microsoft SQL Server](./connecting-to-database/microsoft-sql-server)** | ADO.NET & Entity Framework integration | Enterprise applications, complex queries |
+| **[MySQL Server](./connecting-to-database/mysql-server)** | Cross-platform connectivity | Web applications, open-source stacks |
+| **[PostgreSQL](./connecting-to-database/postgresql-server)** | Advanced relational features | Large-scale applications, complex data structures |
+| **[SQLite](./connecting-to-database/sqlite-server)** | Embedded database | Desktop apps, mobile apps, local storage |
+
+### Modern databases & cloud platforms
+
+Connect your application to modern databases and cloud-hosted data platforms. These integrations provide scalable, flexible, and real-time data storage solutions for applications that require high performance, dynamic schemas, and seamless cloud synchronization.
+
+| Platform | Key Benefit | Best For |
+|----------|---------------|----------|
+| **[MongoDB](./connecting-to-database/mongodb-server)** | Document-based storage | Flexible schemas, unstructured data |
+| **[Firebase Firestore](./connecting-to-database/firebase-firestore)** | Cloud real-time sync | Mobile apps, real-time applications |
+
+### API & Service Integration
+
+| Technology | Key Benefit | Use Case |
+|-----------|---------------|----------|
+| **[GraphQL Adaptor](./connecting-to-adaptors/graphql-adaptor)** | Flexible query APIs | Modern APIs, optimized payloads |
+| **[Web API Adaptor](./connecting-to-adaptors/web-api-adaptor)** | RESTful services | ASP.NET backend, REST endpoints |
+| **[OData V4 Adaptor](./connecting-to-adaptors/odatav4-adaptor)** | Standardized queries | Enterprise services, standardized operations |
+| **[URL Adaptor](./connecting-to-adaptors/url-adaptor)** | Simple HTTP endpoints | Quick integrations, public APIs |
+| **[Custom Adaptor](./connecting-to-adaptors/custom-adaptor)** | Custom implementations | Specialized back ends, proprietary systems |
+
+### Large-scale rendering performance
+
+The Blazor DataGrid is engineered for exceptional performance, enabling smooth operation with datasets ranging from hundreds to hundreds of thousands of rows. Advanced rendering techniques, intelligent caching, and WebAssembly optimizations ensure responsive user interactions without performance degradation.
+
+| Feature | Benefit | Use Case | Key Benefit |
+|---------|---------|----------|---------------|
+| **[Row Virtualization](./virtual-scrolling#row-virtualization)** | Render only visible rows; dynamically load/unload as users scroll | Large datasets (10K+ rows) | Smooth 60fps scrolling |
+| **[Column Virtualization](./virtual-scrolling#column-virtualization)** | Render only visible columns; optimize for many-column grids | Wide grids (50+ columns) | Efficient horizontal scrolling |
+| **[Lazy-load Grouping](./lazy-load-grouping)** | Load group data on demand when expanded | Grouped datasets | Reduced initial load time |
+| **[Infinite Scrolling](./infinite-scrolling)** | Load records progressively as users scroll | Continuous data exploration | Seamless navigation |
+
+### Data Operations
+
+The Blazor DataGrid provides comprehensive data manipulation capabilities that enable users to analyze, organize, and understand their data efficiently:
+
+**Sorting & Filtering**
+
+| Feature | Purpose | Key Benefit |
+|---------|---------|-------------|
+| **[Sorting](./sorting)** | Arrange records in ascending or descending order to identify trends and patterns | Quick sort by clicking column headers |
+| **[Filter Bar](./filter-bar)** | Quick filtering with inline text inputs in column headers | Immediate results without dialogs |
+| **[Filter Menu](./filter-menu)** | Advanced filtering with complex conditions and multiple criteria | Powerful expression-based filtering |
+| **[Excel-like Filter](./excel-like-filter)** | Familiar checkbox-based filtering interface | Multi-select from available values |
+| **[Searching](./searching)** | Rapid text-based search across one or multiple columns | Global or column-specific search |
+
+**Grouping & Aggregation**
+
+| Feature | Purpose | Key Benefit |
+|---------|---------|-------------|
+| **[Grouping](./grouping)** | Organize records into categories for better data comprehension | Multi-level hierarchical grouping |
+| **[Aggregates](./aggregates)** | Calculate summary values (sum, average, min, max) on grouped data | Built-in aggregate functions |
+| **[Footer Aggregate](./footer-aggregate)** | Display summary totals in the grid footer | Overall statistics for all visible records |
+| **[Group Caption Aggregate](./group-and-caption-aggregate)** | Show aggregated values within group headers | Summary per group |
+| **[Custom Aggregate](./custom-aggregate)** | Define custom calculation logic beyond standard functions | Specialized business calculations |
+| **[Reactive Aggregate](./reactive-aggregate)** | Automatically update aggregates in real-time when data changes | Live calculation updates |
+
+## Editing & CRUD Operations
+
+The Blazor DataGrid enables seamless Create, Read, Update, and Delete (CRUD) operations directly within the grid interface, eliminating the need for separate forms or pages. 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 |
+|------|-------------|----------|-------------|
+| **[Inline Editing](./in-line-editing)** | Edit cell content directly in the grid | Quick single-cell edits, power users | Direct editing without dialog overhead |
+| **[Dialog Editing](./dialog-editing)** | Open a dedicated form dialog for editing | Comprehensive multi-field edits | Organized form-based editing with validation |
+| **[Batch Editing](./batch-editing)** | Edit multiple records and submit together | Bulk operations, mass updates | Efficient mass updates with single submission |
+| **[Template Editing](./template-editing)** | Use custom HTML templates for forms | Complex layouts, specialized controls | Flexible, custom-designed edit forms |
+
+### Data Validation
+
+The DataGrid includes built-in [validation with Data Annotations](./column-validation#data-annotation) that enforces business rules using .NET attributes. Validation errors display inline with helpful messages, guiding users to correct data before submission.
+
+## Columns
+
+The Blazor DataGrid offers extensive column and layout customization options for creating professional data displays tailored to any device or workflow. Columns are fully customizable with formatting, resizing, reordering, and visibility controls that adapt to various viewing needs.
+
+**Column Features**
+
+| Feature | Purpose | Key Benefit |
+|---------|---------|-------------|
+| **[Column Formatting](./columns.md)** | Apply predefined or custom formats (currency, dates, percentages, etc.) | Professional number and date display |
+| **[Column Resizing](./column-resizing.md)** | Manually adjust column widths with auto-fit and responsive options | Optimal content visibility |
+| **[Column Reordering](./column-reorder.md)** | Drag column headers to reorder display sequence | User-preferred column arrangement |
+| **[Frozen Columns](./frozen-column)** | Keep key columns visible while scrolling horizontally | Always visible critical information |
+| **[Column Spanning](./column-spanning)** | Extend cells across multiple columns for merged display areas | Grouped or summary information |
+| **[Column Menu](./column-menu)** | Dropdown menu for visibility, filtering, sorting, grouping, autofit | Quick column management |
+| **[Column Chooser](./column-chooser)** | Dialog to dynamically show/hide columns | User-controlled visibility |
+
+## Responsive Design
+
+| Feature | Purpose | Key Benefit |
+|---------|---------|-------------|
+| **[Adaptive Layout](./adaptive-layout)** | Automatically adjust column widths and visibility based on screen space | Optimal display across all devices |
+| **[Mobile Responsive](./adaptive-layout)** | Optimized experience for phones and tablets | Touch-friendly interactions |
+| **[Breakpoint-based Adjustments](./adaptive-layout)** | Different layouts for different screen sizes | Tailored mobile and desktop views |
+
+## Performance Best Practices
+
+For comprehensive performance optimization strategies, best practices, and detailed guidance on handling large datasets, refer to the **[Performance Best Practices](./performance)** documentation.
+
+For WebAssembly-specific optimizations and tuning recommendations, see **[WebAssembly Performance Guidelines](./webassembly-performance)**.
+
+## User Experience & Interaction
+
+The Blazor DataGrid provides a comprehensive, accessible user experience with extensive customization options, flexible interaction modes, and accessibility standards compliance. Every aspect of the grid interface supports customization to match application design systems and workflow requirements.
+
+### Templating & Customization
+
+| Template Type | Purpose | Key Benefit |
+|---------------|---------|-------------|
+| **[Header Template](./column-headers#header-template)** | Customize column headers with icons, tooltips, complex formatting | Professional header design |
+| **[Column Template](./column-template)** | Custom cell rendering with conditional styling and components | Rich data visualization |
+| **[Row Template](./row-template)** | Complete row customization for specialized layouts | Unique row presentations |
+| **[Edit Template](./template-editing)** | Custom edit forms with specialized controls and validation | Complex data entry forms |
+| **[Detail Template](./detail-template)** | Expandable row sections for additional information | Hierarchical data display |
+
+### Selection
+
+| Feature | Purpose | Key Benefit |
+|---------|---------|-------------|
+| **[Row Selection](./row-selection)** | Single or multiple row selection modes | Flexible selection workflows |
+| **[Checkbox Selection](./checkbox-selection)** | Checkbox-based selection with select-all option | Bulk operation selection |
+| **[Cell Selection](./cell-selection)** | Individual cell or range selection with copy-paste | Spreadsheet-like interaction |
+| **[Persist Selection](./selection#persist-selection)** | Maintain selections across sort/filter/page operations | Consistent user context |
+
+### Accessibility & Keyboard Navigation
+
+The DataGrid is fully accessible and compliant with Web Content Accessibility Guidelines (WCAG) standards:
+
+- **[WCAG Compliance](./accessibility)** — Level AA accessibility standards
+- **[Keyboard Shortcuts](./accessibility#keyboard-interaction)** — Complete grid operation 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 DataGrid provides comprehensive export and reporting capabilities, enabling users to extract, analyze, and distribute grid data in professional document formats. Built-in Excel, PDF, and print functionality with customizable templates eliminates the need for external reporting tools.
+
+### Export Formats
+
+| Format | Key Benefit | Best For |
+|--------|---------------|----------|
+| **[Excel Export](./excel-exporting)** | Export to XLSX with formatting, formulas, and styling | Data analysis, spreadsheet workflows, sharing |
+| **[PDF Export](./pdf-export)** | Generate formatted PDF documents with custom layouts | Professional reports, distribution, archiving |
+| **[Print](./print)** | Printer-ready output with page orientation control | Hard copy reports, on-demand printing |
+
+### Export Capabilities
+
+See [Export Documentation](./excel-exporting) for detailed configuration of column selection, filtering, grouping, aggregates, branding, formatting, and custom templates.
+
+## Advanced Features
+
+The Blazor DataGrid 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.
+
+### Enterprise Capabilities
+
+| Feature | Purpose | Use Case | Key Benefit |
+|---------|---------|----------|---------------|
+| **[State Management](./state-management)** | Save/restore user preferences across sessions | Column order, visibility, filters, sorts | Personalized user experience |
+| **[Hierarchical Grids](./detail-template#creating-custom-componenthierarchical-datagrid)** | Master-detail relationships with expandable rows | Orders with line items, parent-child data | Complex data relationships |
+| **[Row Spanning](./row-spanning)** | Extend cells vertically across multiple rows | Visual groupings, summary rows | Specialized layouts |
+| **[Detail Templates](./detail-template)** | Expandable row sections for additional information | Product details, historical data | Drill-down exploration |
+| **[Foreign Key Columns](./foreignkey-column)** | Display related data with automatic lookup | Customer names from ID, category names | Data relationships |
+| **[Global/Local Formatting](./global-local)** | Consistent or column-specific formatting | Currency, dates, numbers, text | Professional presentation |
+
+### Enterprise Patterns
+
+For specific implementation patterns, refer to feature documentation:
+
+- **Large Enterprises** — Use [State Management](./state-management), [Hierarchical Grids](./detail-template#creating-custom-componenthierarchical-datagrid), and [Foreign Key Columns](./foreignkey-column)
+- **Real-time Systems** — Implement [SignalR Integration](./connecting-to-backends/signalr) and [Reactive Aggregates](./reactive-aggregate)
+- **Multi-tenant Applications** — Combine [Custom Adaptors](./connecting-to-adaptors/custom-adaptor) with [State Management](./state-management) and [Detail Templates](./detail-template)
+
+## System Requirements
+
+The Blazor DataGrid 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.md)
+- [Blazor WebAssembly Guide](./getting-started.md)
+
+**Popular Features:**
+- [Filtering & Searching](./filtering) — Search and filter capabilities
+- [Sorting & Grouping](./sorting) — Data organization and analysis
+- [Editing & CRUD](./editing) — Create, read, update, delete operations
+- [Export & Reporting](./excel-exporting) — Excel, PDF, and print functionality
+- [Data Validation](./column-validation) — Built-in and custom validation rules
+
+## Support & Resources
+
+- **Questions?** Visit the [Syncfusion Support Portal](https://www.syncfusion.com/support)
+- **Code Examples?** Browse [DataGrid Demos](https://www.syncfusion.com/blazor-components/blazor-datagrid#example) and samples
+- **API Details?** See [DataGrid API Reference](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html)
+- **Community?** Join the [Syncfusion Community Forum](https://www.syncfusion.com/forums/blazor-components)
+- **What's New?** Check [Release Notes](../Release-Notes)
+

grid-toc.html

@@ -965,6 +965,9 @@
 					</li>
 				</ul>
 			</li>
+			<li>
+				<a href="/grid-sdk/blazor/data-grid/overview">Overview</a>
+			</li>
 			<li>
 				<a href="/grid-sdk/blazor/data-grid/data-binding/data-binding">Data Binding</a>
 				<ul>