DataGrid - Getting Started: Add ASP.NET Core Overhaul#8900
Open
arman-boyakhchyan wants to merge 3 commits into
Open
DataGrid - Getting Started: Add ASP.NET Core Overhaul#8900arman-boyakhchyan wants to merge 3 commits into
arman-boyakhchyan wants to merge 3 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;
}
Comment on lines
+101
to
+102
| }); | ||
| } |
| @@ -1,69 +1,50 @@ | |||
| DataGrid allows you to display expandable detail sections under data rows. To configure a UI like this, use the [masterDetail](/api-reference/10%20UI%20Components/dxDataGrid/1%20Configuration/masterDetail '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/masterDetail/') object. Set the [enabled](/api-reference/10%20UI%20Components/dxDataGrid/1%20Configuration/masterDetail/enabled.md '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/masterDetail/#enabled') property to **true** and specify a [template](/api-reference/10%20UI%20Components/dxDataGrid/1%20Configuration/masterDetail/template.md '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/masterDetail/#template') that is used as the detail section's content: | |||
| DataGrid supports master-detail interfaces. These allow you to display additional details in expandable section under data rows. To configure master-detail interfaces, set **masterDetail**.[enabled](/api-reference/10%20UI%20Components/dxDataGrid/1%20Configuration/masterDetail/enabled.md '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/masterDetail/#enabled') to **true** and specify a [template](/api-reference/10%20UI%20Components/dxDataGrid/1%20Configuration/masterDetail/template.md '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/masterDetail/#template'). This tutorial configures a template that displays employee images using file paths stored in the component data source: | |||
Comment on lines
+29
to
+34
| columns.AddFor(m => m.BirthDate) | ||
| .DataType(GridColumnDataType.Date) | ||
| .Width(100) | ||
| columns.AddFor(m => m.HireDate) | ||
| .DataType(GridColumnDataType.Date) | ||
| .Width(100) |
Comment on lines
+63
to
+66
| <DxDataGrid | ||
| :allow-column-reordering="true" | ||
| :column-auto-width="true" | ||
| > |
Comment on lines
+93
to
+96
| <DataGrid | ||
| columnAutoWidth={true} | ||
| allowColumnReordering={true} | ||
| > |
| dataField: "PostalCode", | ||
| visible: false | ||
| }], | ||
| sorting: { mode: 'multiple' }, |
Comment on lines
106
to
110
| <script> | ||
| import { | ||
| DxDataGrid, | ||
| // ... | ||
| DxSelection | ||
| } from 'devextreme-vue/data-grid'; | ||
|
|
||
| export default { | ||
| components: { | ||
| DxDataGrid, | ||
| // ... | ||
| DxSelection | ||
| }, | ||
| data() { | ||
| return { | ||
| // ... | ||
| selectedEmployee: undefined, | ||
| } | ||
| }, | ||
| methods: { | ||
| selectEmployee(e) { | ||
| e.component.byKey(e.currentSelectedRowKeys[0]).done(employee => { | ||
| if(employee) { | ||
| this.selectedEmployee = employee; | ||
| } | ||
| }); | ||
| } | ||
| } | ||
| } | ||
| </script> | ||
| import { ref } from 'vue'; | ||
| import { DxDataGrid, DxSelection, type DataGridTypes } from 'devextreme-vue/data-grid'; | ||
| import { type Employee } from '../employees.service'; | ||
|
|
| const selectEmployee = useCallback((e) => { | ||
| e.component.byKey(e.currentSelectedRowKeys[0]).done(employee => { | ||
| const selectEmployee = useCallback((e: DataGridTypes.SelectionChangedEvent): void => { | ||
| e.component.byKey(e.currentSelectedRowKeys[0]).then((employee: Employee) => { |
Comment on lines
+18
to
+21
| --- | ||
|
|
||
| --- | ||
| ##### jQuery |
Comment on lines
+149
to
154
| <script setup lang="ts"> | ||
| // ... | ||
| import service from './employees.service'; | ||
|
|
||
| export default { | ||
| // ... | ||
| data() { | ||
| return { | ||
| employees: service.getEmployees(), | ||
| } | ||
| }, | ||
| } | ||
| const employees: service.getEmployees(), | ||
| </script> |
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');
});
}
| } | ||
| }, | ||
| } | ||
| const employees: getEmployees(), |
| @@ -115,63 +104,26 @@ You can obtain the selected record's data in the [onSelectionChanged](/api-refer | |||
| </template> | |||
|
|
|||
| <script> | |||
Comment on lines
+28
to
+35
| .Columns(columns => { | ||
| columns.AddFor(m => m.BirthDate) | ||
| .DataType(GridColumnDataType.Date) | ||
| .Width(100) | ||
| columns.AddFor(m => m.HireDate) | ||
| .DataType(GridColumnDataType.Date) | ||
| .Width(100) | ||
| }) |
Comment on lines
+35
to
+46
| .Columns(columns => { | ||
| columns.AddFor(m => m.FullName) | ||
| columns.AddFor(m => m.Position) | ||
| columns.AddFor(m => m.BirthDate) | ||
| .DataType(GridColumnDataType.Date) | ||
| columns.AddFor(m => m.HireDate) | ||
| .DataType(GridColumnDataType.Date) | ||
| columns.AddFor(m => m.Country) | ||
| columns.AddFor(m => m.Address); | ||
| columns.AddFor(m => m.HomePhone); | ||
| columns.AddFor(m => m.PostalCode).Visible(false); | ||
| }) |
Comment on lines
+25
to
+28
| .Columns(columns => { | ||
| columns.AddFor(m => m.Country) | ||
| .SortOrder(SortOrder.Asc) | ||
| }) |
| }) | ||
| export class AppComponent { | ||
| // ... | ||
| expanded: Boolean = true; |
Comment on lines
+24
to
+26
| columns.AddFor(m => m.Country) | ||
| .GroupIndex(0) | ||
| }) |
Comment on lines
+22
to
+24
| columns.AddFor(m => m.FullName) | ||
| .Fixed(true) | ||
| }) |
Comment on lines
+90
to
+98
| } else if (e.format === 'pdf') { | ||
| const doc = new window.jspdf.jsPDF(); | ||
| DevExpress.pdfExporter.exportDataGrid({ | ||
| jsPDFDocument: doc, | ||
| component: e.component, | ||
| }).then(() => { | ||
| doc.save('DataGrid.pdf'); | ||
| }); | ||
| } |
Comment on lines
+75
to
+78
| static class EmployeeData { | ||
| public static List<Employee> Employees = [ | ||
| // ... | ||
| ]; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
No description provided.