Overhaul Shared Code Snippets (#8972)#8987
Open
arman-boyakhchyan wants to merge 1 commit into
Open
Conversation
There was a problem hiding this comment.
Pull request overview
This pull request updates shared documentation snippets across the DevExtreme docs to modernize framework examples (Vue Composition API + TS, React function components/TSX) and standardize snippet formatting/tab labels, while also revising some referenced guidance (for example, DataGrid customizeColumns notes).
Changes:
- Modernize Vue/React samples (Composition API +
<script setup lang="ts">, React function components with hooks, TSX tabs). - Standardize snippet formatting (tab markers, imports,
constusage) and update a few URLs tohttps. - Replace the
grids-customize-columns-react-noteinclude with inline, per-framework notes in the DataGridcustomizeColumnsdoc.
Reviewed changes
Copilot reviewed 14 out of 14 changed files in this pull request and generated 19 comments.
Show a summary per file
| File | Description |
|---|---|
| includes/uiwidgets-ref-validation-message.md | Reformats validation message examples and updates Vue/React snippets to modern patterns. |
| includes/tutorials-editors-add-label.md | Refines label explanation text and updates Vue/React examples to TS/Composition API + TSX. |
| includes/grids-customize-columns-react-note.md | Removes a React-specific include note (content moved inline elsewhere). |
| includes/dataviz-ref-gauges-indicator-types-snippet.md | Updates gauge indicator snippets (tab labels/formatting, adds both indicator configs). |
| includes/dataviz-legend-customizeitems-example.md | Modernizes Vue/React examples and updates variable declarations to const. |
| includes/dataviz-code-customsource.md | Standardizes tabs/formatting and switches example URLs to https. |
| includes/datalayer-ref-query-summarymethods-desc.md | Updates Vue/React to Composition API + hooks/TSX patterns and modernizes declarations. |
| includes/custom-templates.md | Updates Vue to <script setup lang="ts"> and React to a TSX functional component style. |
| includes/common-dataSource-description.md | Refreshes dataSource binding examples and updates Angular/Vue/React imports and snippet structure. |
| includes/common-code-register-key-handler.md | Updates Angular/Vue/React key-handler examples to newer patterns (standalone imports, refs/hooks). |
| includes/common-code-on-initialized.md | Adds/updates initialized-event snippets, including typed event usage and Composition API example. |
| includes/common-code-customsource-rawmode-withkey.md | Modernizes raw-mode data source examples and aligns Angular/Vue/React patterns. |
| includes/common-code-customsource-rawmode-pagingdisabled.md | Modernizes raw-mode data source examples and aligns Angular/Vue/React patterns. |
| api-reference/10 UI Components/dxDataGrid/1 Configuration/customizeColumns.md | Updates samples + replaces include note with inline per-framework notes and adds “See Also”. |
Comment on lines
+23
to
+26
| @Component({ | ||
| imports: [Dx{WidgetName}Component], | ||
| // ... | ||
| }) |
Comment on lines
+49
to
+55
| import { onMounted, ref } from 'vue'; | ||
| import { Dx{WidgetName} } from 'devextreme-vue/{widget-name}'; | ||
|
|
||
| <!--tab: App.js--> | ||
| import React from 'react'; | ||
| import 'devextreme/dist/css/dx.fluent.blue.light.css'; | ||
|
|
||
| import { {WidgetName} } from 'devextreme-react/{widget-name}'; | ||
| const {widgetName}Ref = ref<Dx{WidgetName} | null>(null); | ||
|
|
||
| class App extends React.Component { | ||
| constructor(props) { | ||
| super(props); | ||
| onMounted(() => { | ||
| {widgetName}Ref.value.instance.registerKeyHandler('backspace', function(e) { |
Comment on lines
+74
to
+82
| useEffect(() => { | ||
| const {widgetName} = {widgetName}Ref.current.instance(); | ||
| {widgetName}.registerKeyHandler('backspace', function(e) { | ||
| // The argument "e" contains information about the event | ||
| }); | ||
| this.{widgetName}.registerKeyHandler('space', function(e) { | ||
| {widgetName}.registerKeyHandler('space', function(e) { | ||
| // ... | ||
| }); | ||
| } | ||
| } | ||
| }, []); |
Comment on lines
11
to
+14
| import { Component } from "@angular/core"; | ||
| import {WidgetName} from "devextreme/ui/data_grid"; | ||
| import { type Dx{WidgetName}Types } from 'devextreme-angular/ui/{widget-name}'; | ||
| import dx{WidgetName} from "devextreme/ui/{widget_name}"; | ||
|
|
Comment on lines
+34
to
+41
| import { ref } from 'vue'; | ||
| import { Dx{WidgetName}, type Dx{WidgetName}Types } from 'devextreme-vue/{widget-name}'; | ||
|
|
||
| let {widgetName}Instance: Dx{WidgetName}Types.InitializedEvent['component'] | undefined; | ||
|
|
||
| function saveInstance(e: Dx{WidgetName}Types.InitializedEvent): void { | ||
| {widgetName}Instance = e.component; | ||
| } |
Comment on lines
+27
to
+30
| @Component({ | ||
| imports: [Dx{WidgetName}Component], | ||
| // ... | ||
| }) |
Comment on lines
+106
to
112
| function App() { | ||
| return ( | ||
| <{WidgetName} dataSource={{widgetName}DataSource} /> | ||
| ); | ||
| } | ||
| export default App; | ||
|
|
||
| --- |
Comment on lines
+33
to
+36
| @Component({ | ||
| imports: [Dx{WidgetName}Component], | ||
| // ... | ||
| }) |
Comment on lines
+69
to
82
| <!-- tab: App.tsx --> | ||
| import { useCallback } from 'react' | ||
| import { {WidgetName} } from 'devextreme-react/{widget-name}'; | ||
|
|
||
| import {WidgetName}, { | ||
| // ... | ||
| } from 'devextreme-react/{widget-name}'; | ||
|
|
||
| class App extends React.Component { | ||
| customizeColumns = (columns) => { | ||
| function App() { | ||
| const customizeColumns = useCallback((columns) => { | ||
| columns[0].width = 100; | ||
| columns[1].width = 210; | ||
| } | ||
| }, []); | ||
|
|
||
| render() { | ||
| return ( | ||
| <{WidgetName} ... | ||
| customizeColumns={this.customizeColumns} | ||
| /> | ||
| ); | ||
| } | ||
| return ( | ||
| <{WidgetName} customizeColumns={customizeColumns} /> | ||
| ); | ||
| } |
Comment on lines
+124
to
+125
| #####See Also##### | ||
| - [columns[]](/api-reference/10%20UI%20Components/dxDataGrid/1%20Configuration/columns '/Documentation/ApiReference/UI_Components/dx{WidgetName}/Configuration/columns/') No newline at end of file |
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.