DataGrid - Getting Started: Add ASP.NET Core Overhaul#8900
DataGrid - Getting Started: Add ASP.NET Core Overhaul#8900arman-boyakhchyan wants to merge 13 commits into
Conversation
There was a problem hiding this comment.
Pull request overview
This PR updates the “Getting Started with DataGrid” documentation to include ASP.NET Core Controls examples and aligns many framework snippets (Angular/Vue/React) with newer patterns (TypeScript, <script setup>, simplified markup), while also adding “Read Tutorial” links to relevant guide pages.
Changes:
- Added ASP.NET Core Controls code blocks across multiple “Getting Started” steps (exporting, grouping, sorting, column options, etc.).
- Refactored/modernized several Angular/Vue/React snippets (TypeScript imports, Composition API, reduced boilerplate) and replaced some “run the code” endings with tutorial links.
- Updated the jQuery getting-started sample app to use multiple-column sorting mode.
Reviewed changes
Copilot reviewed 17 out of 17 changed files in this pull request and generated 15 comments.
Show a summary per file
| File | Description |
|---|---|
| concepts/05 UI Components/DataGrid/00 Getting Started with DataGrid/80 Export Data.md | Reworked export instructions and added ASP.NET Core export sample. |
| concepts/05 UI Components/DataGrid/00 Getting Started with DataGrid/70 Configure Master-Detail Interface.md | Reworded intro, added ASP.NET Core sample, and replaced ending with a tutorial button. |
| concepts/05 UI Components/DataGrid/00 Getting Started with DataGrid/65 Customize the Toolbar.md | Added ASP.NET Core toolbar sample and modernized Vue/React snippets. |
| concepts/05 UI Components/DataGrid/00 Getting Started with DataGrid/60 Display Summaries.md | Added ASP.NET Core sample and added tutorial buttons. |
| concepts/05 UI Components/DataGrid/00 Getting Started with DataGrid/50 Select Records.md | Added ASP.NET Core sample, modernized TS usage, and added a tutorial button. |
| concepts/05 UI Components/DataGrid/00 Getting Started with DataGrid/40 Edit and Validate Data.md | Added ASP.NET Core editing/validation sample and added a tutorial button. |
| concepts/05 UI Components/DataGrid/00 Getting Started with DataGrid/35 Group Data.md | Added ASP.NET Core grouping sample and added a tutorial button. |
| concepts/05 UI Components/DataGrid/00 Getting Started with DataGrid/30 Filter and Search Data.md | Added ASP.NET Core filtering/search sample and added a tutorial button. |
| concepts/05 UI Components/DataGrid/00 Getting Started with DataGrid/20 Sort Data.md | Added ASP.NET Core sorting sample and added a tutorial button. |
| concepts/05 UI Components/DataGrid/00 Getting Started with DataGrid/10 Customize Columns/8 Hide Columns.md | Added ASP.NET Core “hide column” sample and added tutorial buttons. |
| concepts/05 UI Components/DataGrid/00 Getting Started with DataGrid/10 Customize Columns/6 Fix Columns.md | Added ASP.NET Core “column fixing” sample and added a tutorial button. |
| concepts/05 UI Components/DataGrid/00 Getting Started with DataGrid/10 Customize Columns/5 Resize Columns.md | Added ASP.NET Core “column sizing” sample and added a tutorial button. |
| concepts/05 UI Components/DataGrid/00 Getting Started with DataGrid/10 Customize Columns/3 Reorder Columns.md | Added ASP.NET Core “reorder columns” sample and added a tutorial button. |
| concepts/05 UI Components/DataGrid/00 Getting Started with DataGrid/10 Customize Columns/0 Customize Columns.md | Replaced single-paragraph intro with framework-specific intros and a tutorial button. |
| concepts/05 UI Components/DataGrid/00 Getting Started with DataGrid/05 Bind the DataGrid to Data.md | Added ASP.NET Core remote binding example and shortened local data listings. |
| concepts/05 UI Components/DataGrid/00 Getting Started with DataGrid/02 Create a DataGrid.md | Added ASP.NET Core “create grid” snippet and reorganized framework headings. |
| applications/GettingStartedWith/DataGrid/index.js | Enabled multiple-column sorting in the getting-started sample app. |
Comments suppressed due to low confidence (1)
concepts/05 UI Components/DataGrid/00 Getting Started with DataGrid/65 Customize the Toolbar.md:89
- In the Angular snippet,
Booleanshould be the primitivebooleantype. UsingBooleancan lead to unexpected behavior and is inconsistent with typical Angular/TypeScript typing.
export class AppComponent {
// ...
expanded: Boolean = true;
}
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 17 out of 17 changed files in this pull request and generated 16 comments.
Comments suppressed due to low confidence (1)
concepts/05 UI Components/DataGrid/00 Getting Started with DataGrid/80 Export Data.md:59
- The PDF export branch does not set
e.cancel = true. Since the handler performs a custom export, the default export action should be canceled to avoid duplicate/broken export behavior.
} else if (e.format === 'pdf') {
const doc = new window.jspdf.jsPDF();
DevExpress.pdfExporter.exportDataGrid({
jsPDFDocument: doc,
component: e.component,
}).then(() => {
doc.save('DataGrid.pdf');
});
}
Co-authored-by: Vladimir Abadzhev <vladimira@devexpress.com>
…aGrid/10 Customize Columns/6 Fix Columns.md Co-authored-by: Vladimir Abadzhev <vladimira@devexpress.com>
|
|
||
| ##### jQuery | ||
|
|
||
| Specify the [columns](/api-reference/10%20UI%20Components/dxDataGrid/1%20Configuration/columns '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/') array to define and customize DataGrid columns. You can define columns as objects to configure options. To add a column with default options, add the column's [dataField](/api-reference/10%20UI%20Components/dxDataGrid/1%20Configuration/columns/dataField.md '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/#dataField') value to **columns[]** as a string. |
There was a problem hiding this comment.
| Specify the [columns](/api-reference/10%20UI%20Components/dxDataGrid/1%20Configuration/columns '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/') array to define and customize DataGrid columns. You can define columns as objects to configure options. To add a column with default options, add the column's [dataField](/api-reference/10%20UI%20Components/dxDataGrid/1%20Configuration/columns/dataField.md '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/#dataField') value to **columns[]** as a string. | |
| Use the [columns](/api-reference/10%20UI%20Components/dxDataGrid/1%20Configuration/columns '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/') array to define and customize DataGrid columns. Configure columns as objects to set column options. To add a column with default options, add its [dataField](/api-reference/10%20UI%20Components/dxDataGrid/1%20Configuration/columns/dataField.md '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/#dataField') value to **columns[]** as a string. |
There was a problem hiding this comment.
I would like to modify the last sentence as follows:
| Specify the [columns](/api-reference/10%20UI%20Components/dxDataGrid/1%20Configuration/columns '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/') array to define and customize DataGrid columns. You can define columns as objects to configure options. To add a column with default options, add the column's [dataField](/api-reference/10%20UI%20Components/dxDataGrid/1%20Configuration/columns/dataField.md '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/#dataField') value to **columns[]** as a string. | |
| Use the [columns](/api-reference/10%20UI%20Components/dxDataGrid/1%20Configuration/columns '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/') array to define and customize DataGrid columns. Configure columns as objects to set column options. To add columns with default options, add [dataField](/api-reference/10%20UI%20Components/dxDataGrid/1%20Configuration/columns/dataField.md '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/#dataField') values to **columns[]** as strings. |
Additionally, maybe we can avoid adding another instance of "column" in the second sentence?
| Specify the [columns](/api-reference/10%20UI%20Components/dxDataGrid/1%20Configuration/columns '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/') array to define and customize DataGrid columns. You can define columns as objects to configure options. To add a column with default options, add the column's [dataField](/api-reference/10%20UI%20Components/dxDataGrid/1%20Configuration/columns/dataField.md '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/#dataField') value to **columns[]** as a string. | |
| Use the [columns](/api-reference/10%20UI%20Components/dxDataGrid/1%20Configuration/columns '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/') array to define and customize DataGrid columns. Configure columns as objects to specify options. To add columns with default options, add [dataField](/api-reference/10%20UI%20Components/dxDataGrid/1%20Configuration/columns/dataField.md '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/#dataField') values to **columns[]** as strings. |
| To reorder grid columns, change their order in the [columns](/api-reference/10%20UI%20Components/dxDataGrid/1%20Configuration/columns '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/') array. Users can also reorder columns if you enable the [allowColumnReordering](/api-reference/10%20UI%20Components/GridBase/1%20Configuration/allowColumnReordering.md '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/#allowColumnReordering') property. | ||
| #include common-tutorialbutton-named with { url: "/Documentation/Guide/UI_Components/DataGrid/Columns/Column_Reordering/", name: "Column Reordering" } | ||
|
|
||
| To specify an initial column order, reorder [columns[]](/api-reference/10%20UI%20Components/dxDataGrid/1%20Configuration/columns '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/') items. Enable [allowColumnReordering](/api-reference/10%20UI%20Components/GridBase/1%20Configuration/allowColumnReordering.md '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/#allowColumnReordering') to allow column reordering in the component's UI. |
There was a problem hiding this comment.
How is reordering columns related to setting the initial column order? And where is it that you should reorder them?
Do you mean
| To specify an initial column order, reorder [columns[]](/api-reference/10%20UI%20Components/dxDataGrid/1%20Configuration/columns '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/') items. Enable [allowColumnReordering](/api-reference/10%20UI%20Components/GridBase/1%20Configuration/allowColumnReordering.md '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/#allowColumnReordering') to allow column reordering in the component's UI. | |
| To set the initial column order, arrange items in the [columns[]](/api-reference/10%20UI%20Components/dxDataGrid/1%20Configuration/columns '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/') array in the order in which columns should appear. Enable [allowColumnReordering](/api-reference/10%20UI%20Components/GridBase/1%20Configuration/allowColumnReordering.md '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/#allowColumnReordering') to allow users to reorder columns in the component UI. |
There was a problem hiding this comment.
That works, but I would like to suggest slightly simplifying the second half of the first sentence:
| To specify an initial column order, reorder [columns[]](/api-reference/10%20UI%20Components/dxDataGrid/1%20Configuration/columns '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/') items. Enable [allowColumnReordering](/api-reference/10%20UI%20Components/GridBase/1%20Configuration/allowColumnReordering.md '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/#allowColumnReordering') to allow column reordering in the component's UI. | |
| To set the initial column order, arrange items in the [columns[]](/api-reference/10%20UI%20Components/dxDataGrid/1%20Configuration/columns '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/') array as needed. Enable [allowColumnReordering](/api-reference/10%20UI%20Components/GridBase/1%20Configuration/allowColumnReordering.md '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/#allowColumnReordering') to allow users to reorder columns in the component UI. |
| You can also enable a column's [fixed](/api-reference/_hidden/GridBaseColumn/fixed.md '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/#fixed') property in code. This fixes the column to the UI component's left edge. To change the position, set the [fixedPosition](/api-reference/_hidden/GridBaseColumn/fixedPosition.md '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/#fixedPosition') property. | ||
|
|
||
| The following code fixes the `FullName` column to the default position and allows users to fix and unfix columns at runtime: | ||
| When the width of all columns exceeds the UI component's width, a horizontal scroll bar appears. To ensure specific columns always remain in view, enable [columnFixing](/api-reference/10%20UI%20Components/GridBase/1%20Configuration/columnFixing/enabled.md '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columnFixing/#enabled'). Set **columns[]**.[fixed](/api-reference/_hidden/GridBaseColumn/fixed.md '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/#fixed') to `true` to initialize fixed columns. Define [fixedPosition](/api-reference/_hidden/GridBaseColumn/fixedPosition.md '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/#fixedPosition') to specify a fixed column's position or implement a sticky column. Users can also modify column fixing options in the component UI using the DataGrid [context menu](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/#onContextMenuPreparing). |
There was a problem hiding this comment.
| When the width of all columns exceeds the UI component's width, a horizontal scroll bar appears. To ensure specific columns always remain in view, enable [columnFixing](/api-reference/10%20UI%20Components/GridBase/1%20Configuration/columnFixing/enabled.md '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columnFixing/#enabled'). Set **columns[]**.[fixed](/api-reference/_hidden/GridBaseColumn/fixed.md '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/#fixed') to `true` to initialize fixed columns. Define [fixedPosition](/api-reference/_hidden/GridBaseColumn/fixedPosition.md '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/#fixedPosition') to specify a fixed column's position or implement a sticky column. Users can also modify column fixing options in the component UI using the DataGrid [context menu](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/#onContextMenuPreparing). | |
| When the total column width exceeds the UI component width, a horizontal scroll bar appears. To keep specific columns visible, enable [columnFixing](/api-reference/10%20UI%20Components/GridBase/1%20Configuration/columnFixing/enabled.md '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columnFixing/#enabled'). Set **columns[]**.[fixed](/api-reference/_hidden/GridBaseColumn/fixed.md '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/#fixed') to `true` to make a column fixed. Set [fixedPosition](/api-reference/_hidden/GridBaseColumn/fixedPosition.md '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/#fixedPosition') to specify the fixed column position or create a sticky column. Users can also change column fixing options in the DataGrid [context menu](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/#onContextMenuPreparing). |
There was a problem hiding this comment.
I would like to slightly simplify the "make a column fixed" bit:
| When the width of all columns exceeds the UI component's width, a horizontal scroll bar appears. To ensure specific columns always remain in view, enable [columnFixing](/api-reference/10%20UI%20Components/GridBase/1%20Configuration/columnFixing/enabled.md '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columnFixing/#enabled'). Set **columns[]**.[fixed](/api-reference/_hidden/GridBaseColumn/fixed.md '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/#fixed') to `true` to initialize fixed columns. Define [fixedPosition](/api-reference/_hidden/GridBaseColumn/fixedPosition.md '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/#fixedPosition') to specify a fixed column's position or implement a sticky column. Users can also modify column fixing options in the component UI using the DataGrid [context menu](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/#onContextMenuPreparing). | |
| When the total column width exceeds the UI component width, a horizontal scroll bar appears. To keep specific columns visible, enable [columnFixing](/api-reference/10%20UI%20Components/GridBase/1%20Configuration/columnFixing/enabled.md '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columnFixing/#enabled'). Set **columns[]**.[fixed](/api-reference/_hidden/GridBaseColumn/fixed.md '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/#fixed') to `true` to fix a column. Set [fixedPosition](/api-reference/_hidden/GridBaseColumn/fixedPosition.md '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/#fixedPosition') to specify the fixed column position or create a sticky column. Users can also change column fixing options in the DataGrid [context menu](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/#onContextMenuPreparing). |
Co-authored-by: dirkpieterse <dirk.pieterse@devexpress.com>
…aGrid/10 Customize Columns/8 Hide Columns.md Co-authored-by: dirkpieterse <dirk.pieterse@devexpress.com>
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 18 out of 18 changed files in this pull request and generated 8 comments.
Comments suppressed due to low confidence (1)
applications/GettingStartedWith/DataGrid/index.js:143
- The PDF branch of
onExportingdoes not sete.cancel = true. Since the handler performs a custom export+save, the built-in export is likely to run afterward and trigger a second export/download.
} else if (e.format === 'pdf') {
const doc = new jsPDF();
DevExpress.pdfExporter.exportDataGrid({
jsPDFDocument: doc,
component: e.component,
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 18 out of 18 changed files in this pull request and generated 9 comments.
Comments suppressed due to low confidence (1)
applications/GettingStartedWith/DataGrid/index.js:143
onExportingsetse.cancel = trueonly for the XLSX branch. The PDF branch also performs a custom export, so the default export may still run and cause duplicate downloads.
} else if (e.format === 'pdf') {
const doc = new jsPDF();
DevExpress.pdfExporter.exportDataGrid({
jsPDFDocument: doc,
component: e.component,
| --- | ||
|
|
||
| --- | ||
| ##### jQuery | ||
|
|
| <script setup lang="ts"> | ||
| import { ref } from 'vue'; | ||
| import { DxDataGrid, DxSelection, type DataGridTypes } from 'devextreme-vue/data-grid'; | ||
| import { type Employee } from '../employees.service'; | ||
|
|
||
| const selectedEmployee = ref<Employee | undefined>(); | ||
|
|
||
| function selectEmployee(e: DataGridTypes.SelectionChangedEvent): void { | ||
| e.component.byKey(e.currentSelectedRowKeys[0]).done((employee: Employee) => { |
| static class EmployeeData { | ||
| public static List<Employee> Employees = [ | ||
| // ... | ||
| ]; | ||
| } |
| } | ||
| } |
| } | ||
| } |
| } | ||
| } |
| } | ||
| } |
| } | ||
| } |
| <script setup lang="ts"> | ||
| import { DxDataGrid, DxExport, type DxDataGridTypes } from 'devextreme-vue/data-grid'; | ||
| import { Workbook } from 'devextreme-exceljs-fork'; | ||
| import { saveAs } from 'file-saver'; |
No description provided.