Skip to content

Commit

Permalink
24.2 demos: update descriptions (#28655) (#28656)
Browse files Browse the repository at this point in the history
  • Loading branch information
vladaskorohodova authored Dec 30, 2024
1 parent 1cc7b7c commit e15ebe0
Show file tree
Hide file tree
Showing 11 changed files with 49 additions and 49 deletions.
4 changes: 2 additions & 2 deletions apps/demos/Demos/Chat/AIAndChatbotIntegration/description.md
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
This demo uses an [Azure OpenAI](https://azure.microsoft.com/en-us/products/ai-services/openai-service) service and the DevExtreme Chat component to create a chatbot UI. You can integrate Chat with various AI services, including [OpenAI](https://openai.com/), [Google Dialogflow](https://cloud.google.com/dialogflow/docs), and [Microsoft Bot Framework](https://dev.botframework.com/).
This demo leverages the [Azure OpenAI](https://azure.microsoft.com/en-us/products/ai-services/openai-service) service alongside the DevExtreme Chat component. You can integrate Chat with multiple AI services, including [OpenAI](https://openai.com/), [Google Dialogflow](https://cloud.google.com/dialogflow/docs), and [Microsoft Bot Framework](https://dev.botframework.com/).

## Handling dataSource (reloadOnChange: false)

The Chat component's [dataSource](/Documentation/ApiReference/UI_Components/dxChat/Configuration/#dataSource) is a [CustomStore](/Documentation/ApiReference/Data_Layer/CustomStore/) that implements its own load and insert functions. The Chat deactivates [reloadOnChange](/Documentation/ApiReference/UI_Components/dxChat/Configuration/#reloadOnChange) to push updates directly into the store and update the conversation manually. See the [onMessageEntered](/Documentation/ApiReference/UI_Components/dxChat/Configuration/#onMessageEntered) event handler and the `processMessageSending` function to review the code that manages data transfer between the Chat and its data store.
The Chat component's [dataSource](/Documentation/ApiReference/UI_Components/dxChat/Configuration/#dataSource) is a [CustomStore](/Documentation/ApiReference/Data_Layer/CustomStore/) that implements its own load and insert functions. The DevExtreme Chat component deactivates [reloadOnChange](/Documentation/ApiReference/UI_Components/dxChat/Configuration/#reloadOnChange) to push updates directly into the store and update the conversation manually. See the[onMessageEntered](/Documentation/ApiReference/UI_Components/dxChat/Configuration/#onMessageEntered) event handler and the `processMessageSending` function to review the code that manages data transfer between our Chat component and its data store.
<!--split-->

## Custom Message Template
Expand Down
2 changes: 1 addition & 1 deletion apps/demos/Demos/Chat/Customization/description.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
Use the following properties to customize the Chat component:
Use the following properties to customize the DevExtreme Chat component:

- To display/hide Chat UI elements:
- [showAvatar](/Documentation/ApiReference/UI_Components/dxChat/Configuration/#showAvatar)
Expand Down
16 changes: 8 additions & 8 deletions apps/demos/Demos/Chat/Overview/description.md
Original file line number Diff line number Diff line change
@@ -1,27 +1,27 @@
Chat is an interactive interface that allows users to send and receive messages in real time.
Chat is an interactive UI component designed to send/receive messages in real time.

To get started with the DevExtreme Chat component, refer to the following step-by-step tutorial: [Getting Started with Chat](/Documentation/Guide/UI_Components/Chat/Getting_Started_with_Chat/).

The demo implements basic Chat functionality: specifies initial messages, updates the conversation with new incoming and outgoing messages, manages users, and links two chats in real-time.
The demo implements basic Chat functionality: specifies initial messages, updates the conversation with new incoming/outgoing messages, manages users, and links two chats in real-time.
<!--split-->

## Messages

To specify initial messages, you can either populate the [items](/Documentation/ApiReference/UI_Components/dxChat/Configuration/#items) array (shown in this demo) or use a [dataSource](/Documentation/ApiReference/UI_Components/dxChat/Configuration/#dataSource).
To specify an initial message, you can populate the [items](/Documentation/ApiReference/UI_Components/dxChat/Configuration/#items) array (shown in this demo) or use a [dataSource](/Documentation/ApiReference/UI_Components/dxChat/Configuration/#dataSource).

Use the following API to render new messages:

- If you use **items**, update the array with the new message.
- If you use a **dataSource**, implement [load](/Documentation/ApiReference/Data_Layer/CustomStore/Configuration/#load) and [insert](/Documentation/ApiReference/Data_Layer/CustomStore/Configuration/#insert) operations.
- If using **items**, update the array with the new message.
- If using a **dataSource**, implement [load](/Documentation/ApiReference/Data_Layer/CustomStore/Configuration/#load) and [insert](/Documentation/ApiReference/Data_Layer/CustomStore/Configuration/#insert) operations.

## Users

To specify the chat owner, set the [user](/Documentation/ApiReference/UI_Components/dxChat/Configuration/#user) property. Owner messages align to the right (or left in RTL mode) and do not display the name or avatar.
To specify the chat owner, set the [user](/Documentation/ApiReference/UI_Components/dxChat/Configuration/#user) property. Owner messages align to the right (or left in RTL mode) and do not display a name or avatar.

Each message includes information about the sender ([author](/Documentation/ApiReference/UI_Components/dxChat/Types/Message/#author)): name, avatar, and alternative avatar text. If no avatar is set, the user's initials are displayed instead.

## Events

If a user enters a message, the Chat raises the [messageEntered](/Documentation/ApiReference/UI_Components/dxChat/Configuration/#onMessageEntered) event. Use the event handler to process the message. For example, you can display the message in the message feed and send the message to the server for storage.
If a user enters a message, the Chat component raises the [messageEntered](/Documentation/ApiReference/UI_Components/dxChat/Configuration/#onMessageEntered) event. Use the event handler to process the message. For example, you can display the message in the message feed and send the message to the server for storage.

When users start or finish typing, the Chat raises [typingStart](/Documentation/ApiReference/UI_Components/dxChat/Configuration/#onTypingStart) and [typingEnd](/Documentation/ApiReference/UI_Components/dxChat/Configuration/#onTypingEnd) events. Use these events to manage the [typingUsers](/Documentation/ApiReference/UI_Components/dxChat/Configuration/#typingUsers) array. The Chat uses this array to display a list of active users.
When users start or complete text entry, our Chat component raises [typingStart](/Documentation/ApiReference/UI_Components/dxChat/Configuration/#onTypingStart) and [typingEnd](/Documentation/ApiReference/UI_Components/dxChat/Configuration/#onTypingEnd) events. Use these events to manage the [typingUsers](/Documentation/ApiReference/UI_Components/dxChat/Configuration/#typingUsers) array. The DevExtreme Chat uses this array to display a list of active users.
16 changes: 8 additions & 8 deletions apps/demos/Demos/Chat/Overview/jQuery/description.md
Original file line number Diff line number Diff line change
@@ -1,27 +1,27 @@
Chat is an interactive interface that allows users to send and receive messages in real time.
Chat is an interactive UI component designed to send/receive messages in real time.

To get started with the DevExtreme Chat component, refer to the following step-by-step tutorial: [Getting Started with Chat](/Documentation/Guide/UI_Components/Chat/Getting_Started_with_Chat/).

The demo implements basic Chat functionality: specifies initial messages, updates the conversation with new incoming and outgoing messages, manages users, and links two chats in real-time.
The demo implements basic Chat functionality: specifies initial messages, updates the conversation with new incoming/outgoing messages, manages users, and links two chats in real-time.
<!--split-->

## Messages

To specify initial messages, you can either populate the [items](/Documentation/ApiReference/UI_Components/dxChat/Configuration/#items) array (shown in this demo) or use a [dataSource](/Documentation/ApiReference/UI_Components/dxChat/Configuration/#dataSource).
To specify an initial message, you can populate the [items](/Documentation/ApiReference/UI_Components/dxChat/Configuration/#items) array (shown in this demo) or use a [dataSource](/Documentation/ApiReference/UI_Components/dxChat/Configuration/#dataSource).

Use the following API to render new messages:

- If you use **items**, call the [renderMessage()](/Documentation/ApiReference/UI_Components/dxChat/Methods/#renderMessagemessage) method.
- If you use a **dataSource**, implement [load](/Documentation/ApiReference/Data_Layer/CustomStore/Configuration/#load) and [insert](/Documentation/ApiReference/Data_Layer/CustomStore/Configuration/#insert) operations.
- If using **items**, call the [renderMessage()](/Documentation/ApiReference/UI_Components/dxChat/Methods/#renderMessagemessage) method.
- If using a **dataSource**, implement [load](/Documentation/ApiReference/Data_Layer/CustomStore/Configuration/#load) and [insert](/Documentation/ApiReference/Data_Layer/CustomStore/Configuration/#insert) operations.

## Users

To specify the chat owner, set the [user](/Documentation/ApiReference/UI_Components/dxChat/Configuration/#user) property. Owner messages align to the right (or left in RTL mode) and do not display the name or avatar.
To specify the chat owner, set the [user](/Documentation/ApiReference/UI_Components/dxChat/Configuration/#user) property. Owner messages align to the right (or left in RTL mode) and do not display a name or avatar.

Each message includes information about the sender ([author](/Documentation/ApiReference/UI_Components/dxChat/Types/Message/#author)): name, avatar, and alternative avatar text. If no avatar is set, the user's initials are displayed instead.

## Events

If a user enters a message, the Chat raises the [messageEntered](/Documentation/ApiReference/UI_Components/dxChat/Configuration/#onMessageEntered) event. Use the event handler to process the message. For example, you can display the message in the message feed and send the message to the server for storage.
If a user enters a message, the Chat component raises the [messageEntered](/Documentation/ApiReference/UI_Components/dxChat/Configuration/#onMessageEntered) event. Use the event handler to process the message. For example, you can display the message in the message feed and send the message to the server for storage.

When users start or finish typing, the Chat raises [typingStart](/Documentation/ApiReference/UI_Components/dxChat/Configuration/#onTypingStart) and [typingEnd](/Documentation/ApiReference/UI_Components/dxChat/Configuration/#onTypingEnd) events. Use these events to manage the [typingUsers](/Documentation/ApiReference/UI_Components/dxChat/Configuration/#typingUsers) array. The Chat uses this array to display a list of active users.
When users start or complete text entry, our Chat component raises [typingStart](/Documentation/ApiReference/UI_Components/dxChat/Configuration/#onTypingStart) and [typingEnd](/Documentation/ApiReference/UI_Components/dxChat/Configuration/#onTypingEnd) events. Use these events to manage the [typingUsers](/Documentation/ApiReference/UI_Components/dxChat/Configuration/#typingUsers) array. The DevExtreme Chat uses this array to display a list of active users.
8 changes: 4 additions & 4 deletions apps/demos/Demos/DataGrid/ColumnReordering/description.md
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
DataGrid columns have the same order as fields in data objects. You can use the [columns](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/) array to specify a different order. To reorder a column at runtime, change **column**.[visibleIndex](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/#visibleIndex) property.
DevExtreme DataGrid columns use the same display order as fields in data objects. You can use the [columns](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/) array to specify a different display order. To reorder a column at runtime, change the **column**.[visibleIndex](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/#visibleIndex) property.

Users can drag and drop column headers to reorder columns. To enable this feature, set the [allowColumnReordering](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/#allowColumnReordering) property to **true**. If you do not want users to drag a specific column, disable its **column**.[allowReordering](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/#allowReordering) property.
Users can drag and drop column headers to reorder columns as needed. To activate this feature, set the [allowColumnReordering](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/#allowColumnReordering) property to **true**. If you wish to prevent reorder operations for a given column, disable its **column**.[allowReordering](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/#allowReordering) property.
<!--split-->

This demo shows how [fixed](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/#fixed) columns behave during user-initiated reordering. Users can drag and drop columns within the following areas (but not between them):
This demo illustrates [fixed](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/#fixed) column behavior during user-initiated column reorder operations. Users can drag & drop columns within the following areas (but not between them):

- Columns fixed to the left
- Non-fixed columns
- Columns fixed to the right

Sticky columns (fixed with the 'sticky' [position](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/#fixedPosition)) behave like non-fixed columns during reordering (even if they are in a state where they are attached to a border/fixed column). To see sticky columns in this demo, right-click a column to open a context menu. Choose "Set Fixed Position -> Sticky" to stick a column.
Sticky columns (fixed with the 'sticky' [position](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/#fixedPosition)) behave like non-fixed columns during reorder operations (even if they are in a state where they are attached to a border/fixed column). To see sticky columns in this demo, right-click a column to open the DataGrid’s context menu. Choose "Set Fixed Position -> Sticky" to stick a given column.
12 changes: 6 additions & 6 deletions apps/demos/Demos/DataGrid/FixedAndStickyColumns/description.md
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
A horizontal scrollbar appears when the total width of all columns exceeds the DataGrid component's width. To keep a column visible when scrolling, set the **columnFixing**.[enabled](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columnFixing/#enabled) property to `true`.
A horizontal scrollbar appears when the total width of all grid columns exceeds the DevExtreme DataGrid’s overall width. To maintain column visibility when scrolling horizontally, set the **columnFixing**.[enabled](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columnFixing/#enabled) property to `true`.

To fix a column programmatically, set its [fixed](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/#fixed) property to `true` and select the column's [fixedPosition](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/#fixedPosition):
To fix a column programmatically, set its [fixed](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/#fixed) property to `true` and specify the desired [fixedPosition](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/#fixedPosition):

- *'left'* (default if `fixed: true`)
The column is fixed to the left edge of the grid.
The column is fixed to the leftmost edge of the grid.

- *'right'*
The column is fixed to the right edge of the grid.
The column is fixed to the rightmost edge of the grid.

- *'sticky'*
The column sticks to left and right edges when it reaches them.
The column "sticks" to the left or rightmost edge when it reaches either side of the grid.

To fix or unfix a column, users should right-click the column's header and select the corresponding operation in the context menu. To prevent users from fixing or unfixing a column, set its [allowFixing](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/#allowFixing) property to `false`.
To fix (or unfix) a column, right-click a column header and select the desired operation using the DataGrid’s built-in context menu. To prevent users from fixing/unfixing a column, set its [allowFixing](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/#allowFixing) property to `false`.
<!--split-->
6 changes: 3 additions & 3 deletions apps/demos/Demos/HtmlEditor/MarkdownSupport/description.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
DevExtreme HTML Editor uses HTML markup to format its document content. This demo module converts content to Markdown with the help of the [unified](https://github.com/unifiedjs/unified) plugin library.
The DevExtreme HTML Editor uses HTML markup to format document content. This demo module converts content to Markdown using the [unified](https://github.com/unifiedjs/unified) plugin library.

The code sets the the editor's [converter](/Documentation/ApiReference/UI_Components/dxHtmlEditor/Configuration/converter/) property to an object that implements two functions: [toHtml](/Documentation/ApiReference/UI_Components/dxHtmlEditor/Configuration/converter/#toHtml) and [fromHtml](/Documentation/ApiReference/UI_Components/dxHtmlEditor/Configuration/converter/#fromHtml).
This sample implementation sets the HTML Editor's [converter](/Documentation/ApiReference/UI_Components/dxHtmlEditor/Configuration/converter/) property to an object that implements two functions: [toHtml](/Documentation/ApiReference/UI_Components/dxHtmlEditor/Configuration/converter/#toHtml) and [fromHtml](/Documentation/ApiReference/UI_Components/dxHtmlEditor/Configuration/converter/#fromHtml).

Try to edit or format text in the HTML Editor control and see how the Markdown Preview section reflects those changes.
To review our implementation, edit or format text within the HTML Editor control and see how the Markdown Preview section reflects changes.
<!--split-->
Loading

0 comments on commit e15ebe0

Please sign in to comment.