-
Notifications
You must be signed in to change notification settings - Fork 606
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
- Loading branch information
1 parent
1cc7b7c
commit e15ebe0
Showing
11 changed files
with
49 additions
and
49 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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
12
apps/demos/Demos/DataGrid/FixedAndStickyColumns/description.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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--> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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--> |
Oops, something went wrong.