Skip to content
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 17 additions & 19 deletions ej2-javascript/grid/overview.md
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ The ##Platform_Name## Data Grid integrates with modern application architectures

The Data Grid integrates with major relational databases to provide seamless data access and management:

| Database | Key Benefit | Best For |
| 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 |
Expand All @@ -54,7 +54,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.
Integrate the Data Grid with GraphQL, Web API, OData, RESTful APIs, and custom services to retrieve, manage, and display remote data efficiently.

| Integration approach | Best suited for | Key benefit |
|-----------------------|------------------|-------------|
Expand All @@ -70,7 +70,7 @@ The ##Platform_Name## Data Grid includes key features that make it easier to wor
- **[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.
- **[Excel-like filter](./filtering/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.
Expand All @@ -94,8 +94,9 @@ Multiple editing modes support different workflow scenarios:
| **[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.
**Data validation**

Built-in [validation](./editing/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

Expand Down Expand Up @@ -126,9 +127,9 @@ The ##Platform_Name## Data Grid delivers accessible, customizable data experienc

**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
- **[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**
Expand All @@ -137,11 +138,12 @@ The Data Grid is fully accessible and compliant with Web Content Accessibility G

- **[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.
- <kbd>Tab</kbd> / <kbd>Shift</kbd> + <kbd>Tab</kbd> - Navigate between cells.
- <kbd>→</kbd> | <kbd>←</kbd> - Navigate header and content cells across columns or rows using the left or right arrow keys.
- <kbd>↑</kbd> | <kbd>↓</kbd> - Navigate header and content cells across columns or rows using the up or down arrow keys.
- <kbd>Enter</kbd> - Update cells, confirm changes.
- <kbd>Escape</kbd> - Cancel editing.
- <kbd>Ctrl</kbd> + <kbd>A</kbd> - Select all rows.
- **[Screen reader support](./accessibility)** - Full compatibility with assistive technologies.
- **[Semantic HTML](./accessibility)** - Proper ARIA labels and semantic markup.

Expand Down Expand Up @@ -177,7 +179,7 @@ For specific implementation patterns, refer to feature documentation:

## Themes and styling

Match the ##Platform_Name## Data Grid to the application's visual design using built-in themes and customization options. Supported themes are:
Match the ##Platform_Name## Data Grid to the application's visual design using [built-in themes](../appearance-and-styling/appearance-styling) and customization options. Supported themes are:

- Fluent 2
- Material 3
Expand All @@ -195,8 +197,6 @@ Match the ##Platform_Name## Data Grid to the application's visual design using b

{% endif %}

[Explore themes and styling](../appearance-and-styling/appearance-styling)

## Quick links

**Getting started:**
Expand All @@ -209,15 +209,14 @@ Match the ##Platform_Name## Data Grid to the application's visual design using b
- [Export and reporting](./excel-export/excel-exporting)
- [Data validation](./editing/validation)

**Advanced features**
**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)

{% if page.publishingplatform == "typescript" %}

- **Code Examples?** Browse [Data Grid demos](https://ej2.syncfusion.com/demos/#/tailwind3/grid/grid-overview.html) and samples
Expand All @@ -229,6 +228,5 @@ Match the ##Platform_Name## Data Grid to the application's visual design using b
- **API Details?** See [Data Grid API reference](https://ej2.syncfusion.com/javascript/documentation/api/grid/index-default)

{% endif %}

- **Community?** Join the [Syncfusion community forum](https://www.syncfusion.com/forums/essential-js2)
- **What's New?** Check [Release notes](../Release-Notes)