From b2784c5ae4310da839bcc715bd1066bc7be586cd Mon Sep 17 00:00:00 2001 From: Sivaranjani Rajasekaran Date: Tue, 1 Sep 2026 12:39:43 +0530 Subject: [PATCH 1/7] Documentation(1045624): Added overview pages for all the grid platforms --- grid-sdk/asp-net-core/data-grid/overview.md | 239 +++++++++++++++++--- grid-sdk/asp-net-mvc/data-grid/overview.md | 239 +++++++++++++++++--- grid-sdk/javascript/data-grid/overview.md | 214 ++++++++++++++++++ grid-sdk/react/data-grid/overview.md | 214 ++++++++++++++++++ grid-sdk/typescript/data-grid/overview.md | 214 ++++++++++++++++++ grid-sdk/vue/data-grid/overview.md | 222 ++++++++++++++++++ 6 files changed, 1276 insertions(+), 66 deletions(-) create mode 100644 grid-sdk/javascript/data-grid/overview.md create mode 100644 grid-sdk/react/data-grid/overview.md create mode 100644 grid-sdk/typescript/data-grid/overview.md create mode 100644 grid-sdk/vue/data-grid/overview.md diff --git a/grid-sdk/asp-net-core/data-grid/overview.md b/grid-sdk/asp-net-core/data-grid/overview.md index 7107b12ec..2460c60fc 100644 --- a/grid-sdk/asp-net-core/data-grid/overview.md +++ b/grid-sdk/asp-net-core/data-grid/overview.md @@ -1,40 +1,213 @@ --- layout: post -title: Overview in Syncfusion ASP.NET Core DataGrid Component -description: Learn here all about Overview in Syncfusion ASP.NET Core DataGrid component of Syncfusion Essential JS 2 and more. +title: ASP.NET Core Grid Overview | Syncfusion +description: Learn how to use ASP.NET Core Data Grid to display and manage tabular data with data binding, paging, sorting, filtering, editing, and templates. platform: grid-sdk -control: Index -publishingplatform: grid-sdk +control: Overview documentation: ug --- +# ASP.NET Core Data Grid Overview -# Overview in ASP.NET Core DataGrid Component - -The DataGrid component is used to display and manipulate tabular data with configuration options to control the way the data is presented. It can pull data from data sources such as array of JavaScript objects, `OData web services`, or `DataManager` and binding data fields to columns. It also displays the column header to identify the field with support for grouped records. - -The most important features available in the DataGrid component are paging, sorting, filtering, searching, and grouping. - -## Key Features - -* [**Data Sources**](./data-binding): Binds the DataGrid component with an array of JavaScript objects or DataManager. -* [**Sorting**](./sorting) and [**Grouping**](./grouping): Supports **n** level of sorting and grouping. -* [**Filtering**](./filtering): Offers filter bar in each column to filter data. -* [**Paging**](./paging): Allows easy switching between pages using the pager bar. -* [**Editing**](./edit): provides the options for create, read, update, and delete operations. -* [**Columns**](./columns): The column definitions are used as the dataSource schema in the DataGrid. This plays a vital role in rendering column values in the required format. -* [**Reordering**](./columns#reorder): Allows drag and drop of any column anywhere in the DataGrid’s column header row, thus allowing repositioning of columns. -* [**Column Chooser**](./columns#column-chooser): The column chooser provides a list of column names paired with check boxes that allow the visibility to be toggled on the fly. -* [**Resizing**](./columns#column-resizing): Resizing allows changing column width on the fly by simply dragging the right corner of the column header. -* [**Freeze**](./scrolling#frozen-rows-and-columns): Columns and rows can be frozen to allow scrolling and comparing cell values. -* [**Cell Spanning**](./columns#column-spanning): DataGrid cells can be spanned based on the preferred criteria. -* [**Foreign Data Source**](./columns#foreign-key-column): This provides the option to show values from external or lookup data sources in a column based on foreign key/value mapping. -* [**Cell Styling**](./how-to#customize-column-styles): DataGrid cell styles can be customized either by using CSS or programmatically. -* [**Selection**](./selection): Rows or cells can be selected in the DataGrid. One or more rows or cells can also be selected by holding Ctrl or Command, or programmatically. -* [**Templates**](./columns#column-template): Templates can be used to create custom user experiences in the DataGrid. -* [**Aggregation**](./aggregates): Provides the option to easily visualized the Aggregates for column values. -* [**Context Menu**](./context-menu): The context menu provides a list of actions to be performed in the DataGrid. It appears when a cell, header, or the pager is right-clicked. -* [**Clipboard**](./clipboard): Selected rows and cells can be copied from the DataGrid. -* [**Export**](./pdf-export): Provides the options to Export the DataGrid data to Excel, PDF, and CSV formats. -* [**RTL Support**](./global-local#right-to-left-rtl): Provides right-to-left mode that aligns the DataGrid content from right to left. -* [**Localization**](./global-local#localization): Provides an inherent support to localize the UI. +The ASP.NET Core Data Grid 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. + +## Common use cases + +The ASP.NET Core Data Grid supports a wide range of data-intensive application scenarios. + +| Use case | Description | Relevant grid capabilities | +|----------|-------------|-----------------------| +| **Enterprise data management** | Manage customers, products, orders, suppliers, and operational records. | CRUD, filtering, sorting, grouping | +| **Financial applications** | Display and analyze transactions, portfolios, market data, and financial records. | Aggregates, formatting, virtualization, remote data | +| **Large-scale applications** | Work with large datasets while maintaining responsive interactions. | Virtualization, infinite scrolling, remote operations | +| **CRM applications** | Manage customer records, service requests, support tickets, and activities. | Searching, editing, selection, filtering | +| **Reporting applications** | Analyze and distribute business data in common document formats. | Aggregation, Excel export, PDF export, printing | + +## Data connectivity + +The ASP.NET Core Data Grid integrates with modern application architectures, supporting local collections, REST APIs, GraphQL services, OData endpoints, ORM frameworks, and relational databases. + +### Data binding approaches + +- **[Local 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](./data-binding/remote-data)** - Connect to web services, REST APIs, and remote endpoints with automatic request handling and response parsing. Ideal for scalable applications with large or frequently updated datasets. + +- **[Custom API binding](./data-binding/remote-data#binding-observable-data-using-async-pipe)** - Connect the Data Grid to external APIs and data services with full control over request handling, response parsing, and data operations. + +- **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)** - Integrate with Entity Framework and EF Core-based applications. + - **[Dapper](./connecting-to-orm/dapper)** - Connect to applications that use lightweight SQL-based data access. + +**Database compatibility** + +The Data Grid integrates with major relational databases to provide seamless data access and management: + +| Database | Key Benefit | Best For | +|----------|---------------|----------| +| **[Microsoft SQL Server](./connecting-to-database/microsoft-sql-server)** | ADO.NET and 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 | + +**API and service integration** + +API and service integration enables the Data Grid to connect seamlessly with GraphQL, Web API, OData, URL, and custom services for flexible backend data access. + +| Integration approach | Best suited for | Key benefit | +|-----------------------|------------------|-------------| +| **[RESTful APIs](./connecting-to-adaptors/url-adaptor)** | Web applications and CRUD-based services | Standard HTTP-based data access | +| **[OData](./connecting-to-adaptors/odatav4-adaptor)** | Queryable enterprise data services | Standardized query and data operations | +| **[GraphQL](./connecting-to-adaptors/graphql-adaptor)** | Applications requiring flexible data queries | Declarative, field-specific data retrieval | +| **[Custom APIs](./data-binding/remote-data)** | Connect applications with external APIs or services | Complete control over server-side data operations and request handling | + +## Data operations + +The ASP.NET Core Data Grid includes key features that make it easier to work with and understand large sets of information. These capabilities support organizing records, locating information efficiently, and summarizing results to enable clear analysis of complex datasets. + +- **[Sorting](./sorting)** - Arrange records in ascending or descending order to quickly identify trends and patterns. +- **[Filter bar](./filtering/filter-bar)** - Apply inline text filters in column headers for immediate results without dialogs. +- **[Filter menu](./filtering/filter-menu)** - Use advanced filtering with complex conditions and multiple criteria for powerful expression-based queries. +- **[Excel-like filter](./excel-like-filter)** - Filter with a familiar checkbox interface, allowing multi-select from available values. +- **[Searching](./searching)** - Perform rapid text-based searches across one or multiple columns for global or column-specific results. +- **[Grouping](./grouping/grouping)** - Organize records into categories with multi-level hierarchical grouping for better comprehension. +- **[Aggregates](./aggregates/aggregates)** - Calculate and display summary values (sum, average, min, max, custom metrics) to gain real-time insights. + +## Large-scale rendering performance + +The ASP.NET Core Data Grid is designed for high performance, ensuring smooth interaction with large datasets. It uses built-in DOM virtualization with paging or virtual scrolling to load data on demand. This approach minimizes memory usage and reduces rendering overhead by limiting the number of active DOM elements, delivering responsive navigation and seamless scrolling even with very large datasets. + +## Editing and CRUD operations + +The ASP.NET Core Data Grid 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 | +|------|-------------|----------|-------------| +| **[In-line editing](./editing/in-line-editing)** | Edit records directly within grid rows | Simple updates and streamlined workflows | Minimal context switching and faster editing | +| **[Dialog editing](./editing/dialog-editing)** | Edit records in a dedicated dialog form | Multi-field data entry | Structured form-based editing with additional space | +| **[Batch editing](./editing/batch-editing)** | Make multiple changes before saving them together | High-volume editing | Efficient commits with fewer server requests | +| **[Cell editing](./editing/cell-editing)** | Edit individual cells within the grid | Frequent data entry, precision-focused editing | Precise cell-level editing and rapid data updates | + +**[Data validation](./editing/validation)**: +Built-in validation rules such as required fields, minimum and maximum values, and numeric-only checks ensure consistent data accuracy. In addition, custom validation rules provide flexibility to define tailored logic for specific business requirements, validating input before changes are saved. + +## Columns + +The ASP.NET Core Data Grid provides flexible column and layout customization with formatting, resizing, reordering, and visibility controls for professional displays. + +- **[Column formatting](./columns/columns)** - Apply predefined or custom formats (currency, dates, percentages) for professional number and date presentation. +- **[Column resizing](./columns/column-resizing)** - Adjust widths manually with auto-fit and responsive options for optimal visibility. +- **[Column reordering](./columns/column-reorder)** - Drag headers to reorder columns for preferred arrangement. +- **[Frozen columns](./columns/frozen-column)** - Keep key columns visible during horizontal scrolling for critical information access. +- **[Column spanning](./columns/column-spanning)** - Extend cells across multiple columns to create grouped or summary layouts. +- **[Column menu](./columns/column-menu)** - Use dropdowns for visibility, filtering, sorting, grouping, and autofit for quick management. +- **[Column chooser](./columns/column-chooser)** - Show or hide columns dynamically with a dialog for configurable visibility. + +## Responsive design + +The ASP.NET Core Data Grid provides [adaptive layouts](./adaptive) and mobile-friendly interactions for a consistent experience across desktop, tablet, and mobile devices. + +## User experience and interaction + +The ASP.NET Core Data Grid delivers accessible, customizable data experiences with flexible interactions, templating, and standards-compliant accessibility support. + +**Templating and customization** + +- **[Header template](./columns/column-headers#header-template)** - Customize column headers with icons, tooltips, or complex formatting for professional design. +- **[Column template](./columns/column-template)** - Render cells with conditional styling and components for rich visualization. +- **[Row template](./row/row-template)** - Apply complete row customization for specialized layouts and unique presentations. +- **[Edit template](./editing/template-editing)** - Build custom edit forms with specialized controls and validation for complex data entry. + +**Selection** + +- **[Row selection](./selection/row-selection)** - Select single or multiple rows for flexible workflows +- **[Checkbox selection](./selection/check-box-selection)** - Use checkboxes with select-all for bulk operations +- **[Cell selection](./selection/cell-selection)** - Choose individual cells or ranges with spreadsheet-like interaction +- **[Persist selection](./selection/selection#persist-selection)** - Retain selections across sorting, filtering, and paging. + +**Accessibility and keyboard navigation** + +The Data Grid 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 - Update 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 and print + +The ASP.NET Core Data Grid provides comprehensive export and reporting capabilities, enabling extraction, analysis, and distribution of grid data in professional document formats. Built-in Excel, PDF, and print functionality with customizable templates eliminates the need for external reporting tools. + +| Format | Key benefit | Best for | +|--------|-------------|----------| +| **[Excel export](./excel-export/excel-exporting)** | Export grid data to Excel while preserving formatting, styling, grouping, and summaries | Business reporting, spreadsheet workflows | +| **[PDF export](./pdf-export/pdf-export)** | Generate professional documents with customizable layouts and formatting | Reports, document distribution, archiving | +| **[CSV export](./excel-export/excel-exporting)** | Export raw tabular data in a lightweight format | Data exchange, system integration, bulk processing | +| **[Print](./print)** | Produce printer-friendly output directly from the Data Grid | Hard-copy operational documents, on-demand printing | + +## Advanced features + +The ASP.NET Core Data Grid 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. + +- **[Master-detail grids](./hierarchy-grid)** - Implement master-detail relationships to display complex parent-child data structures. +- **[Row spanning](./row-spanning)** - Extend cells vertically across rows to create specialized layouts. +- **[Detail templates](./detail-template)** - Add expandable row sections for drill-down exploration and richer data views. +- **[Foreign key columns](./columns/foreign-key-column)** - Automatically look up related data to show meaningful relationships. +- **[Global/Local formatting](./global-local)** - Apply consistent or column-specific formatting for professional presentation of values. +- **[State persistence](./state-management)** - Saves and restores grid configurations such as sorting, filtering, grouping, paging, and column settings across sessions. + +**Enterprise patterns** + +For specific implementation patterns, refer to feature documentation: + +- **Large-scale business applications** - Combine [State management](./state-management), [Hierarchical Grids](./hierarchy-grid), optimized performance techniques like [DOM Virtualization](./scrolling/dom-virtualization), and [Foreign key columns](./columns/foreign-key-column) to deliver responsive experiences across complex datasets. +- **Data-intensive operations** - Leverage [Grouping](./grouping/grouping), [Aggregates](./aggregates/aggregates), and [Filtering](./filtering/filtering) to efficiently manage and analyze large volumes of business data. +- **Reporting and export solutions** - Combine [Aggregates](./aggregates/aggregates), [Excel export](./excel-export/excel-exporting), and [PDF export](./pdf-export/pdf-export) to generate professional business reports and shareable documents. + +## Themes and styling + +Match the ASP.NET Core Data Grid to the application's visual design using built-in themes and customization options. Supported themes are: + +- Fluent 2 +- Material 3 +- Bootstrap 5 +- Tailwind CSS +- Fluent 2 High Contrast + +[Syncfusion Theme Studio](https://ej2.syncfusion.com/aspnetcore/documentation/appearance/theme-studio) allows customization of the Data Grid's appearance by modifying theme variables such as primary, accent, and background colors, enabling consistent styling, lightweight CSS generation, and seamless integration while ensuring the grid aligns with application design requirements. + +[Explore themes and styling](../appearance-and-styling/appearance-styling) + +## Quick links + +**Getting started:** +- [ASP.NET Core Data Grid Guide](./getting-started) + +**Popular features:** +- [Filtering](./filtering/filtering) +- [Sorting](./sorting) +- [Editing and CRUD](./editing) +- [Export and reporting](./excel-export/excel-exporting) +- [Data validation](./editing/validation) + +**Advanced features** +- [DOM Virtualization](./scrolling/dom-virtualization) +- [State management](./state-management) +- [Hierarchical Grid](./hierarchy-grid) + +## Support and resources + +- **Questions?** Visit the [Syncfusion support portal](https://www.syncfusion.com/support) +- **Code Examples?** Browse [Data Grid demos](https://ej2.syncfusion.com/aspnetcore/grid/gridoverview#/fluent2) and samples +- **API Details?** See [Data Grid API reference](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.grids.grid.html) +- **Community?** Join the [Syncfusion community forum](https://www.syncfusion.com/forums/aspnetcore-js2) +- **What's new?** Check [Release notes](../../Release-Notes) \ No newline at end of file diff --git a/grid-sdk/asp-net-mvc/data-grid/overview.md b/grid-sdk/asp-net-mvc/data-grid/overview.md index f20414008..4c5b9138d 100644 --- a/grid-sdk/asp-net-mvc/data-grid/overview.md +++ b/grid-sdk/asp-net-mvc/data-grid/overview.md @@ -1,40 +1,213 @@ --- layout: post -title: Overview in Syncfusion ASP.NET MVC DataGrid Component -description: Learn here all about Overview in Syncfusion ASP.NET MVC DataGrid component of Syncfusion Essential JS 2 and more. +title: ASP.NET MVC Grid Overview | Syncfusion +description: Learn how to use ASP.NET MVC Data Grid to display and manage tabular data with data binding, paging, sorting, filtering, editing, and templates. platform: grid-sdk -control: Index -publishingplatform: grid-sdk +control: Overview documentation: ug --- +# ASP.NET MVC Data Grid Overview -# Overview in ASP.NET MVC DataGrid Component - -The DataGrid component is used to display and manipulate tabular data with configuration options to control the way the data is presented. It can pull data from data sources such as array of JavaScript objects, `OData web services`, or `DataManager` and binding data fields to columns. It also displays the column header to identify the field with support for grouped records. - -The most important features available in the DataGrid component are paging, sorting, filtering, searching, and grouping. - -## Key Features - -* [**Data Sources**](./data-binding): Binds the DataGrid component with an array of JavaScript objects or DataManager. -* [**Sorting**](./sorting) and [**Grouping**](./grouping): Supports **n** level of sorting and grouping. -* [**Filtering**](./filtering): Offers filter bar in each column to filter data. -* [**Paging**](./paging): Allows easy switching between pages using the pager bar. -* [**Editing**](./edit): provides the options for create, read, update, and delete operations. -* [**Columns**](./columns): The column definitions are used as the dataSource schema in the DataGrid. This plays a vital role in rendering column values in the required format. -* [**Reordering**](./columns#reorder): Allows drag and drop of any column anywhere in the DataGrid’s column header row, thus allowing repositioning of columns. -* [**Column Chooser**](./columns#column-chooser): The column chooser provides a list of column names paired with check boxes that allow the visibility to be toggled on the fly. -* [**Resizing**](./columns#column-resizing): Resizing allows changing column width on the fly by simply dragging the right corner of the column header. -* [**Freeze**](./scrolling#frozen-rows-and-columns): Columns and rows can be frozen to allow scrolling and comparing cell values. -* [**Cell Spanning**](./columns#column-spanning): DataGrid cells can be spanned based on the preferred criteria. -* [**Foreign Data Source**](./columns#foreign-key-column): This provides the option to show values from external or lookup data sources in a column based on foreign key/value mapping. -* [**Cell Styling**](./how-to#customize-column-styles): DataGrid cell styles can be customized either by using CSS or programmatically. -* [**Selection**](./selection): Rows or cells can be selected in the DataGrid. One or more rows or cells can also be selected by holding Ctrl or Command, or programmatically. -* [**Templates**](./columns#column-template): Templates can be used to create custom user experiences in the DataGrid. -* [**Aggregation**](./aggregates): Provides the option to easily visualized the Aggregates for column values. -* [**Context Menu**](./context-menu): The context menu provides a list of actions to be performed in the DataGrid. It appears when a cell, header, or the pager is right-clicked. -* [**Clipboard**](./clipboard): Selected rows and cells can be copied from the DataGrid. -* [**Export**](./pdf-export): Provides the options to Export the DataGrid data to Excel, PDF, and CSV formats. -* [**RTL Support**](./global-local#right-to-left-rtl): Provides right-to-left mode that aligns the DataGrid content from right to left. -* [**Localization**](./global-local#localization): Provides an inherent support to localize the UI. +The ASP.NET MVC Data Grid 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. + +## Common use cases + +The ASP.NET MVC Data Grid supports a wide range of data-intensive application scenarios. + +| Use case | Description | Relevant grid capabilities | +|----------|-------------|-----------------------| +| **Enterprise data management** | Manage customers, products, orders, suppliers, and operational records. | CRUD, filtering, sorting, grouping | +| **Financial applications** | Display and analyze transactions, portfolios, market data, and financial records. | Aggregates, formatting, virtualization, remote data | +| **Large-scale applications** | Work with large datasets while maintaining responsive interactions. | Virtualization, infinite scrolling, remote operations | +| **CRM applications** | Manage customer records, service requests, support tickets, and activities. | Searching, editing, selection, filtering | +| **Reporting applications** | Analyze and distribute business data in common document formats. | Aggregation, Excel export, PDF export, printing | + +## Data connectivity + +The ASP.NET MVC Data Grid integrates with modern application architectures, supporting local collections, REST APIs, GraphQL services, OData endpoints, ORM frameworks, and relational databases. + +### Data binding approaches + +- **[Local 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](./data-binding/remote-data)** - Connect to web services, REST APIs, and remote endpoints with automatic request handling and response parsing. Ideal for scalable applications with large or frequently updated datasets. + +- **[Custom API binding](./data-binding/remote-data#binding-observable-data-using-async-pipe)** - Connect the Data Grid to external APIs and data services with full control over request handling, response parsing, and data operations. + +- **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)** - Integrate with Entity Framework and EF Core-based applications. + - **[Dapper](./connecting-to-orm/dapper)** - Connect to applications that use lightweight SQL-based data access. + +**Database compatibility** + +The Data Grid integrates with major relational databases to provide seamless data access and management: + +| Database | Key Benefit | Best For | +|----------|---------------|----------| +| **[Microsoft SQL Server](./connecting-to-database/microsoft-sql-server)** | ADO.NET and 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 | + +**API and service integration** + +API and service integration enables the Data Grid to connect seamlessly with GraphQL, Web API, OData, URL, and custom services for flexible backend data access. + +| Integration approach | Best suited for | Key benefit | +|-----------------------|------------------|-------------| +| **[RESTful APIs](./connecting-to-adaptors/url-adaptor)** | Web applications and CRUD-based services | Standard HTTP-based data access | +| **[OData](./connecting-to-adaptors/odatav4-adaptor)** | Queryable enterprise data services | Standardized query and data operations | +| **[GraphQL](./connecting-to-adaptors/graphql-adaptor)** | Applications requiring flexible data queries | Declarative, field-specific data retrieval | +| **[Custom APIs](./data-binding/remote-data)** | Connect applications with external APIs or services | Complete control over server-side data operations and request handling | + +## Data operations + +The ASP.NET MVC Data Grid includes key features that make it easier to work with and understand large sets of information. These capabilities support organizing records, locating information efficiently, and summarizing results to enable clear analysis of complex datasets. + +- **[Sorting](./sorting)** - Arrange records in ascending or descending order to quickly identify trends and patterns. +- **[Filter bar](./filtering/filter-bar)** - Apply inline text filters in column headers for immediate results without dialogs. +- **[Filter menu](./filtering/filter-menu)** - Use advanced filtering with complex conditions and multiple criteria for powerful expression-based queries. +- **[Excel-like filter](./excel-like-filter)** - Filter with a familiar checkbox interface, allowing multi-select from available values. +- **[Searching](./searching)** - Perform rapid text-based searches across one or multiple columns for global or column-specific results. +- **[Grouping](./grouping/grouping)** - Organize records into categories with multi-level hierarchical grouping for better comprehension. +- **[Aggregates](./aggregates/aggregates)** - Calculate and display summary values (sum, average, min, max, custom metrics) to gain real-time insights. + +## Large-scale rendering performance + +The ASP.NET MVC Data Grid is designed for high performance, ensuring smooth interaction with large datasets. It uses built-in DOM virtualization with paging or virtual scrolling to load data on demand. This approach minimizes memory usage and reduces rendering overhead by limiting the number of active DOM elements, delivering responsive navigation and seamless scrolling even with very large datasets. + +## Editing and CRUD operations + +The ASP.NET MVC Data Grid 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 | +|------|-------------|----------|-------------| +| **[In-line editing](./editing/in-line-editing)** | Edit records directly within grid rows | Simple updates and streamlined workflows | Minimal context switching and faster editing | +| **[Dialog editing](./editing/dialog-editing)** | Edit records in a dedicated dialog form | Multi-field data entry | Structured form-based editing with additional space | +| **[Batch editing](./editing/batch-editing)** | Make multiple changes before saving them together | High-volume editing | Efficient commits with fewer server requests | +| **[Cell editing](./editing/cell-editing)** | Edit individual cells within the grid | Frequent data entry, precision-focused editing | Precise cell-level editing and rapid data updates | + +**[Data validation](./editing/validation)**: +Built-in validation rules such as required fields, minimum and maximum values, and numeric-only checks ensure consistent data accuracy. In addition, custom validation rules provide flexibility to define tailored logic for specific business requirements, validating input before changes are saved. + +## Columns + +The ASP.NET MVC Data Grid provides flexible column and layout customization with formatting, resizing, reordering, and visibility controls for professional displays. + +- **[Column formatting](./columns/columns)** - Apply predefined or custom formats (currency, dates, percentages) for professional number and date presentation. +- **[Column resizing](./columns/column-resizing)** - Adjust widths manually with auto-fit and responsive options for optimal visibility. +- **[Column reordering](./columns/column-reorder)** - Drag headers to reorder columns for preferred arrangement. +- **[Frozen columns](./columns/frozen-column)** - Keep key columns visible during horizontal scrolling for critical information access. +- **[Column spanning](./columns/column-spanning)** - Extend cells across multiple columns to create grouped or summary layouts. +- **[Column menu](./columns/column-menu)** - Use dropdowns for visibility, filtering, sorting, grouping, and autofit for quick management. +- **[Column chooser](./columns/column-chooser)** - Show or hide columns dynamically with a dialog for configurable visibility. + +## Responsive design + +The ASP.NET MVC Data Grid provides [adaptive layouts](./adaptive) and mobile-friendly interactions for a consistent experience across desktop, tablet, and mobile devices. + +## User experience and interaction + +The ASP.NET MVC Data Grid delivers accessible, customizable data experiences with flexible interactions, templating, and standards-compliant accessibility support. + +**Templating and customization** + +- **[Header template](./columns/column-headers#header-template)** - Customize column headers with icons, tooltips, or complex formatting for professional design. +- **[Column template](./columns/column-template)** - Render cells with conditional styling and components for rich visualization. +- **[Row template](./row/row-template)** - Apply complete row customization for specialized layouts and unique presentations. +- **[Edit template](./editing/template-editing)** - Build custom edit forms with specialized controls and validation for complex data entry. + +**Selection** + +- **[Row selection](./selection/row-selection)** - Select single or multiple rows for flexible workflows +- **[Checkbox selection](./selection/check-box-selection)** - Use checkboxes with select-all for bulk operations +- **[Cell selection](./selection/cell-selection)** - Choose individual cells or ranges with spreadsheet-like interaction +- **[Persist selection](./selection/selection#persist-selection)** - Retain selections across sorting, filtering, and paging. + +**Accessibility and keyboard navigation** + +The Data Grid 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 - Update 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 and print + +The ASP.NET MVC Data Grid provides comprehensive export and reporting capabilities, enabling extraction, analysis, and distribution of grid data in professional document formats. Built-in Excel, PDF, and print functionality with customizable templates eliminates the need for external reporting tools. + +| Format | Key benefit | Best for | +|--------|-------------|----------| +| **[Excel export](./excel-export/excel-exporting)** | Export grid data to Excel while preserving formatting, styling, grouping, and summaries | Business reporting, spreadsheet workflows | +| **[PDF export](./pdf-export/pdf-export)** | Generate professional documents with customizable layouts and formatting | Reports, document distribution, archiving | +| **[CSV export](./excel-export/excel-exporting)** | Export raw tabular data in a lightweight format | Data exchange, system integration, bulk processing | +| **[Print](./print)** | Produce printer-friendly output directly from the Data Grid | Hard-copy operational documents, on-demand printing | + +## Advanced features + +The ASP.NET MVC Data Grid 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. + +- **[Master-detail grids](./hierarchy-grid)** - Implement master-detail relationships to display complex parent-child data structures. +- **[Row spanning](./row-spanning)** - Extend cells vertically across rows to create specialized layouts. +- **[Detail templates](./detail-template)** - Add expandable row sections for drill-down exploration and richer data views. +- **[Foreign key columns](./columns/foreign-key-column)** - Automatically look up related data to show meaningful relationships. +- **[Global/Local formatting](./global-local)** - Apply consistent or column-specific formatting for professional presentation of values. +- **[State persistence](./state-management)** - Saves and restores grid configurations such as sorting, filtering, grouping, paging, and column settings across sessions. + +**Enterprise patterns** + +For specific implementation patterns, refer to feature documentation: + +- **Large-scale business applications** - Combine [State management](./state-management), [Hierarchical Grids](./hierarchy-grid), optimized performance techniques like [DOM Virtualization](./scrolling/dom-virtualization), and [Foreign key columns](./columns/foreign-key-column) to deliver responsive experiences across complex datasets. +- **Data-intensive operations** - Leverage [Grouping](./grouping/grouping), [Aggregates](./aggregates/aggregates), and [Filtering](./filtering/filtering) to efficiently manage and analyze large volumes of business data. +- **Reporting and export solutions** - Combine [Aggregates](./aggregates/aggregates), [Excel export](./excel-export/excel-exporting), and [PDF export](./pdf-export/pdf-export) to generate professional business reports and shareable documents. + +## Themes and styling + +Match the ASP.NET MVC Data Grid to the application's visual design using built-in themes and customization options. Supported themes are: + +- Fluent 2 +- Material 3 +- Bootstrap 5 +- Tailwind CSS +- Fluent 2 High Contrast + +[Syncfusion Theme Studio](https://ej2.syncfusion.com/aspnetmvc/documentation/appearance/theme-studio) allows customization of the Data Grid's appearance by modifying theme variables such as primary, accent, and background colors, enabling consistent styling, lightweight CSS generation, and seamless integration while ensuring the grid aligns with application design requirements. + +[Explore themes and styling](../appearance-and-styling/appearance-styling) + +## Quick links + +**Getting started:** +- [ASP.NET MVC Data Grid Guide](./getting-started) + +**Popular features:** +- [Filtering](./filtering/filtering) +- [Sorting](./sorting) +- [Editing and CRUD](./editing) +- [Export and reporting](./excel-export/excel-exporting) +- [Data validation](./editing/validation) + +**Advanced features** +- [DOM Virtualization](./scrolling/dom-virtualization) +- [State management](./state-management) +- [Hierarchical Grid](./hierarchy-grid) + +## Support and resources + +- **Questions?** Visit the [Syncfusion support portal](https://www.syncfusion.com/support) +- **Code Examples?** Browse [Data Grid demos](https://ej2.syncfusion.com/aspnetmvc/grid/gridoverview#/fluent2) and samples +- **API Details?** See [Data Grid API reference](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.grids.grid.html) +- **Community?** Join the [Syncfusion community forum](https://www.syncfusion.com/forums/aspnetmvc-js2) +- **What's new?** Check [Release notes](../../Release-Notes) \ No newline at end of file diff --git a/grid-sdk/javascript/data-grid/overview.md b/grid-sdk/javascript/data-grid/overview.md new file mode 100644 index 000000000..0e0cf12db --- /dev/null +++ b/grid-sdk/javascript/data-grid/overview.md @@ -0,0 +1,214 @@ +--- +layout: post +title: Javascript Data Grid Overview and Features | Syncfusion +description: Learn how to use Javascript Data Grid for data management, CRUD operations, sorting, filtering, grouping, paging, and virtualization. +platform: grid-sdk +control: Overview +documentation: ug +domainurl: https://help.syncfusion.com/grid-sdk +--- + +# Javascript Data Grid Overview + +The Javascript Data Grid 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. + +## Common use cases + +The Javascript Data Grid supports a wide range of data-intensive application scenarios. + +| Use case | Description | Relevant grid capabilities | +|----------|-------------|-----------------------| +| **Enterprise data management** | Manage customers, products, orders, suppliers, and operational records. | CRUD, filtering, sorting, grouping | +| **Financial applications** | Display and analyze transactions, portfolios, market data, and financial records. | Aggregates, formatting, virtualization, remote data | +| **Large-scale applications** | Work with large datasets while maintaining responsive interactions. | Virtualization, infinite scrolling, remote operations | +| **CRM applications** | Manage customer records, service requests, support tickets, and activities. | Searching, editing, selection, filtering | +| **Reporting applications** | Analyze and distribute business data in common document formats. | Aggregation, Excel export, PDF export, printing | + +## Data connectivity + +The Javascript Data Grid integrates with modern application architectures, supporting local collections, REST APIs, GraphQL services, OData endpoints, ORM frameworks, and relational databases. + +### Data binding approaches + +- **[Local 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](./data-binding/remote-data)** - Connect to web services, REST APIs, and remote endpoints with automatic request handling and response parsing. Ideal for scalable applications with large or frequently updated datasets. + +- **[Custom API binding](./data-binding/remote-data)** - Connect the Data Grid to external APIs and data services with full control over request handling, response parsing, and data operations. + +- **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)** - Integrate with Entity Framework and EF Core-based applications. + - **[Dapper](./connecting-to-orm/dapper)** - Connect to applications that use lightweight SQL-based data access. + +**Database compatibility** + +The Data Grid integrates with major relational databases to provide seamless data access and management: + +| Database | Key Benefit | Best For | +|----------|---------------|----------| +| **[Microsoft SQL Server](./connecting-to-database/microsoft-sql-server)** | ADO.NET and 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 | + +**API and service integration** + +API and service integration enables the Data Grid to connect seamlessly with GraphQL, Web API, OData, URL, and custom services for flexible backend data access. + +| Integration approach | Best suited for | Key benefit | +|-----------------------|------------------|-------------| +| **[RESTful APIs](./connecting-to-adaptors/url-adaptor)** | Web applications and CRUD-based services | Standard HTTP-based data access | +| **[OData](./connecting-to-adaptors/odatav4-adaptor)** | Queryable enterprise data services | Standardized query and data operations | +| **[GraphQL](./connecting-to-adaptors/graphql-adaptor)** | Applications requiring flexible data queries | Declarative, field-specific data retrieval | +| **[Custom APIs](./data-binding/remote-data)** | Connect applications with external APIs or services | Complete control over server-side data operations and request handling | + +## Data operations + +The Javascript Data Grid includes key features that make it easier to work with and understand large sets of information. These capabilities support organizing records, locating information efficiently, and summarizing results to enable clear analysis of complex datasets. + +- **[Sorting](./sorting)** - Arrange records in ascending or descending order to quickly identify trends and patterns. +- **[Filter bar](./filtering/filter-bar)** - Apply inline text filters in column headers for immediate results without dialogs. +- **[Filter menu](./filtering/filter-menu)** - Use advanced filtering with complex conditions and multiple criteria for powerful expression-based queries. +- **[Excel-like filter](./excel-like-filter)** - Filter with a familiar checkbox interface, allowing multi-select from available values. +- **[Searching](./searching)** - Perform rapid text-based searches across one or multiple columns for global or column-specific results. +- **[Grouping](./grouping/grouping)** - Organize records into categories with multi-level hierarchical grouping for better comprehension. +- **[Aggregates](./aggregates/aggregates)** - Calculate and display summary values (sum, average, min, max, custom metrics) to gain real-time insights. + +## Large-scale rendering performance + +The Javascript Data Grid is designed for high performance, ensuring smooth interaction with large datasets. It uses built-in DOM virtualization with paging or virtual scrolling to load data on demand. This approach minimizes memory usage and reduces rendering overhead by limiting the number of active DOM elements, delivering responsive navigation and seamless scrolling even with very large datasets. + +## Editing and CRUD operations + +The Javascript Data Grid 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 | +|------|-------------|----------|-------------| +| **[In-line editing](./editing/in-line-editing)** | Edit records directly within grid rows | Simple updates and streamlined workflows | Minimal context switching and faster editing | +| **[Dialog editing](./editing/dialog-editing)** | Edit records in a dedicated dialog form | Multi-field data entry | Structured form-based editing with additional space | +| **[Batch editing](./editing/batch-editing)** | Make multiple changes before saving them together | High-volume editing | Efficient commits with fewer server requests | +| **[Cell editing](./editing/cell-editing)** | Edit individual cells within the grid | Frequent data entry, precision-focused editing | Precise cell-level editing and rapid data updates | + +**[Data validation](./editing/validation)**: +Built-in validation rules such as required fields, minimum and maximum values, and numeric-only checks ensure consistent data accuracy. In addition, custom validation rules provide flexibility to define tailored logic for specific business requirements, validating input before changes are saved. + +## Columns + +The Javascript Data Grid provides flexible column and layout customization with formatting, resizing, reordering, and visibility controls for professional displays. + +- **[Column formatting](./columns/columns)** - Apply predefined or custom formats (currency, dates, percentages) for professional number and date presentation. +- **[Column resizing](./columns/column-resizing)** - Adjust widths manually with auto-fit and responsive options for optimal visibility. +- **[Column reordering](./columns/column-reorder)** - Drag headers to reorder columns for preferred arrangement. +- **[Frozen columns](./columns/frozen-column)** - Keep key columns visible during horizontal scrolling for critical information access. +- **[Column spanning](./columns/column-spanning)** - Extend cells across multiple columns to create grouped or summary layouts. +- **[Column menu](./columns/column-menu)** - Use dropdowns for visibility, filtering, sorting, grouping, and autofit for quick management. +- **[Column chooser](./columns/column-chooser)** - Show or hide columns dynamically with a dialog for configurable visibility. + +## Responsive design + +The Javascript Data Grid provides [adaptive layouts](./adaptive) and mobile-friendly interactions for a consistent experience across desktop, tablet, and mobile devices. + +## User experience and interaction + +The Javascript Data Grid delivers accessible, customizable data experiences with flexible interactions, templating, and standards-compliant accessibility support. + +**Templating and customization** + +- **[Header template](./columns/column-headers#header-template)** - Customize column headers with icons, tooltips, or complex formatting for professional design. +- **[Column template](./columns/column-template)** - Render cells with conditional styling and components for rich visualization. +- **[Row template](./row/row-template)** - Apply complete row customization for specialized layouts and unique presentations. +- **[Edit template](./editing/template-editing)** - Build custom edit forms with specialized controls and validation for complex data entry. + +**Selection** + +- **[Row selection](./selection/row-selection)** - Select single or multiple rows for flexible workflows +- **[Checkbox selection](./selection/check-box-selection)** - Use checkboxes with select-all for bulk operations +- **[Cell selection](./selection/cell-selection)** - Choose individual cells or ranges with spreadsheet-like interaction +- **[Persist selection](./selection/selection#persist-selection)** - Retain selections across sorting, filtering, and paging. + +**Accessibility and keyboard navigation** + +The Data Grid 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 - Update 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 and print + +The Javascript Data Grid provides comprehensive export and reporting capabilities, enabling extraction, analysis, and distribution of grid data in professional document formats. Built-in Excel, PDF, and print functionality with customizable templates eliminates the need for external reporting tools. + +| Format | Key benefit | Best for | +|--------|-------------|----------| +| **[Excel export](./excel-export/excel-exporting)** | Export grid data to Excel while preserving formatting, styling, grouping, and summaries | Business reporting, spreadsheet workflows | +| **[PDF export](./pdf-export/pdf-export)** | Generate professional documents with customizable layouts and formatting | Reports, document distribution, archiving | +| **[CSV export](./excel-export/excel-exporting)** | Export raw tabular data in a lightweight format | Data exchange, system integration, bulk processing | +| **[Print](./print)** | Produce printer-friendly output directly from the Data Grid | Hard-copy operational documents, on-demand printing | + +## Advanced features + +The Javascript Data Grid 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. + +- **[Master-detail grids](./hierarchy-grid)** - Implement master-detail relationships to display complex parent-child data structures. +- **[Row spanning](./row-spanning)** - Extend cells vertically across rows to create specialized layouts. +- **[Detail templates](./detail-template)** - Add expandable row sections for drill-down exploration and richer data views. +- **[Foreign key columns](./columns/foreign-key-column)** - Automatically look up related data to show meaningful relationships. +- **[Global/Local formatting](./global-local)** - Apply consistent or column-specific formatting for professional presentation of values. +- **[State persistence](./state-management)** - Saves and restores grid configurations such as sorting, filtering, grouping, paging, and column settings across sessions. + +**Enterprise patterns** + +For specific implementation patterns, refer to feature documentation: + +- **Large-scale business applications** - Combine [State management](./state-management), [Hierarchical Grids](./hierarchy-grid), optimized performance techniques like [DOM Virtualization](./scrolling/dom-virtualization), and [Foreign key columns](./columns/foreign-key-column) to deliver responsive experiences across complex datasets. +- **Data-intensive operations** - Leverage [Grouping](./grouping/grouping), [Aggregates](./aggregates/aggregates), and [Filtering](./filtering/filtering) to efficiently manage and analyze large volumes of business data. +- **Reporting and export solutions** - Combine [Aggregates](./aggregates/aggregates), [Excel export](./excel-export/excel-exporting), and [PDF export](./pdf-export/pdf-export) to generate professional business reports and shareable documents. + +## Themes and styling + +Match the Javascript Data Grid to the application's visual design using built-in themes and customization options. Supported themes are: + +- Fluent 2 +- Material 3 +- Bootstrap 5 +- Tailwind CSS +- Fluent 2 High Contrast + +[Syncfusion Theme Studio](https://ej2.syncfusion.com/javascript/documentation/appearance/theme-studio) allows customization of the Data Grid's appearance by modifying theme variables such as primary, accent, and background colors, enabling consistent styling, lightweight CSS generation, and seamless integration while ensuring the grid aligns with application design requirements. + +[Explore themes and styling](../appearance-and-styling/appearance-styling) + +## Quick links + +**Getting started:** +- [Javascript Data Grid Guide](./getting-started) + +**Popular features:** +- [Filtering](./filtering/filtering) +- [Sorting](./sorting) +- [Editing and CRUD](./editing) +- [Export and reporting](./excel-export/excel-exporting) +- [Data validation](./editing/validation) + +**Advanced features** +- [DOM Virtualization](./scrolling/dom-virtualization) +- [State management](./state-management) +- [Hierarchical Grid](./hierarchy-grid) + +## Support and resources + +- **Questions?** Visit the [Syncfusion support portal](https://www.syncfusion.com/support) +- **Code Examples?** Browse [Data Grid demos](https://ej2.syncfusion.com/javascript/demos/#/tailwind3/grid/grid-overview.html) and samples +- **API Details?** See [Data Grid API reference](https://ej2.syncfusion.com/javascript/documentation/api/grid/index-default) +- **Community?** Join the [Syncfusion community forum](https://www.syncfusion.com/forums/essential-js2) +- **What's New?** Check [Release notes](../../Release-Notes) \ No newline at end of file diff --git a/grid-sdk/react/data-grid/overview.md b/grid-sdk/react/data-grid/overview.md new file mode 100644 index 000000000..79f33d063 --- /dev/null +++ b/grid-sdk/react/data-grid/overview.md @@ -0,0 +1,214 @@ +--- +layout: post +title: React Data Grid Overview and Features | Syncfusion +description: Learn how to use React Data Grid for data management, CRUD operations, sorting, filtering, grouping, paging, and virtualization. +platform: ej2-react +control: Overview +documentation: ug +domainurl: ##DomainURL## +--- + +# React Data Grid Overview + +The React Data Grid 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. + +## Common use cases + +The React Data Grid supports a wide range of data-intensive application scenarios. + +| Use case | Description | Relevant grid capabilities | +|----------|-------------|-----------------------| +| **Enterprise data management** | Manage customers, products, orders, suppliers, and operational records. | CRUD, filtering, sorting, grouping | +| **Financial applications** | Display and analyze transactions, portfolios, market data, and financial records. | Aggregates, formatting, virtualization, remote data | +| **Large-scale applications** | Work with large datasets while maintaining responsive interactions. | Virtualization, infinite scrolling, remote operations | +| **CRM applications** | Manage customer records, service requests, support tickets, and activities. | Searching, editing, selection, filtering | +| **Reporting applications** | Analyze and distribute business data in common document formats. | Aggregation, Excel export, PDF export, printing | + +## Data connectivity + +The React Data Grid integrates with modern application architectures, supporting local collections, REST APIs, GraphQL services, OData endpoints, ORM frameworks, and relational databases. + +### Data binding approaches + +- **[Local 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](./data-binding/remote-data)** - Connect to web services, REST APIs, and remote endpoints with automatic request handling and response parsing. Ideal for scalable applications with large or frequently updated datasets. + +- **[Custom API binding and Redux service](./data-binding/remote-data)** - Connect the Data Grid to custom APIs and data services using custom binding, while managing application state through Redux. + +- **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)** - Integrate with Entity Framework and EF Core-based applications. + - **[Dapper](./connecting-to-orm/dapper)** - Connect to applications that use lightweight SQL-based data access. + +**Database compatibility** + +The Data Grid integrates with major relational databases to provide seamless data access and management: + +| Database | Key benefit | Best for | +|----------|---------------|----------| +| **[Microsoft SQL Server](./connecting-to-database/microsoft-sql-server)** | ADO.NET and 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 | + +**API and service integration** + +API and service integration enables the Data Grid to connect seamlessly with GraphQL, Web API, OData, URL, and custom services for flexible backend data access. + +| Integration approach | Best suited for | Key benefit | +|-----------------------|------------------|-------------| +| **[RESTful APIs](./connecting-to-adaptors/url-adaptor)** | Web applications and CRUD-based services | Standard HTTP-based data access | +| **[OData](./connecting-to-adaptors/odatav4-adaptor)** | Queryable enterprise data services | Standardized query and data operations | +| **[GraphQL](./connecting-to-adaptors/graphql-adaptor)** | Applications requiring flexible data queries | Declarative, field-specific data retrieval | +| **[Custom APIs](./data-binding/remote-data)** | Connect applications with external APIs or services | Complete control over server-side data operations and request handling | + +## Data operations + +The React Data Grid includes key features that make it easier to work with and understand large sets of information. These capabilities support organizing records, locating information efficiently, and summarizing results to enable clear analysis of complex datasets. + +- **[Sorting](./sorting)** - Arrange records in ascending or descending order to quickly identify trends and patterns. +- **[Filter bar](./filtering/filter-bar)** - Apply inline text filters in column headers for immediate results without dialogs. +- **[Filter menu](./filtering/filter-menu)** - Use advanced filtering with complex conditions and multiple criteria for powerful expression-based queries. +- **[Excel-like filter](./excel-like-filter)** - Filter with a familiar checkbox interface, allowing multi-select from available values. +- **[Searching](./searching)** - Perform rapid text-based searches across one or multiple columns for global or column-specific results. +- **[Grouping](./grouping/grouping)** - Organize records into categories with multi-level hierarchical grouping for better comprehension. +- **[Aggregates](./aggregates/aggregates)** - Calculate and display summary values (sum, average, min, max, custom metrics) to gain real-time insights. + +## Large-scale rendering performance + +The React Data Grid is designed for high performance, ensuring smooth interaction with large datasets. It uses built-in DOM virtualization with paging or virtual scrolling to load data on demand. This approach minimizes memory usage and reduces rendering overhead by limiting the number of active DOM elements, delivering responsive navigation and seamless scrolling even with very large datasets. + +## Editing and CRUD operations + +The React Data Grid 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 | +|------|-------------|----------|-------------| +| **[In-line editing](./editing/in-line-editing)** | Edit records directly within grid rows | Simple updates and streamlined workflows | Minimal context switching and faster editing | +| **[Dialog editing](./editing/dialog-editing)** | Edit records in a dedicated dialog form | Multi-field data entry | Structured form-based editing with additional space | +| **[Batch editing](./editing/batch-editing)** | Make multiple changes before saving them together | High-volume editing | Efficient commits with fewer server requests | +| **[Cell editing](./editing/cell-editing)** | Edit individual cells within the grid | Frequent data entry, precision-focused editing | Precise cell-level editing and rapid data updates | + +**[Data validation](./editing/validation)**: +Built-in validation rules such as required fields, minimum and maximum values, and numeric-only checks ensure consistent data accuracy. In addition, custom validation rules provide flexibility to define tailored logic for specific business requirements, validating input before changes are saved. + +## Columns + +The React Data Grid provides flexible column and layout customization with formatting, resizing, reordering, and visibility controls for professional displays. + +- **[Column formatting](./columns/columns)** - Apply predefined or custom formats (currency, dates, percentages) for professional number and date presentation. +- **[Column resizing](./columns/column-resizing)** - Adjust widths manually with auto-fit and responsive options for optimal visibility. +- **[Column reordering](./columns/column-reorder)** - Drag headers to reorder columns for preferred arrangement. +- **[Frozen columns](./columns/frozen-column)** - Keep key columns visible during horizontal scrolling for critical information access. +- **[Column spanning](./columns/column-spanning)** - Extend cells across multiple columns to create grouped or summary layouts. +- **[Column menu](./columns/column-menu)** - Use dropdowns for visibility, filtering, sorting, grouping, and autofit for quick management. +- **[Column chooser](./columns/column-chooser)** - Show or hide columns dynamically with a dialog for configurable visibility. + +## Responsive design + +The React Data Grid provides [adaptive layouts](./adaptive) and mobile-friendly interactions for a consistent experience across desktop, tablet, and mobile devices. + +## User experience and interaction + +The React Data Grid delivers accessible, customizable data experiences with flexible interactions, templating, and standards-compliant accessibility support. + +**Templating and customization** + +- **[Header template](./columns/column-headers#header-template)** - Customize column headers with icons, tooltips, or complex formatting for professional design. +- **[Column template](./columns/column-template)** - Render cells with conditional styling and components for rich visualization. +- **[Row template](./row/row-template)** - Apply complete row customization for specialized layouts and unique presentations. +- **[Edit template](./editing/template-editing)** - Build custom edit forms with specialized controls and validation for complex data entry. + +**Selection** + +- **[Row selection](./selection/row-selection)** - Select single or multiple rows for flexible workflows +- **[Checkbox selection](./selection/check-box-selection)** - Use checkboxes with select-all for bulk operations +- **[Cell selection](./selection/cell-selection)** - Choose individual cells or ranges with spreadsheet-like interaction +- **[Persist selection](./selection/selection#persist-selection)** - Retain selections across sorting, filtering, and paging. + +**Accessibility and keyboard navigation** + +The Data Grid 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 - Update 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 and print + +The React Data Grid provides comprehensive export and reporting capabilities, enabling extraction, analysis, and distribution of grid data in professional document formats. Built-in Excel, PDF, and print functionality with customizable templates eliminates the need for external reporting tools. + +| Format | Key benefit | Best for | +|--------|-------------|----------| +| **[Excel export](./excel-export/excel-exporting)** | Export grid data to Excel while preserving formatting, styling, grouping, and summaries | Business reporting, spreadsheet workflows | +| **[PDF export](./pdf-export/pdf-export)** | Generate professional documents with customizable layouts and formatting | Reports, document distribution, archiving | +| **[CSV export](./excel-export/excel-exporting)** | Export raw tabular data in a lightweight format | Data exchange, system integration, bulk processing | +| **[Print](./print)** | Produce printer-friendly output directly from the Data Grid | Hard-copy operational documents, on-demand printing | + +## Advanced features + +The React Data Grid 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. + +- **[Master-detail grids](./hierarchy-grid)** - Implement maste-detail relationships to display complex parent-child data structures. +- **[Row spanning](./row-spanning)** - Extend cells vertically across rows to create specialized layouts. +- **[Detail templates](./detail-template)** - Add expandable row sections for drill-down exploration and richer data views. +- **[Foreign key columns](./columns/foreign-key-column)** - Automatically look up related data to show meaningful relationships. +- **[Global/Local formatting](./global-local)** - Apply consistent or column-specific formatting for professional presentation of values. +- **[State persistence](./state-management)** - Saves and restores grid configurations such as sorting, filtering, grouping, paging, and column settings across sessions. + +**Enterprise patterns** + +For specific implementation patterns, refer to feature documentation: + +- **Large-scale business applications** - Combine [State management](./state-management), [Hierarchical Grids](./hierarchy-grid), optimized performance techniques like [DOM Virtualization](./scrolling/dom-virtualization), and [Foreign key columns](./columns/foreign-key-column) to deliver responsive experiences across complex datasets. +- **Data-intensive operations** - Leverage [Grouping](./grouping/grouping), [Aggregates](./aggregates/aggregates), and [Filtering](./filtering/filtering) to efficiently manage and analyze large volumes of business data. +- **Reporting and export solutions** - Combine [Aggregates](./aggregates/aggregates), [Excel export](./excel-export/excel-exporting), and [PDF export](./pdf-export/pdf-export) to generate professional business reports and shareable documents. + +## Themes and styling + +Match the React Data Grid to the application's visual design using built-in themes and customization options. Supported themes are: + +- Fluent 2 +- Material 3 +- Bootstrap 5 +- Tailwind CSS +- Fluent 2 High Contrast + +[Syncfusion Theme Studio](https://ej2.syncfusion.com/react/documentation/appearance/theme-studio) allows customization of the Data Grid’s appearance by modifying theme variables such as primary, accent, and background colors, enabling consistent styling, lightweight CSS generation, and seamless integration while ensuring the grid aligns with application design requirements + +[Explore themes and styling](../appearance-and-styling/appearance-styling) + +## Quick links + +**Getting started:** +- [React Data Grid Guide](./getting-started) + +**Popular features:** +- [Filtering](./filtering/filtering) +- [Sorting](./sorting) +- [Editing and CRUD](./editing) +- [Export and reporting](./excel-export/excel-exporting) +- [Data validation](./editing/validation) + +**Advanced features** +- [DOM Virtualization](./scrolling/dom-virtualization) +- [State management](./state-management) +- [Hierarchical Grid](./hierarchy-grid) + +## Support and resources + +- **Questions?** Visit the [Syncfusion support portal](https://www.syncfusion.com/support) +- **Code examples?** Browse [Data Grid demos](https://ej2.syncfusion.com/react/demos/#/tailwind3/grid/over-view) and samples +- **API details?** See [Data Grid API reference](https://ej2.syncfusion.com/react/documentation/api/grid/index-default) +- **Community?** Join the [Syncfusion community forum](https://www.syncfusion.com/forums/react-js2) +- **What's new?** Check [Release notes](../Release-Notes) \ No newline at end of file diff --git a/grid-sdk/typescript/data-grid/overview.md b/grid-sdk/typescript/data-grid/overview.md new file mode 100644 index 000000000..b99073b82 --- /dev/null +++ b/grid-sdk/typescript/data-grid/overview.md @@ -0,0 +1,214 @@ +--- +layout: post +title: TypeScript Data Grid Overview and Features | Syncfusion +description: Learn how to use TypeScript Data Grid for data management, CRUD operations, sorting, filtering, grouping, paging, and virtualization. +platform: grid-sdk +control: Overview +documentation: ug +domainurl: https://help.syncfusion.com/grid-sdk +--- + +# TypeScript Data Grid Overview + +The TypeScript Data Grid 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. + +## Common use cases + +The TypeScript Data Grid supports a wide range of data-intensive application scenarios. + +| Use case | Description | Relevant grid capabilities | +|----------|-------------|-----------------------| +| **Enterprise data management** | Manage customers, products, orders, suppliers, and operational records. | CRUD, filtering, sorting, grouping | +| **Financial applications** | Display and analyze transactions, portfolios, market data, and financial records. | Aggregates, formatting, virtualization, remote data | +| **Large-scale applications** | Work with large datasets while maintaining responsive interactions. | Virtualization, infinite scrolling, remote operations | +| **CRM applications** | Manage customer records, service requests, support tickets, and activities. | Searching, editing, selection, filtering | +| **Reporting applications** | Analyze and distribute business data in common document formats. | Aggregation, Excel export, PDF export, printing | + +## Data connectivity + +The TypeScript Data Grid integrates with modern application architectures, supporting local collections, REST APIs, GraphQL services, OData endpoints, ORM frameworks, and relational databases. + +### Data binding approaches + +- **[Local 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](./data-binding/remote-data)** - Connect to web services, REST APIs, and remote endpoints with automatic request handling and response parsing. Ideal for scalable applications with large or frequently updated datasets. + +- **[Custom API binding](./data-binding/remote-data)** - Connect the Data Grid to external APIs and data services with full control over request handling, response parsing, and data operations. + +- **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)** - Integrate with Entity Framework and EF Core-based applications. + - **[Dapper](./connecting-to-orm/dapper)** - Connect to applications that use lightweight SQL-based data access. + +**Database compatibility** + +The Data Grid integrates with major relational databases to provide seamless data access and management: + +| Database | Key Benefit | Best For | +|----------|---------------|----------| +| **[Microsoft SQL Server](./connecting-to-database/microsoft-sql-server)** | ADO.NET and 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 | + +**API and service integration** + +API and service integration enables the Data Grid to connect seamlessly with GraphQL, Web API, OData, URL, and custom services for flexible backend data access. + +| Integration approach | Best suited for | Key benefit | +|-----------------------|------------------|-------------| +| **[RESTful APIs](./connecting-to-adaptors/url-adaptor)** | Web applications and CRUD-based services | Standard HTTP-based data access | +| **[OData](./connecting-to-adaptors/odatav4-adaptor)** | Queryable enterprise data services | Standardized query and data operations | +| **[GraphQL](./connecting-to-adaptors/graphql-adaptor)** | Applications requiring flexible data queries | Declarative, field-specific data retrieval | +| **[Custom APIs](./data-binding/remote-data)** | Connect applications with external APIs or services | Complete control over server-side data operations and request handling | + +## Data operations + +The TypeScript Data Grid includes key features that make it easier to work with and understand large sets of information. These capabilities support organizing records, locating information efficiently, and summarizing results to enable clear analysis of complex datasets. + +- **[Sorting](./sorting)** - Arrange records in ascending or descending order to quickly identify trends and patterns. +- **[Filter bar](./filtering/filter-bar)** - Apply inline text filters in column headers for immediate results without dialogs. +- **[Filter menu](./filtering/filter-menu)** - Use advanced filtering with complex conditions and multiple criteria for powerful expression-based queries. +- **[Excel-like filter](./excel-like-filter)** - Filter with a familiar checkbox interface, allowing multi-select from available values. +- **[Searching](./searching)** - Perform rapid text-based searches across one or multiple columns for global or column-specific results. +- **[Grouping](./grouping/grouping)** - Organize records into categories with multi-level hierarchical grouping for better comprehension. +- **[Aggregates](./aggregates/aggregates)** - Calculate and display summary values (sum, average, min, max, custom metrics) to gain real-time insights. + +## Large-scale rendering performance + +The TypeScript Data Grid is designed for high performance, ensuring smooth interaction with large datasets. It uses built-in DOM virtualization with paging or virtual scrolling to load data on demand. This approach minimizes memory usage and reduces rendering overhead by limiting the number of active DOM elements, delivering responsive navigation and seamless scrolling even with very large datasets. + +## Editing and CRUD operations + +The TypeScript Data Grid 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 | +|------|-------------|----------|-------------| +| **[In-line editing](./editing/in-line-editing)** | Edit records directly within grid rows | Simple updates and streamlined workflows | Minimal context switching and faster editing | +| **[Dialog editing](./editing/dialog-editing)** | Edit records in a dedicated dialog form | Multi-field data entry | Structured form-based editing with additional space | +| **[Batch editing](./editing/batch-editing)** | Make multiple changes before saving them together | High-volume editing | Efficient commits with fewer server requests | +| **[Cell editing](./editing/cell-editing)** | Edit individual cells within the grid | Frequent data entry, precision-focused editing | Precise cell-level editing and rapid data updates | + +**[Data validation](./editing/validation)**: +Built-in validation rules such as required fields, minimum and maximum values, and numeric-only checks ensure consistent data accuracy. In addition, custom validation rules provide flexibility to define tailored logic for specific business requirements, validating input before changes are saved. + +## Columns + +The TypeScript Data Grid provides flexible column and layout customization with formatting, resizing, reordering, and visibility controls for professional displays. + +- **[Column formatting](./columns/columns)** - Apply predefined or custom formats (currency, dates, percentages) for professional number and date presentation. +- **[Column resizing](./columns/column-resizing)** - Adjust widths manually with auto-fit and responsive options for optimal visibility. +- **[Column reordering](./columns/column-reorder)** - Drag headers to reorder columns for preferred arrangement. +- **[Frozen columns](./columns/frozen-column)** - Keep key columns visible during horizontal scrolling for critical information access. +- **[Column spanning](./columns/column-spanning)** - Extend cells across multiple columns to create grouped or summary layouts. +- **[Column menu](./columns/column-menu)** - Use dropdowns for visibility, filtering, sorting, grouping, and autofit for quick management. +- **[Column chooser](./columns/column-chooser)** - Show or hide columns dynamically with a dialog for configurable visibility. + +## Responsive design + +The TypeScript Data Grid provides [adaptive layouts](./adaptive) and mobile-friendly interactions for a consistent experience across desktop, tablet, and mobile devices. + +## User experience and interaction + +The TypeScript Data Grid delivers accessible, customizable data experiences with flexible interactions, templating, and standards-compliant accessibility support. + +**Templating and customization** + +- **[Header template](./columns/column-headers#header-template)** - Customize column headers with icons, tooltips, or complex formatting for professional design. +- **[Column template](./columns/column-template)** - Render cells with conditional styling and components for rich visualization. +- **[Row template](./row/row-template)** - Apply complete row customization for specialized layouts and unique presentations. +- **[Edit template](./editing/template-editing)** - Build custom edit forms with specialized controls and validation for complex data entry. + +**Selection** + +- **[Row selection](./selection/row-selection)** - Select single or multiple rows for flexible workflows +- **[Checkbox selection](./selection/check-box-selection)** - Use checkboxes with select-all for bulk operations +- **[Cell selection](./selection/cell-selection)** - Choose individual cells or ranges with spreadsheet-like interaction +- **[Persist selection](./selection/selection#persist-selection)** - Retain selections across sorting, filtering, and paging. + +**Accessibility and keyboard navigation** + +The Data Grid 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 - Update 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 and print + +The TypeScript Data Grid provides comprehensive export and reporting capabilities, enabling extraction, analysis, and distribution of grid data in professional document formats. Built-in Excel, PDF, and print functionality with customizable templates eliminates the need for external reporting tools. + +| Format | Key benefit | Best for | +|--------|-------------|----------| +| **[Excel export](./excel-export/excel-exporting)** | Export grid data to Excel while preserving formatting, styling, grouping, and summaries | Business reporting, spreadsheet workflows | +| **[PDF export](./pdf-export/pdf-export)** | Generate professional documents with customizable layouts and formatting | Reports, document distribution, archiving | +| **[CSV export](./excel-export/excel-exporting)** | Export raw tabular data in a lightweight format | Data exchange, system integration, bulk processing | +| **[Print](./print)** | Produce printer-friendly output directly from the Data Grid | Hard-copy operational documents, on-demand printing | + +## Advanced features + +The TypeScript Data Grid 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. + +- **[Master-detail grids](./hierarchy-grid)** - Implement master-detail relationships to display complex parent-child data structures. +- **[Row spanning](./row-spanning)** - Extend cells vertically across rows to create specialized layouts. +- **[Detail templates](./detail-template)** - Add expandable row sections for drill-down exploration and richer data views. +- **[Foreign key columns](./columns/foreign-key-column)** - Automatically look up related data to show meaningful relationships. +- **[Global/Local formatting](./global-local)** - Apply consistent or column-specific formatting for professional presentation of values. +- **[State persistence](./state-management)** - Saves and restores grid configurations such as sorting, filtering, grouping, paging, and column settings across sessions. + +**Enterprise patterns** + +For specific implementation patterns, refer to feature documentation: + +- **Large-scale business applications** - Combine [State management](./state-management), [Hierarchical Grids](./hierarchy-grid), optimized performance techniques like [DOM Virtualization](./scrolling/dom-virtualization), and [Foreign key columns](./columns/foreign-key-column) to deliver responsive experiences across complex datasets. +- **Data-intensive operations** - Leverage [Grouping](./grouping/grouping), [Aggregates](./aggregates/aggregates), and [Filtering](./filtering/filtering) to efficiently manage and analyze large volumes of business data. +- **Reporting and export solutions** - Combine [Aggregates](./aggregates/aggregates), [Excel export](./excel-export/excel-exporting), and [PDF export](./pdf-export/pdf-export) to generate professional business reports and shareable documents. + +## Themes and styling + +Match the TypeScript Data Grid to the application's visual design using built-in themes and customization options. Supported themes are: + +- Fluent 2 +- Material 3 +- Bootstrap 5 +- Tailwind CSS +- Fluent 2 High Contrast + +[Syncfusion Theme Studio](https://ej2.syncfusion.com/documentation/appearance/theme-studio) allows customization of the Data Grid's appearance by modifying theme variables such as primary, accent, and background colors, enabling consistent styling, lightweight CSS generation, and seamless integration while ensuring the grid aligns with application design requirements. + +[Explore themes and styling](../appearance-and-styling/appearance-styling) + +## Quick links + +**Getting started:** +- [TypeScript Data Grid Guide](./getting-started) + +**Popular features:** +- [Filtering](./filtering/filtering) +- [Sorting](./sorting) +- [Editing and CRUD](./editing) +- [Export and reporting](./excel-export/excel-exporting) +- [Data validation](./editing/validation) + +**Advanced features** +- [DOM Virtualization](./scrolling/dom-virtualization) +- [State management](./state-management) +- [Hierarchical Grid](./hierarchy-grid) + +## Support and resources + +- **Questions?** Visit the [Syncfusion support portal](https://www.syncfusion.com/support) +- **Code Examples?** Browse [Data Grid demos](https://ej2.syncfusion.com/demos/#/tailwind3/grid/grid-overview.html) and samples +- **API Details?** See [Data Grid API reference](https://ej2.syncfusion.com/documentation/api/grid/index-default) +- **Community?** Join the [Syncfusion community forum](https://www.syncfusion.com/forums/essential-js2) +- **What's New?** Check [Release notes](../../Release-Notes) \ No newline at end of file diff --git a/grid-sdk/vue/data-grid/overview.md b/grid-sdk/vue/data-grid/overview.md new file mode 100644 index 000000000..3aa078e93 --- /dev/null +++ b/grid-sdk/vue/data-grid/overview.md @@ -0,0 +1,222 @@ +--- +layout: post +title: Vue Data Grid Overview and Features | Syncfusion +description: Learn how to use Vue Data Grid for data management, CRUD operations, sorting, filtering, grouping, paging, and virtualization. +platform: ej2-vue +control: Overview +documentation: ug +domainurl: ##DomainURL## + +layout: post +title: Vue Data Grid Overview and Features | Syncfusion +description: Learn here all about Paging and and its customization in Syncfusion Vue Grid component of Syncfusion Essential JS 2 and more. +control: Overview +platform: grid-sdk +documentation: ug +domainurl: https://help.syncfusion.com/grid-sdk +--- + +# Vue Data Grid Overview + +The Vue Data Grid 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. + +## Common use cases + +The Vue Data Grid supports a wide range of data-intensive application scenarios. + +| Use case | Description | Relevant grid capabilities | +|----------|-------------|-----------------------| +| **Enterprise data management** | Manage customers, products, orders, suppliers, and operational records. | CRUD, filtering, sorting, grouping | +| **Financial applications** | Display and analyze transactions, portfolios, market data, and financial records. | Aggregates, formatting, virtualization, remote data | +| **Large-scale applications** | Work with large datasets while maintaining responsive interactions. | Virtualization, infinite scrolling, remote operations | +| **CRM applications** | Manage customer records, service requests, support tickets, and activities. | Searching, editing, selection, filtering | +| **Reporting applications** | Analyze and distribute business data in common document formats. | Aggregation, Excel export, PDF export, printing | + +## Data connectivity + +The Vue Data Grid integrates with modern application architectures, supporting local collections, REST APIs, GraphQL services, OData endpoints, ORM frameworks, and relational databases. + +### Data binding approaches + +- **[Local 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](./data-binding/remote-data)** - Connect to web services, REST APIs, and remote endpoints with automatic request handling and response parsing. Ideal for scalable applications with large or frequently updated datasets. + +- **[Custom API binding](./data-binding/remote-data)** - Connect the Data Grid to external APIs and data services with full control over request handling, response parsing, and data operations. + +- **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)** - Integrate with Entity Framework and EF Core-based applications. + - **[Dapper](./connecting-to-orm/dapper)** - Connect to applications that use lightweight SQL-based data access. + +**Database compatibility** + +The Data Grid integrates with major relational databases to provide seamless data access and management: + +| Database | Key benefit | Best for | +|----------|---------------|----------| +| **[Microsoft SQL Server](./connecting-to-database/microsoft-sql-server)** | ADO.NET and 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 | + +**API and service integration** + +API and service integration enables the Data Grid to connect seamlessly with GraphQL, Web API, OData, URL, and custom services for flexible server-side data access. + +| Integration approach | Best suited for | Key benefit | +|-----------------------|------------------|-------------| +| **[RESTful APIs](./connecting-to-adaptors/url-adaptor)** | Web applications and CRUD-based services | Standard HTTP-based data access | +| **[OData](./connecting-to-adaptors/odatav4-adaptor)** | Queryable enterprise data services | Standardized query and data operations | +| **[GraphQL](./connecting-to-adaptors/graphql-adaptor)** | Applications requiring flexible data queries | Declarative, field-specific data retrieval | +| **[Custom APIs](./data-binding/remote-data)** | Connect applications with external APIs or services | Complete control over server-side data operations and request handling | + +## Data operations + +The Vue Data Grid includes key features that make it easier to work with and understand large sets of information. These capabilities support organizing records, locating information efficiently, and summarizing results to enable clear analysis of complex datasets. + +- **[Sorting](./sorting)** - Arrange records in ascending or descending order to quickly identify trends and patterns. +- **[Filter bar](./filtering/filter-bar)** - Apply inline text filters in column headers for immediate results without dialogs. +- **[Filter menu](./filtering/filter-menu)** - Use advanced filtering with complex conditions and multiple criteria for powerful expression-based queries. +- **[Excel-like filter](./excel-like-filter)** - Filter with a familiar checkbox interface, allowing multi-select from available values. +- **[Searching](./searching)** - Perform rapid text-based searches across one or multiple columns for global or column-specific results. +- **[Grouping](./grouping/grouping)** - Organize records into categories with multi-level hierarchical grouping for better comprehension. +- **[Aggregates](./aggregates/aggregates)** - Calculate and display summary values (sum, average, min, max, custom metrics) to gain real-time insights. + +## Large-scale rendering performance + +The Vue Data Grid is designed for high performance, ensuring smooth interaction with large datasets. It uses built-in DOM virtualization with paging or virtual scrolling to load data on demand. This approach minimizes memory usage and reduces rendering overhead by limiting the number of active DOM elements, delivering responsive navigation and seamless scrolling even with very large datasets. + +## Editing and CRUD operations + +The Vue Data Grid 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 | +|------|-------------|----------|-------------| +| **[In-line editing](./editing/in-line-editing)** | Edit records directly within grid rows | Simple updates and streamlined workflows | Minimal context switching and faster editing | +| **[Dialog editing](./editing/dialog-editing)** | Edit records in a dedicated dialog form | Multi-field data entry | Structured form-based editing with additional space | +| **[Batch editing](./editing/batch-editing)** | Make multiple changes before saving them together | High-volume editing | Efficient commits with fewer server requests | +| **[Cell editing](./editing/cell-editing)** | Edit individual cells within the grid | Frequent data entry, precision-focused editing | Precise cell-level editing and rapid data updates | + +**[Data validation](./editing/validation)**: +Built-in validation rules such as required fields, minimum and maximum values, and numeric-only checks ensure consistent data accuracy. In addition, custom validation rules provide flexibility to define tailored logic for specific business requirements, validating input before changes are saved. + +## Columns + +The Vue Data Grid provides flexible column and layout customization with formatting, resizing, reordering, and visibility controls for professional displays. + +- **[Column formatting](./columns/columns)** - Apply predefined or custom formats (currency, dates, percentages) for professional number and date presentation. +- **[Column resizing](./columns/column-resizing)** - Adjust widths manually with auto-fit and responsive options for optimal visibility. +- **[Column reordering](./columns/column-reorder)** - Drag headers to reorder columns for preferred arrangement. +- **[Frozen columns](./columns/frozen-column)** - Keep key columns visible during horizontal scrolling for critical information access. +- **[Column spanning](./columns/column-spanning)** - Extend cells across multiple columns to create grouped or summary layouts. +- **[Column menu](./columns/column-menu)** - Use dropdowns for visibility, filtering, sorting, grouping, and autofit for quick management. +- **[Column chooser](./columns/column-chooser)** - Show or hide columns dynamically with a dialog for configurable visibility. + +## Responsive design + +The Vue Data Grid provides [adaptive layouts](./adaptive) and mobile-friendly interactions for a consistent experience across desktop, tablet, and mobile devices. + +## User experience and interaction + +The Vue Data Grid delivers accessible, customizable data experiences with flexible interactions, templating, and standards-compliant accessibility support. + +**Templating and customization** + +- **[Header template](./columns/column-headers#header-template)** - Customize column headers with icons, tooltips, or complex formatting for professional design. +- **[Column template](./columns/column-template)** - Render cells with conditional styling and components for rich visualization. +- **[Row template](./row/row-template)** - Apply complete row customization for specialized layouts and unique presentations. +- **[Edit template](./editing/template-editing)** - Build custom edit forms with specialized controls and validation for complex data entry. + +**Selection** + +- **[Row selection](./selection/row-selection)** - Select single or multiple rows for flexible workflows +- **[Checkbox selection](./selection/check-box-selection)** - Use checkboxes with select-all for bulk operations +- **[Cell selection](./selection/cell-selection)** - Choose individual cells or ranges with spreadsheet-like interaction +- **[Persist selection](./selection/selection#persist-selection)** - Retain selections across sorting, filtering, and paging. + +**Accessibility and keyboard navigation** + +The Data Grid 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 - Update 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 and print + +The Vue Data Grid provides comprehensive export and reporting capabilities, enabling extraction, analysis, and distribution of grid data in professional document formats. Built-in Excel, PDF, and print functionality with customizable templates eliminates the need for external reporting tools. + +| Format | Key benefit | Best for | +|--------|-------------|----------| +| **[Excel export](./excel-export/excel-exporting)** | Export grid data to Excel while preserving formatting, styling, grouping, and summaries | Business reporting, spreadsheet workflows | +| **[PDF export](./pdf-export/pdf-export)** | Generate professional documents with customizable layouts and formatting | Reports, document distribution, archiving | +| **[CSV export](./excel-export/excel-exporting)** | Export raw tabular data in a lightweight format | Data exchange, system integration, bulk processing | +| **[Print](./print)** | Produce printer-friendly output directly from the Data Grid | Hard-copy operational documents, on-demand printing | + +## Advanced features + +The Vue Data Grid 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. + +- **[Master-detail grids](./hierarchy-grid)** - Implement maste-detail relationships to display complex parent-child data structures. +- **[Row spanning](./row-spanning)** - Extend cells vertically across rows to create specialized layouts. +- **[Detail templates](./detail-template)** - Add expandable row sections for drill-down exploration and richer data views. +- **[Foreign key columns](./columns/foreign-key-column)** - Automatically look up related data to show meaningful relationships. +- **[Global/Local formatting](./global-local)** - Apply consistent or column-specific formatting for professional presentation of values. +- **[State persistence](./state-management)** - Saves and restores grid configurations such as sorting, filtering, grouping, paging, and column settings across sessions. + +**Enterprise patterns** + +For specific implementation patterns, refer to feature documentation: + +- **Large-scale business applications** - Combine [State management](./state-management), [Hierarchical Grids](./hierarchy-grid), optimized performance techniques like [DOM Virtualization](./scrolling/dom-virtualization), and [Foreign key columns](./columns/foreign-key-column) to deliver responsive experiences across complex datasets. +- **Data-intensive operations** - Leverage [Grouping](./grouping/grouping), [Aggregates](./aggregates/aggregates), and [Filtering](./filtering/filtering) to efficiently manage and analyze large volumes of business data. +- **Reporting and export solutions** - Combine [Aggregates](./aggregates/aggregates), [Excel export](./excel-export/excel-exporting), and [PDF export](./pdf-export/pdf-export) to generate professional business reports and shareable documents. + +## Themes and styling + +Match the Vue Data Grid to the application's visual design using built-in themes and customization options. Supported themes are: + +- Fluent 2 +- Material 3 +- Bootstrap 5 +- Tailwind CSS +- Fluent 2 High Contrast + +[Syncfusion Theme Studio](https://ej2.syncfusion.com/vue/documentation/appearance/theme-studio) allows customization of the Data Grid’s appearance by modifying theme variables such as primary, accent, and background colors, enabling consistent styling, lightweight CSS generation, and seamless integration while ensuring the grid aligns with application design requirements + +[Explore themes and styling](../appearance-and-styling/appearance-styling) + +## Quick links + +**Getting started:** +- [Vue Data Grid Guide](./getting-started) + +**Popular features:** +- [Filtering](./filtering/filtering) +- [Sorting](./sorting) +- [Editing and CRUD](./editing) +- [Export and reporting](./excel-export/excel-exporting) +- [Data validation](./editing/validation) + +**Advanced features** +- [DOM Virtualization](./scrolling/dom-virtualization) +- [State management](./state-management) +- [Hierarchical Grid](./hierarchy-grid) + +## Support and resources + +- **Questions?** Visit the [Syncfusion support portal](https://www.syncfusion.com/support) +- **Code Examples?** Browse [Data Grid demos](https://ej2.syncfusion.com/vue/demos/#/tailwind3/grid/grid-overview) and samples +- **API Details?** See [Data Grid API reference](https://ej2.syncfusion.com/vue/documentation/api/grid/index-default) +- **Community?** Join the [Syncfusion community forum](https://www.syncfusion.com/forums/vue) +- **What's New?** Check [Release Notes](../../Release-Notes) \ No newline at end of file From a658c2281eb92c23b0612ee61fbfd7419b5fc0d7 Mon Sep 17 00:00:00 2001 From: Sivaranjani Rajasekaran Date: Tue, 1 Sep 2026 12:41:59 +0530 Subject: [PATCH 2/7] refine content --- grid-sdk/angular/data-grid/overview.md | 214 +++++++++++++++++++++++++ grid-sdk/react/data-grid/overview.md | 11 +- 2 files changed, 219 insertions(+), 6 deletions(-) create mode 100644 grid-sdk/angular/data-grid/overview.md diff --git a/grid-sdk/angular/data-grid/overview.md b/grid-sdk/angular/data-grid/overview.md new file mode 100644 index 000000000..096cd8723 --- /dev/null +++ b/grid-sdk/angular/data-grid/overview.md @@ -0,0 +1,214 @@ +--- +layout: post +title: Angular Data Grid Overview and Features | Syncfusion +description: Learn how to use Angular Data Grid for data management, CRUD operations, sorting, filtering, grouping, paging, and virtualization. +platform: grid-sdk +control: Overview +documentation: ug +domainurl: https://help.syncfusion.com/grid-sdk +--- + +# Angular Data Grid Overview + +The Angular Data Grid 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. + +## Common use cases + +The Angular Data Grid supports a wide range of data-intensive application scenarios. + +| Use case | Description | Relevant grid capabilities | +|----------|-------------|-----------------------| +| **Enterprise data management** | Manage customers, products, orders, suppliers, and operational records. | CRUD, filtering, sorting, grouping | +| **Financial applications** | Display and analyze transactions, portfolios, market data, and financial records. | Aggregates, formatting, virtualization, remote data | +| **Large-scale applications** | Work with large datasets while maintaining responsive interactions. | Virtualization, infinite scrolling, remote operations | +| **CRM applications** | Manage customer records, service requests, support tickets, and activities. | Searching, editing, selection, filtering | +| **Reporting applications** | Analyze and distribute business data in common document formats. | Aggregation, Excel export, PDF export, printing | + +## Data connectivity + +The Angular Data Grid integrates with modern application architectures, supporting local collections, REST APIs, GraphQL services, OData endpoints, ORM frameworks, and relational databases. + +### Data binding approaches + +- **[Local 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](./data-binding/remote-data)** - Connect to web services, REST APIs, and remote endpoints with automatic request handling and response parsing. Ideal for scalable applications with large or frequently updated datasets. + +- **[Custom API binding and Observable support](./data-binding/remote-data#binding-observable-data-using-async-pipe)** - Integrate custom APIs, data services, and Observable streams with complete control over data operations and support for reactive real-time updates. + +- **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)** - Integrate with Entity Framework and EF Core-based applications. + - **[Dapper](./connecting-to-orm/dapper)** - Connect to applications that use lightweight SQL-based data access. + +**Database compatibility** + +The Data Grid integrates with major relational databases to provide seamless data access and management: + +| Database | Key Benefit | Best For | +|----------|---------------|----------| +| **[Microsoft SQL Server](./connecting-to-database/microsoft-sql-server)** | ADO.NET and 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 | + +**API and service integration** + +API and service integration enables the Data Grid to connect seamlessly with GraphQL, Web API, OData, URL, and custom services for flexible backend data access. + +| Integration approach | Best suited for | Key benefit | +|-----------------------|------------------|-------------| +| **[RESTful APIs](./connecting-to-adaptors/url-adaptor)** | Web applications and CRUD-based services | Standard HTTP-based data access | +| **[OData](./connecting-to-adaptors/odatav4-adaptor)** | Queryable enterprise data services | Standardized query and data operations | +| **[GraphQL](./connecting-to-adaptors/graphql-adaptor)** | Applications requiring flexible data queries | Declarative, field‑specific data retrieval | +| **[Custom APIs](./data-binding/remote-data)** | Connect applications with external APIs or services | Complete control over server-side data operations and request handling | + +## Data operations + +The Angular Data Grid includes key features that make it easier to work with and understand large sets of information. These capabilities support organizing records, locating information efficiently, and summarizing results to enable clear analysis of complex datasets. + +- **[Sorting](./sorting)** - Arrange records in ascending or descending order to quickly identify trends and patterns. +- **[Filter bar](./filtering/filter-bar)** - Apply inline text filters in column headers for immediate results without dialogs. +- **[Filter menu](./filtering/filter-menu)** - Use advanced filtering with complex conditions and multiple criteria for powerful expression‑based queries. +- **[Excel‑like filter](./excel-like-filter)** - Filter with a familiar checkbox interface, allowing multi‑select from available values. +- **[Searching](./searching)** - Perform rapid text‑based searches across one or multiple columns for global or column‑specific results. +- **[Grouping](./grouping/grouping)** - Organize records into categories with multi‑level hierarchical grouping for better comprehension. +- **[Aggregates](./aggregates/aggregates)** - Calculate and display summary values (sum, average, min, max, custom metrics) to gain real‑time insights. + +## Large-scale rendering performance + +The Angular Data Grid is designed for high performance, ensuring smooth interaction with large datasets. It uses built‑in DOM virtualization with paging or virtual scrolling to load data on demand. This approach minimizes memory usage and reduces rendering overhead by limiting the number of active DOM elements, delivering responsive navigation and seamless scrolling even with very large datasets. + +## Editing and CRUD operations + +The Angular Data Grid 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 | +|------|-------------|----------|-------------| +| **[In-line editing](./editing/in-line-editing)** | Edit records directly within grid rows | Simple updates and streamlined workflows | Minimal context switching and faster editing | +| **[Dialog editing](./editing/dialog-editing)** | Edit records in a dedicated dialog form | Multi-field data entry | Structured form-based editing with additional space | +| **[Batch editing](./editing/batch-editing)** | Make multiple changes before saving them together | High-volume editing | Efficient commits with fewer server requests | +| **[Cell editing](./editing/cell-editing)** | Edit individual cells within the grid | Frequent data entry, precision-focused editing | Precise cell-level editing and rapid data updates | + +**[Data validation](./editing/validation)**: +Built‑in validation rules such as required fields, minimum and maximum values, and numeric‑only checks ensure consistent data accuracy. In addition, custom validation rules provide flexibility to define tailored logic for specific business requirements, validating input before changes are saved. + +## Columns + +The Angular Data Grid provides flexible column and layout customization with formatting, resizing, reordering, and visibility controls for professional displays. + +- **[Column formatting](./columns/columns)** - Apply predefined or custom formats (currency, dates, percentages) for professional number and date presentation. +- **[Column resizing](./columns/column-resizing)** - Adjust widths manually with auto‑fit and responsive options for optimal visibility. +- **[Column reordering](./columns/column-reorder)** - Drag headers to reorder columns for preferred arrangement. +- **[Frozen columns](./columns/frozen-column)** - Keep key columns visible during horizontal scrolling for critical information access. +- **[Column spanning](./columns/column-spanning)** - Extend cells across multiple columns to create grouped or summary layouts. +- **[Column menu](./columns/column-menu)** - Use dropdowns for visibility, filtering, sorting, grouping, and autofit for quick management. +- **[Column chooser](./columns/column-chooser)** - Show or hide columns dynamically with a dialog for configurable visibility. + +## Responsive design + +The Angular Data Grid provides [adaptive layouts](./adaptive) and mobile-friendly interactions for a consistent experience across desktop, tablet, and mobile devices. + +## User experience and interaction + +The Angular Data Grid delivers accessible, customizable data experiences with flexible interactions, templating, and standards-compliant accessibility support. + +**Templating and customization** + +- **[Header template](./columns/column-headers#header-template)** - Customize column headers with icons, tooltips, or complex formatting for professional design. +- **[Column template](./columns/column-template)** - Render cells with conditional styling and components for rich visualization. +- **[Row template](./row/row-template)** - Apply complete row customization for specialized layouts and unique presentations. +- **[Edit template](./editing/template-editing)** - Build custom edit forms with specialized controls and validation for complex data entry. + +**Selection** + +- **[Row selection](./selection/row-selection)** - Select single or multiple rows for flexible workflows +- **[Checkbox selection](./selection/check-box-selection)** - Use checkboxes with select‑all for bulk operations +- **[Cell selection](./selection/cell-selection)** - Choose individual cells or ranges with spreadsheet‑like interaction +- **[Persist selection](./selection/selection#persist-selection)** - Retain selections across sorting, filtering, and paging. + +**Accessibility and keyboard navigation** + +The Data Grid 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 — Update 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 and print + +The Angular Data Grid provides comprehensive export and reporting capabilities, enabling extraction, analysis, and distribution of grid data in professional document formats. Built‑in Excel, PDF, and print functionality with customizable templates eliminates the need for external reporting tools. + +| Format | Key benefit | Best for | +|--------|-------------|----------| +| **[Excel export](./excel-export/excel-exporting)** | Export grid data to Excel while preserving formatting, styling, grouping, and summaries | Business reporting, spreadsheet workflows | +| **[PDF export](./pdf-export/pdf-export)** | Generate professional documents with customizable layouts and formatting | Reports, document distribution, archiving | +| **[CSV export](./excel-export/excel-exporting)** | Export raw tabular data in a lightweight format | Data exchange, system integration, bulk processing | +| **[Print](./print)** | Produce printer‑friendly output directly from the Data Grid | Hard‑copy operational documents, on‑demand printing | + +## Advanced features + +The Angular Data Grid 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. + +- **[Master-detail grids](./hierarchy-grid)** - Implement master–detail relationships to display complex parent–child data structures. +- **[Row spanning](./row-spanning)** - Extend cells vertically across rows to create specialized layouts. +- **[Detail templates](./detail-template)** - Add expandable row sections for drill‑down exploration and richer data views. +- **[Foreign key columns](./columns/foreign-key-column)** - Automatically look up related data to show meaningful relationships. +- **[Global/Local formatting](./global-local)** - Apply consistent or column‑specific formatting for professional presentation of values. +- **[State persistence](./state-management)** — Saves and restores grid configurations such as sorting, filtering, grouping, paging, and column settings across sessions. + +**Enterprise patterns** + +For specific implementation patterns, refer to feature documentation: + +- **Large‑scale business applications** — Combine [State management](./state-management), [Hierarchical Grids](./hierarchy-grid), optimized performance techniques like [DOM Virtualization](./scrolling/dom-virtualization), and [Foreign key columns](./columns/foreign-key-column) to deliver responsive experiences across complex datasets. +- **Data‑intensive operations** — Leverage [Grouping](./grouping/grouping), [Aggregates](./aggregates/aggregates), and [Filtering](./filtering/filtering) to efficiently manage and analyze large volumes of business data. +- **Reporting and export solutions** — Combine [Aggregates](./aggregates/aggregates), [Excel export](./excel-export/excel-exporting), and [PDF export](./pdf-export/pdf-export) to generate professional business reports and shareable documents. + +## Themes and styling + +Match the Angular Data Grid to the application's visual design using built-in themes and customization options. Supported themes are: + +- Fluent 2 +- Material 3 +- Bootstrap 5 +- Tailwind CSS +- Fluent 2 High Contrast + +[Syncfusion Theme Studio](https://ej2.syncfusion.com/angular/documentation/appearance/theme-studio) allows customization of the Data Grid’s appearance by modifying theme variables such as primary, accent, and background colors, enabling consistent styling, lightweight CSS generation, and seamless integration while ensuring the grid aligns with application design requirements + +[Explore themes and styling](../appearance-and-styling/appearance-styling) + +## Quick links + +**Getting started:** +- [Angular Data Grid Guide](./getting-started) + +**Popular features:** +- [Filtering](./filtering/filtering) +- [Sorting](./sorting) +- [Editing and CRUD](./editing) +- [Export and reporting](./excel-export/excel-exporting) +- [Data validation](./editing/validation) + +**Advanced features** +- [DOM Virtualization](./scrolling/dom-virtualization) +- [State management](./state-management) +- [Hierarchical Grid](./hierarchy-grid) + +## Support and resources + +- **Questions?** Visit the [Syncfusion support portal](https://www.syncfusion.com/support) +- **Code examples?** Browse [Data Grid demos](https://ej2.syncfusion.com/angular/demos/#/tailwind3/grid/over-view) and samples +- **API details?** See [Data Grid API reference](https://ej2.syncfusion.com/angular/documentation/api/grid/index-default) +- **Community?** Join the [Syncfusion community forum](https://www.syncfusion.com/forums/angular-js2) +- **What's new?** Check [Release notes](../../Release-Notes) \ No newline at end of file diff --git a/grid-sdk/react/data-grid/overview.md b/grid-sdk/react/data-grid/overview.md index 79f33d063..0e6502ec3 100644 --- a/grid-sdk/react/data-grid/overview.md +++ b/grid-sdk/react/data-grid/overview.md @@ -1,11 +1,10 @@ --- layout: post -title: React Data Grid Overview and Features | Syncfusion -description: Learn how to use React Data Grid for data management, CRUD operations, sorting, filtering, grouping, paging, and virtualization. -platform: ej2-react -control: Overview +title: React Learn how to use React Data Grid for data management, CRUD operations, sorting, filtering, grouping, paging, and virtualization. +control: Overview +platform: grid-sdk documentation: ug -domainurl: ##DomainURL## +domainurl: https://help.syncfusion.com/grid-sdk --- # React Data Grid Overview @@ -211,4 +210,4 @@ Match the React Data Grid to the application's visual design using built-in them - **Code examples?** Browse [Data Grid demos](https://ej2.syncfusion.com/react/demos/#/tailwind3/grid/over-view) and samples - **API details?** See [Data Grid API reference](https://ej2.syncfusion.com/react/documentation/api/grid/index-default) - **Community?** Join the [Syncfusion community forum](https://www.syncfusion.com/forums/react-js2) -- **What's new?** Check [Release notes](../Release-Notes) \ No newline at end of file +- **What's new?** Check [Release notes](../../Release-Notes) \ No newline at end of file From ea40c00a0b060e10dfeddcc300f50b32000c2f06 Mon Sep 17 00:00:00 2001 From: Sivaranjani Rajasekaran Date: Tue, 1 Sep 2026 12:45:45 +0530 Subject: [PATCH 3/7] refine content --- grid-sdk/vue/data-grid/overview.md | 8 -------- 1 file changed, 8 deletions(-) diff --git a/grid-sdk/vue/data-grid/overview.md b/grid-sdk/vue/data-grid/overview.md index 3aa078e93..f59ff0640 100644 --- a/grid-sdk/vue/data-grid/overview.md +++ b/grid-sdk/vue/data-grid/overview.md @@ -1,12 +1,4 @@ --- -layout: post -title: Vue Data Grid Overview and Features | Syncfusion -description: Learn how to use Vue Data Grid for data management, CRUD operations, sorting, filtering, grouping, paging, and virtualization. -platform: ej2-vue -control: Overview -documentation: ug -domainurl: ##DomainURL## - layout: post title: Vue Data Grid Overview and Features | Syncfusion description: Learn here all about Paging and and its customization in Syncfusion Vue Grid component of Syncfusion Essential JS 2 and more. From 83a454c48c7175da2311252ac898039f0aeeade5 Mon Sep 17 00:00:00 2001 From: Sivaranjani Rajasekaran Date: Tue, 1 Sep 2026 12:49:34 +0530 Subject: [PATCH 4/7] fixed alignment issues --- grid-sdk/react/data-grid/overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/grid-sdk/react/data-grid/overview.md b/grid-sdk/react/data-grid/overview.md index 0e6502ec3..1b586434a 100644 --- a/grid-sdk/react/data-grid/overview.md +++ b/grid-sdk/react/data-grid/overview.md @@ -1,6 +1,6 @@ --- layout: post -title: React Learn how to use React Data Grid for data management, CRUD operations, sorting, filtering, grouping, paging, and virtualization. +title: Learn how to use React Data Grid for data management, CRUD operations, sorting, filtering, grouping, paging, and virtualization. control: Overview platform: grid-sdk documentation: ug From c9fb25e9cfc77c98abbb966d7172e01bcc187231 Mon Sep 17 00:00:00 2001 From: Sivaranjani Rajasekaran Date: Tue, 1 Sep 2026 15:15:00 +0530 Subject: [PATCH 5/7] fixed CI issues --- grid-sdk/angular/data-grid/overview.md | 2 +- grid-sdk/javascript/data-grid/overview.md | 40 +++++++++++------------ grid-sdk/react/data-grid/overview.md | 5 +-- grid-sdk/typescript/data-grid/overview.md | 2 +- grid-sdk/vue/data-grid/overview.md | 2 +- grid-toc.html | 5 +++ 6 files changed, 31 insertions(+), 25 deletions(-) diff --git a/grid-sdk/angular/data-grid/overview.md b/grid-sdk/angular/data-grid/overview.md index 096cd8723..974011fa8 100644 --- a/grid-sdk/angular/data-grid/overview.md +++ b/grid-sdk/angular/data-grid/overview.md @@ -53,7 +53,7 @@ The Data Grid integrates with major relational databases to provide seamless dat **API and service integration** -API and service integration enables the Data Grid to connect seamlessly with GraphQL, Web API, OData, URL, and custom services for flexible backend data access. +API and service integration enables the Data Grid to connect seamlessly with GraphQL, Web API, OData, URL, and custom services for flexible server-side data access. | Integration approach | Best suited for | Key benefit | |-----------------------|------------------|-------------| diff --git a/grid-sdk/javascript/data-grid/overview.md b/grid-sdk/javascript/data-grid/overview.md index 0e0cf12db..c718c3740 100644 --- a/grid-sdk/javascript/data-grid/overview.md +++ b/grid-sdk/javascript/data-grid/overview.md @@ -1,20 +1,20 @@ --- layout: post -title: Javascript Data Grid Overview and Features | Syncfusion -description: Learn how to use Javascript Data Grid for data management, CRUD operations, sorting, filtering, grouping, paging, and virtualization. +title: JavaScript Data Grid Overview and Features | Syncfusion +description: Learn how to use JavaScript Data Grid for data management, CRUD operations, sorting, filtering, grouping, paging, and virtualization. platform: grid-sdk control: Overview documentation: ug domainurl: https://help.syncfusion.com/grid-sdk --- -# Javascript Data Grid Overview +# JavaScript Data Grid Overview -The Javascript Data Grid 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. +The JavaScript Data Grid 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. ## Common use cases -The Javascript Data Grid supports a wide range of data-intensive application scenarios. +The JavaScript Data Grid supports a wide range of data-intensive application scenarios. | Use case | Description | Relevant grid capabilities | |----------|-------------|-----------------------| @@ -26,7 +26,7 @@ The Javascript Data Grid supports a wide range of data-intensive application sce ## Data connectivity -The Javascript Data Grid integrates with modern application architectures, supporting local collections, REST APIs, GraphQL services, OData endpoints, ORM frameworks, and relational databases. +The JavaScript Data Grid integrates with modern application architectures, supporting local collections, REST APIs, GraphQL services, OData endpoints, ORM frameworks, and relational databases. ### Data binding approaches @@ -53,7 +53,7 @@ The Data Grid integrates with major relational databases to provide seamless dat **API and service integration** -API and service integration enables the Data Grid to connect seamlessly with GraphQL, Web API, OData, URL, and custom services for flexible backend data access. +API and service integration enables the Data Grid to connect seamlessly with GraphQL, Web API, OData, URL, and custom services for flexible server-side data access. | Integration approach | Best suited for | Key benefit | |-----------------------|------------------|-------------| @@ -64,7 +64,7 @@ API and service integration enables the Data Grid to connect seamlessly with Gra ## Data operations -The Javascript Data Grid includes key features that make it easier to work with and understand large sets of information. These capabilities support organizing records, locating information efficiently, and summarizing results to enable clear analysis of complex datasets. +The JavaScript Data Grid includes key features that make it easier to work with and understand large sets of information. These capabilities support organizing records, locating information efficiently, and summarizing results to enable clear analysis of complex datasets. - **[Sorting](./sorting)** - Arrange records in ascending or descending order to quickly identify trends and patterns. - **[Filter bar](./filtering/filter-bar)** - Apply inline text filters in column headers for immediate results without dialogs. @@ -76,11 +76,11 @@ The Javascript Data Grid includes key features that make it easier to work with ## Large-scale rendering performance -The Javascript Data Grid is designed for high performance, ensuring smooth interaction with large datasets. It uses built-in DOM virtualization with paging or virtual scrolling to load data on demand. This approach minimizes memory usage and reduces rendering overhead by limiting the number of active DOM elements, delivering responsive navigation and seamless scrolling even with very large datasets. +The JavaScript Data Grid is designed for high performance, ensuring smooth interaction with large datasets. It uses built-in DOM virtualization with paging or virtual scrolling to load data on demand. This approach minimizes memory usage and reduces rendering overhead by limiting the number of active DOM elements, delivering responsive navigation and seamless scrolling even with very large datasets. ## Editing and CRUD operations -The Javascript Data Grid 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. +The JavaScript Data Grid 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** @@ -98,7 +98,7 @@ Built-in validation rules such as required fields, minimum and maximum values, a ## Columns -The Javascript Data Grid provides flexible column and layout customization with formatting, resizing, reordering, and visibility controls for professional displays. +The JavaScript Data Grid provides flexible column and layout customization with formatting, resizing, reordering, and visibility controls for professional displays. - **[Column formatting](./columns/columns)** - Apply predefined or custom formats (currency, dates, percentages) for professional number and date presentation. - **[Column resizing](./columns/column-resizing)** - Adjust widths manually with auto-fit and responsive options for optimal visibility. @@ -110,11 +110,11 @@ The Javascript Data Grid provides flexible column and layout customization with ## Responsive design -The Javascript Data Grid provides [adaptive layouts](./adaptive) and mobile-friendly interactions for a consistent experience across desktop, tablet, and mobile devices. +The JavaScript Data Grid provides [adaptive layouts](./adaptive) and mobile-friendly interactions for a consistent experience across desktop, tablet, and mobile devices. ## User experience and interaction -The Javascript Data Grid delivers accessible, customizable data experiences with flexible interactions, templating, and standards-compliant accessibility support. +The JavaScript Data Grid delivers accessible, customizable data experiences with flexible interactions, templating, and standards-compliant accessibility support. **Templating and customization** @@ -146,7 +146,7 @@ The Data Grid is fully accessible and compliant with Web Content Accessibility G ## Export and print -The Javascript Data Grid provides comprehensive export and reporting capabilities, enabling extraction, analysis, and distribution of grid data in professional document formats. Built-in Excel, PDF, and print functionality with customizable templates eliminates the need for external reporting tools. +The JavaScript Data Grid provides comprehensive export and reporting capabilities, enabling extraction, analysis, and distribution of grid data in professional document formats. Built-in Excel, PDF, and print functionality with customizable templates eliminates the need for external reporting tools. | Format | Key benefit | Best for | |--------|-------------|----------| @@ -157,7 +157,7 @@ The Javascript Data Grid provides comprehensive export and reporting capabilitie ## Advanced features -The Javascript Data Grid 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. +The JavaScript Data Grid 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. - **[Master-detail grids](./hierarchy-grid)** - Implement master-detail relationships to display complex parent-child data structures. - **[Row spanning](./row-spanning)** - Extend cells vertically across rows to create specialized layouts. @@ -176,7 +176,7 @@ For specific implementation patterns, refer to feature documentation: ## Themes and styling -Match the Javascript Data Grid to the application's visual design using built-in themes and customization options. Supported themes are: +Match the JavaScript Data Grid to the application's visual design using built-in themes and customization options. Supported themes are: - Fluent 2 - Material 3 @@ -184,14 +184,14 @@ Match the Javascript Data Grid to the application's visual design using built-in - Tailwind CSS - Fluent 2 High Contrast -[Syncfusion Theme Studio](https://ej2.syncfusion.com/javascript/documentation/appearance/theme-studio) allows customization of the Data Grid's appearance by modifying theme variables such as primary, accent, and background colors, enabling consistent styling, lightweight CSS generation, and seamless integration while ensuring the grid aligns with application design requirements. +[Syncfusion Theme Studio](https://ej2.syncfusion.com/JavaScript/documentation/appearance/theme-studio) allows customization of the Data Grid's appearance by modifying theme variables such as primary, accent, and background colors, enabling consistent styling, lightweight CSS generation, and seamless integration while ensuring the grid aligns with application design requirements. [Explore themes and styling](../appearance-and-styling/appearance-styling) ## Quick links **Getting started:** -- [Javascript Data Grid Guide](./getting-started) +- [JavaScript Data Grid Guide](./getting-started) **Popular features:** - [Filtering](./filtering/filtering) @@ -208,7 +208,7 @@ Match the Javascript Data Grid to the application's visual design using built-in ## Support and resources - **Questions?** Visit the [Syncfusion support portal](https://www.syncfusion.com/support) -- **Code Examples?** Browse [Data Grid demos](https://ej2.syncfusion.com/javascript/demos/#/tailwind3/grid/grid-overview.html) and samples -- **API Details?** See [Data Grid API reference](https://ej2.syncfusion.com/javascript/documentation/api/grid/index-default) +- **Code Examples?** Browse [Data Grid demos](https://ej2.syncfusion.com/JavaScript/demos/#/tailwind3/grid/grid-overview.html) and samples +- **API Details?** See [Data Grid API reference](https://ej2.syncfusion.com/JavaScript/documentation/api/grid/index-default) - **Community?** Join the [Syncfusion community forum](https://www.syncfusion.com/forums/essential-js2) - **What's New?** Check [Release notes](../../Release-Notes) \ No newline at end of file diff --git a/grid-sdk/react/data-grid/overview.md b/grid-sdk/react/data-grid/overview.md index 1b586434a..4651de67f 100644 --- a/grid-sdk/react/data-grid/overview.md +++ b/grid-sdk/react/data-grid/overview.md @@ -1,6 +1,7 @@ --- layout: post -title: Learn how to use React Data Grid for data management, CRUD operations, sorting, filtering, grouping, paging, and virtualization. +title: React Data Grid Overview and Features | Syncfusion +description: Learn how to use React Data Grid for data management, CRUD operations, sorting, filtering, grouping, paging, and virtualization. control: Overview platform: grid-sdk documentation: ug @@ -52,7 +53,7 @@ The Data Grid integrates with major relational databases to provide seamless dat **API and service integration** -API and service integration enables the Data Grid to connect seamlessly with GraphQL, Web API, OData, URL, and custom services for flexible backend data access. +API and service integration enables the Data Grid to connect seamlessly with GraphQL, Web API, OData, URL, and custom services for flexible server-side data access. | Integration approach | Best suited for | Key benefit | |-----------------------|------------------|-------------| diff --git a/grid-sdk/typescript/data-grid/overview.md b/grid-sdk/typescript/data-grid/overview.md index b99073b82..31f9a7f4e 100644 --- a/grid-sdk/typescript/data-grid/overview.md +++ b/grid-sdk/typescript/data-grid/overview.md @@ -53,7 +53,7 @@ The Data Grid integrates with major relational databases to provide seamless dat **API and service integration** -API and service integration enables the Data Grid to connect seamlessly with GraphQL, Web API, OData, URL, and custom services for flexible backend data access. +API and service integration enables the Data Grid to connect seamlessly with GraphQL, Web API, OData, URL, and custom services for flexible server-side data access. | Integration approach | Best suited for | Key benefit | |-----------------------|------------------|-------------| diff --git a/grid-sdk/vue/data-grid/overview.md b/grid-sdk/vue/data-grid/overview.md index f59ff0640..7450b5a63 100644 --- a/grid-sdk/vue/data-grid/overview.md +++ b/grid-sdk/vue/data-grid/overview.md @@ -1,7 +1,7 @@ --- layout: post title: Vue Data Grid Overview and Features | Syncfusion -description: Learn here all about Paging and and its customization in Syncfusion Vue Grid component of Syncfusion Essential JS 2 and more. +description: Learn how to use Vue Data Grid for data management, CRUD operations, sorting, filtering, grouping, paging, and virtualization. control: Overview platform: grid-sdk documentation: ug diff --git a/grid-toc.html b/grid-toc.html index f05f2c237..3a953231c 100644 --- a/grid-toc.html +++ b/grid-toc.html @@ -49,6 +49,7 @@
  • Preact
    • +
  • Overview
  • Feature Modules
  • Assistive Grid
      @@ -529,6 +530,7 @@
    • Data Grid
      • Getting Started
        • +
      • Overview
      • Feature Modules
      • Security and Compatibility
          @@ -1495,6 +1497,7 @@
        • Data Grid
          • Getting Started
            • +
          • Overview
          • Feature Modules
          • Data Binding
              @@ -1932,6 +1935,7 @@
            • Data Grid
              • Getting Started
                • +
              • Overview
              • Feature Modules
              • Data Binding
                  @@ -2375,6 +2379,7 @@
                • Quasar
                • +
              • Overview
              • Feature Modules
              • Data Binding
                  From e1ad90a2acf8834b574e0dc5c54341b8fd1c2e8c Mon Sep 17 00:00:00 2001 From: Sivaranjani Rajasekaran Date: Tue, 1 Sep 2026 17:55:44 +0530 Subject: [PATCH 6/7] fixed CI issues --- grid-sdk/asp-net-core/data-grid/overview.md | 2 +- grid-sdk/asp-net-mvc/data-grid/overview.md | 2 +- grid-sdk/javascript/data-grid/overview.md | 6 +++--- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/grid-sdk/asp-net-core/data-grid/overview.md b/grid-sdk/asp-net-core/data-grid/overview.md index 2460c60fc..b12d1f026 100644 --- a/grid-sdk/asp-net-core/data-grid/overview.md +++ b/grid-sdk/asp-net-core/data-grid/overview.md @@ -52,7 +52,7 @@ The Data Grid integrates with major relational databases to provide seamless dat **API and service integration** -API and service integration enables the Data Grid to connect seamlessly with GraphQL, Web API, OData, URL, and custom services for flexible backend data access. +API and service integration enables the Data Grid to connect seamlessly with GraphQL, Web API, OData, URL, and custom services for flexible server-side data access. | Integration approach | Best suited for | Key benefit | |-----------------------|------------------|-------------| diff --git a/grid-sdk/asp-net-mvc/data-grid/overview.md b/grid-sdk/asp-net-mvc/data-grid/overview.md index 4c5b9138d..8c074db60 100644 --- a/grid-sdk/asp-net-mvc/data-grid/overview.md +++ b/grid-sdk/asp-net-mvc/data-grid/overview.md @@ -52,7 +52,7 @@ The Data Grid integrates with major relational databases to provide seamless dat **API and service integration** -API and service integration enables the Data Grid to connect seamlessly with GraphQL, Web API, OData, URL, and custom services for flexible backend data access. +API and service integration enables the Data Grid to connect seamlessly with GraphQL, Web API, OData, URL, and custom services for flexible server-side data access. | Integration approach | Best suited for | Key benefit | |-----------------------|------------------|-------------| diff --git a/grid-sdk/javascript/data-grid/overview.md b/grid-sdk/javascript/data-grid/overview.md index c718c3740..bc87ea9d2 100644 --- a/grid-sdk/javascript/data-grid/overview.md +++ b/grid-sdk/javascript/data-grid/overview.md @@ -184,7 +184,7 @@ Match the JavaScript Data Grid to the application's visual design using built-in - Tailwind CSS - Fluent 2 High Contrast -[Syncfusion Theme Studio](https://ej2.syncfusion.com/JavaScript/documentation/appearance/theme-studio) allows customization of the Data Grid's appearance by modifying theme variables such as primary, accent, and background colors, enabling consistent styling, lightweight CSS generation, and seamless integration while ensuring the grid aligns with application design requirements. +[Syncfusion Theme Studio](https://ej2.syncfusion.com/javascript/documentation/appearance/theme-studio) allows customization of the Data Grid's appearance by modifying theme variables such as primary, accent, and background colors, enabling consistent styling, lightweight CSS generation, and seamless integration while ensuring the grid aligns with application design requirements. [Explore themes and styling](../appearance-and-styling/appearance-styling) @@ -208,7 +208,7 @@ Match the JavaScript Data Grid to the application's visual design using built-in ## Support and resources - **Questions?** Visit the [Syncfusion support portal](https://www.syncfusion.com/support) -- **Code Examples?** Browse [Data Grid demos](https://ej2.syncfusion.com/JavaScript/demos/#/tailwind3/grid/grid-overview.html) and samples -- **API Details?** See [Data Grid API reference](https://ej2.syncfusion.com/JavaScript/documentation/api/grid/index-default) +- **Code Examples?** Browse [Data Grid demos](https://ej2.syncfusion.com/javascript/demos/#/tailwind3/grid/grid-overview.html) and samples +- **API Details?** See [Data Grid API reference](https://ej2.syncfusion.com/javascript/documentation/api/grid/index-default) - **Community?** Join the [Syncfusion community forum](https://www.syncfusion.com/forums/essential-js2) - **What's New?** Check [Release notes](../../Release-Notes) \ No newline at end of file From f1a7a084e256f9bd75a34a14888a94e0de4ff45c Mon Sep 17 00:00:00 2001 From: Sivaranjani Rajasekaran Date: Tue, 1 Sep 2026 18:37:17 +0530 Subject: [PATCH 7/7] Fixed CI issues --- grid-toc.html | 6 ------ 1 file changed, 6 deletions(-) diff --git a/grid-toc.html b/grid-toc.html index 3a953231c..3539721a0 100644 --- a/grid-toc.html +++ b/grid-toc.html @@ -1227,9 +1227,6 @@
                • Enable/Disable Blazor DataGrid and its actions
                  • -
                • - How to Hide the Built‑in Spinner and Show a Custom Loading Spinner -
              • @@ -3213,9 +3210,6 @@
              • Connecting to Adaptors