diff --git a/.github/workflows/docgen-scheduler.yml b/.github/workflows/docgen-scheduler.yml index fb395b7db5..19b2a33952 100644 --- a/.github/workflows/docgen-scheduler.yml +++ b/.github/workflows/docgen-scheduler.yml @@ -14,7 +14,7 @@ jobs: strategy: fail-fast: false matrix: - branch: ['23_2', '24_1', '24_2', '25_1', '25_2'] + branch: ['24_1', '24_2', '25_1', '25_2', '26_1'] steps: - name: Get sources diff --git a/api-reference/10 UI Components/dxForm/1 Configuration/labelMode.md b/api-reference/10 UI Components/dxForm/1 Configuration/labelMode.md index 4edb50b822..b701170a66 100644 --- a/api-reference/10 UI Components/dxForm/1 Configuration/labelMode.md +++ b/api-reference/10 UI Components/dxForm/1 Configuration/labelMode.md @@ -22,7 +22,7 @@ Specifies a display mode for [item labels](/api-reference/10%20UI%20Components/d
  • items[].label.alignment
    • -
    +
    ' } diff --git a/api-reference/10 UI Components/dxGallery/dxGallery.md b/api-reference/10 UI Components/dxGallery/dxGallery.md index 7cba9afb6b..62666901fe 100644 --- a/api-reference/10 UI Components/dxGallery/dxGallery.md +++ b/api-reference/10 UI Components/dxGallery/dxGallery.md @@ -10,10 +10,10 @@ The Gallery is a UI component that displays a collection of images in a carousel ##### widgettree dataSource: [ - "https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person1.png", - "https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person2.png", - "https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person3.png", - "https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person4.png" + "https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person1.png", + "https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person2.png", + "https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person3.png", + "https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person4.png" ], height: 400 diff --git a/api-reference/10 UI Components/dxHtmlEditor/3 Methods/get(componentPath).md b/api-reference/10 UI Components/dxHtmlEditor/3 Methods/get(componentPath).md index 9d2aadcb4d..f531cdc823 100644 --- a/api-reference/10 UI Components/dxHtmlEditor/3 Methods/get(componentPath).md +++ b/api-reference/10 UI Components/dxHtmlEditor/3 Methods/get(componentPath).md @@ -18,7 +18,7 @@ You can perform the following tasks after getting a format, module, or Parchment You can change the markup tag associated with the format and allowed format values, as shown in the code example after this list. - **Extend the format or module** -You can extend HTML Editor's formats and modules, and also the DevExtreme Quill's formats and modules. See the [Extend Built-In Formats and Modules](/concepts/05%20UI%20Components/HtmlEditor/10%20Formats/60%20Customize%20Built-In%20Formats%20and%20Modules/20%20Extend.md '/Documentation/Guide/UI_Components/HtmlEditor/Formats/#Customize_Built-In_Formats_and_Modules/Extend') topic for the code example. +You can extend HTML Editor's formats and modules, and also the DevExtreme Quill's formats and modules. See the [Extend Built-In Formats and Modules](/concepts/05%20UI%20Components/HtmlEditor/10%20Formats/60%20Customize%20Built-In%20Formats%20and%20Modules/20%20Extend.md '/Documentation/Guide/UI_Components/HtmlEditor/Formats/#Customize_Built-In_Formats_and_Modules/Extend') topic for the code example. - **Create a custom format based on the Parchment** Refer to the Parchment documentation for more information. diff --git a/api-reference/10 UI Components/dxHtmlEditor/3 Methods/getModule(moduleName).md b/api-reference/10 UI Components/dxHtmlEditor/3 Methods/getModule(moduleName).md index 70ff9a22ad..c8db6ef9cf 100644 --- a/api-reference/10 UI Components/dxHtmlEditor/3 Methods/getModule(moduleName).md +++ b/api-reference/10 UI Components/dxHtmlEditor/3 Methods/getModule(moduleName).md @@ -12,6 +12,6 @@ A module's instance. The name of a [registered](/api-reference/10%20UI%20Components/dxHtmlEditor/3%20Methods/register(components).md '/Documentation/ApiReference/UI_Components/dxHtmlEditor/Methods/#registercomponents') module. --- -You can get DevExtreme Quill modules, DevExtreme UI modules, or custom modules. +You can get DevExtreme Quill modules, DevExtreme UI modules, or custom modules. If you implement the [customizeModules](/api-reference/10%20UI%20Components/dxHtmlEditor/1%20Configuration/customizeModules.md '/Documentation/ApiReference/UI_Components/dxHtmlEditor/Configuration/#customizeModules') function, make sure that it does not disable the modules that you want to get. diff --git a/api-reference/10 UI Components/dxHtmlEditor/3 Methods/insertEmbed(index_type_config).md b/api-reference/10 UI Components/dxHtmlEditor/3 Methods/insertEmbed(index_type_config).md index ef5b0886fd..36b9125164 100644 --- a/api-reference/10 UI Components/dxHtmlEditor/3 Methods/insertEmbed(index_type_config).md +++ b/api-reference/10 UI Components/dxHtmlEditor/3 Methods/insertEmbed(index_type_config).md @@ -21,7 +21,7 @@ An embedded format's [value](/concepts/05%20UI%20Components/HtmlEditor/10%20Form // Adds an image at the beginning of the content $("#htmlEditorContainer").dxHtmlEditor("instance").insertEmbed(0, "extendedImage", { - src: "https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person1.png", + src: "https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person1.png", alt: "Photo", width: "100px" }); @@ -38,7 +38,7 @@ An embedded format's [value](/concepts/05%20UI%20Components/HtmlEditor/10%20Form // @ViewChild(DxHtmlEditorComponent) htmlEditor: DxHtmlEditorComponent; insertImageAtTheBeginning() { this.htmlEditor.instance.insertEmbed(0, "extendedImage", { - src: "https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person1.png", + src: "https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person1.png", alt: "Photo", width: "100px" }); @@ -80,7 +80,7 @@ An embedded format's [value](/concepts/05%20UI%20Components/HtmlEditor/10%20Form insertImageAtTheBeginning() { // Makes the first five characters bold and underlined this.htmlEditor.insertEmbed(0, "extendedImage", { - src: "https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person1.png", + src: "https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person1.png", alt: "Photo", width: "100px" }); @@ -108,7 +108,7 @@ An embedded format's [value](/concepts/05%20UI%20Components/HtmlEditor/10%20Form const insertImageAtTheBeginning = () => { // Makes the first five characters bold and underlined htmlEditor.current.instance().insertEmbed(0, "extendedImage", { - src: "https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person1.png", + src: "https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person1.png", alt: "Photo", width: "100px" }); diff --git a/api-reference/10 UI Components/dxLoadIndicator/1 Configuration/animationType.md b/api-reference/10 UI Components/dxLoadIndicator/1 Configuration/animationType.md index 46ab4a0b27..d81c3ee7d0 100644 --- a/api-reference/10 UI Components/dxLoadIndicator/1 Configuration/animationType.md +++ b/api-reference/10 UI Components/dxLoadIndicator/1 Configuration/animationType.md @@ -17,10 +17,10 @@ This property can have one of the following values: "circle" -
    +
    "sparkle" -
    +
    diff --git a/api-reference/10 UI Components/dxTextEditor/1 Configuration/labelMode.md b/api-reference/10 UI Components/dxTextEditor/1 Configuration/labelMode.md index eed98ffe17..4f110ae07a 100644 --- a/api-reference/10 UI Components/dxTextEditor/1 Configuration/labelMode.md +++ b/api-reference/10 UI Components/dxTextEditor/1 Configuration/labelMode.md @@ -13,7 +13,7 @@ Specifies the [label](/api-reference/10%20UI%20Components/dxTextEditor/1%20Confi "outside" The label is outside. -
    +
    ' } @@ -21,4 +21,4 @@ Specifies the [label](/api-reference/10%20UI%20Components/dxTextEditor/1%20Confi If autofill is enabled in the browser, we do not recommend that you use "*floating*" mode. The autofill values will overlap the label when it is displayed as a placeholder. Use "*static*" mode instead. -[/note] \ No newline at end of file +[/note] diff --git a/api-reference/_hidden/GridBaseColumn/filterType.md b/api-reference/_hidden/GridBaseColumn/filterType.md index 3f54b7dc43..4dd48ec9bf 100644 --- a/api-reference/_hidden/GridBaseColumn/filterType.md +++ b/api-reference/_hidden/GridBaseColumn/filterType.md @@ -23,11 +23,11 @@ This property changes when the user clicks the **Select All** checkbox in the [h filterType / filterValues - + filterType: "include"
    filterValues: null - + filterType: "exclude"
    filterValues: null diff --git a/applications/DataVisualization/Guides/Legend/rearrangeLegendItems.html b/applications/DataVisualization/Guides/Legend/rearrangeLegendItems.html index b3732834a7..1ba90614e0 100644 --- a/applications/DataVisualization/Guides/Legend/rearrangeLegendItems.html +++ b/applications/DataVisualization/Guides/Legend/rearrangeLegendItems.html @@ -1,23 +1,23 @@ 
    - orientation: + orientation:
    - columnCount: + columnCount:
    - rowCount: + rowCount:

    - columnItemSpacing: + columnItemSpacing:
    - rowItemSpacing: + rowItemSpacing:
    diff --git a/applications/DataVisualization/Guides/Legend/relocateTheLegend.html b/applications/DataVisualization/Guides/Legend/relocateTheLegend.html index 89cf9bf3ca..274a590926 100644 --- a/applications/DataVisualization/Guides/Legend/relocateTheLegend.html +++ b/applications/DataVisualization/Guides/Legend/relocateTheLegend.html @@ -1,14 +1,14 @@ 
    - position: + position:
    - horizontalAlignment: + horizontalAlignment:
    - verticalAlignment: + verticalAlignment:
    diff --git a/applications/GettingStartedWith/Chat/index.js b/applications/GettingStartedWith/Chat/index.js index 1b8743999e..ce04b2ff03 100644 --- a/applications/GettingStartedWith/Chat/index.js +++ b/applications/GettingStartedWith/Chat/index.js @@ -6,7 +6,7 @@ const firstUser = { const secondUser = { id: "2", name: "Feedback Bot", - avatarUrl: "/Content/images/doc/25_2/Chat/bot.png" + avatarUrl: "/Content/images/doc/26_1/Chat/bot.png" }; const initialMessages = [{ diff --git a/applications/GettingStartedWith/HtmlEditor/index.html b/applications/GettingStartedWith/HtmlEditor/index.html index 075a32af13..e1b410de3e 100644 --- a/applications/GettingStartedWith/HtmlEditor/index.html +++ b/applications/GettingStartedWith/HtmlEditor/index.html @@ -1,6 +1,6 @@

    - HTML Editor + HTML Editor Rich Text Editor (HTML Editor)


    diff --git a/applications/GettingStartedWith/Popup/index.js b/applications/GettingStartedWith/Popup/index.js index 25be957eb8..dd72e540e0 100644 --- a/applications/GettingStartedWith/Popup/index.js +++ b/applications/GettingStartedWith/Popup/index.js @@ -13,7 +13,7 @@ $(function () { contentTemplate: () => { const content = $("
    "); content.append( - $("").attr("src", "/Content/images/doc/25_2/Common/dx-logo.png"), + $("").attr("src", "/Content/images/doc/26_1/Common/dx-logo.png"), $(popupText) ); return content; diff --git a/concepts/05 UI Components/Accordion/00 Getting Started with Accordion/00 Getting Started with Accordion.md b/concepts/05 UI Components/Accordion/00 Getting Started with Accordion/00 Getting Started with Accordion.md index 9cd4844481..f0459f58ac 100644 --- a/concepts/05 UI Components/Accordion/00 Getting Started with Accordion/00 Getting Started with Accordion.md +++ b/concepts/05 UI Components/Accordion/00 Getting Started with Accordion/00 Getting Started with Accordion.md @@ -4,7 +4,7 @@ The Accordion UI component contains several panels displayed one under another. This tutorial shows how to add an Accordion to the page and configure the component's core settings. As a result, you will create the following UI component: -
    +
    Each section in this tutorial describes a single configuration step. You can also find the full source code in the GitHub repository. diff --git a/concepts/05 UI Components/Accordion/00 Getting Started with Accordion/05 Create an Accordion.md b/concepts/05 UI Components/Accordion/00 Getting Started with Accordion/05 Create an Accordion.md index 7c86599c67..0b41d4e420 100644 --- a/concepts/05 UI Components/Accordion/00 Getting Started with Accordion/05 Create an Accordion.md +++ b/concepts/05 UI Components/Accordion/00 Getting Started with Accordion/05 Create an Accordion.md @@ -12,8 +12,8 @@ - - + + diff --git a/concepts/05 UI Components/Autocomplete/00 Getting Started with Autocomplete/00 Getting Started with Autocomplete.md b/concepts/05 UI Components/Autocomplete/00 Getting Started with Autocomplete/00 Getting Started with Autocomplete.md index 851f5bb518..7fe9a01e54 100644 --- a/concepts/05 UI Components/Autocomplete/00 Getting Started with Autocomplete/00 Getting Started with Autocomplete.md +++ b/concepts/05 UI Components/Autocomplete/00 Getting Started with Autocomplete/00 Getting Started with Autocomplete.md @@ -6,7 +6,7 @@ AutoComplete is a text box that displays suggestions while a user types. This tutorial shows how to add an AutoComplete component to the page and configure the component's core settings. As a result, you will create the following UI component: -
    +
    Each section in this tutorial describes a single configuration step. You can also find the full source code in the GitHub repository. diff --git a/concepts/05 UI Components/Autocomplete/00 Getting Started with Autocomplete/05 Create Autocomplete and Bind It to Data.md b/concepts/05 UI Components/Autocomplete/00 Getting Started with Autocomplete/05 Create Autocomplete and Bind It to Data.md index f0392b124f..a13f8b28f7 100644 --- a/concepts/05 UI Components/Autocomplete/00 Getting Started with Autocomplete/05 Create Autocomplete and Bind It to Data.md +++ b/concepts/05 UI Components/Autocomplete/00 Getting Started with Autocomplete/05 Create Autocomplete and Bind It to Data.md @@ -28,8 +28,8 @@ The code example below specifies the [dataSource](/api-reference/10%20UI%20Compo - - + + diff --git a/concepts/05 UI Components/Box/10 Arrange and Align Items.md b/concepts/05 UI Components/Box/10 Arrange and Align Items.md index 4fe35f2932..75ec5d01af 100644 --- a/concepts/05 UI Components/Box/10 Arrange and Align Items.md +++ b/concepts/05 UI Components/Box/10 Arrange and Align Items.md @@ -93,8 +93,8 @@ Items can be arranged in a row or in a column depending on the value of the [dir "height": 300 }, "images": [ - { "image": "/Content/images/doc/25_2/UiWidgets/Box/Box_direction_row.png", "text": "direction: 'row'" }, - { "image": "/Content/images/doc/25_2/UiWidgets/Box/Box_direction_column.png", "text": "direction: 'col'" } + { "image": "/Content/images/doc/26_1/UiWidgets/Box/Box_direction_row.png", "text": "direction: 'row'" }, + { "image": "/Content/images/doc/26_1/UiWidgets/Box/Box_direction_column.png", "text": "direction: 'col'" } ] } diff --git a/concepts/05 UI Components/Button/00 Getting Started with Button/00 Getting Started with Button.md b/concepts/05 UI Components/Button/00 Getting Started with Button/00 Getting Started with Button.md index 33075c4c99..8532f58fd0 100644 --- a/concepts/05 UI Components/Button/00 Getting Started with Button/00 Getting Started with Button.md +++ b/concepts/05 UI Components/Button/00 Getting Started with Button/00 Getting Started with Button.md @@ -2,7 +2,7 @@ This tutorial shows how to add a Button to a page, apply styling, and configure its core features. As a result, you will create the following UI component: -
    +
    Refer to the following sections for information on each configuration step. The full code is available in the GitHub repository. diff --git a/concepts/05 UI Components/Button/00 Getting Started with Button/02 Create a Button.md b/concepts/05 UI Components/Button/00 Getting Started with Button/02 Create a Button.md index 787af2567f..868f91163f 100644 --- a/concepts/05 UI Components/Button/00 Getting Started with Button/02 Create a Button.md +++ b/concepts/05 UI Components/Button/00 Getting Started with Button/02 Create a Button.md @@ -16,10 +16,10 @@ - + - +
    diff --git a/concepts/05 UI Components/ButtonGroup/00 Getting Started with ButtonGroup/0 Getting Started with ButtonGroup.md b/concepts/05 UI Components/ButtonGroup/00 Getting Started with ButtonGroup/0 Getting Started with ButtonGroup.md index 18fc37ec57..9d098a0e61 100644 --- a/concepts/05 UI Components/ButtonGroup/00 Getting Started with ButtonGroup/0 Getting Started with ButtonGroup.md +++ b/concepts/05 UI Components/ButtonGroup/00 Getting Started with ButtonGroup/0 Getting Started with ButtonGroup.md @@ -4,7 +4,7 @@ The ButtonGroup is a set of toggle buttons that can be used as a mode switcher. This tutorial describes how to configure basic ButtonGroup features. We create a ButtonGroup that logs the names of the selected buttons into the browser's console (open the console to see them): -
    +
    Each section in this tutorial covers a single configuration step. You can also find the full code in the GitHub repository. diff --git a/concepts/05 UI Components/ButtonGroup/00 Getting Started with ButtonGroup/1 Create the ButtonGroup.md b/concepts/05 UI Components/ButtonGroup/00 Getting Started with ButtonGroup/1 Create the ButtonGroup.md index 2eec3bdd9e..839b2ba636 100644 --- a/concepts/05 UI Components/ButtonGroup/00 Getting Started with ButtonGroup/1 Create the ButtonGroup.md +++ b/concepts/05 UI Components/ButtonGroup/00 Getting Started with ButtonGroup/1 Create the ButtonGroup.md @@ -8,8 +8,8 @@ You can use the following code to create the ButtonGroup: - - + + diff --git a/concepts/05 UI Components/Calendar/00 Getting Started with Calendar/00 Getting Started with Calendar.md b/concepts/05 UI Components/Calendar/00 Getting Started with Calendar/00 Getting Started with Calendar.md index 5d16988cec..806979f459 100644 --- a/concepts/05 UI Components/Calendar/00 Getting Started with Calendar/00 Getting Started with Calendar.md +++ b/concepts/05 UI Components/Calendar/00 Getting Started with Calendar/00 Getting Started with Calendar.md @@ -2,7 +2,7 @@ The Calendar component allows users to select a date within a specified date range. This tutorial shows how to add this component to your application and configure its core features. -
    +
    Each section in this tutorial describes a single configuration step. You can also find the full code in the following GitHub repository: getting-started-with-calendar. diff --git a/concepts/05 UI Components/Calendar/00 Getting Started with Calendar/05 Create a Calendar.md b/concepts/05 UI Components/Calendar/00 Getting Started with Calendar/05 Create a Calendar.md index a930035aac..80642f4387 100644 --- a/concepts/05 UI Components/Calendar/00 Getting Started with Calendar/05 Create a Calendar.md +++ b/concepts/05 UI Components/Calendar/00 Getting Started with Calendar/05 Create a Calendar.md @@ -12,8 +12,8 @@ - - + + diff --git a/concepts/05 UI Components/CardView/05 Getting Started with CardView/00 Getting Started with CardView.md b/concepts/05 UI Components/CardView/05 Getting Started with CardView/00 Getting Started with CardView.md index a2bff99899..eda48c381f 100644 --- a/concepts/05 UI Components/CardView/05 Getting Started with CardView/00 Getting Started with CardView.md +++ b/concepts/05 UI Components/CardView/05 Getting Started with CardView/00 Getting Started with CardView.md @@ -6,10 +6,10 @@ CardView is a UI component that displays data in a card-based format. You can us This tutorial explains how to add a CardView to a page and configure the component's core settings. -
    +
    Each section in this tutorial covers a single configuration step. You can find the complete source code in the following GitHub repository: #include btn-open-github with { href: "https://github.com/DevExpress-Examples/devextreme-getting-started-with-card-view" -} \ No newline at end of file +} diff --git a/concepts/05 UI Components/CardView/05 Getting Started with CardView/05 Create a CardView.md b/concepts/05 UI Components/CardView/05 Getting Started with CardView/05 Create a CardView.md index ee8fbf0e19..c83ac87632 100644 --- a/concepts/05 UI Components/CardView/05 Getting Started with CardView/05 Create a CardView.md +++ b/concepts/05 UI Components/CardView/05 Getting Started with CardView/05 Create a CardView.md @@ -16,10 +16,10 @@ - + - + diff --git a/concepts/05 UI Components/Chart/11 Series Types/10 Line Series.md b/concepts/05 UI Components/Chart/11 Series Types/10 Line Series.md index b08666120f..27c39bb482 100644 --- a/concepts/05 UI Components/Chart/11 Series Types/10 Line Series.md +++ b/concepts/05 UI Components/Chart/11 Series Types/10 Line Series.md @@ -1,10 +1,10 @@ Line series visualize data as a collection of points connected by a line. This line can be broken, smooth, or step-like, which corresponds to the **Line**, **Spline**, and **Step Line** series types. -
    +
    Line series also include stacked series types: **Stacked Line** and **Stacked Spline**. In such series, the value of each next point is counted off from the previous point with the same argument. As a result, series are put in a stack. Very similar to stacked series are full-stacked series - **Full-Stacked Line** and **Full-Stacked Spline**. In these series, the sum of all point values by a given argument is considered 100%, and each individual point value is recalculated to be a share of these 100%. -
    +
    To specify one or another series type, assign its name to the **series[]**.[type](/api-reference/10%20UI%20Components/dxChart/5%20Series%20Types/ChartSeries/type.md '/Documentation/ApiReference/UI_Components/dxChart/Configuration/series/#type') property. You can configure: diff --git a/concepts/05 UI Components/Chart/11 Series Types/20 Bar Series/Bar Series.md b/concepts/05 UI Components/Chart/11 Series Types/20 Bar Series/Bar Series.md index 3e7a317b19..6b3d1eb909 100644 --- a/concepts/05 UI Components/Chart/11 Series Types/20 Bar Series/Bar Series.md +++ b/concepts/05 UI Components/Chart/11 Series Types/20 Bar Series/Bar Series.md @@ -1,6 +1,6 @@ Bar series visualize data as a collection of bars. Those bars can be displayed side by side, as in the **Bar** series type, or can be put in stacks, as in the **Stacked Bar** and **Full-Stacked Bar** series types. -
    +
    To specify one or another series type, assign its name to the **series[]**.[type](/api-reference/10%20UI%20Components/dxChart/5%20Series%20Types/ChartSeries/type.md '/Documentation/ApiReference/UI_Components/dxChart/Configuration/series/#type') property. You can configure: diff --git a/concepts/05 UI Components/Chart/11 Series Types/30 Area Series.md b/concepts/05 UI Components/Chart/11 Series Types/30 Area Series.md index 801ab7c6c1..2f5b50b8ad 100644 --- a/concepts/05 UI Components/Chart/11 Series Types/30 Area Series.md +++ b/concepts/05 UI Components/Chart/11 Series Types/30 Area Series.md @@ -1,10 +1,10 @@ Area series visualize data as an area filled with a color. This area is limited on top by a broken, smooth, or step-like line, which corresponds to the **Area**, **Spline Area**, and **Step Area** series types. -
    +
    Area series also include stacked series types: **Stacked Area** and **Stacked Spline Area**. In such series, the value of each next point is counted off from the previous point with the same argument. As a result, series are put in a stack. Very similar to stacked series are full-stacked series - **Full-Stacked Area** and **Full-Stacked Spline Area**. In these series, the sum of all point values by a given argument is considered 100%, and each individual point value is recalculated to be a share of these 100%. -
    +
    To specify one or another series type, assign its name to the **series[]**.[type](/api-reference/10%20UI%20Components/dxChart/5%20Series%20Types/ChartSeries/type.md '/Documentation/ApiReference/UI_Components/dxChart/Configuration/series/#type') property. You can configure: diff --git a/concepts/05 UI Components/Chart/11 Series Types/40 Scatter Series.md b/concepts/05 UI Components/Chart/11 Series Types/40 Scatter Series.md index 1c0b6865eb..af5cff78e8 100644 --- a/concepts/05 UI Components/Chart/11 Series Types/40 Scatter Series.md +++ b/concepts/05 UI Components/Chart/11 Series Types/40 Scatter Series.md @@ -1,6 +1,6 @@ The **Scatter** series type visualizes data as a collection of scattered points. -
    +
    To specify the **Scatter** series type, assign *"scatter"* to the **series[]**.[type](/api-reference/10%20UI%20Components/dxChart/5%20Series%20Types/ChartSeries/type.md '/Documentation/ApiReference/UI_Components/dxChart/Configuration/series/#type') property. You can configure: diff --git a/concepts/05 UI Components/Chart/11 Series Types/50 Bubble Series.md b/concepts/05 UI Components/Chart/11 Series Types/50 Bubble Series.md index e86cb4c696..a3c23e216f 100644 --- a/concepts/05 UI Components/Chart/11 Series Types/50 Bubble Series.md +++ b/concepts/05 UI Components/Chart/11 Series Types/50 Bubble Series.md @@ -1,6 +1,6 @@ The **Bubble** series type visualizes data as individual points of different sizes called "bubbles". Because **Bubble** series have the additional size characteristic, they can convey more information than, for example, [Line](/concepts/05%20UI%20Components/Chart/11%20Series%20Types/10%20Line%20Series.md '/Documentation/Guide/UI_Components/Chart/Series_Types/Line_Series/') or [Scatter](/concepts/05%20UI%20Components/Chart/11%20Series%20Types/40%20Scatter%20Series.md '/Documentation/Guide/UI_Components/Chart/Series_Types/Scatter_Series/') series. -
    +
    Assign *"bubble"* to the **series[]**.[type](/api-reference/10%20UI%20Components/dxChart/5%20Series%20Types/ChartSeries/type.md '/Documentation/ApiReference/UI_Components/dxChart/Configuration/series/#type') property to specify the **Bubble** series type. You can configure: diff --git a/concepts/05 UI Components/Chart/11 Series Types/60 Financial Series.md b/concepts/05 UI Components/Chart/11 Series Types/60 Financial Series.md index dc3fb77527..6bd34b4393 100644 --- a/concepts/05 UI Components/Chart/11 Series Types/60 Financial Series.md +++ b/concepts/05 UI Components/Chart/11 Series Types/60 Financial Series.md @@ -1,7 +1,7 @@ **Candlestick** and **Stock** are financial series types used to describe and analyse trading patterns over short periods of time. Each point in a **Candlestick** series is composed of a real body and two wicks. The real body illustrates the opening and closing trades; it is filled if the closing price is lower than the opening price, and empty otherwise. The wicks visualize the highest and lowest traded prices during the day. A **Stock** series is similar to **Candlestick** except that the opening and closing trades are illustrated by markers instead of the real body. -
    +
    Assign *"candlestick"* or *"stock"* to the **series[]**.[type](/api-reference/10%20UI%20Components/dxChart/5%20Series%20Types/ChartSeries/type.md '/Documentation/ApiReference/UI_Components/dxChart/Configuration/series/#type') property to specify the corresponding series type. You can configure: diff --git a/concepts/05 UI Components/Chart/11 Series Types/70 Range Series.md b/concepts/05 UI Components/Chart/11 Series Types/70 Range Series.md index ef4b4d2fdb..5b9b73dc85 100644 --- a/concepts/05 UI Components/Chart/11 Series Types/70 Range Series.md +++ b/concepts/05 UI Components/Chart/11 Series Types/70 Range Series.md @@ -1,6 +1,6 @@ **Range Area** and **Range Bar** series emphasize the difference between a point's high and low value using a shaded area or a set of bars respectively. -
    +
    Assign *"rangearea"* or *"rangebar"* to the **series[]**.[type](/api-reference/10%20UI%20Components/dxChart/5%20Series%20Types/ChartSeries/type.md '/Documentation/ApiReference/UI_Components/dxChart/Configuration/series/#type') property to specify the corresponding series type. You can configure: diff --git a/concepts/05 UI Components/Chart/35 Legend/10 Relocate the Legend.md b/concepts/05 UI Components/Chart/35 Legend/10 Relocate the Legend.md index cc9df7a838..24f6dde2b8 100644 --- a/concepts/05 UI Components/Chart/35 Legend/10 Relocate the Legend.md +++ b/concepts/05 UI Components/Chart/35 Legend/10 Relocate the Legend.md @@ -92,7 +92,7 @@ The legend can be moved inside the chart using the [position](/api-reference/10% Below, you can try out these properties in action. -
    +
    #####See Also##### - [Rearrange Legend Items](/concepts/05%20UI%20Components/Chart/35%20Legend/20%20Rearrange%20Legend%20Items.md '/Documentation/Guide/UI_Components/Chart/Legend/Rearrange_Legend_Items/') diff --git a/concepts/05 UI Components/Chart/35 Legend/20 Rearrange Legend Items.md b/concepts/05 UI Components/Chart/35 Legend/20 Rearrange Legend Items.md index 5b473c384c..18728059df 100644 --- a/concepts/05 UI Components/Chart/35 Legend/20 Rearrange Legend Items.md +++ b/concepts/05 UI Components/Chart/35 Legend/20 Rearrange Legend Items.md @@ -259,7 +259,7 @@ Regardless the legend orientation, you can adjust the empty space between column Below, you can try out all the mentioned properties in action. -
    +
    #####See Also##### - [Relocate the Legend](/concepts/05%20UI%20Components/Chart/35%20Legend/10%20Relocate%20the%20Legend.md '/Documentation/Guide/UI_Components/Chart/Legend/Relocate_the_Legend/') diff --git a/concepts/05 UI Components/Chat/05 Getting Started with Chat/00 Getting Started with Chat.md b/concepts/05 UI Components/Chat/05 Getting Started with Chat/00 Getting Started with Chat.md index 379e3f192b..224d0ff23a 100644 --- a/concepts/05 UI Components/Chat/05 Getting Started with Chat/00 Getting Started with Chat.md +++ b/concepts/05 UI Components/Chat/05 Getting Started with Chat/00 Getting Started with Chat.md @@ -4,7 +4,7 @@ Chat is a UI component that allows users to send and receive messages in real ti This tutorial shows how to add Chat to the page and configure the component's core settings. -
    +
    Each section in this tutorial describes a single configuration step. You can also find the full source code in the following GitHub repository: diff --git a/concepts/05 UI Components/Chat/05 Getting Started with Chat/05 Create a Chat.md b/concepts/05 UI Components/Chat/05 Getting Started with Chat/05 Create a Chat.md index 66e55f02ea..220b5981fe 100644 --- a/concepts/05 UI Components/Chat/05 Getting Started with Chat/05 Create a Chat.md +++ b/concepts/05 UI Components/Chat/05 Getting Started with Chat/05 Create a Chat.md @@ -12,8 +12,8 @@ - - + + @@ -142,4 +142,4 @@ To limit the Chat size, use the [width](/api-reference/10%20UI%20Components/DOMC export default App; ---- \ No newline at end of file +--- diff --git a/concepts/05 UI Components/Chat/40 Customize the Empty View.md b/concepts/05 UI Components/Chat/40 Customize the Empty View.md index bbd87b4645..9ffa0b3ed7 100644 --- a/concepts/05 UI Components/Chat/40 Customize the Empty View.md +++ b/concepts/05 UI Components/Chat/40 Customize the Empty View.md @@ -1,6 +1,6 @@ This tutorial illustrates how to customize the Chat's empty view. The following live example demonstrates the result: -
    +
    To implement custom markup for the Chat's empty view, specify the [emptyViewTemplate](/api-reference/10%20UI%20Components/dxChat/1%20Configuration/emptyViewTemplate.md '/Documentation/ApiReference/UI_Components/dxChat/Configuration/#emptyViewTemplate') property. This tutorial defines an empty view container that includes a title and subtitle, as well as integrates the DevExtreme [TileView](/concepts/05%20UI%20Components/TileView/00%20Overview.md '/Documentation/Guide/UI_Components/TileView/Overview/') component: @@ -136,4 +136,4 @@ You can implement customizations outside of the empty view container and display #chat:has(.dx-chat-messagelist-empty-view) { background-color: #D8E9FF; - } \ No newline at end of file + } diff --git a/concepts/05 UI Components/CheckBox/00 Getting Started with CheckBox/00 Getting Started with CheckBox.md b/concepts/05 UI Components/CheckBox/00 Getting Started with CheckBox/00 Getting Started with CheckBox.md index 7943a1bc08..287b23349d 100644 --- a/concepts/05 UI Components/CheckBox/00 Getting Started with CheckBox/00 Getting Started with CheckBox.md +++ b/concepts/05 UI Components/CheckBox/00 Getting Started with CheckBox/00 Getting Started with CheckBox.md @@ -2,7 +2,7 @@ This tutorial shows how to add the CheckBox to your application and configure its core features. -
    +
    Each section in this tutorial describes a single configuration step. You can also find the full code in the GitHub repository. diff --git a/concepts/05 UI Components/CheckBox/00 Getting Started with CheckBox/05 Create a CheckBox.md b/concepts/05 UI Components/CheckBox/00 Getting Started with CheckBox/05 Create a CheckBox.md index 9ec0b51136..f26ba9b02b 100644 --- a/concepts/05 UI Components/CheckBox/00 Getting Started with CheckBox/05 Create a CheckBox.md +++ b/concepts/05 UI Components/CheckBox/00 Getting Started with CheckBox/05 Create a CheckBox.md @@ -12,8 +12,8 @@ - - + + diff --git a/concepts/05 UI Components/ColorBox/00 Getting Started with ColorBox/00 Getting Started with ColorBox.md b/concepts/05 UI Components/ColorBox/00 Getting Started with ColorBox/00 Getting Started with ColorBox.md index 889e532091..13d253d21e 100644 --- a/concepts/05 UI Components/ColorBox/00 Getting Started with ColorBox/00 Getting Started with ColorBox.md +++ b/concepts/05 UI Components/ColorBox/00 Getting Started with ColorBox/00 Getting Started with ColorBox.md @@ -4,6 +4,6 @@ The ColorBox component allows users to enter a color or pick it from a drop-down This tutorial shows how to add a ColorBox component to a page and configure the component's core settings. As a result, you will create the following UI component: -
    +
    Each section in this tutorial describes a single configuration step. You can also find the full source code in the following GitHub repository: getting-started-with-color-box. diff --git a/concepts/05 UI Components/ColorBox/00 Getting Started with ColorBox/05 Create a ColorBox.md b/concepts/05 UI Components/ColorBox/00 Getting Started with ColorBox/05 Create a ColorBox.md index 14bf7f2ef9..c26763ab2a 100644 --- a/concepts/05 UI Components/ColorBox/00 Getting Started with ColorBox/05 Create a ColorBox.md +++ b/concepts/05 UI Components/ColorBox/00 Getting Started with ColorBox/05 Create a ColorBox.md @@ -13,8 +13,8 @@ - - + + diff --git a/concepts/05 UI Components/DataGrid/00 Getting Started with DataGrid/00 Getting Started with DataGrid.md b/concepts/05 UI Components/DataGrid/00 Getting Started with DataGrid/00 Getting Started with DataGrid.md index d2147769fa..1add44fc6f 100644 --- a/concepts/05 UI Components/DataGrid/00 Getting Started with DataGrid/00 Getting Started with DataGrid.md +++ b/concepts/05 UI Components/DataGrid/00 Getting Started with DataGrid/00 Getting Started with DataGrid.md @@ -28,7 +28,7 @@ The Web Dashboard is available as a part of a Universal subscription. This tutorial shows how to add the DataGrid to a page, bind it to data, and configure its core features. As a result, you will get a UI component that looks as follows: -
    +
    Each section in this tutorial covers a single configuration step. You can also find the full code in the GitHub repository. diff --git a/concepts/05 UI Components/DataGrid/00 Getting Started with DataGrid/02 Create a DataGrid.md b/concepts/05 UI Components/DataGrid/00 Getting Started with DataGrid/02 Create a DataGrid.md index 72478915fb..e10f1a57b5 100644 --- a/concepts/05 UI Components/DataGrid/00 Getting Started with DataGrid/02 Create a DataGrid.md +++ b/concepts/05 UI Components/DataGrid/00 Getting Started with DataGrid/02 Create a DataGrid.md @@ -16,10 +16,10 @@ - + - + diff --git a/concepts/05 UI Components/DataGrid/15 Columns/10 Column Types/5 AI Columns/10 Limit Data Passed to the AI Service.md b/concepts/05 UI Components/DataGrid/15 Columns/10 Column Types/5 AI Columns/10 Limit Data Passed to the AI Service.md index 73a970a80d..459a2618aa 100644 --- a/concepts/05 UI Components/DataGrid/15 Columns/10 Column Types/5 AI Columns/10 Limit Data Passed to the AI Service.md +++ b/concepts/05 UI Components/DataGrid/15 Columns/10 Column Types/5 AI Columns/10 Limit Data Passed to the AI Service.md @@ -1,4 +1,4 @@ -Default AI requests include all data from rows visible in the {WidgetName} container. This data includes fields of hidden columns and fields not bound to a column. To save AI resources, you can configure the component to include only relevant data fields. Modify the **AIColumnRequestCreatingEvent**.[data](/Documentation/25_2/ApiReference/UI_Components/dxDataGrid/Types/AIColumnRequestCreatingEvent/#data) parameter within [onAIColumnRequestCreating](/api-reference/10%20UI%20Components/dxDataGrid/1%20Configuration/onAIColumnRequestCreating.md '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/#onAIColumnRequestCreating') as follows: +Default AI requests include all data from rows visible in the {WidgetName} container. This data includes fields of hidden columns and fields not bound to a column. To save AI resources, you can configure the component to include only relevant data fields. Modify the **AIColumnRequestCreatingEvent**.[data](/Documentation/26_1/ApiReference/UI_Components/dxDataGrid/Types/AIColumnRequestCreatingEvent/#data) parameter within [onAIColumnRequestCreating](/api-reference/10%20UI%20Components/dxDataGrid/1%20Configuration/onAIColumnRequestCreating.md '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/#onAIColumnRequestCreating') as follows: --- diff --git a/concepts/05 UI Components/DateBox/00 Getting Started with DateBox/00 Getting Started with DateBox.md b/concepts/05 UI Components/DateBox/00 Getting Started with DateBox/00 Getting Started with DateBox.md index 64dfe518b0..bd14473549 100644 --- a/concepts/05 UI Components/DateBox/00 Getting Started with DateBox/00 Getting Started with DateBox.md +++ b/concepts/05 UI Components/DateBox/00 Getting Started with DateBox/00 Getting Started with DateBox.md @@ -4,7 +4,7 @@ DateBox is a UI component that allows users to set a certain date, time, or date This tutorial shows how to configure basic DateBox features. The newly created UI component allows users to set the date and time from a specific date range, logs this value to the console, and prevents users from specifying weekend days (Saturday and Sunday) and US bank holidays. -
    +
    Each section in this tutorial covers a single configuration step. You can also find the full code in the GitHub repository. diff --git a/concepts/05 UI Components/DateBox/00 Getting Started with DateBox/05 Create the DateBox.md b/concepts/05 UI Components/DateBox/00 Getting Started with DateBox/05 Create the DateBox.md index e30fff08b7..ac0803940a 100644 --- a/concepts/05 UI Components/DateBox/00 Getting Started with DateBox/05 Create the DateBox.md +++ b/concepts/05 UI Components/DateBox/00 Getting Started with DateBox/05 Create the DateBox.md @@ -15,8 +15,8 @@ Use the following code to create a basic DateBox: - - + + diff --git a/concepts/05 UI Components/DateRangeBox/00 Getting Started with DateRangeBox/00 Getting Started with DateRangeBox.md b/concepts/05 UI Components/DateRangeBox/00 Getting Started with DateRangeBox/00 Getting Started with DateRangeBox.md index 559695429a..f439938ee8 100644 --- a/concepts/05 UI Components/DateRangeBox/00 Getting Started with DateRangeBox/00 Getting Started with DateRangeBox.md +++ b/concepts/05 UI Components/DateRangeBox/00 Getting Started with DateRangeBox/00 Getting Started with DateRangeBox.md @@ -4,7 +4,7 @@ DateRangeBox is a UI component that allows users to enter or pick two dates (a d This tutorial shows how to configure basic DateRangeBox features. -
    +
    Each section in this tutorial describes a single configuration step. You can also find the full code in the GitHub repository. diff --git a/concepts/05 UI Components/DateRangeBox/00 Getting Started with DateRangeBox/05 Create the DateRangeBox.md b/concepts/05 UI Components/DateRangeBox/00 Getting Started with DateRangeBox/05 Create the DateRangeBox.md index 7dc0195181..1508b7b2b6 100644 --- a/concepts/05 UI Components/DateRangeBox/00 Getting Started with DateRangeBox/05 Create the DateRangeBox.md +++ b/concepts/05 UI Components/DateRangeBox/00 Getting Started with DateRangeBox/05 Create the DateRangeBox.md @@ -15,8 +15,8 @@ Use the following code to create a basic DateRangeBox: - - + + diff --git a/concepts/05 UI Components/Diagram/00 Getting Started with Diagram/00 Getting Started with Diagram.md b/concepts/05 UI Components/Diagram/00 Getting Started with Diagram/00 Getting Started with Diagram.md index e4722f1d8d..0c1da8319e 100644 --- a/concepts/05 UI Components/Diagram/00 Getting Started with Diagram/00 Getting Started with Diagram.md +++ b/concepts/05 UI Components/Diagram/00 Getting Started with Diagram/00 Getting Started with Diagram.md @@ -4,7 +4,7 @@ Diagram is a UI component for creating and editing diagrams. This tutorial shows how to add a Diagram component to your application and configure the component. -
    +
    Each section in this tutorial describes one configuration step. You can also find full source code in the GitHub repository. diff --git a/concepts/05 UI Components/Diagram/00 Getting Started with Diagram/05 Add the Diagram Component to a Page.md b/concepts/05 UI Components/Diagram/00 Getting Started with Diagram/05 Add the Diagram Component to a Page.md index ae58b034cf..7e4a336521 100644 --- a/concepts/05 UI Components/Diagram/00 Getting Started with Diagram/05 Add the Diagram Component to a Page.md +++ b/concepts/05 UI Components/Diagram/00 Getting Started with Diagram/05 Add the Diagram Component to a Page.md @@ -13,10 +13,10 @@ - - - - + + + + @@ -97,4 +97,4 @@ export default App; ---- \ No newline at end of file +--- diff --git a/concepts/05 UI Components/Drawer/00 Getting Started with Navigation Drawer/00 Create the Drawer.md b/concepts/05 UI Components/Drawer/00 Getting Started with Navigation Drawer/00 Create the Drawer.md index 34d71880a7..94462c1d1b 100644 --- a/concepts/05 UI Components/Drawer/00 Getting Started with Navigation Drawer/00 Create the Drawer.md +++ b/concepts/05 UI Components/Drawer/00 Getting Started with Navigation Drawer/00 Create the Drawer.md @@ -20,9 +20,9 @@ You can also specify the [minSize](/api-reference/10%20UI%20Components/dxDrawer/ - + - + diff --git a/concepts/05 UI Components/Drawer/00 Getting Started with Navigation Drawer/Getting Started with Navigation Drawer.md b/concepts/05 UI Components/Drawer/00 Getting Started with Navigation Drawer/Getting Started with Navigation Drawer.md index ea057e3b52..43c3f653b4 100644 --- a/concepts/05 UI Components/Drawer/00 Getting Started with Navigation Drawer/Getting Started with Navigation Drawer.md +++ b/concepts/05 UI Components/Drawer/00 Getting Started with Navigation Drawer/Getting Started with Navigation Drawer.md @@ -27,7 +27,7 @@ If the template is unsuitable, follow the instructions below to create a Drawer --- -
    +
    Refer to the sections below for details on each configuration step. You can also find the full code in the GitHub repository. diff --git a/concepts/05 UI Components/DropDownBox/00 Getting Started with DropDownBox/00 Getting Started with DropDownBox.md b/concepts/05 UI Components/DropDownBox/00 Getting Started with DropDownBox/00 Getting Started with DropDownBox.md index f74c3d7d95..540955fe3e 100644 --- a/concepts/05 UI Components/DropDownBox/00 Getting Started with DropDownBox/00 Getting Started with DropDownBox.md +++ b/concepts/05 UI Components/DropDownBox/00 Getting Started with DropDownBox/00 Getting Started with DropDownBox.md @@ -6,7 +6,7 @@ The DropDownBox component consists of a text field that displays the current val This tutorial shows how to add the DropDownBox component to your application and configure this component's core features. -
    +
    Each section in this tutorial describes a single configuration step. You can also find the full source code in the GitHub repository. diff --git a/concepts/05 UI Components/DropDownBox/00 Getting Started with DropDownBox/05 Create DropDownBox.md b/concepts/05 UI Components/DropDownBox/00 Getting Started with DropDownBox/05 Create DropDownBox.md index 6f21647867..a5c8099505 100644 --- a/concepts/05 UI Components/DropDownBox/00 Getting Started with DropDownBox/05 Create DropDownBox.md +++ b/concepts/05 UI Components/DropDownBox/00 Getting Started with DropDownBox/05 Create DropDownBox.md @@ -13,8 +13,8 @@ - - + + diff --git a/concepts/05 UI Components/DropDownButton/00 Getting Started with DropDownButton/00 Getting Started with DropDownButton.md b/concepts/05 UI Components/DropDownButton/00 Getting Started with DropDownButton/00 Getting Started with DropDownButton.md index 5744f21f87..e3efe95f42 100644 --- a/concepts/05 UI Components/DropDownButton/00 Getting Started with DropDownButton/00 Getting Started with DropDownButton.md +++ b/concepts/05 UI Components/DropDownButton/00 Getting Started with DropDownButton/00 Getting Started with DropDownButton.md @@ -4,7 +4,7 @@ The DropDownButton combines the functionality of a button and a drop-down menu. This tutorial describes how to configure a DropDownButton that logs user clicks in the browser console (you can open the console to see the messages): -
    +
    Each section in this tutorial covers a single configuration step. You can also find the full code in the GitHub repository. diff --git a/concepts/05 UI Components/DropDownButton/00 Getting Started with DropDownButton/10 Create a DropDownButton.md b/concepts/05 UI Components/DropDownButton/00 Getting Started with DropDownButton/10 Create a DropDownButton.md index de2ac79066..c9dd6c8e92 100644 --- a/concepts/05 UI Components/DropDownButton/00 Getting Started with DropDownButton/10 Create a DropDownButton.md +++ b/concepts/05 UI Components/DropDownButton/00 Getting Started with DropDownButton/10 Create a DropDownButton.md @@ -8,8 +8,8 @@ You can use the following code to create a DropDownButton: - - + + diff --git a/concepts/05 UI Components/FileUploader/50 Customize FileUploader.md b/concepts/05 UI Components/FileUploader/50 Customize FileUploader.md index fdc2dbb357..e1b623fd11 100644 --- a/concepts/05 UI Components/FileUploader/50 Customize FileUploader.md +++ b/concepts/05 UI Components/FileUploader/50 Customize FileUploader.md @@ -1,6 +1,6 @@ This tutorial demonstrates how to customize FileUploader appearance. The following live example demonstrates the result: -
    +
    To integrate a custom FileUploader drop zone, specify the [dropZone](/api-reference/10%20UI%20Components/dxFileUploader/1%20Configuration/dropZone.md '/Documentation/ApiReference/UI_Components/dxFileUploader/Configuration/#dropZone') property. Create the component inside the drop zone container to place FileUploader in its drop zone: @@ -121,4 +121,4 @@ This tutorial hides the common "Upload" button using the following CSS style: .dx-fileuploader-content > .dx-fileuploader-upload-button { display: none; - } \ No newline at end of file + } diff --git a/concepts/05 UI Components/Floating Action Button/00 Getting Started with Floating Action Button/10 Single Action.md b/concepts/05 UI Components/Floating Action Button/00 Getting Started with Floating Action Button/10 Single Action.md index ab25d42624..97b4f489e4 100644 --- a/concepts/05 UI Components/Floating Action Button/00 Getting Started with Floating Action Button/10 Single Action.md +++ b/concepts/05 UI Components/Floating Action Button/00 Getting Started with Floating Action Button/10 Single Action.md @@ -1,6 +1,6 @@ A single-action FAB triggers the main screen action: -
    +
    Add one [SpeedDialAction](/api-reference/10%20UI%20Components/dxSpeedDialAction '/Documentation/ApiReference/UI_Components/dxSpeedDialAction/') to the page and specify its [onClick](/api-reference/10%20UI%20Components/dxSpeedDialAction/1%20Configuration/onClick.md '/Documentation/ApiReference/UI_Components/dxSpeedDialAction/Configuration/#onClick') and [icon](/api-reference/10%20UI%20Components/dxSpeedDialAction/1%20Configuration/icon.md '/Documentation/ApiReference/UI_Components/dxSpeedDialAction/Configuration/#icon') properties. You can also define a [hint](/api-reference/10%20UI%20Components/Widget/1%20Configuration/hint.md '/Documentation/ApiReference/UI_Components/dxSpeedDialAction/Configuration/#hint'). diff --git a/concepts/05 UI Components/Floating Action Button/00 Getting Started with Floating Action Button/20 Multiple Actions (Speed Dial).md b/concepts/05 UI Components/Floating Action Button/00 Getting Started with Floating Action Button/20 Multiple Actions (Speed Dial).md index cf397d6966..ee99d54f3a 100644 --- a/concepts/05 UI Components/Floating Action Button/00 Getting Started with Floating Action Button/20 Multiple Actions (Speed Dial).md +++ b/concepts/05 UI Components/Floating Action Button/00 Getting Started with Floating Action Button/20 Multiple Actions (Speed Dial).md @@ -1,6 +1,6 @@ A FAB can open a menu with multiple related actions (speed dial). -
    +
    To create a FAB that triggers a speed dial, place multiple [SpeedDialAction](/api-reference/10%20UI%20Components/dxSpeedDialAction '/Documentation/ApiReference/UI_Components/dxSpeedDialAction/') components on the page. Assign a unique [icon](/api-reference/10%20UI%20Components/dxSpeedDialAction/1%20Configuration/icon.md '/Documentation/ApiReference/UI_Components/dxSpeedDialAction/Configuration/#icon') and [onClick](/api-reference/10%20UI%20Components/dxSpeedDialAction/1%20Configuration/onClick.md '/Documentation/ApiReference/UI_Components/dxSpeedDialAction/Configuration/#onClick') event handler to each action. FAB sorts actions by [index](/api-reference/10%20UI%20Components/dxSpeedDialAction/1%20Configuration/index.md '/Documentation/ApiReference/UI_Components/dxSpeedDialAction/Configuration/#index'). diff --git a/concepts/05 UI Components/Floating Action Button/00 Getting Started with Floating Action Button/30 Handle Screen Transitions.md b/concepts/05 UI Components/Floating Action Button/00 Getting Started with Floating Action Button/30 Handle Screen Transitions.md index 6a7b689f3e..c6c12bc199 100644 --- a/concepts/05 UI Components/Floating Action Button/00 Getting Started with Floating Action Button/30 Handle Screen Transitions.md +++ b/concepts/05 UI Components/Floating Action Button/00 Getting Started with Floating Action Button/30 Handle Screen Transitions.md @@ -1,6 +1,6 @@ In the following example, each screen has a distinct FAB, as each FAB contains only actions for that screen. The DevExtreme [TabPanel](https://js.devexpress.com/Demos/WidgetsGallery/Demo/TabPanel/Overview/) emulates screen switching: -
    +
    The following code includes the TabPanel configuration and an empty `switchSDA` function. Implement `switchSDA` to control action visibility: @@ -38,8 +38,8 @@ The following code includes the TabPanel configuration and an empty `switchSDA` - - + + diff --git a/concepts/05 UI Components/Form/01 Getting Started with Form/00 Getting Started with Form.md b/concepts/05 UI Components/Form/01 Getting Started with Form/00 Getting Started with Form.md index 79ce501131..498afce528 100644 --- a/concepts/05 UI Components/Form/01 Getting Started with Form/00 Getting Started with Form.md +++ b/concepts/05 UI Components/Form/01 Getting Started with Form/00 Getting Started with Form.md @@ -4,7 +4,7 @@ The Form component creates a data entry UI for the underlying data object. The i This tutorial shows basic Form component configuration. -
    +
    Refer to the following sections for more information about each configuration step. The full code is available in the GitHub repository. diff --git a/concepts/05 UI Components/Form/01 Getting Started with Form/10 Create a Form.md b/concepts/05 UI Components/Form/01 Getting Started with Form/10 Create a Form.md index c7ba6def6f..043cbe763d 100644 --- a/concepts/05 UI Components/Form/01 Getting Started with Form/10 Create a Form.md +++ b/concepts/05 UI Components/Form/01 Getting Started with Form/10 Create a Form.md @@ -16,10 +16,10 @@ - + - + diff --git a/concepts/05 UI Components/Form/05 Configure Simple Items/05 Customize a Simple Item.md b/concepts/05 UI Components/Form/05 Configure Simple Items/05 Customize a Simple Item.md index 5bd3a5b0a0..184a99bd43 100644 --- a/concepts/05 UI Components/Form/05 Configure Simple Items/05 Customize a Simple Item.md +++ b/concepts/05 UI Components/Form/05 Configure Simple Items/05 Customize a Simple Item.md @@ -8,7 +8,7 @@ If none of the available editors suit your requirements, you can define a custom $("#formContainer").dxForm({ formData: { name: "John Heart", - picture: "https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person2.png", + picture: "https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person2.png", notes: "John has been in the Audio/Video industry since 1990. He has led DevAv as its CEO since 2003." }, items: ["name", { @@ -60,7 +60,7 @@ If none of the available editors suit your requirements, you can define a custom export class AppComponent { employee = { name: "John Heart", - picture: "https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person2.png", + picture: "https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person2.png", notes: "John has been in the Audio/Video industry since 1990. He has led DevAv as its CEO since 2003." } } @@ -119,7 +119,7 @@ If none of the available editors suit your requirements, you can define a custom return { employee: { name: "John Heart", - picture: "https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person2.png", + picture: "https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person2.png", notes: "John has been in the Audio/Video industry since 1990. He has led DevAv as its CEO since 2003." } } @@ -147,7 +147,7 @@ If none of the available editors suit your requirements, you can define a custom this.state = { employee: { name: "John Heart", - picture: "https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person2.png", + picture: "https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person2.png", notes: "John has been in the Audio/Video industry since 1990. He has led DevAv as its CEO since 2003." } }; diff --git a/concepts/05 UI Components/Funnel/35 Legend/10 Relocate the Legend.md b/concepts/05 UI Components/Funnel/35 Legend/10 Relocate the Legend.md index 92bac2ef79..332ec1c99e 100644 --- a/concepts/05 UI Components/Funnel/35 Legend/10 Relocate the Legend.md +++ b/concepts/05 UI Components/Funnel/35 Legend/10 Relocate the Legend.md @@ -84,7 +84,7 @@ The legend can be aligned in the horizontal or vertical direction using the [hor Below, you can try out these properties in action. -
    +
    #####See Also##### - [Rearrange Legend Items](/concepts/05%20UI%20Components/Funnel/35%20Legend/20%20Rearrange%20Legend%20Items.md '/Documentation/Guide/UI_Components/Funnel/Legend/Rearrange_Legend_Items/') diff --git a/concepts/05 UI Components/Funnel/35 Legend/20 Rearrange Legend Items.md b/concepts/05 UI Components/Funnel/35 Legend/20 Rearrange Legend Items.md index 919292fffe..6edaa9d34f 100644 --- a/concepts/05 UI Components/Funnel/35 Legend/20 Rearrange Legend Items.md +++ b/concepts/05 UI Components/Funnel/35 Legend/20 Rearrange Legend Items.md @@ -257,7 +257,7 @@ Regardless of the legend orientation, you can adjust the empty space between col Below, you can try out all the mentioned properties in action. -
    +
    #####See Also##### - [Relocate the Legend](/concepts/05%20UI%20Components/Funnel/35%20Legend/10%20Relocate%20the%20Legend.md '/Documentation/Guide/UI_Components/Funnel/Legend/Relocate_the_Legend/') diff --git a/concepts/05 UI Components/Gallery/00 Overview.md b/concepts/05 UI Components/Gallery/00 Overview.md index 352dccd48d..103e1a4990 100644 --- a/concepts/05 UI Components/Gallery/00 Overview.md +++ b/concepts/05 UI Components/Gallery/00 Overview.md @@ -15,10 +15,10 @@ The following code adds the Gallery UI component to your page. The simplest conf $(function () { $("#galleryContainer").dxGallery({ dataSource: [ - "https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person1.png", - "https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person2.png", - "https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person3.png", - "https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person4.png" + "https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person1.png", + "https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person2.png", + "https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person3.png", + "https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person4.png" ], height: 300 }); @@ -37,10 +37,10 @@ The following code adds the Gallery UI component to your page. The simplest conf // ... export class AppComponent { galleryDataSource = [ - "https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person1.png", - "https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person2.png", - "https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person3.png", - "https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person4.png" + "https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person1.png", + "https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person2.png", + "https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person3.png", + "https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person4.png" ]; } @NgModule({ @@ -72,10 +72,10 @@ The following code adds the Gallery UI component to your page. The simplest conf data() { return { dataSource: [ - 'https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person1.png', - 'https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person2.png', - 'https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person3.png', - 'https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person4.png' + 'https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person1.png', + 'https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person2.png', + 'https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person3.png', + 'https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person4.png' ] }; } @@ -90,10 +90,10 @@ The following code adds the Gallery UI component to your page. The simplest conf import { Gallery } from 'devextreme-react/gallery'; const dataSource = [ - 'https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person1.png', - 'https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person2.png', - 'https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person3.png', - 'https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person4.png' + 'https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person1.png', + 'https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person2.png', + 'https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person3.png', + 'https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person4.png' ]; class App extends React.Component { diff --git a/concepts/05 UI Components/Gallery/05 Switch Between Images/05 User Interaction.md b/concepts/05 UI Components/Gallery/05 Switch Between Images/05 User Interaction.md index 58f7816f17..165232b993 100644 --- a/concepts/05 UI Components/Gallery/05 Switch Between Images/05 User Interaction.md +++ b/concepts/05 UI Components/Gallery/05 Switch Between Images/05 User Interaction.md @@ -7,8 +7,8 @@ To switch between images on touch-enabled devices, the user can perform the swip $(function () { $("#galleryContainer").dxGallery({ dataSource: [ - "https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person1.png", - "https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person2.png" + "https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person1.png", + "https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person2.png" ], height: 300, swipeEnabled: false, @@ -31,8 +31,8 @@ To switch between images on touch-enabled devices, the user can perform the swip // ... export class AppComponent { galleryDataSource = [ - "https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person1.png", - "https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person2.png" + "https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person1.png", + "https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person2.png" ]; } @NgModule({ @@ -66,8 +66,8 @@ To switch between images on touch-enabled devices, the user can perform the swip data() { return { dataSource: [ - 'https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person1.png', - 'https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person2.png' + 'https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person1.png', + 'https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person2.png' ] }; } @@ -82,8 +82,8 @@ To switch between images on touch-enabled devices, the user can perform the swip import { Gallery } from 'devextreme-react/gallery'; const dataSource = [ - 'https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person1.png', - 'https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person2.png' + 'https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person1.png', + 'https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person2.png' ]; class App extends React.Component { @@ -112,9 +112,9 @@ With the buttons and swipe gesture, the user switches images in a particular ord $(function () { $("#galleryContainer").dxGallery({ dataSource: [ - "https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person1.png", - "https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person2.png", - "https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person3.png" + "https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person1.png", + "https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person2.png", + "https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person3.png" ], height: 300, loop: true @@ -135,9 +135,9 @@ With the buttons and swipe gesture, the user switches images in a particular ord // ... export class AppComponent { galleryDataSource = [ - "https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person1.png", - "https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person2.png", - "https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person3.png" + "https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person1.png", + "https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person2.png", + "https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person3.png" ]; } @NgModule({ @@ -170,9 +170,9 @@ With the buttons and swipe gesture, the user switches images in a particular ord data() { return { dataSource: [ - 'https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person1.png', - 'https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person2.png', - 'https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person3.png' + 'https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person1.png', + 'https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person2.png', + 'https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person3.png' ] }; } @@ -187,9 +187,9 @@ With the buttons and swipe gesture, the user switches images in a particular ord import { Gallery } from 'devextreme-react/gallery'; const dataSource = [ - 'https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person1.png', - 'https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person2.png', - 'https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person3.png' + 'https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person1.png', + 'https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person2.png', + 'https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person3.png' ]; class App extends React.Component { @@ -217,8 +217,8 @@ Below the current image, the Gallery shows navigation bullets that allow the use $(function () { $("#galleryContainer").dxGallery({ dataSource: [ - "https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person1.png", - "https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person2.png" + "https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person1.png", + "https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person2.png" ], height: 300, indicatorEnabled: false @@ -239,8 +239,8 @@ Below the current image, the Gallery shows navigation bullets that allow the use // ... export class AppComponent { galleryDataSource = [ - "https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person1.png", - "https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person2.png" + "https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person1.png", + "https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person2.png" ]; } @NgModule({ @@ -273,8 +273,8 @@ Below the current image, the Gallery shows navigation bullets that allow the use data() { return { dataSource: [ - 'https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person1.png', - 'https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person2.png' + 'https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person1.png', + 'https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person2.png' ] }; } @@ -289,8 +289,8 @@ Below the current image, the Gallery shows navigation bullets that allow the use import { Gallery } from 'devextreme-react/gallery'; const dataSource = [ - 'https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person1.png', - 'https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person2.png' + 'https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person1.png', + 'https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person2.png' ]; class App extends React.Component { diff --git a/concepts/05 UI Components/Gallery/05 Switch Between Images/10 API.md b/concepts/05 UI Components/Gallery/05 Switch Between Images/10 API.md index 90558f7e38..f321f3a7e3 100644 --- a/concepts/05 UI Components/Gallery/05 Switch Between Images/10 API.md +++ b/concepts/05 UI Components/Gallery/05 Switch Between Images/10 API.md @@ -9,10 +9,10 @@ To switch the Gallery to the next or previous image, call the [nextItem(animatio $(function () { const gallery = $("#galleryContainer").dxGallery({ dataSource: [ - "https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person1.png", - "https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person2.png", - "https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person3.png", - "https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person4.png" + "https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person1.png", + "https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person2.png", + "https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person3.png", + "https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person4.png" ], height: 300 }).dxGallery("instance"); @@ -57,10 +57,10 @@ To switch the Gallery to the next or previous image, call the [nextItem(animatio // Prior to Angular 8 // @ViewChild(DxGalleryComponent) gallery: DxGalleryComponent; galleryDataSource = [ - "https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person1.png", - "https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person2.png", - "https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person3.png", - "https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person4.png" + "https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person1.png", + "https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person2.png", + "https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person3.png", + "https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person4.png" ]; goToNextItem () { this.gallery.instance.nextItem(true); @@ -112,10 +112,10 @@ To switch the Gallery to the next or previous image, call the [nextItem(animatio data() { return { dataSource: [ - 'https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person1.png', - 'https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person2.png', - 'https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person3.png', - 'https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person4.png' + 'https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person1.png', + 'https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person2.png', + 'https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person3.png', + 'https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person4.png' ] }; }, @@ -139,10 +139,10 @@ To switch the Gallery to the next or previous image, call the [nextItem(animatio import { Button } from 'devextreme-react/button'; const dataSource = [ - 'https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person1.png', - 'https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person2.png', - 'https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person3.png', - 'https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person4.png' + 'https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person1.png', + 'https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person2.png', + 'https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person3.png', + 'https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person4.png' ]; class App extends React.Component { diff --git a/concepts/05 UI Components/Gallery/10 Set the Initial Image.md b/concepts/05 UI Components/Gallery/10 Set the Initial Image.md index 460596c71c..28e2aa2e7e 100644 --- a/concepts/05 UI Components/Gallery/10 Set the Initial Image.md +++ b/concepts/05 UI Components/Gallery/10 Set the Initial Image.md @@ -7,9 +7,9 @@ By default, the image that the Gallery UI component displays initially is the fi $(function () { $("#galleryContainer").dxGallery({ dataSource: [ - "https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person1.png", - "https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person2.png", - "https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person3.png" + "https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person1.png", + "https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person2.png", + "https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person3.png" ], height: 300, selectedIndex: 2 @@ -30,9 +30,9 @@ By default, the image that the Gallery UI component displays initially is the fi // ... export class AppComponent { galleryDataSource = [ - "https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person1.png", - "https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person2.png", - "https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person3.png" + "https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person1.png", + "https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person2.png", + "https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person3.png" ]; } @NgModule({ @@ -65,9 +65,9 @@ By default, the image that the Gallery UI component displays initially is the fi data() { return { dataSource: [ - 'https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person1.png', - 'https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person2.png', - 'https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person3.png' + 'https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person1.png', + 'https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person2.png', + 'https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person3.png' ] }; } @@ -82,9 +82,9 @@ By default, the image that the Gallery UI component displays initially is the fi import { Gallery } from 'devextreme-react/gallery'; const dataSource = [ - 'https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person1.png', - 'https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person2.png', - 'https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person3.png' + 'https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person1.png', + 'https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person2.png', + 'https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person3.png' ]; class App extends React.Component { @@ -111,13 +111,13 @@ As an alternative, you can specify the initial image using its data source objec const galleryData = [{ imageAlt: "Maria", - imageSrc: "https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person1.png" + imageSrc: "https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person1.png" }, { imageAlt: "John", - imageSrc: "https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person2.png" + imageSrc: "https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person2.png" }, { imageAlt: "Xavier", - imageSrc: "https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person3.png" + imageSrc: "https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person3.png" }]; $(function () { @@ -143,13 +143,13 @@ As an alternative, you can specify the initial image using its data source objec export class AppComponent { galleryDataSource = [{ imageAlt: "Maria", - imageSrc: "https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person1.png" + imageSrc: "https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person1.png" }, { imageAlt: "John", - imageSrc: "https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person2.png" + imageSrc: "https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person2.png" }, { imageAlt: "Xavier", - imageSrc: "https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person3.png" + imageSrc: "https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person3.png" }]; selectedItem = this.galleryDataSource[1]; } @@ -184,13 +184,13 @@ As an alternative, you can specify the initial image using its data source objec return { galleryData: [{ imageAlt: 'Maria', - imageSrc: 'https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person1.png' + imageSrc: 'https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person1.png' }, { imageAlt: 'John', - imageSrc: 'https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person2.png' + imageSrc: 'https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person2.png' }, { imageAlt: 'Xavier', - imageSrc: 'https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person3.png' + imageSrc: 'https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person3.png' }], selectedItem: galleryData[1] }; @@ -207,13 +207,13 @@ As an alternative, you can specify the initial image using its data source objec const galleryData = [{ imageAlt: 'Maria', - imageSrc: 'https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person1.png' + imageSrc: 'https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person1.png' }, { imageAlt: 'John', - imageSrc: 'https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person2.png' + imageSrc: 'https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person2.png' }, { imageAlt: 'Xavier', - imageSrc: 'https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person3.png' + imageSrc: 'https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person3.png' }]; const selectedItem = galleryData[1]; diff --git a/concepts/05 UI Components/Gallery/15 Enable the Slideshow.md b/concepts/05 UI Components/Gallery/15 Enable the Slideshow.md index 7024eddafd..9f677366b8 100644 --- a/concepts/05 UI Components/Gallery/15 Enable the Slideshow.md +++ b/concepts/05 UI Components/Gallery/15 Enable the Slideshow.md @@ -7,9 +7,9 @@ The Gallery UI component supports the display of images in a slideshow. To speci $(function () { $("#galleryContainer").dxGallery({ dataSource: [ - "https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person1.png", - "https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person2.png", - "https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person3.png" + "https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person1.png", + "https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person2.png", + "https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person3.png" ], height: 300, slideshowDelay: 1500 @@ -30,9 +30,9 @@ The Gallery UI component supports the display of images in a slideshow. To speci // ... export class AppComponent { galleryDataSource = [ - "https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person1.png", - "https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person2.png", - "https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person3.png" + "https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person1.png", + "https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person2.png", + "https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person3.png" ]; } @NgModule({ @@ -65,9 +65,9 @@ The Gallery UI component supports the display of images in a slideshow. To speci data() { return { dataSource: [ - 'https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person1.png', - 'https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person2.png', - 'https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person3.png' + 'https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person1.png', + 'https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person2.png', + 'https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person3.png' ] }; } @@ -82,9 +82,9 @@ The Gallery UI component supports the display of images in a slideshow. To speci import { Gallery } from 'devextreme-react/gallery'; const dataSource = [ - 'https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person1.png', - 'https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person2.png', - 'https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person3.png' + 'https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person1.png', + 'https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person2.png', + 'https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person3.png' ]; class App extends React.Component { diff --git a/concepts/05 UI Components/Gallery/20 Animate the Image Change.md b/concepts/05 UI Components/Gallery/20 Animate the Image Change.md index a4710959eb..330226cee8 100644 --- a/concepts/05 UI Components/Gallery/20 Animate the Image Change.md +++ b/concepts/05 UI Components/Gallery/20 Animate the Image Change.md @@ -7,9 +7,9 @@ By default, the change of the image is animated. You can specify how long the an $(function () { $("#galleryContainer").dxGallery({ dataSource: [ - "https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person1.png", - "https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person2.png", - "https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person3.png" + "https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person1.png", + "https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person2.png", + "https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person3.png" ], height: 300, loop: true, @@ -32,9 +32,9 @@ By default, the change of the image is animated. You can specify how long the an // ... export class AppComponent { galleryDataSource = [ - "https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person1.png", - "https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person2.png", - "https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person3.png" + "https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person1.png", + "https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person2.png", + "https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person3.png" ]; } @NgModule({ @@ -68,9 +68,9 @@ By default, the change of the image is animated. You can specify how long the an data() { return { dataSource: [ - 'https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person1.png', - 'https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person2.png', - 'https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person3.png' + 'https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person1.png', + 'https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person2.png', + 'https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person3.png' ] }; } @@ -85,9 +85,9 @@ By default, the change of the image is animated. You can specify how long the an import { Gallery } from 'devextreme-react/gallery'; const dataSource = [ - 'https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person1.png', - 'https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person2.png', - 'https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person3.png' + 'https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person1.png', + 'https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person2.png', + 'https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person3.png' ]; class App extends React.Component { diff --git a/concepts/05 UI Components/Gallery/25 Transform and Combine Images.md b/concepts/05 UI Components/Gallery/25 Transform and Combine Images.md index ffc9994c74..6223cdea59 100644 --- a/concepts/05 UI Components/Gallery/25 Transform and Combine Images.md +++ b/concepts/05 UI Components/Gallery/25 Transform and Combine Images.md @@ -7,10 +7,10 @@ By default, the Gallery UI component displays one image at a time. To fit more i $(function () { $("#galleryContainer").dxGallery({ dataSource: [ - "https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person1.png", - "https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person2.png", - "https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person3.png", - "https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person4.png" + "https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person1.png", + "https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person2.png", + "https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person3.png", + "https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person4.png" ], height: 300, width: 600, @@ -33,10 +33,10 @@ By default, the Gallery UI component displays one image at a time. To fit more i // ... export class AppComponent { galleryDataSource = [ - "https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person1.png", - "https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person2.png", - "https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person3.png", - "https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person4.png" + "https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person1.png", + "https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person2.png", + "https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person3.png", + "https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person4.png" ]; } @NgModule({ @@ -70,10 +70,10 @@ By default, the Gallery UI component displays one image at a time. To fit more i data() { return { dataSource: [ - 'https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person1.png', - 'https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person2.png', - 'https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person3.png', - 'https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person4.png' + 'https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person1.png', + 'https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person2.png', + 'https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person3.png', + 'https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person4.png' ] }; } @@ -88,10 +88,10 @@ By default, the Gallery UI component displays one image at a time. To fit more i import { Gallery } from 'devextreme-react/gallery'; const dataSource = [ - 'https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person1.png', - 'https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person2.png', - 'https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person3.png', - 'https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person4.png' + 'https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person1.png', + 'https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person2.png', + 'https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person3.png', + 'https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person4.png' ]; class App extends React.Component { @@ -120,10 +120,10 @@ When distributing images along the total width, the Gallery may add margins betw $(function () { $("#galleryContainer").dxGallery({ dataSource: [ - "https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person1.png", - "https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person2.png", - "https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person3.png", - "https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person3.png" + "https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person1.png", + "https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person2.png", + "https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person3.png", + "https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person3.png" ], height: 200, width: 320, @@ -148,10 +148,10 @@ When distributing images along the total width, the Gallery may add margins betw // ... export class AppComponent { galleryDataSource = [ - "https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person1.png", - "https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person2.png", - "https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person3.png", - "https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person4.png" + "https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person1.png", + "https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person2.png", + "https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person3.png", + "https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person4.png" ]; } @NgModule({ @@ -186,10 +186,10 @@ When distributing images along the total width, the Gallery may add margins betw data() { return { dataSource: [ - 'https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person1.png', - 'https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person2.png', - 'https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person3.png', - 'https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person3.png' + 'https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person1.png', + 'https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person2.png', + 'https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person3.png', + 'https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person3.png' ] }; } @@ -204,10 +204,10 @@ When distributing images along the total width, the Gallery may add margins betw import { Gallery } from 'devextreme-react/gallery'; const dataSource = [ - 'https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person1.png', - 'https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person2.png', - 'https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person3.png', - 'https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person3.png' + 'https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person1.png', + 'https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person2.png', + 'https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person3.png', + 'https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person3.png' ]; class App extends React.Component { @@ -239,10 +239,10 @@ The Gallery UI component allows you to display not only the current image, but a $(function () { $("#galleryContainer").dxGallery({ dataSource: [ - "https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person1.png", - "https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person2.png", - "https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person3.png", - "https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person3.png" + "https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person1.png", + "https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person2.png", + "https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person3.png", + "https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person3.png" ], height: 200, width: 320, @@ -267,10 +267,10 @@ The Gallery UI component allows you to display not only the current image, but a // ... export class AppComponent { galleryDataSource = [ - "https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person1.png", - "https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person2.png", - "https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person3.png", - "https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person4.png" + "https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person1.png", + "https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person2.png", + "https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person3.png", + "https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person4.png" ]; } @NgModule({ @@ -305,10 +305,10 @@ The Gallery UI component allows you to display not only the current image, but a data() { return { dataSource: [ - 'https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person1.png', - 'https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person2.png', - 'https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person3.png', - 'https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person3.png' + 'https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person1.png', + 'https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person2.png', + 'https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person3.png', + 'https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person3.png' ] }; } @@ -323,10 +323,10 @@ The Gallery UI component allows you to display not only the current image, but a import { Gallery } from 'devextreme-react/gallery'; const dataSource = [ - 'https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person1.png', - 'https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person2.png', - 'https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person3.png', - 'https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person3.png' + 'https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person1.png', + 'https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person2.png', + 'https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person3.png', + 'https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person3.png' ]; class App extends React.Component { diff --git a/concepts/05 UI Components/Gallery/30 Customize Item Appearance.md b/concepts/05 UI Components/Gallery/30 Customize Item Appearance.md index bca982a688..1ecef4b252 100644 --- a/concepts/05 UI Components/Gallery/30 Customize Item Appearance.md +++ b/concepts/05 UI Components/Gallery/30 Customize Item Appearance.md @@ -7,10 +7,10 @@ Gallery items are not sctrictly images. They can contain text or other elements $(function () { $("#galleryContainer").dxGallery({ dataSource: [{ - imageSrc: "https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person1.png", + imageSrc: "https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person1.png", disabled: true }, { - imageSrc: "https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person2.png", + imageSrc: "https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person2.png", imageAlt: "Peter" }], height: 300 @@ -30,10 +30,10 @@ Gallery items are not sctrictly images. They can contain text or other elements // ... export class AppComponent { galleryDataSource = [{ - imageSrc: "https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person1.png", + imageSrc: "https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person1.png", disabled: true }, { - imageSrc: "https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person2.png", + imageSrc: "https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person2.png", imageAlt: "Peter" }]; } @@ -66,10 +66,10 @@ Gallery items are not sctrictly images. They can contain text or other elements data() { return { dataSource: [{ - imageSrc: 'https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person1.png', + imageSrc: 'https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person1.png', disabled: true }, { - imageSrc: 'https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person2.png', + imageSrc: 'https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person2.png', imageAlt: 'Peter' }] }; @@ -85,10 +85,10 @@ Gallery items are not sctrictly images. They can contain text or other elements import { Gallery } from 'devextreme-react/gallery'; const dataSource = [{ - imageSrc: 'https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person1.png', + imageSrc: 'https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person1.png', disabled: true }, { - imageSrc: 'https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person2.png', + imageSrc: 'https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person2.png', imageAlt: 'Peter' }]; @@ -143,9 +143,9 @@ If you need a more flexible solution, define an [itemTemplate](/api-reference/10 // ... export class AppComponent { galleryDataSource = [ - { path: "https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person1.png", name: "Maria" }, - { path: "https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person2.png", name: "John" }, - { path: "https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person3.png", name: "Xavier" } + { path: "https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person1.png", name: "Maria" }, + { path: "https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person2.png", name: "John" }, + { path: "https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person3.png", name: "Xavier" } ]; } @NgModule({ @@ -184,9 +184,9 @@ If you need a more flexible solution, define an [itemTemplate](/api-reference/10 data() { return { dataSource: [ - { path: "https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person1.png", name: "Maria" }, - { path: "https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person2.png", name: "John" }, - { path: "https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person3.png", name: "Xavier" } + { path: "https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person1.png", name: "Maria" }, + { path: "https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person2.png", name: "John" }, + { path: "https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person3.png", name: "Xavier" } ] }; } @@ -201,9 +201,9 @@ If you need a more flexible solution, define an [itemTemplate](/api-reference/10 import { Gallery } from 'devextreme-react/gallery'; const dataSource = [ - { path: "https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person1.png", name: "Maria" }, - { path: "https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person2.png", name: "John" }, - { path: "https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person3.png", name: "Xavier" } + { path: "https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person1.png", name: "Maria" }, + { path: "https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person2.png", name: "John" }, + { path: "https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person3.png", name: "Xavier" } ]; const renderGalleryItem = (itemData) => { @@ -242,7 +242,7 @@ You can also customize an individual Gallery item. For this purpose, declare a t const galleryData = [{ - imageSrc: "https://js.devexpress.com/Content/images/doc/25_2/PhoneJS/person1.png", + imageSrc: "https://js.devexpress.com/Content/images/doc/26_1/PhoneJS/person1.png", imageAlt: "Maria", template: $("#individualTemplate"), }, diff --git a/concepts/05 UI Components/Gantt/00 Getting Started with Gantt/00 Getting Started with Gantt.md b/concepts/05 UI Components/Gantt/00 Getting Started with Gantt/00 Getting Started with Gantt.md index 9dcb01f996..1e8dc9478d 100644 --- a/concepts/05 UI Components/Gantt/00 Getting Started with Gantt/00 Getting Started with Gantt.md +++ b/concepts/05 UI Components/Gantt/00 Getting Started with Gantt/00 Getting Started with Gantt.md @@ -4,7 +4,7 @@ The Gantt UI component displays the task flow and dependencies between tasks. This tutorial shows how to add a Gantt component to your application and configure the component. -
    +
    Each section in this tutorial describes one configuration step. You can also find full source code in the GitHub repository. diff --git a/concepts/05 UI Components/Gantt/00 Getting Started with Gantt/10 Add the Gantt Component to a Page.md b/concepts/05 UI Components/Gantt/00 Getting Started with Gantt/10 Add the Gantt Component to a Page.md index 9de84952f3..a3def836eb 100644 --- a/concepts/05 UI Components/Gantt/00 Getting Started with Gantt/10 Add the Gantt Component to a Page.md +++ b/concepts/05 UI Components/Gantt/00 Getting Started with Gantt/10 Add the Gantt Component to a Page.md @@ -12,11 +12,11 @@ - - + + - - + + @@ -102,4 +102,4 @@ export default App; ---- \ No newline at end of file +--- diff --git a/concepts/05 UI Components/HtmlEditor/00 Getting Started with HtmlEditor/00 Getting Started with HtmlEditor.md b/concepts/05 UI Components/HtmlEditor/00 Getting Started with HtmlEditor/00 Getting Started with HtmlEditor.md index 1b2725505c..2a0c6b6ffb 100644 --- a/concepts/05 UI Components/HtmlEditor/00 Getting Started with HtmlEditor/00 Getting Started with HtmlEditor.md +++ b/concepts/05 UI Components/HtmlEditor/00 Getting Started with HtmlEditor/00 Getting Started with HtmlEditor.md @@ -2,7 +2,7 @@ This tutorial explains how to add an HTML Editor to a page and configure its core features. The following control demonstrates the result: -
    +
    Refer to the following sections for details on each configuration step. You can also find the full code in the GitHub repository. diff --git a/concepts/05 UI Components/HtmlEditor/00 Getting Started with HtmlEditor/02 Create an HtmlEditor.md b/concepts/05 UI Components/HtmlEditor/00 Getting Started with HtmlEditor/02 Create an HtmlEditor.md index 61621689e1..07fd770605 100644 --- a/concepts/05 UI Components/HtmlEditor/00 Getting Started with HtmlEditor/02 Create an HtmlEditor.md +++ b/concepts/05 UI Components/HtmlEditor/00 Getting Started with HtmlEditor/02 Create an HtmlEditor.md @@ -16,10 +16,10 @@ The HTML Editor uses the - + - - + + diff --git a/concepts/05 UI Components/HtmlEditor/10 Formats/60 Customize Built-In Formats and Modules/20 Extend.md b/concepts/05 UI Components/HtmlEditor/10 Formats/60 Customize Built-In Formats and Modules/20 Extend.md index 837c62242c..fdf616f686 100644 --- a/concepts/05 UI Components/HtmlEditor/10 Formats/60 Customize Built-In Formats and Modules/20 Extend.md +++ b/concepts/05 UI Components/HtmlEditor/10 Formats/60 Customize Built-In Formats and Modules/20 Extend.md @@ -1,4 +1,4 @@ -You can extend the HTML Editor's formats and modules, and also the DevExtreme Quill's formats and modules. To get a format or module for further extension, pass *"formats/[formatName]"* or *"modules/[moduleName]"* to the [get(componentPath)](/api-reference/10%20UI%20Components/dxHtmlEditor/3%20Methods/get(componentPath).md '/Documentation/ApiReference/UI_Components/dxHtmlEditor/Methods/#getcomponentPath') method. +You can extend the HTML Editor's formats and modules, and also the DevExtreme Quill's formats and modules. To get a format or module for further extension, pass *"formats/[formatName]"* or *"modules/[moduleName]"* to the [get(componentPath)](/api-reference/10%20UI%20Components/dxHtmlEditor/3%20Methods/get(componentPath).md '/Documentation/ApiReference/UI_Components/dxHtmlEditor/Methods/#getcomponentPath') method. In the following code, the `strike` format is extended so that the strikethrough text is non-editable when the format is applied. The extended format is then [registered](/api-reference/10%20UI%20Components/dxHtmlEditor/3%20Methods/register(components).md '/Documentation/ApiReference/UI_Components/dxHtmlEditor/Methods/#registercomponents'). diff --git a/concepts/05 UI Components/List/00 Getting Started with List/00 Getting Started with List.md b/concepts/05 UI Components/List/00 Getting Started with List/00 Getting Started with List.md index 11eb7017a9..7fd6b12684 100644 --- a/concepts/05 UI Components/List/00 Getting Started with List/00 Getting Started with List.md +++ b/concepts/05 UI Components/List/00 Getting Started with List/00 Getting Started with List.md @@ -4,7 +4,7 @@ The List displays data from a local or remote data storage and allows users to g This tutorial explains how to add a List to a page, bind it to data, and configure its core features. The following control demonstrates the result: -
    +
    Each section in this tutorial covers a single configuration step. You can also find the full code in the GitHub repository. diff --git a/concepts/05 UI Components/List/00 Getting Started with List/02 Create a List.md b/concepts/05 UI Components/List/00 Getting Started with List/02 Create a List.md index d8ab4ca094..c41ad58409 100644 --- a/concepts/05 UI Components/List/00 Getting Started with List/02 Create a List.md +++ b/concepts/05 UI Components/List/00 Getting Started with List/02 Create a List.md @@ -17,10 +17,10 @@ - + - + diff --git a/concepts/05 UI Components/Lookup/00 Getting Started with Lookup/00 Getting Started with Lookup.md b/concepts/05 UI Components/Lookup/00 Getting Started with Lookup/00 Getting Started with Lookup.md index 30c7642923..4ccfe50689 100644 --- a/concepts/05 UI Components/Lookup/00 Getting Started with Lookup/00 Getting Started with Lookup.md +++ b/concepts/05 UI Components/Lookup/00 Getting Started with Lookup/00 Getting Started with Lookup.md @@ -6,7 +6,7 @@ Lookup is a component that allows users to search and select an item in the drop This tutorial shows how to add a Lookup component to your application, bind it to data, and configure its core features. -
    +
    Each section in this tutorial describes a single configuration step. You can also find the full code in the following GitHub repository: getting-started-with-lookup. diff --git a/concepts/05 UI Components/Lookup/00 Getting Started with Lookup/05 Create a Lookup Component.md b/concepts/05 UI Components/Lookup/00 Getting Started with Lookup/05 Create a Lookup Component.md index f2362bfb81..2df6876f19 100644 --- a/concepts/05 UI Components/Lookup/00 Getting Started with Lookup/05 Create a Lookup Component.md +++ b/concepts/05 UI Components/Lookup/00 Getting Started with Lookup/05 Create a Lookup Component.md @@ -13,8 +13,8 @@ - - + + diff --git a/concepts/05 UI Components/Menu/00 Getting Started with Menu/00 Getting Started with Menu.md b/concepts/05 UI Components/Menu/00 Getting Started with Menu/00 Getting Started with Menu.md index 5d25ceed46..a490fb0bfa 100644 --- a/concepts/05 UI Components/Menu/00 Getting Started with Menu/00 Getting Started with Menu.md +++ b/concepts/05 UI Components/Menu/00 Getting Started with Menu/00 Getting Started with Menu.md @@ -2,7 +2,7 @@ This tutorial shows how to add the Menu component to your application and configure the component's core features. -
    +
    Each section in this tutorial describes a single configuration step. You can also find the full source code in the GitHub repository. diff --git a/concepts/05 UI Components/Menu/00 Getting Started with Menu/05 Create Base Menu Level.md b/concepts/05 UI Components/Menu/00 Getting Started with Menu/05 Create Base Menu Level.md index 6b2ff83dc7..f2e49f600a 100644 --- a/concepts/05 UI Components/Menu/00 Getting Started with Menu/05 Create Base Menu Level.md +++ b/concepts/05 UI Components/Menu/00 Getting Started with Menu/05 Create Base Menu Level.md @@ -30,8 +30,8 @@ To create a base Menu level, define the component in the markup and populate it - - + + diff --git a/concepts/05 UI Components/NumberBox/00 Getting Started with NumberBox/00 Getting Started with NumberBox.md b/concepts/05 UI Components/NumberBox/00 Getting Started with NumberBox/00 Getting Started with NumberBox.md index c044c0fce2..6a8f56aee2 100644 --- a/concepts/05 UI Components/NumberBox/00 Getting Started with NumberBox/00 Getting Started with NumberBox.md +++ b/concepts/05 UI Components/NumberBox/00 Getting Started with NumberBox/00 Getting Started with NumberBox.md @@ -4,6 +4,6 @@ The NumberBox component allows users to enter a number or specify it with the sp This tutorial shows how to add NumberBox to a page and configure the component's core settings. As a result, you will create the following UI component: -
    +
    Each section in this tutorial describes a single configuration step. You can also find the full source code in the following GitHub repository: getting-started-with-number-box. diff --git a/concepts/05 UI Components/NumberBox/00 Getting Started with NumberBox/05 Create a NumberBox.md b/concepts/05 UI Components/NumberBox/00 Getting Started with NumberBox/05 Create a NumberBox.md index 7968caa6f6..690f818aa6 100644 --- a/concepts/05 UI Components/NumberBox/00 Getting Started with NumberBox/05 Create a NumberBox.md +++ b/concepts/05 UI Components/NumberBox/00 Getting Started with NumberBox/05 Create a NumberBox.md @@ -13,8 +13,8 @@ - - + + diff --git a/concepts/05 UI Components/Pagination/05 Getting Started with Pagination/00 Getting Started with Pagination.md b/concepts/05 UI Components/Pagination/05 Getting Started with Pagination/00 Getting Started with Pagination.md index ea02a57c69..6b2fc21bc6 100644 --- a/concepts/05 UI Components/Pagination/05 Getting Started with Pagination/00 Getting Started with Pagination.md +++ b/concepts/05 UI Components/Pagination/05 Getting Started with Pagination/00 Getting Started with Pagination.md @@ -4,7 +4,7 @@ Pagination is a UI component that allows users to navigate through pages and cha This tutorial explains how to add Pagination to a page and configure the component's core settings. It also covers implementing remote pagination. Colored cards are loaded each time a user switches pages or changes page size. The final result is displayed below: -
    +
    Each section in this tutorial describes a single configuration step. You can also find the full source code in the following GitHub repository: diff --git a/concepts/05 UI Components/Pagination/05 Getting Started with Pagination/05 Create Pagination.md b/concepts/05 UI Components/Pagination/05 Getting Started with Pagination/05 Create Pagination.md index 9e568349f7..7293557a1e 100644 --- a/concepts/05 UI Components/Pagination/05 Getting Started with Pagination/05 Create Pagination.md +++ b/concepts/05 UI Components/Pagination/05 Getting Started with Pagination/05 Create Pagination.md @@ -12,8 +12,8 @@ - - + + @@ -92,4 +92,4 @@ export default App; ---- \ No newline at end of file +--- diff --git a/concepts/05 UI Components/PieChart/00 Getting Started with PieChart/00 Getting Started with PieChart.md b/concepts/05 UI Components/PieChart/00 Getting Started with PieChart/00 Getting Started with PieChart.md index 7bc2e3801d..af7cb20187 100644 --- a/concepts/05 UI Components/PieChart/00 Getting Started with PieChart/00 Getting Started with PieChart.md +++ b/concepts/05 UI Components/PieChart/00 Getting Started with PieChart/00 Getting Started with PieChart.md @@ -18,7 +18,7 @@ The Web Dashboard is available as a part of a Universal subscription. This tutorial shows how to add a PieChart to the page and configure the component's core settings. As a result, you will create the following UI component: -
    +
    Each section in this tutorial describes a single configuration step. You can also find the full source code in the GitHub repository. diff --git a/concepts/05 UI Components/PieChart/00 Getting Started with PieChart/05 Create a PieChart.md b/concepts/05 UI Components/PieChart/00 Getting Started with PieChart/05 Create a PieChart.md index 84542587f9..ccf962d12c 100644 --- a/concepts/05 UI Components/PieChart/00 Getting Started with PieChart/05 Create a PieChart.md +++ b/concepts/05 UI Components/PieChart/00 Getting Started with PieChart/05 Create a PieChart.md @@ -14,8 +14,8 @@ - - + + diff --git a/concepts/05 UI Components/PieChart/10 Series/00 Overview.md b/concepts/05 UI Components/PieChart/10 Series/00 Overview.md index 3c0a96c1e1..4a2ca9bb67 100644 --- a/concepts/05 UI Components/PieChart/10 Series/00 Overview.md +++ b/concepts/05 UI Components/PieChart/10 Series/00 Overview.md @@ -1,6 +1,6 @@ A series is a collection of related data points. The most important characteristic of a series is its type. The PieChart provides **Pie** and **Doughnut** series types; the only difference between them is the **Doughnut** has a blank center. -
    +
    The **Pie** series type is used by default, but you can change it to **Doughnut** using the [type](/api-reference/10%20UI%20Components/dxPieChart/1%20Configuration/type.md '/Documentation/ApiReference/UI_Components/dxPieChart/Configuration/#type') property. diff --git a/concepts/05 UI Components/PieChart/35 Legend/10 Relocate the Legend.md b/concepts/05 UI Components/PieChart/35 Legend/10 Relocate the Legend.md index da2cc440ee..a726a1b686 100644 --- a/concepts/05 UI Components/PieChart/35 Legend/10 Relocate the Legend.md +++ b/concepts/05 UI Components/PieChart/35 Legend/10 Relocate the Legend.md @@ -86,7 +86,7 @@ The legend can be aligned in the horizontal or vertical direction using the [hor Below, you can try out these properties in action. -
    +
    #####See Also##### - [Rearrange Legend Items](/concepts/05%20UI%20Components/PieChart/35%20Legend/20%20Rearrange%20Legend%20Items.md '/Documentation/Guide/UI_Components/PieChart/Legend/Rearrange_Legend_Items/') diff --git a/concepts/05 UI Components/PieChart/35 Legend/20 Rearrange Legend Items.md b/concepts/05 UI Components/PieChart/35 Legend/20 Rearrange Legend Items.md index 1db1d83a80..2c53c288d9 100644 --- a/concepts/05 UI Components/PieChart/35 Legend/20 Rearrange Legend Items.md +++ b/concepts/05 UI Components/PieChart/35 Legend/20 Rearrange Legend Items.md @@ -259,7 +259,7 @@ Regardless the legend orientation, you can adjust the empty space between column Below, you can try out all the mentioned properties in action. -
    +
    #####See Also##### - [Relocate the Legend](/concepts/05%20UI%20Components/PieChart/35%20Legend/10%20Relocate%20the%20Legend.md '/Documentation/Guide/UI_Components/PieChart/Legend/Relocate_the_Legend/') diff --git a/concepts/05 UI Components/PieChart/90 Rotate the Pie.md b/concepts/05 UI Components/PieChart/90 Rotate the Pie.md index 15713e8e78..7b75a61055 100644 --- a/concepts/05 UI Components/PieChart/90 Rotate the Pie.md +++ b/concepts/05 UI Components/PieChart/90 Rotate the Pie.md @@ -73,7 +73,7 @@ The PieChart provides two properties that control the layout algorithm, allowing You can try both these properties on the PieChart below. -
    +
    #####See Also##### - [PieChart Demos](https://js.devexpress.com/Demos/WidgetsGallery/Demo/Charts/Pie) diff --git a/concepts/05 UI Components/PivotGrid/00 Getting Started with PivotGrid/00 Getting Started with PivotGrid.md b/concepts/05 UI Components/PivotGrid/00 Getting Started with PivotGrid/00 Getting Started with PivotGrid.md index e39d01d85c..d259ac39d5 100644 --- a/concepts/05 UI Components/PivotGrid/00 Getting Started with PivotGrid/00 Getting Started with PivotGrid.md +++ b/concepts/05 UI Components/PivotGrid/00 Getting Started with PivotGrid/00 Getting Started with PivotGrid.md @@ -18,7 +18,7 @@ Develop using VS Code? Leverage the capabilities of a brand new VS Code Report D This tutorial shows how to add the PivotGrid component to a page, bind the component to data, and configure its core features. The following control demonstrates the result: -
    +
    Each section in this tutorial covers a single configuration step. You can also find the full code in the following GitHub repository: Getting Started with DevExtreme PivotGrid. diff --git a/concepts/05 UI Components/PivotGrid/00 Getting Started with PivotGrid/02 Create a PivotGrid.md b/concepts/05 UI Components/PivotGrid/00 Getting Started with PivotGrid/02 Create a PivotGrid.md index c71e9addb9..f706c73cf5 100644 --- a/concepts/05 UI Components/PivotGrid/00 Getting Started with PivotGrid/02 Create a PivotGrid.md +++ b/concepts/05 UI Components/PivotGrid/00 Getting Started with PivotGrid/02 Create a PivotGrid.md @@ -16,10 +16,10 @@ - + - + diff --git a/concepts/05 UI Components/PivotGrid/150 Integration with Chart/20 Convert Grid Fields into Chart Series.md b/concepts/05 UI Components/PivotGrid/150 Integration with Chart/20 Convert Grid Fields into Chart Series.md index 9c38f6328e..5e556aa877 100644 --- a/concepts/05 UI Components/PivotGrid/150 Integration with Chart/20 Convert Grid Fields into Chart Series.md +++ b/concepts/05 UI Components/PivotGrid/150 Integration with Chart/20 Convert Grid Fields into Chart Series.md @@ -12,7 +12,7 @@ When binding Chart to PivotGrid, specify how to form Chart series from PivotGrid In the example below, toggle the check box to update the **inverted** field. When this field is `false`, values of the *"2014"* column field become the arguments, while values of the *"Europe"* row field form series. When **inverted** is `true`, the result is reversed. -
    +
    When PivotGrid contains multiple data fields, they can become sets of series or sets of arguments. To specify this behavior, use the **putDataFieldsInto** field and choose *"series"* (default) or *"args"*. @@ -30,7 +30,7 @@ Some data fields may alternate on the Chart plot. To control this behavior, set Below, use the controls under the UI components to change the **putDataFieldsInto** and **alternateDataFields** fields. Observe how the "Total" and "Avg" data fields depend on these values. -
    +
    To process data in a specific way, assign a callback function to the **processCell** field. This function will be called for each data cell of PivotGrid. @@ -78,4 +78,4 @@ The resulting item that will be passed on to the chart data source. The fields o * **arg**: Number | String | Date The argument of the data item. * **val**: Number | String | Date - The value of the data item. \ No newline at end of file + The value of the data item. diff --git a/concepts/05 UI Components/Popup/00 Getting Started with Popup/00 Getting Started with Popup.md b/concepts/05 UI Components/Popup/00 Getting Started with Popup/00 Getting Started with Popup.md index 453321482a..7fe8d380f6 100644 --- a/concepts/05 UI Components/Popup/00 Getting Started with Popup/00 Getting Started with Popup.md +++ b/concepts/05 UI Components/Popup/00 Getting Started with Popup/00 Getting Started with Popup.md @@ -4,7 +4,7 @@ The Popup displays content in a window that overlays the current view. This tutorial explains how to add a Popup to a page, define its content, and configure its core features. The following control demonstrates the result: -
    +
    Each section in this tutorial covers a single configuration step. You can also find the full code in the GitHub repository. diff --git a/concepts/05 UI Components/Popup/00 Getting Started with Popup/02 Create a Popup.md b/concepts/05 UI Components/Popup/00 Getting Started with Popup/02 Create a Popup.md index 0b786051d9..558d0d0c83 100644 --- a/concepts/05 UI Components/Popup/00 Getting Started with Popup/02 Create a Popup.md +++ b/concepts/05 UI Components/Popup/00 Getting Started with Popup/02 Create a Popup.md @@ -17,10 +17,10 @@ - + - + diff --git a/concepts/05 UI Components/RangeSelector/10 Visual Elements/40 Background/30 Displaying an Image.md b/concepts/05 UI Components/RangeSelector/10 Visual Elements/40 Background/30 Displaying an Image.md index 310a897d98..6b64b3a96c 100644 --- a/concepts/05 UI Components/RangeSelector/10 Visual Elements/40 Background/30 Displaying an Image.md +++ b/concepts/05 UI Components/RangeSelector/10 Visual Elements/40 Background/30 Displaying an Image.md @@ -5,7 +5,7 @@ You can display an image in the background of RangeSelector. To do this, use the // ... background: { image: { - url: '/Content/images/doc/25_2/ChartJS/flight.png', + url: '/Content/images/doc/26_1/ChartJS/flight.png', location: 'center' } } diff --git a/concepts/05 UI Components/RangeSelector/20 Range Changing/10 Select a Range.md b/concepts/05 UI Components/RangeSelector/20 Range Changing/10 Select a Range.md index f14dfa0684..6cf40e827b 100644 --- a/concepts/05 UI Components/RangeSelector/20 Range Changing/10 Select a Range.md +++ b/concepts/05 UI Components/RangeSelector/20 Range Changing/10 Select a Range.md @@ -9,15 +9,15 @@ In RangeSelector, you can select a range either manually or from code. There are When you are selecting a range using sliders, one slider can be dragged across another swapping places with it. This capability is on by default. To disable it, set the [allowSlidersSwap](/api-reference/10%20UI%20Components/dxRangeSelector/1%20Configuration/behavior/allowSlidersSwap.md '/Documentation/ApiReference/UI_Components/dxRangeSelector/Configuration/behavior/#allowSlidersSwap') property to **false**. -
    +
    There is one more property that specifies RangeSelector behavior when you select a range using sliders. When you let a slider off, it either stays at the place where you released it or moves to the nearest scale tick. To specify how a slider should behave in this case, use the [snapToTicks](/api-reference/10%20UI%20Components/dxRangeSelector/1%20Configuration/behavior/snapToTicks.md '/Documentation/ApiReference/UI_Components/dxRangeSelector/Configuration/behavior/#snapToTicks') property. -
    +
    In addition to sliders, you can select a range by the mouse. To do this, press the left mouse button down at one end of a required range and release it at another. To disable this capability, set the [manualRangeSelectionEnabled](/api-reference/10%20UI%20Components/dxRangeSelector/1%20Configuration/behavior/manualRangeSelectionEnabled.md '/Documentation/ApiReference/UI_Components/dxRangeSelector/Configuration/behavior/#manualRangeSelectionEnabled') property to **false**. [note]The end of the range where you press the mouse button down should belong to the area that was previously unselected. Otherwise, the described actions will lead to the [movement](/concepts/05%20UI%20Components/RangeSelector/20%20Range%20Changing/20%20Move%20a%20Range.md '/Documentation/Guide/UI_Components/RangeSelector/Range_Changing/#Move_a_Range') of the previously selected range along the scale. -
    +
    To select a range from code, use the [value](/api-reference/10%20UI%20Components/dxRangeSelector/1%20Configuration/value '/Documentation/ApiReference/UI_Components/dxRangeSelector/Configuration/#value') array. diff --git a/concepts/05 UI Components/RangeSelector/20 Range Changing/20 Move a Range.md b/concepts/05 UI Components/RangeSelector/20 Range Changing/20 Move a Range.md index 58cae9d6f3..8ad2ddbeac 100644 --- a/concepts/05 UI Components/RangeSelector/20 Range Changing/20 Move a Range.md +++ b/concepts/05 UI Components/RangeSelector/20 Range Changing/20 Move a Range.md @@ -1,5 +1,5 @@ You can move a selected range along the scale by a click. The area where you click should be unselected. By default, this capability is enabled. To disable it, set the **behavior**.[moveSelectedRangeByClick](/api-reference/10%20UI%20Components/dxRangeSelector/1%20Configuration/behavior/moveSelectedRangeByClick.md '/Documentation/ApiReference/UI_Components/dxRangeSelector/Configuration/behavior/#moveSelectedRangeByClick') property to **false**. -
    +
    Moreover, you can move a selected range by dragging it. Click the selected area on the scale and drag it to the required place. diff --git a/concepts/05 UI Components/Sankey/05 Nodes and Links/05 Colorize Nodes and Links.md b/concepts/05 UI Components/Sankey/05 Nodes and Links/05 Colorize Nodes and Links.md index c0299b9031..5eb5b54df9 100644 --- a/concepts/05 UI Components/Sankey/05 Nodes and Links/05 Colorize Nodes and Links.md +++ b/concepts/05 UI Components/Sankey/05 Nodes and Links/05 Colorize Nodes and Links.md @@ -243,7 +243,7 @@ To colorize nodes or links uniformly, specify the color using the **node**.[colo Below is a demo in which you can choose different predefined palettes, palette extension modes, and link colorization modes: -
    +
    #####See Also##### - [Colorize Node Labels](/concepts/05%20UI%20Components/Sankey/15%20Node%20Labels/03%20Colorize%20Labels.md '/Documentation/Guide/UI_Components/Sankey/Node_Labels/Colorize_Labels/') diff --git a/concepts/05 UI Components/Scheduler/00 Getting Started with Scheduler/00 Getting Started with Scheduler.md b/concepts/05 UI Components/Scheduler/00 Getting Started with Scheduler/00 Getting Started with Scheduler.md index 31eb826f47..87693814b3 100644 --- a/concepts/05 UI Components/Scheduler/00 Getting Started with Scheduler/00 Getting Started with Scheduler.md +++ b/concepts/05 UI Components/Scheduler/00 Getting Started with Scheduler/00 Getting Started with Scheduler.md @@ -4,6 +4,6 @@ The Scheduler component emulates the user interface of Calendar applications on This tutorial shows you the basics of Scheduler configuration. The preview below shows the expected result: -
    +
    This article breaks the setup procedure into a series of configuration steps. We recommend that you follow the sequence, although you can skip some steps and revisit them later. You can also download the complete code from the following GitHub repository: getting-started-with-scheduler. diff --git a/concepts/05 UI Components/Scheduler/00 Getting Started with Scheduler/02 Create a Scheduler.md b/concepts/05 UI Components/Scheduler/00 Getting Started with Scheduler/02 Create a Scheduler.md index ec10b36ff7..6ecfe14734 100644 --- a/concepts/05 UI Components/Scheduler/00 Getting Started with Scheduler/02 Create a Scheduler.md +++ b/concepts/05 UI Components/Scheduler/00 Getting Started with Scheduler/02 Create a Scheduler.md @@ -14,10 +14,10 @@ - + - + diff --git a/concepts/05 UI Components/SelectBox/00 Getting Started with SelectBox/00 Getting Started with SelectBox.md b/concepts/05 UI Components/SelectBox/00 Getting Started with SelectBox/00 Getting Started with SelectBox.md index 9fec116252..ffd7d5e66a 100644 --- a/concepts/05 UI Components/SelectBox/00 Getting Started with SelectBox/00 Getting Started with SelectBox.md +++ b/concepts/05 UI Components/SelectBox/00 Getting Started with SelectBox/00 Getting Started with SelectBox.md @@ -6,7 +6,7 @@ SelectBox is an editor that allows users to select a value from a drop-down list In this tutorial, we will create the SelectBox and configure its basic features. The created UI component has a populated drop-down list, allows users to search through it, and logs the previous and current selected items to the console. -
    +
    Each section in this tutorial describes a single configuration step. You can also find the full code in the GitHub repository. diff --git a/concepts/05 UI Components/SpeechToText/05 Getting Started with SpeechToText/00 Getting Started with SpeechToText.md b/concepts/05 UI Components/SpeechToText/05 Getting Started with SpeechToText/00 Getting Started with SpeechToText.md index 62ca7355b0..13f26004fa 100644 --- a/concepts/05 UI Components/SpeechToText/05 Getting Started with SpeechToText/00 Getting Started with SpeechToText.md +++ b/concepts/05 UI Components/SpeechToText/05 Getting Started with SpeechToText/00 Getting Started with SpeechToText.md @@ -7,10 +7,10 @@ This tutorial guides you through the following steps: - Handle transcription errors. - Customize [SpeechRecognition](https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition) options. -
    +
    Each section in this tutorial covers a single configuration step. You can find the complete source code in the following GitHub repository: #include btn-open-github with { href: "https://github.com/DevExpress-Examples/devextreme-getting-started-with-speechtotext" -} \ No newline at end of file +} diff --git a/concepts/05 UI Components/SpeechToText/05 Getting Started with SpeechToText/05 Create SpeechToText.md b/concepts/05 UI Components/SpeechToText/05 Getting Started with SpeechToText/05 Create SpeechToText.md index c9f23579e4..593468ca28 100644 --- a/concepts/05 UI Components/SpeechToText/05 Getting Started with SpeechToText/05 Create SpeechToText.md +++ b/concepts/05 UI Components/SpeechToText/05 Getting Started with SpeechToText/05 Create SpeechToText.md @@ -14,8 +14,8 @@ - - + + @@ -93,4 +93,4 @@ ); } ---- \ No newline at end of file +--- diff --git a/concepts/05 UI Components/Splitter/00 Getting Started with Splitter/00 Getting Started with Splitter.md b/concepts/05 UI Components/Splitter/00 Getting Started with Splitter/00 Getting Started with Splitter.md index 32df1caf0d..9a2deb095a 100644 --- a/concepts/05 UI Components/Splitter/00 Getting Started with Splitter/00 Getting Started with Splitter.md +++ b/concepts/05 UI Components/Splitter/00 Getting Started with Splitter/00 Getting Started with Splitter.md @@ -4,7 +4,7 @@ Splitter is a UI component designed to split a page layout into multiple panes. This tutorial shows how to add Splitter to the page and configure the component's core settings. For example, you can create the following page layout: -
    +
    Each section in this tutorial describes a single configuration step. You can also find the full source code in the following GitHub repository: diff --git a/concepts/05 UI Components/Splitter/20 Implement Custom Scrolling/00 Implement Custom Scrolling.md b/concepts/05 UI Components/Splitter/20 Implement Custom Scrolling/00 Implement Custom Scrolling.md index 2625772586..e0f4664be4 100644 --- a/concepts/05 UI Components/Splitter/20 Implement Custom Scrolling/00 Implement Custom Scrolling.md +++ b/concepts/05 UI Components/Splitter/20 Implement Custom Scrolling/00 Implement Custom Scrolling.md @@ -4,7 +4,7 @@ You can hide native scroll bars and use a DevExtreme ScrollView component. This The following live example demonstrates the basic implementation of the ScrollView component inside a Splitter pane: -
    +
    The next snippet contains the code for the example above. diff --git a/concepts/05 UI Components/Stepper/05 Getting Started with Stepper/00 Getting Started with Stepper.md b/concepts/05 UI Components/Stepper/05 Getting Started with Stepper/00 Getting Started with Stepper.md index 362a70e9a5..dda378528d 100644 --- a/concepts/05 UI Components/Stepper/05 Getting Started with Stepper/00 Getting Started with Stepper.md +++ b/concepts/05 UI Components/Stepper/05 Getting Started with Stepper/00 Getting Started with Stepper.md @@ -9,10 +9,10 @@ This tutorial guides you through the following steps: - Create six steps and specify their icons, labels, and other options. - Disable completed steps as a user progresses. -
    +
    Each section in this tutorial covers a single configuration step. You can find the complete source code in the following GitHub repository: #include btn-open-github with { href: "https://github.com/DevExpress-Examples/devextreme-getting-started-with-stepper" -} \ No newline at end of file +} diff --git a/concepts/05 UI Components/Stepper/05 Getting Started with Stepper/05 Create Stepper.md b/concepts/05 UI Components/Stepper/05 Getting Started with Stepper/05 Create Stepper.md index 14db56ea5d..bf50dafe2c 100644 --- a/concepts/05 UI Components/Stepper/05 Getting Started with Stepper/05 Create Stepper.md +++ b/concepts/05 UI Components/Stepper/05 Getting Started with Stepper/05 Create Stepper.md @@ -16,8 +16,8 @@ - - + + diff --git a/concepts/05 UI Components/Switch/00 Getting Started with Switch/00 Getting Started with Switch.md b/concepts/05 UI Components/Switch/00 Getting Started with Switch/00 Getting Started with Switch.md index 94dd633b3a..b58b986772 100644 --- a/concepts/05 UI Components/Switch/00 Getting Started with Switch/00 Getting Started with Switch.md +++ b/concepts/05 UI Components/Switch/00 Getting Started with Switch/00 Getting Started with Switch.md @@ -4,6 +4,6 @@ The Switch component allows users to switch between ON (the value is `true`) and This tutorial shows how to add Switch to a page and configure its core features. The following sample shows the customization result: -
    +
    Each section in this tutorial describes a single configuration step. You can also find the full source code in the following GitHub repository: getting-started-with-switch. diff --git a/concepts/05 UI Components/Switch/00 Getting Started with Switch/05 Create a Switch.md b/concepts/05 UI Components/Switch/00 Getting Started with Switch/05 Create a Switch.md index 1626448755..ca771f1f23 100644 --- a/concepts/05 UI Components/Switch/00 Getting Started with Switch/05 Create a Switch.md +++ b/concepts/05 UI Components/Switch/00 Getting Started with Switch/05 Create a Switch.md @@ -13,8 +13,8 @@ - - + + diff --git a/concepts/05 UI Components/TabPanel/01 Getting Started with TabPanel/00 Getting Started with TabPanel.md b/concepts/05 UI Components/TabPanel/01 Getting Started with TabPanel/00 Getting Started with TabPanel.md index 29730b75aa..5c247a3655 100644 --- a/concepts/05 UI Components/TabPanel/01 Getting Started with TabPanel/00 Getting Started with TabPanel.md +++ b/concepts/05 UI Components/TabPanel/01 Getting Started with TabPanel/00 Getting Started with TabPanel.md @@ -4,7 +4,7 @@ The TabPanel UI component consists of the [Tabs](/api-reference/10%20UI%20Compon This tutorial explains how to add a TabPanel to a page and configure its core features. The following control demonstrates the result: -
    +
    Refer to the sections below for more information about each configuration step. The full code is available in the GitHub repository. diff --git a/concepts/05 UI Components/TabPanel/01 Getting Started with TabPanel/10 Create the TabPanel.md b/concepts/05 UI Components/TabPanel/01 Getting Started with TabPanel/10 Create the TabPanel.md index 2cb510afc0..6ffe1abded 100644 --- a/concepts/05 UI Components/TabPanel/01 Getting Started with TabPanel/10 Create the TabPanel.md +++ b/concepts/05 UI Components/TabPanel/01 Getting Started with TabPanel/10 Create the TabPanel.md @@ -16,10 +16,10 @@ - + - + diff --git a/concepts/05 UI Components/Tabs/00 Getting Started with Tabs/00 Getting Started with Tabs.md b/concepts/05 UI Components/Tabs/00 Getting Started with Tabs/00 Getting Started with Tabs.md index bcb50eb8fd..1e5f080a27 100644 --- a/concepts/05 UI Components/Tabs/00 Getting Started with Tabs/00 Getting Started with Tabs.md +++ b/concepts/05 UI Components/Tabs/00 Getting Started with Tabs/00 Getting Started with Tabs.md @@ -4,7 +4,7 @@ The Tabs component allows you to create a tabbed UI to navigate between pages or This tutorial shows how to add a Tabs component to your application and configure its core features. -
    +
    Each section in this tutorial describes a single configuration step. You can also find the full code in the following GitHub repository: getting-started-with-tabs. diff --git a/concepts/05 UI Components/Tabs/00 Getting Started with Tabs/05 Create Predefined Tabs.md b/concepts/05 UI Components/Tabs/00 Getting Started with Tabs/05 Create Predefined Tabs.md index b8be01ea86..56364640be 100644 --- a/concepts/05 UI Components/Tabs/00 Getting Started with Tabs/05 Create Predefined Tabs.md +++ b/concepts/05 UI Components/Tabs/00 Getting Started with Tabs/05 Create Predefined Tabs.md @@ -30,8 +30,8 @@ You can use predefined item features to customize the items. The code below crea - - + + diff --git a/concepts/05 UI Components/TagBox/00 Getting Started with TagBox/00 Getting Started with TagBox.md b/concepts/05 UI Components/TagBox/00 Getting Started with TagBox/00 Getting Started with TagBox.md index 09f6266f78..95039f7e86 100644 --- a/concepts/05 UI Components/TagBox/00 Getting Started with TagBox/00 Getting Started with TagBox.md +++ b/concepts/05 UI Components/TagBox/00 Getting Started with TagBox/00 Getting Started with TagBox.md @@ -6,7 +6,7 @@ The TagBox is an editor that allows users to select multiple items from a drop-d This tutorial explains how to add a TagBox to a page, populate the drop-down list, allow users to search through it, and log the selected item data to the console. -
    +
    Each section in this tutorial describes a single configuration step. You can also find the full code in the GitHub repository. diff --git a/concepts/05 UI Components/TextArea/00 Getting Started with TextArea/00 Getting Started with TextArea.md b/concepts/05 UI Components/TextArea/00 Getting Started with TextArea/00 Getting Started with TextArea.md index 7d121c3b7c..21b014512c 100644 --- a/concepts/05 UI Components/TextArea/00 Getting Started with TextArea/00 Getting Started with TextArea.md +++ b/concepts/05 UI Components/TextArea/00 Getting Started with TextArea/00 Getting Started with TextArea.md @@ -4,7 +4,7 @@ The TextArea component allows users to enter and edit multi-line text. This tutorial shows how to add a TextArea component to a page and configure the component's core settings. As a result, you will create the following UI component: -
    +
    Each section in this tutorial describes a single configuration step. You can find the full code in the following GitHub repository: getting-started-with-text-area. diff --git a/concepts/05 UI Components/TextArea/00 Getting Started with TextArea/05 Create a TextArea.md b/concepts/05 UI Components/TextArea/00 Getting Started with TextArea/05 Create a TextArea.md index c344726977..d2aa2ba7f3 100644 --- a/concepts/05 UI Components/TextArea/00 Getting Started with TextArea/05 Create a TextArea.md +++ b/concepts/05 UI Components/TextArea/00 Getting Started with TextArea/05 Create a TextArea.md @@ -13,8 +13,8 @@ - - + + diff --git a/concepts/05 UI Components/TextBox/00 Getting Started with TextBox/00 Getting Started with TextBox.md b/concepts/05 UI Components/TextBox/00 Getting Started with TextBox/00 Getting Started with TextBox.md index a2f50daf64..1868b493c0 100644 --- a/concepts/05 UI Components/TextBox/00 Getting Started with TextBox/00 Getting Started with TextBox.md +++ b/concepts/05 UI Components/TextBox/00 Getting Started with TextBox/00 Getting Started with TextBox.md @@ -4,7 +4,7 @@ TextBox is a component that allows users to enter and edit a single line of text This tutorial shows how to add a TextBox to your application and configure its core features. -
    +
    Each section in this tutorial describes a single configuration step. You can also find the full code in the GitHub repository. diff --git a/concepts/05 UI Components/TextBox/00 Getting Started with TextBox/05 Create a TextBox.md b/concepts/05 UI Components/TextBox/00 Getting Started with TextBox/05 Create a TextBox.md index 0e7071cad6..d2a9c59c6b 100644 --- a/concepts/05 UI Components/TextBox/00 Getting Started with TextBox/05 Create a TextBox.md +++ b/concepts/05 UI Components/TextBox/00 Getting Started with TextBox/05 Create a TextBox.md @@ -12,8 +12,8 @@ - - + + diff --git a/concepts/05 UI Components/Toast/00 Getting Started with Toast/00 Getting Started with Toast.md b/concepts/05 UI Components/Toast/00 Getting Started with Toast/00 Getting Started with Toast.md index d3d6aeb96e..325840ee12 100644 --- a/concepts/05 UI Components/Toast/00 Getting Started with Toast/00 Getting Started with Toast.md +++ b/concepts/05 UI Components/Toast/00 Getting Started with Toast/00 Getting Started with Toast.md @@ -4,7 +4,7 @@ Toast is a UI component that displays pop-up notifications. This tutorial shows how to add the Toast component to your application and configure its core features. -
    +
    Each section in this tutorial describes a single configuration step. You can also find the full code in the following GitHub repository: getting-started-with-toast. diff --git a/concepts/05 UI Components/Toast/00 Getting Started with Toast/05 Display a Toast notification/05 Use the 'notify' Method.md b/concepts/05 UI Components/Toast/00 Getting Started with Toast/05 Display a Toast notification/05 Use the 'notify' Method.md index 878f8c3336..9064dd3c54 100644 --- a/concepts/05 UI Components/Toast/00 Getting Started with Toast/05 Display a Toast notification/05 Use the 'notify' Method.md +++ b/concepts/05 UI Components/Toast/00 Getting Started with Toast/05 Display a Toast notification/05 Use the 'notify' Method.md @@ -57,8 +57,8 @@ If you call the method that allows additional options, you can set the [width](/ - - + + diff --git a/concepts/05 UI Components/Toolbar/00 Getting Started with Toolbar/00 Getting Started with Toolbar.md b/concepts/05 UI Components/Toolbar/00 Getting Started with Toolbar/00 Getting Started with Toolbar.md index 75734f0a5d..2ec22adfc1 100644 --- a/concepts/05 UI Components/Toolbar/00 Getting Started with Toolbar/00 Getting Started with Toolbar.md +++ b/concepts/05 UI Components/Toolbar/00 Getting Started with Toolbar/00 Getting Started with Toolbar.md @@ -2,7 +2,7 @@ This tutorial shows how to add a Toolbar component to your application and configure its core features. -
    +
    Each section in this tutorial describes a single configuration step. You can also find the full code in the GitHub repository. diff --git a/concepts/05 UI Components/Toolbar/00 Getting Started with Toolbar/05 Create a Toolbar and its Items.md b/concepts/05 UI Components/Toolbar/00 Getting Started with Toolbar/05 Create a Toolbar and its Items.md index a04059e18e..9a0426f7ab 100644 --- a/concepts/05 UI Components/Toolbar/00 Getting Started with Toolbar/05 Create a Toolbar and its Items.md +++ b/concepts/05 UI Components/Toolbar/00 Getting Started with Toolbar/05 Create a Toolbar and its Items.md @@ -77,8 +77,8 @@ The following code creates a Toolbar and adds a [dxTextBox](/api-reference/10%20 - - + + diff --git a/concepts/05 UI Components/TreeList/00 Getting Started with TreeList/00 Getting Started with TreeList.md b/concepts/05 UI Components/TreeList/00 Getting Started with TreeList/00 Getting Started with TreeList.md index 2c4d3c8aa0..e9e40db34f 100644 --- a/concepts/05 UI Components/TreeList/00 Getting Started with TreeList/00 Getting Started with TreeList.md +++ b/concepts/05 UI Components/TreeList/00 Getting Started with TreeList/00 Getting Started with TreeList.md @@ -28,7 +28,7 @@ The Web Dashboard is available as a part of a Universal subscription. This tutorial shows how to add the TreeList to a page, bind it to data, and configure its core features. As a result, you will get a UI component that looks as follows: -
    +
    Each section in this tutorial covers a single configuration step. You can also find the full code in the following GitHub repository: getting-started-with-treelist. diff --git a/concepts/05 UI Components/TreeList/00 Getting Started with TreeList/02 Create a TreeList.md b/concepts/05 UI Components/TreeList/00 Getting Started with TreeList/02 Create a TreeList.md index b62c527a70..80c0e0830b 100644 --- a/concepts/05 UI Components/TreeList/00 Getting Started with TreeList/02 Create a TreeList.md +++ b/concepts/05 UI Components/TreeList/00 Getting Started with TreeList/02 Create a TreeList.md @@ -16,10 +16,10 @@ - + - + diff --git a/concepts/05 UI Components/TreeList/10 Columns/10 Column Types/5 AI Columns/10 Limit Data Passed to the AI Service.md b/concepts/05 UI Components/TreeList/10 Columns/10 Column Types/5 AI Columns/10 Limit Data Passed to the AI Service.md index 01eab3953e..f736534c6b 100644 --- a/concepts/05 UI Components/TreeList/10 Columns/10 Column Types/5 AI Columns/10 Limit Data Passed to the AI Service.md +++ b/concepts/05 UI Components/TreeList/10 Columns/10 Column Types/5 AI Columns/10 Limit Data Passed to the AI Service.md @@ -1,4 +1,4 @@ -Default AI requests include all data from rows visible in the {WidgetName} container. This data includes fields of hidden columns and fields not bound to a column. To save AI resources, you can configure the component to include only relevant data fields. Modify the **AIColumnRequestCreatingEvent**.[data](/Documentation/25_2/ApiReference/UI_Components/dxTreeList/Types/AIColumnRequestCreatingEvent/#data) parameter within [onAIColumnRequestCreating](/api-reference/10%20UI%20Components/dxTreeList/1%20Configuration/onAIColumnRequestCreating.md '/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/#onAIColumnRequestCreating') as follows: +Default AI requests include all data from rows visible in the {WidgetName} container. This data includes fields of hidden columns and fields not bound to a column. To save AI resources, you can configure the component to include only relevant data fields. Modify the **AIColumnRequestCreatingEvent**.[data](/Documentation/26_1/ApiReference/UI_Components/dxTreeList/Types/AIColumnRequestCreatingEvent/#data) parameter within [onAIColumnRequestCreating](/api-reference/10%20UI%20Components/dxTreeList/1%20Configuration/onAIColumnRequestCreating.md '/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/#onAIColumnRequestCreating') as follows: --- diff --git a/concepts/05 UI Components/TreeView/00 Getting Started with TreeView/00 Getting Started with TreeView.md b/concepts/05 UI Components/TreeView/00 Getting Started with TreeView/00 Getting Started with TreeView.md index 9d9e08e6d2..10bfec1fdb 100644 --- a/concepts/05 UI Components/TreeView/00 Getting Started with TreeView/00 Getting Started with TreeView.md +++ b/concepts/05 UI Components/TreeView/00 Getting Started with TreeView/00 Getting Started with TreeView.md @@ -4,7 +4,7 @@ The TreeView component displays a tree of text nodes from a local or remote sour This tutorial shows how to create and configure the TreeView. The demo below shows the resulting UI: -
    +
    Refer to the following sections for information on each configuration step. You can also find the full code in the GitHub repository. diff --git a/concepts/05 UI Components/TreeView/00 Getting Started with TreeView/02 Create a TreeView.md b/concepts/05 UI Components/TreeView/00 Getting Started with TreeView/02 Create a TreeView.md index 4fc35c275d..a56b7cc572 100644 --- a/concepts/05 UI Components/TreeView/00 Getting Started with TreeView/02 Create a TreeView.md +++ b/concepts/05 UI Components/TreeView/00 Getting Started with TreeView/02 Create a TreeView.md @@ -17,10 +17,10 @@ - + - + diff --git a/concepts/05 UI Components/VectorMap/20 Providing Data/10 Data for Areas/20 Using a Script.md b/concepts/05 UI Components/VectorMap/20 Providing Data/10 Data for Areas/20 Using a Script.md index 9b7db0b494..e115cb9ec5 100644 --- a/concepts/05 UI Components/VectorMap/20 Providing Data/10 Data for Areas/20 Using a Script.md +++ b/concepts/05 UI Components/VectorMap/20 Providing Data/10 Data for Areas/20 Using a Script.md @@ -23,12 +23,12 @@ To use one of these sources on your map, reference the corresponding file in the Alternatively, the same data sources can be accessed and referenced using the DevExpress CDN. - - - - - - + + + + + + After that, set the [dataSource](/api-reference/10%20UI%20Components/dxVectorMap/1%20Configuration/layers/dataSource.md '/Documentation/ApiReference/UI_Components/dxVectorMap/Configuration/layers/#dataSource') property for a layer to the array defined in the referenced file. diff --git a/concepts/34 ASP.NET MVC Controls/20 Fundamentals/Fundamentals.md b/concepts/34 ASP.NET MVC Controls/20 Fundamentals/Fundamentals.md index 72aa1a1977..043d0be3a0 100644 --- a/concepts/34 ASP.NET MVC Controls/20 Fundamentals/Fundamentals.md +++ b/concepts/34 ASP.NET MVC Controls/20 Fundamentals/Fundamentals.md @@ -1,6 +1,6 @@ #include mvc-redirects with { - mvc: "https://docs.devexpress.com/DevExtremeAspNetMvc/400703/?v=25.2", - core: "https://docs.devexpress.com/AspNetCore/400574/?v=25.2" + mvc: "https://docs.devexpress.com/DevExtremeAspNetMvc/400703/?v=26.1", + core: "https://docs.devexpress.com/AspNetCore/400574/?v=26.1" } [tags] jquery diff --git a/concepts/34 ASP.NET MVC Controls/30 Data Binding/Data Binding.md b/concepts/34 ASP.NET MVC Controls/30 Data Binding/Data Binding.md index 0845e6e4a4..6f2b1babb2 100644 --- a/concepts/34 ASP.NET MVC Controls/30 Data Binding/Data Binding.md +++ b/concepts/34 ASP.NET MVC Controls/30 Data Binding/Data Binding.md @@ -1,6 +1,6 @@ #include mvc-redirects with { - mvc: "https://docs.devexpress.com/DevExtremeAspNetMvc/400704/?v=25.2", - core: "https://docs.devexpress.com/AspNetCore/400575/?v=25.2" + mvc: "https://docs.devexpress.com/DevExtremeAspNetMvc/400704/?v=26.1", + core: "https://docs.devexpress.com/AspNetCore/400575/?v=26.1" } [tags] jquery diff --git a/concepts/37 ASP.NET Core.md b/concepts/37 ASP.NET Core.md index e39530feee..6c94c3b47e 100644 --- a/concepts/37 ASP.NET Core.md +++ b/concepts/37 ASP.NET Core.md @@ -1,3 +1,3 @@ -Starting from v19.1, ASP.NET Core Controls documentation is available at docs.devexpress.com. +Starting from v19.1, ASP.NET Core Controls documentation is available at docs.devexpress.com. [tags] jquery diff --git a/concepts/40 Angular Components/00 DevExtreme Angular Components.md b/concepts/40 Angular Components/00 DevExtreme Angular Components.md index 49612e2c13..6185b29d65 100644 --- a/concepts/40 Angular Components/00 DevExtreme Angular Components.md +++ b/concepts/40 Angular Components/00 DevExtreme Angular Components.md @@ -2,7 +2,7 @@ The DevExtreme Angular UI Component Suite offers 80+ responsive, touch-enabled U ## Explore All 80+ Angular Components -
    +
    ## Try DevExtreme Components in Your Project @@ -44,4 +44,4 @@ Angular-specific features include: - [Tree Shaking](/concepts/40%20Angular%20Components/40%20Common%20Features/10%20Tree%20Shaking.md '/Documentation/Guide/Angular_Components/Common_Features/Tree_Shaking/') - [Intercept HTTP Requests](/concepts/40%20Angular%20Components/40%20Common%20Features/15%20Intercept%20HTTP%20Requests.md '/Documentation/Guide/Angular_Components/Common_Features/Intercept_HTTP_Requests/') -[tags] angular \ No newline at end of file +[tags] angular diff --git a/concepts/40 Angular Components/80 Supported Versions.md b/concepts/40 Angular Components/80 Supported Versions.md index f7e8c5de8d..4a23c8b3eb 100644 --- a/concepts/40 Angular Components/80 Supported Versions.md +++ b/concepts/40 Angular Components/80 Supported Versions.md @@ -1,10 +1,14 @@ -[note] DevExtreme v25.2 supports [Angular 21](https://blog.angular.dev/announcing-angular-v21-57946c34f14b). Tests show full compatibility with DevExtreme UI components. +[note] DevExtreme v26.1 supports [Angular 21](https://blog.angular.dev/announcing-angular-v21-57946c34f14b). Tests show full compatibility with DevExtreme UI components. + + + + diff --git a/concepts/50 React Components/00 DevExtreme React Components.md b/concepts/50 React Components/00 DevExtreme React Components.md index 77795dca39..38df1c6b3d 100644 --- a/concepts/50 React Components/00 DevExtreme React Components.md +++ b/concepts/50 React Components/00 DevExtreme React Components.md @@ -2,7 +2,7 @@ The DevExtreme React UI Component Suite offers 80+ responsive, touch-enabled UI ## Explore All 80+ React Components -
    +
    ## Try DevExtreme Components in Your Project @@ -43,4 +43,4 @@ React-specific features include: - [State Management](/concepts/50%20React%20Components/20%20State%20Management '/Documentation/Guide/React_Components/State_Management/') - [Testing](/concepts/50%20React%20Components/60%20Components%20Testing/00%20Components%20Testing.md '/Documentation/Guide/React_Components/Components_Testing/') -[tags] react \ No newline at end of file +[tags] react diff --git a/concepts/50 React Components/80 Supported Versions.md b/concepts/50 React Components/80 Supported Versions.md index 747fe6d243..f472ae9e85 100644 --- a/concepts/50 React Components/80 Supported Versions.md +++ b/concepts/50 React Components/80 Supported Versions.md @@ -3,6 +3,10 @@ + + + + diff --git a/concepts/55 Vue Components/00 DevExtreme Vue Components.md b/concepts/55 Vue Components/00 DevExtreme Vue Components.md index 03d72473bf..9258f61792 100644 --- a/concepts/55 Vue Components/00 DevExtreme Vue Components.md +++ b/concepts/55 Vue Components/00 DevExtreme Vue Components.md @@ -2,7 +2,7 @@ The DevExtreme Vue UI Component Suite offers 80+ responsive, touch-enabled UI co ## Explore All 80+ Vue Components -
    +
    ## Try DevExtreme Components in Your Project @@ -40,4 +40,4 @@ Vue-specific features include: - [TypeScript Support](/concepts/Common/TypeScript%20Guides/05%20Scopes%20of%20Types/00%20Scopes%20of%20Types.md 'Documentation/Guide/Common/TypeScript_Guides/Scopes_of_Types/') -[tags] vue \ No newline at end of file +[tags] vue diff --git a/concepts/55 Vue Components/80 Supported Versions.md b/concepts/55 Vue Components/80 Supported Versions.md index d67ef202df..a0460d3383 100644 --- a/concepts/55 Vue Components/80 Supported Versions.md +++ b/concepts/55 Vue Components/80 Supported Versions.md @@ -3,6 +3,10 @@ + + + + diff --git a/concepts/58 jQuery Components/00 DevExtreme jQuery Components.md b/concepts/58 jQuery Components/00 DevExtreme jQuery Components.md index 4ac1b17d18..791f4e6768 100644 --- a/concepts/58 jQuery Components/00 DevExtreme jQuery Components.md +++ b/concepts/58 jQuery Components/00 DevExtreme jQuery Components.md @@ -2,7 +2,7 @@ The DevExtreme jQuery UI Component Suite offers 80+ responsive, touch-enabled UI ## Explore All 80+ jQuery Components -
    +
    ## Try DevExtreme Components in Your Project diff --git a/concepts/58 jQuery Components/05 Add DevExtreme to a jQuery Application/05 CDN Files.md b/concepts/58 jQuery Components/05 Add DevExtreme to a jQuery Application/05 CDN Files.md index c434140331..d77de12f4a 100644 --- a/concepts/58 jQuery Components/05 Add DevExtreme to a jQuery Application/05 CDN Files.md +++ b/concepts/58 jQuery Components/05 Add DevExtreme to a jQuery Application/05 CDN Files.md @@ -6,12 +6,12 @@ Link DevExtreme scripts and stylesheets within the `` tag on your index pa - + - - - + + + diff --git a/concepts/58 jQuery Components/05 Add DevExtreme to a jQuery Application/10 Local Files.md b/concepts/58 jQuery Components/05 Add DevExtreme to a jQuery Application/10 Local Files.md index 93d2dfcaae..f4a2d56c38 100644 --- a/concepts/58 jQuery Components/05 Add DevExtreme to a jQuery Application/10 Local Files.md +++ b/concepts/58 jQuery Components/05 Add DevExtreme to a jQuery Application/10 Local Files.md @@ -1,4 +1,4 @@ -You can find all required files in the DevExtreme folder (%ProgramFiles%\DevExpress 25.2\DevExtreme\Sources) if you used the Unified Component installer. Copy the Lib folder into the folder with your application. Then, link jQuery and DevExtreme stylesheets and scripts in the index page's `` tag in the following order: +You can find all required files in the DevExtreme folder (%ProgramFiles%\DevExpress 26.1\DevExtreme\Sources) if you used the Unified Component installer. Copy the Lib folder into the folder with your application. Then, link jQuery and DevExtreme stylesheets and scripts in the index page's `` tag in the following order: diff --git a/concepts/60 Themes and Styles/30 Icons/10 Built-In Icon Library.md b/concepts/60 Themes and Styles/30 Icons/10 Built-In Icon Library.md index ca6b99cdfe..2f7ead464a 100644 --- a/concepts/60 Themes and Styles/30 Icons/10 Built-In Icon Library.md +++ b/concepts/60 Themes and Styles/30 Icons/10 Built-In Icon Library.md @@ -2,9 +2,9 @@ DevExtreme includes an icon library with SVG and font icons for all DevExtreme t The following icons are available: -
    +
    You can find source icons in DevExtreme's GitHub repository: -- Font icons -- SVG icons +- Font icons +- SVG icons diff --git a/concepts/60 Themes and Styles/30 Icons/60 SVG Icons.md b/concepts/60 Themes and Styles/30 Icons/60 SVG Icons.md index f51d1e9953..d1e6732937 100644 --- a/concepts/60 Themes and Styles/30 Icons/60 SVG Icons.md +++ b/concepts/60 Themes and Styles/30 Icons/60 SVG Icons.md @@ -1,4 +1,4 @@ -In addition to font icons, DevExtreme supplies the same icons in the SVG format. You can find SVG icons in the [DevExtreme repository](https://github.com/DevExpress/DevExtreme/tree/25_2/packages/devextreme-scss/images/icons) on GitHub. +In addition to font icons, DevExtreme supplies the same icons in the SVG format. You can find SVG icons in the [DevExtreme repository](https://github.com/DevExpress/DevExtreme/tree/26_1/packages/devextreme-scss/images/icons) on GitHub. The following code uses SVG icons in the [Button](https://js.devexpress.com/Demos/WidgetsGallery/Demo/Button/Icons) UI component. The same technique can be used with any other UI component that has the [icon](/api-reference/10%20UI%20Components/dxButton/1%20Configuration/icon.md '/Documentation/ApiReference/UI_Components/dxButton/Configuration/#icon') property. diff --git a/concepts/Common/DevExtreme CLI/50 ThemeBuilder/00 ThemeBuilder.md b/concepts/Common/DevExtreme CLI/50 ThemeBuilder/00 ThemeBuilder.md index b0796b87ee..357e3ae3f3 100644 --- a/concepts/Common/DevExtreme CLI/50 ThemeBuilder/00 ThemeBuilder.md +++ b/concepts/Common/DevExtreme CLI/50 ThemeBuilder/00 ThemeBuilder.md @@ -10,7 +10,7 @@ If your application uses npm v7 or later, open `package.json` and ensure the fol If these conditions are not met, run the following commands to install the packages: - npm i devextreme@25.2 --save --save-exact - npm i devextreme-themebuilder@25.2 --save-dev --save-exact + npm i devextreme@26.1 --save --save-exact + npm i devextreme-themebuilder@26.1 --save-dev --save-exact [/important] diff --git a/concepts/Common/DevExtreme CLI/50 ThemeBuilder/08 Export Theme Metadata.md b/concepts/Common/DevExtreme CLI/50 ThemeBuilder/08 Export Theme Metadata.md index 22054be733..abc30e8f1e 100644 --- a/concepts/Common/DevExtreme CLI/50 ThemeBuilder/08 Export Theme Metadata.md +++ b/concepts/Common/DevExtreme CLI/50 ThemeBuilder/08 Export Theme Metadata.md @@ -14,7 +14,7 @@ Theme metadata is a JSON object that describes the theme. It is used to export o "baseTheme": "material.blue.light.compact", "outputColorScheme": "custom-scheme", "makeSwatch": true, - "version": "minor_25_2", + "version": "minor_26_1", "widgets": ["datagrid","treelist","selectbox"], "assetsBasePath": "../../../node_modules/devextreme/dist/css/" } diff --git a/concepts/Common/Distribution Channels/01 npm.md b/concepts/Common/Distribution Channels/01 npm.md index ba46baf29c..a8d7e07628 100644 --- a/concepts/Common/Distribution Channels/01 npm.md +++ b/concepts/Common/Distribution Channels/01 npm.md @@ -5,11 +5,11 @@ You can use **npm** to deliver published version. It can be stable or pre-release. Pre-release versions contain hotfixes and new features for early testing. - npm install devextreme-dist@25.2-next --save --save-exact + npm install devextreme-dist@26.1-next --save --save-exact [note] We recommend saving an exact version of DevExtreme to avoid unexpected updates because DevExtreme does not use Semantic Versioning. In our versioning system, the first and middle numbers indicate a major release which may contain behavior changes. @@ -22,15 +22,15 @@ You can use **npm** to deliver DevExtreme to an Angular application. The followi Install the latest stable version: - npm install devextreme@25.2 --save --save-exact + npm install devextreme@26.1 --save --save-exact - npm install devextreme-angular@25.2 --save --save-exact + npm install devextreme-angular@26.1 --save --save-exact Install the latest published version. It can be stable or pre-release. Pre-release versions contain hotfixes and new features for early testing. - npm install devextreme@25.2-next --save --save-exact + npm install devextreme@26.1-next --save --save-exact - npm install devextreme-angular@25.2-next --save --save-exact + npm install devextreme-angular@26.1-next --save --save-exact [note] We recommend saving an exact version of DevExtreme to avoid unexpected updates because DevExtreme does not use Semantic Versioning. In our versioning system, the first and middle numbers indicate a major release which may contain behavior changes. @@ -46,15 +46,15 @@ You can use **npm** to deliver DevExtreme to a Vue application. The following pa Install the latest stable version: - npm install devextreme@25.2 --save --save-exact + npm install devextreme@26.1 --save --save-exact - npm install devextreme-vue@25.2 --save --save-exact + npm install devextreme-vue@26.1 --save --save-exact Install the latest published version. It can be stable or pre-release. Pre-release versions contain hotfixes and new features for early testing. - npm install devextreme@25.2-next --save --save-exact + npm install devextreme@26.1-next --save --save-exact - npm install devextreme-vue@25.2-next --save --save-exact + npm install devextreme-vue@26.1-next --save --save-exact [note] We recommend saving an exact version of DevExtreme to avoid unexpected updates because DevExtreme does not use Semantic Versioning. In our versioning system, the first and middle numbers indicate a major release which may contain behavior changes. @@ -70,15 +70,15 @@ You can use **npm** to deliver DevExtreme to a React application. The following Install the latest stable version: - npm install devextreme@25.2 --save --save-exact + npm install devextreme@26.1 --save --save-exact - npm install devextreme-react@25.2 --save --save-exact + npm install devextreme-react@26.1 --save --save-exact Install the latest published version. It can be stable or pre-release. Pre-release versions contain hotfixes and new features for early testing. - npm install devextreme@25.2-next --save --save-exact + npm install devextreme@26.1-next --save --save-exact - npm install devextreme-react@25.2-next --save --save-exact + npm install devextreme-react@26.1-next --save --save-exact [note] We recommend saving an exact version of DevExtreme to avoid unexpected updates because DevExtreme does not use Semantic Versioning. In our versioning system, the first and middle numbers indicate a major release which may contain behavior changes. diff --git a/concepts/Common/Distribution Channels/03 Yarn.md b/concepts/Common/Distribution Channels/03 Yarn.md index 0182588659..8ac7b2964f 100644 --- a/concepts/Common/Distribution Channels/03 Yarn.md +++ b/concepts/Common/Distribution Channels/03 Yarn.md @@ -5,11 +5,11 @@ You can use **Yarn** to install the published version. It can be stable or pre-release. Pre-release versions contain hotfixes and new features for early testing. - yarn add devextreme@25.2-next --exact + yarn add devextreme@26.1-next --exact [note] We recommend saving an exact version of DevExtreme to avoid unexpected updates because DevExtreme does not use Semantic Versioning. In our versioning system, the first and middle numbers indicate a major release which may contain behavior changes. @@ -22,15 +22,15 @@ You can use **Yarn** to install the following DevExtreme npm packages: Install the latest stable version: - yarn add devextreme@25.2 --exact + yarn add devextreme@26.1 --exact - yarn add devextreme-angular@25.2 --exact + yarn add devextreme-angular@26.1 --exact Install the latest published version. It can be stable or pre-release. Pre-release versions contain hotfixes and new features for early testing. - yarn add devextreme@25.2-next --exact + yarn add devextreme@26.1-next --exact - yarn add devextreme-angular@25.2-next --exact + yarn add devextreme-angular@26.1-next --exact [note] We recommend saving an exact version of DevExtreme to avoid unexpected updates because DevExtreme does not use Semantic Versioning. In our versioning system, the first and middle numbers indicate a major release which may contain behavior changes. @@ -46,15 +46,15 @@ You can use **Yarn** to install the following DevExtreme npm packages: Install the latest stable version: - yarn add devextreme@25.2 --exact + yarn add devextreme@26.1 --exact - yarn add devextreme-vue@25.2 --exact + yarn add devextreme-vue@26.1 --exact Install the latest published version. It can be stable or pre-release. Pre-release versions contain hotfixes and new features for early testing. - yarn add devextreme@25.2-next --exact + yarn add devextreme@26.1-next --exact - yarn add devextreme-vue@25.2-next --exact + yarn add devextreme-vue@26.1-next --exact [note] We recommend saving an exact version of DevExtreme to avoid unexpected updates because DevExtreme does not use Semantic Versioning. In our versioning system, the first and middle numbers indicate a major release which may contain behavior changes. @@ -70,15 +70,15 @@ You can use **Yarn** to install the following DevExtreme npm packages: Install the latest stable version: - yarn add devextreme@25.2 --exact + yarn add devextreme@26.1 --exact - yarn add devextreme-react@25.2 --exact + yarn add devextreme-react@26.1 --exact Install the latest published version. It can be stable or pre-release. Pre-release versions contain hotfixes and new features for early testing. - yarn add devextreme@25.2-next --exact + yarn add devextreme@26.1-next --exact - yarn add devextreme-react@25.2-next --exact + yarn add devextreme-react@26.1-next --exact [note] We recommend saving an exact version of DevExtreme to avoid unexpected updates because DevExtreme does not use Semantic Versioning. In our versioning system, the first and middle numbers indicate a major release which may contain behavior changes. diff --git a/concepts/Common/Distribution Channels/10 NuGet.md b/concepts/Common/Distribution Channels/10 NuGet.md index 685283c861..69aa2de41d 100644 --- a/concepts/Common/Distribution Channels/10 NuGet.md +++ b/concepts/Common/Distribution Channels/10 NuGet.md @@ -1,6 +1,6 @@ When you use Visual Studio, you can get the DevExtreme scripts and stylesheets from the DevExtreme Web NuGet package. Run the following command in the Package Manager Console to install this package: - Install-Package DevExtreme.Web -Version minor_25_2_package + Install-Package DevExtreme.Web -Version minor_26_1_package You can also use the Manage NuGet Packages dialog to install or update the package. diff --git a/concepts/Common/Distribution Channels/20 Installer for Windows.md b/concepts/Common/Distribution Channels/20 Installer for Windows.md index 8480c0d86c..d51c75cc65 100644 --- a/concepts/Common/Distribution Channels/20 Installer for Windows.md +++ b/concepts/Common/Distribution Channels/20 Installer for Windows.md @@ -1,5 +1,5 @@ The installer for Windows provides Visual Studio integration features, such as project scaffolding. Use it if you develop applications in Visual Studio. -After the installation, you can find the DevExtreme sources in the %ProgramFiles%\DevExpress 25.2\DevExtreme folder. +After the installation, you can find the DevExtreme sources in the %ProgramFiles%\DevExpress 26.1\DevExtreme folder. Download installer for Windows diff --git a/concepts/Common/Integration Guides/30 Create a DevExtreme application with Vite.js/30 Create a DevExtreme application with Vite.js.md b/concepts/Common/Integration Guides/30 Create a DevExtreme application with Vite.js/30 Create a DevExtreme application with Vite.js.md index 782cc46a74..03f909666e 100644 --- a/concepts/Common/Integration Guides/30 Create a DevExtreme application with Vite.js/30 Create a DevExtreme application with Vite.js.md +++ b/concepts/Common/Integration Guides/30 Create a DevExtreme application with Vite.js/30 Create a DevExtreme application with Vite.js.md @@ -30,8 +30,8 @@ Add the following dependencies to the `package.json` file: "dependencies": { - "devextreme": "^25.2", - "devextreme-vue": "^25.2", + "devextreme": "^26.1", + "devextreme-vue": "^26.1", ... } diff --git a/concepts/Common/Licensing/30 FAQ.md b/concepts/Common/Licensing/30 FAQ.md index bbc7bc8aa4..c8e2e2fe68 100644 --- a/concepts/Common/Licensing/30 FAQ.md +++ b/concepts/Common/Licensing/30 FAQ.md @@ -18,7 +18,7 @@ A: License keys are public due to the client-side nature of JS apps. If you disc **Q: Can I revoke license keys if an employee quits and I need to invalidate their key?** -A: No, revoking keys is not possible due to the offline nature of the key validation process. Once issued for a DevExtreme version (e.g., 25.2), a key will remain valid indefinitely for all minor updates and security issues. +A: No, revoking keys is not possible due to the offline nature of the key validation process. Once issued for a DevExtreme version (e.g., 26.1), a key will remain valid indefinitely for all minor updates and security issues.
    diff --git a/concepts/Common/Localization/01 Dictionaries/02 Create a New Dictionary.md b/concepts/Common/Localization/01 Dictionaries/02 Create a New Dictionary.md index d039d47d9f..91f53e339a 100644 --- a/concepts/Common/Localization/01 Dictionaries/02 Create a New Dictionary.md +++ b/concepts/Common/Localization/01 Dictionaries/02 Create a New Dictionary.md @@ -4,5 +4,5 @@ To make a dictionary for a new locale: 2. Rename it according to the new locale. 3. Translate the strings in it and change the locale key. -You can submit JSON dictionaries to our repository on GitHub. You should refer to our Contribution Guide before submitting content. +You can submit JSON dictionaries to our repository on GitHub. You should refer to our Contribution Guide before submitting content. diff --git a/concepts/Common/Localization/01 Dictionaries/07 Override Strings in a Dictionary.md b/concepts/Common/Localization/01 Dictionaries/07 Override Strings in a Dictionary.md index 4b98f76842..b4e14adff8 100644 --- a/concepts/Common/Localization/01 Dictionaries/07 Override Strings in a Dictionary.md +++ b/concepts/Common/Localization/01 Dictionaries/07 Override Strings in a Dictionary.md @@ -1,6 +1,6 @@ -To override a string, find its key in any dictionary and use it to specify the new string value. +To override a string, find its key in any dictionary and use it to specify the new string value. -In the following code, we override two strings from the English dictionary: +In the following code, we override two strings from the English dictionary: --- ##### jQuery diff --git a/concepts/Common/Localization/01 Dictionaries/Dictionaries.md b/concepts/Common/Localization/01 Dictionaries/Dictionaries.md index a9b31d9a0a..d8665496f7 100644 --- a/concepts/Common/Localization/01 Dictionaries/Dictionaries.md +++ b/concepts/Common/Localization/01 Dictionaries/Dictionaries.md @@ -1,6 +1,6 @@ Dictionaries contain localized strings for different languages. The strings are key/value pairs and are shipped as JavaScript or JSON files (depending on the package you use). -All dictionaries are contributed and curated by the community. The list of dictionaries is available on GitHub. +All dictionaries are contributed and curated by the community. The list of dictionaries is available on GitHub. --- ##### jQuery @@ -13,9 +13,9 @@ Use the ` + - + + - + diff --git a/concepts/Common/Localization/05 Localize Dates, Numbers, and Currencies/10 Using Globalize.md b/concepts/Common/Localization/05 Localize Dates, Numbers, and Currencies/10 Using Globalize.md index 04b6aae8da..98340a0575 100644 --- a/concepts/Common/Localization/05 Localize Dates, Numbers, and Currencies/10 Using Globalize.md +++ b/concepts/Common/Localization/05 Localize Dates, Numbers, and Currencies/10 Using Globalize.md @@ -42,9 +42,9 @@ To include these components, you can use CDN or npm. - + - + diff --git a/concepts/Common/Migrate to the New Version/10 Upgrade DevExtreme Sources/1 Local Files.md b/concepts/Common/Migrate to the New Version/10 Upgrade DevExtreme Sources/1 Local Files.md index 5c14df39a3..3ae36e2015 100644 --- a/concepts/Common/Migrate to the New Version/10 Upgrade DevExtreme Sources/1 Local Files.md +++ b/concepts/Common/Migrate to the New Version/10 Upgrade DevExtreme Sources/1 Local Files.md @@ -1,3 +1,3 @@ -Replace older DevExtreme files with the latest version. You can find the new files in the DevExtreme zip archive or DevExtreme folder (C:\Program Files\DevExpress 25.2\DevExtreme\Sources\Lib by default). +Replace older DevExtreme files with the latest version. You can find the new files in the DevExtreme zip archive or DevExtreme folder (C:\Program Files\DevExpress 26.1\DevExtreme\Sources\Lib by default). If you customized the old CSS files, you should make the same changes to the new CSS files and only then use them as a replacement. diff --git a/concepts/Common/Migrate to the New Version/10 Upgrade DevExtreme Sources/7 npm Packages.md b/concepts/Common/Migrate to the New Version/10 Upgrade DevExtreme Sources/7 npm Packages.md index 1e1f0608dc..fc478aef85 100644 --- a/concepts/Common/Migrate to the New Version/10 Upgrade DevExtreme Sources/7 npm Packages.md +++ b/concepts/Common/Migrate to the New Version/10 Upgrade DevExtreme Sources/7 npm Packages.md @@ -3,36 +3,36 @@ Run the following commands: --- ##### jQuery - npm install devextreme-dist@25.2 --save --save-exact + npm install devextreme-dist@26.1 --save --save-exact ##### Angular - npm install devextreme@25.2 --save --save-exact + npm install devextreme@26.1 --save --save-exact - npm install devextreme-angular@25.2 --save --save-exact + npm install devextreme-angular@26.1 --save --save-exact // If the application is created using the DevExtreme CLI - npm install devextreme-themebuilder@25.2 --save --save-exact + npm install devextreme-themebuilder@26.1 --save --save-exact npm run build-themes ##### Vue - npm install devextreme@25.2 --save --save-exact + npm install devextreme@26.1 --save --save-exact - npm install devextreme-vue@25.2 --save --save-exact + npm install devextreme-vue@26.1 --save --save-exact // If the application is created using the DevExtreme CLI - npm install devextreme-themebuilder@25.2 --save --save-exact + npm install devextreme-themebuilder@26.1 --save --save-exact npm run build-themes ##### React - npm install devextreme@25.2 --save --save-exact + npm install devextreme@26.1 --save --save-exact - npm install devextreme-react@25.2 --save --save-exact + npm install devextreme-react@26.1 --save --save-exact // If the application is created using the DevExtreme CLI - npm install devextreme-themebuilder@25.2 --save --save-exact + npm install devextreme-themebuilder@26.1 --save --save-exact npm run build-themes --- diff --git a/concepts/Common/Migrate to the New Version/40 Learn What's New.md b/concepts/Common/Migrate to the New Version/40 Learn What's New.md index 51841916f3..86ebf04345 100644 --- a/concepts/Common/Migrate to the New Version/40 Learn What's New.md +++ b/concepts/Common/Migrate to the New Version/40 Learn What's New.md @@ -1 +1 @@ -See [What's New in v25.1](https://js.devexpress.com/New/25_2) to learn about the new features, or browse the DevExtreme version history for details on which features any major or minor release implemented and the issues they resolved. +See [What's New in v26.1](https://js.devexpress.com/New/26_1) to learn about the new features, or browse the DevExtreme version history for details on which features any major or minor release implemented and the issues they resolved. diff --git a/concepts/Common/Migrate to the New Version/50 Learn Breaking Changes and Deprecated API/0 Learn Breaking Changes and Deprecated API.md b/concepts/Common/Migrate to the New Version/50 Learn Breaking Changes and Deprecated API/0 Learn Breaking Changes and Deprecated API.md index eb9d128b25..981fd2c583 100644 --- a/concepts/Common/Migrate to the New Version/50 Learn Breaking Changes and Deprecated API/0 Learn Breaking Changes and Deprecated API.md +++ b/concepts/Common/Migrate to the New Version/50 Learn Breaking Changes and Deprecated API/0 Learn Breaking Changes and Deprecated API.md @@ -1,7 +1,7 @@ We always do our best to minimize the impact an upgrade has on existing projects. However, it is often necessary to change our tools' UI, API, or behavior to improve them. Take the following into account to ensure that your app works after upgrading: * **Breaking Changes** -Refer to the breaking changes introduced in v25.1. Follow the instructions given for each change to mitigate its possible impact. +Refer to the breaking changes introduced in v25.1. Follow the instructions given for each change to mitigate its possible impact. * **Deprecated API** We recommend replacing [deprecated properties and methods](/concepts/Common/Migrate%20to%20the%20New%20Version/50%20Learn%20Breaking%20Changes%20and%20Deprecated%20API/1%20Deprecated%20Properties%20and%20Methods.md '/Documentation/Guide/Common/Migrate_to_the_New_Version/#Learn_Breaking_Changes_and_Deprecated_API/Deprecated_Properties_and_Methods') with their relevant counterparts because they can break your app once they are removed. Run the upgraded app and open the browser's console. A notification suggesting replacements is displayed if your code uses a deprecated API. Update your code to use the replacements instead of the deprecated API. diff --git a/concepts/Common/Migrate to the New Version/50 Learn Breaking Changes and Deprecated API/1 Deprecated Properties and Methods.md b/concepts/Common/Migrate to the New Version/50 Learn Breaking Changes and Deprecated API/1 Deprecated Properties and Methods.md index bdb54b9ce7..70bb349eb2 100644 --- a/concepts/Common/Migrate to the New Version/50 Learn Breaking Changes and Deprecated API/1 Deprecated Properties and Methods.md +++ b/concepts/Common/Migrate to the New Version/50 Learn Breaking Changes and Deprecated API/1 Deprecated Properties and Methods.md @@ -5,70 +5,70 @@ - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + -
    DevExtreme Angular
    v26.1.xangular_version_26_1
    v25.2.x angular_version_25_2DevExtreme React
    v26.1.xreact_version_26_1
    v25.2.x react_version_25_2DevExtreme Vue
    v26.1.xvue_version_26_1
    v25.2.x vue_version_25_2
    CardViewallowSearch
    searchTimeout
    allowSearch
    searchMode
    allowSearch
    searchTimeout
    allowSearch
    searchMode    		allowSearch
    searchTimeout
    allowSearch
    searchMode
    allowSearch
    searchTimeout
    allowSearch
    searchMode
    ColorBoxfieldComponent
    fieldRender
    fieldTemplate    		fieldComponent
    fieldRender
    fieldTemplate
    DataGridallowSearch
    searchTimeout
    allowSearch
    searchMode
    rowComponent
    rowDragging.filter
    rowRender
    rowTemplate    		allowSearch
    searchTimeout
    allowSearch
    searchMode
    rowComponent
    rowDragging.filter
    rowRender
    rowTemplate
    DropDownBoxfieldComponent
    fieldRender
    fieldTemplate    		fieldComponent
    fieldRender
    fieldTemplate
    GanttallowSearch
    searchMode
    allowSearch
    searchTimeout    		allowSearch
    searchMode
    allowSearch
    searchTimeout
    LoadPanelindicatorSrcindicatorSrc
    MapapiKey.bing
    providerConfig.useAdvancedMarkers    		apiKey.bing
    providerConfig.useAdvancedMarkers
    PivotGridheaderFilter.allowSearch
    headerFilter.searchTimeout    		headerFilter.allowSearch
    headerFilter.searchTimeout
    PivotGridFieldChooserheaderFilter.allowSearch
    headerFilter.searchTimeout    		headerFilter.allowSearch
    headerFilter.searchTimeout
    SelectBoxfieldComponent
    fieldRender
    fieldTemplate    		fieldComponent
    fieldRender
    fieldTemplate
    TagBoxfieldComponent
    fieldRender
    fieldTemplate    		fieldComponent
    fieldRender
    fieldTemplate
    TreeListallowSearch
    searchTimeout
    allowSearch
    searchMode
    rowDragging.filter    		allowSearch
    searchTimeout
    allowSearch
    searchMode
    rowDragging.filter
    PivotGridDataSourcefields.headerFilter.allowSearchfields.headerFilter.allowSearch
    UtilserrorHandlererrorHandler
    dataResolvedDataResolvedData
    gridsallowSearch
    searchTimeout
    allowSearch
    searchMode
    allowSearch
    searchTimeout
    indicatorSrc
    filter    		allowSearch
    searchTimeout
    allowSearch
    searchMode
    allowSearch
    searchTimeout
    indicatorSrc
    filter
    Object StructuresdecimalSeparator
    thousandsSeparator
    indicatorSrc    		decimalSeparator
    thousandsSeparator
    indicatorSrc
    \ No newline at end of file + diff --git a/concepts/Common/Modularity/015 Create a Custom Bundle/Create a Custom Bundle.md b/concepts/Common/Modularity/015 Create a Custom Bundle/Create a Custom Bundle.md index 8d6658867a..00c0a3f290 100644 --- a/concepts/Common/Modularity/015 Create a Custom Bundle/Create a Custom Bundle.md +++ b/concepts/Common/Modularity/015 Create a Custom Bundle/Create a Custom Bundle.md @@ -25,6 +25,6 @@ Incorporate themes into your application: - + [tags] jquery diff --git a/includes/ng-install-devextreme.md b/includes/ng-install-devextreme.md index c2e7820630..c8190518b4 100644 --- a/includes/ng-install-devextreme.md +++ b/includes/ng-install-devextreme.md @@ -1,5 +1,5 @@ Install the `devextreme` and `devextreme-angular` npm packages: - npm install devextreme@25.2 devextreme-angular@25.2 --save --save-exact + npm install devextreme@26.1 devextreme-angular@26.1 --save --save-exact [note] We recommend saving an exact version of DevExtreme to avoid unexpected updates because DevExtreme does not use Semantic Versioning. In our versioning system, the first and middle numbers indicate a major release which may contain behavior changes. diff --git a/includes/texteditor-labelMode.md b/includes/texteditor-labelMode.md index 39d1ce624a..906d2686ae 100644 --- a/includes/texteditor-labelMode.md +++ b/includes/texteditor-labelMode.md @@ -9,17 +9,17 @@ This property can have one of the following values: "static" The label is displayed above the input field. -
    +
    "floating" The label is used as a placeholder, but when the editor gets focus,
    the label moves to the position above the input field. -
    +
    "hidden" The label is hidden. -
    +
    ${{outside_mode}} diff --git a/includes/tutorials-editors-create-an-editor.md b/includes/tutorials-editors-create-an-editor.md index 14f1e5a10c..7a133623b4 100644 --- a/includes/tutorials-editors-create-an-editor.md +++ b/includes/tutorials-editors-create-an-editor.md @@ -14,8 +14,8 @@ Use the code below to create an empty {WidgetName}: - - + + diff --git a/package.json b/package.json index 5e4c49dcff..af8de73708 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "devextreme-documentation", "description": "DevExtreme documentation", "author": "Developer Express Inc.", - "version": "25.2.0", + "version": "26.1.0", "license": "UNLICENSED", "repository": { "type": "git", @@ -14,9 +14,9 @@ }, "scripts": { "make-compact-docs": "dx-tools make-compact-docs --docs-root-path ./", - "generate-content-map": "dx-tools make-content-map --docs-root-path ./ --version 25.2 --syntax-meta-path ./metadata/syntax-data.json", + "generate-content-map": "dx-tools make-content-map --docs-root-path ./ --version 26.1 --syntax-meta-path ./metadata/syntax-data.json", "generate-syntax-data": "dx-tools make-syntax-metadata --output-path ./metadata/syntax-data.json", - "generate-extra-topic": "dx-tools generate-extra-topics --docs-root-path ./ --version 25.2", + "generate-extra-topic": "dx-tools generate-extra-topics --docs-root-path ./ --version 26.1", "update-topics": "dx-tools generate-topics --docs-root-path ./", "update-links": "dx-tools convert-links --docs-root-path ./", "validate-docs": "dx-tools validate-topics --docs-root-path ./",