Add What's New section

MenuConfig.xml

@@ -8,6 +8,8 @@
   <MenuRule Destination="020 Overview" SourcePattern="Howto:^50 React Components/00 DevExtreme React Components" VisibleFor="React" />
   <MenuRule Destination="030 Overview" SourcePattern="Howto:^58 jQuery Components/00 DevExtreme jQuery Components" VisibleFor="jQuery" />
 
+  <MenuRule Destination="040 What's New" SourcePattern="Howto:^Common/Whats New" />
+
   <MenuRule Destination="050 Getting Started/50 Accessibility" SourcePattern="Howto:^Common/Accessibility" />
 
   <MenuRule Destination="050 Getting Started/55 Security Considerations" SourcePattern="Howto:^Common/Security Considerations" />

concepts/Common/Whats New/00 v24.2 Release Notes/00 v24.2 Release Notes.md

@@ -0,0 +1 @@
+[note] Explore the latest features on the DevExpress website: [What's New in the Latest Version](https://www.devexpress.com/subscriptions/whats-new).

concepts/Common/Whats New/00 v24.2 Release Notes/05 New Chat Component.md

@@ -0,0 +1,127 @@
+Our new DevExtreme Chat Component (v24.2) allows you to address a variety of usage scenarios and introduce real-time communication support in your next DevExpress-powered web app.
+
+With DevExtreme Chat, you can:
+
+- Host intra/interpersonal Interactions (one-on-one or group chats). Ideal for social networking and/or internal collaboration.
+- Integrate AI services and/or Chatbots: Connect DevExtreme Chat to AI services or chatbots for around-the-clock support services. Deliver immediate answers and extend engagement with intelligent interactions.
+- Introduce instant communication options between support specialists and clients.
+
+![DevExtreme Chat component, P2P communication](/images/whats-new/24-2-js-chat-p2p.png)
+
+The DevExtreme Chat component supports the following options/capabilities:
+
+- AI (artificial intelligence) Extensions
+- DataSource support
+- Typing status
+- Popup integration
+- Empty state text customization
+- UI Customization
+- Message templates
+- Error support
+- Accessibility compliance
+- Keyboard Navigation
+- Internationalization (Right-to-Left)
+
+[note] DevExtreme Chat is a client-side component. An independent backend solution is necessary to leverage its potential.
+
+#include btn-open-demo with {
+    href: "https://js.devexpress.com/Demos/WidgetsGallery/Demo/Chat/Overview/"
+}
+
+### Set Initial Messages and Render New Messages
+
+To set initial messages, assign the [items](/Documentation/ApiReference/UI_Components/dxChat/Configuration/#items) array with your messages or use [dataSource](/Documentation/ApiReference/UI_Components/dxChat/Configuration/#dataSource) to bind the Chat component to data.
+
+To render a new message, you must:
+
+---
+##### jQuery
+
+- If you use [items](/Documentation/ApiReference/UI_Components/dxChat/Configuration/#items), call the [renderMessage](/Documentation/ApiReference/UI_Components/dxChat/Methods/#renderMessagemessage) function.
+- If using [dataSource](/Documentation/ApiReference/UI_Components/dxChat/Configuration/#dataSource), implement load and insert CRUD operations.
+
+##### Angular
+
+- If you use [items](/Documentation/ApiReference/UI_Components/dxChat/Configuration/#items), update the items array.
+- If using [dataSource](/Documentation/ApiReference/UI_Components/dxChat/Configuration/#dataSource), implement load and insert CRUD operations.
+
+##### Vue
+
+- If you use [items](/Documentation/ApiReference/UI_Components/dxChat/Configuration/#items), update the items array.
+- If using [dataSource](/Documentation/ApiReference/UI_Components/dxChat/Configuration/#dataSource), implement load and insert CRUD operations.
+
+##### React
+
+- If you use [items](/Documentation/ApiReference/UI_Components/dxChat/Configuration/#items), update the items array.
+- If using [dataSource](/Documentation/ApiReference/UI_Components/dxChat/Configuration/#dataSource), implement load and insert CRUD operations.
+
+---
+
+Regardless of the method used, you must send the new message to a backend.
+
+### AI and Chatbot Integration
+
+With the DevExtreme Chat UI component, you can incorporate AI-powered app assistants, implement Copilot-inspired user interfaces, and much more. To introduce these capabilities to your next DevExtreme-powered web app, simply set up appropriate AI services on the backend (Microsoft/OpenAI - GPT, Google - Gemini, self-hosted models via Ollama, or other AI services).
+
+![DevExtreme Chat implementing a virtual AI assistant](/images/whats-new/24-2-js-chat-ai.png)
+
+#include btn-open-demo with {
+    href: "https://js.devexpress.com/Demos/WidgetsGallery/Demo/Chat/AIAndChatbotIntegration/"
+}
+
+We leveraged the AI-integration potential of DevExtreme Chat in two DevExpress products: [Web Report Viewer](https://www.devexpress.com/subscriptions/reporting/web/) and [Web End-User Report Designer](https://www.devexpress.com/subscriptions/reporting/web/). We also incorporated [DevExpress AI-powered APIs](https://docs.devexpress.com/CoreLibraries/405204/ai-powered-extensions?v=24.2) in our implementation.
+
+First, we embedded a Copilot-inspired chat window within the DevExpress Web Report Viewer (users can ask natural language questions to analyze report data and obtain AI-powered insights).
+
+![DevExpress Web Report Viewer with AI Chat](/images/whats-new/24-2-js-reports-web-report-ai.png)
+
+Second, we embedded a virtual assistant in the DevExpress End-User Report Designer (users can submit natural language queries to facilitate the custom report design process).
+
+![DevExpress End-User Report Designer with AI Chat](/images/whats-new/24-2-js-reports-ai-assistant.png)
+
+You can download these examples from the following GitHub repository:
+
+#include btn-open-github with {
+    href: "https://github.com/DevExpress-Examples/web-reporting-integrate-ai-assistant"
+}
+
+[note] DevExpress Reports, DevExpress Web Report Viewer, and the DevExpress End-User Report Designer are included in the following DevExpress Subscriptions: **ASP.NET & Blazor, DXperience, Universal**, or a standalone **DevExpress Reports** subscription.
+
+### Manage Users
+
+A DevExtreme Chat instance contains information about its owner in the [user](/Documentation/ApiReference/UI_Components/dxChat/Configuration/#user) property. Owner messages align to the right (or left in RTL mode), without displaying the owner's username and avatar.
+
+Each message includes information about the sender ([item.author](/Documentation/ApiReference/UI_Components/dxChat/Types/Message/#author)), and includes name, avatar, and alt avatar text. If no avatar is set, the user's initials are displayed instead. Users without a name are marked as "Unknown User".
+
+![DevExtreme Chat messages: custom avatar and no avatar](/images/whats-new/24-2-js-chat-avatar.png)
+
+### Handle Events 
+
+Entering a message triggers the [messageEntered](/Documentation/ApiReference/UI_Components/dxChat/Configuration/#onMessageEntered) event. Use the event handler to perform message post processing (like deleting obscene words, displaying the message in a message feed, and sending the message to the server for storage).
+
+Start typing to raise [typingStart](/Documentation/ApiReference/UI_Components/dxChat/Configuration/#onTypingStart), and stop typing for [typingEnd](/Documentation/ApiReference/UI_Components/dxChat/Configuration/#onTypingEnd). By using these event handlers, you can manage the typingUsers array (it shows which users are typing in the chat UI).
+
+![DevExtreme Chat: one and multiple users typing](/images/whats-new/24-2-js-chat-typing.png)
+
+### Customize UI Elements
+
+Control date and time visibility with [showDayHeaders](/Documentation/ApiReference/UI_Components/dxChat/Configuration/#showDayHeaders) and [showMessageTimestamp](/Documentation/ApiReference/UI_Components/dxChat/Configuration/#showMessageTimestamp). Modify associated formats with [dayHeaderFormat](/Documentation/ApiReference/UI_Components/dxChat/Configuration/#dayHeaderFormat) and [messageTimestampFormat](/Documentation/ApiReference/UI_Components/dxChat/Configuration/#messageTimestampFormat).
+
+To customize DevExtreme Chat messages, use [messageTemplate](/Documentation/ApiReference/UI_Components/dxChat/Configuration/#messageTemplate):
+
+- Display images, charts, tables, links, or any visual element.
+- Implement custom buttons, such as "Copy text" or "Regenerate chatbot response".
+- Support Markdown.
+- Insert custom markup.
+
+![DevExtreme Chat: custom message with Chart component](/images/whats-new/24-2-js-chat-customization.png)
+
+Use the [alerts](/Documentation/ApiReference/UI_Components/dxChat/Configuration/#alerts) array to display runtime errors (such as "You have been disconnected", "The message was not sent", etc).
+
+![DevExtreme Chat with a "You have been disconnected" alert displayed](/images/whats-new/24-2-js-chat-alert.png)
+
+#include btn-open-demo with {
+    href: "https://js.devexpress.com/Demos/WidgetsGallery/Demo/Chat/Customization/"
+}
+
+If you've used DevExtreme Chat or are considering its use in an upcoming DevExpress-powered web project, please share your experiences/requirements with us. We'd love to know about your specific use case and how we can enhance our Chat component in 2025.

concepts/Common/Whats New/00 v24.2 Release Notes/10 New Pagination Component.md

@@ -0,0 +1,16 @@
+v24.2 ships with a new Pagination UI component.
+
+![DevExtreme Pagination component with employee cards as items](/images/whats-new/24-2-js-pagination.png)
+
+Key features/capabilities include:
+
+- **Page Navigator:** Controls movement between individual pages. You can display/hide navigation buttons as requirements dictate.
+- **Page Size Selector:** Controls the number of records that appear on each page. You can set the [allowedPageSizes](/Documentation/ApiReference/UI_Components/dxPagination/Configuration/#allowedPageSizes) property to a numbers array that specify available page sizes.
+- **Page Information:** Displays the current page number and total records. You can specify [pageIndex](/Documentation/ApiReference/UI_Components/dxPagination/Configuration/#pageIndex) to set the initially opened page.
+- **Responsive Design:** Component adapts its layout based on available screen size. Supports full, compact, and adaptive modes.
+- **Right-to-Left Support.**
+- **Accessibility and Keyboard Navigation support:** Fully accessible with integrated keyboard navigation support.
+
+#include btn-open-demo with {
+    href: "https://js.devexpress.com/Demos/WidgetsGallery/Demo/Pagination/Overview/"
+}

concepts/Common/Whats New/00 v24.2 Release Notes/15 DataGrid and TreeList.md

@@ -0,0 +1,22 @@
+### Sticky Columns
+
+As you may know, both the DevExtreme DataGrid and TreeList ship with fixed column support (allowing you to fix columns to a table's edge).
+
+Prior to the availability of advanced CSS positioning tools, our fixed column setup used two separate tables. In v24.2, we overhauled this mechanism: fixed columns are now integrated into the main table.
+
+This update also introduces a new value for the [fixedPosition](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/#fixedPosition) property: `sticky`. Sticky columns behave initially as regular columns. When scrolling horizontally, they adhere to the left and right edges of the table upon reaching them. This enhances usability by keeping key information visible at all times.
+
+![DevExtreme DataGrid with sticky columns](/images/whats-new/24-2-js-sticky-columns.gif)
+
+The context menu used to fix columns now includes icons for various fixed positions.
+
+![A context menu with "Set Fixed Position" item invoked in DevExtreme DataGrid](/images/whats-new/24-2-js-sticky-menu.png)
+
+#include common-demobutton-named with {
+    url: "https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/FixedAndStickyColumns/",
+    name: "DataGrid"
+}
+#include common-demobutton-named with {
+    url: "https://js.devexpress.com/Demos/WidgetsGallery/Demo/TreeList/ColumnFixing/",
+    name: "TreeList"
+}

concepts/Common/Whats New/00 v24.2 Release Notes/20 UI, UX and API.md

@@ -0,0 +1,129 @@
+### Tabs/TabPanel/List - onSelectionChanging Event
+
+DevExtreme Tabs, TabPanel, and List share a common feature: selectable items.
+
+Currently, these components include an [onSelectionChanged](/Documentation/ApiReference/UI_Components/dxTabPanel/Configuration/#onSelectionChanged) event that triggers once selections are finalized and the [selectedItems](/Documentation/ApiReference/UI_Components/dxTabs/Configuration/#selectedItems) option updates.
+
+v24.2 includes a new [onSelectionChanging](/Documentation/ApiReference/UI_Components/dxTabPanel/Configuration/#onSelectionChanging) event for the aforementioned UI components. The event helps track selection changes more effectively and includes a `cancel` property (Boolean or JS Promise).
+
+![A "Change tab?" dialog appears when you switch between Tabs](/images/whats-new/24-2-js-selection-changing.gif)
+
+The primary purpose of the [onSelectionChanging](/Documentation/ApiReference/UI_Components/dxTabPanel/Configuration/#onSelectionChanging) event is to enable tab/item switching under specific usage conditions. If a condition is not met, you can prevent the switch using the `cancel` property. Common conditions include:
+
+- The user confirms the switch to another tab/item via a pop-up dialog.
+- The result of running validation on the current tab.
+- Switching to another item follows a specified order. For example, when a user switches between tabs/items sequentially.
+- Other custom conditions unrelated to the current component.
+
+---
+##### jQuery
+
+#include btn-open-codepen with {
+    href: "https://codepen.io/EugeniyKiyashko/pen/NWQJbVK?editors=1010"
+}
+
+##### Angular
+
+#include btn-open-codesandbox with {
+    href: "https://codesandbox.io/p/sandbox/devextreme-beta-24-2-tabs-onselectionchanging-event-angular-hlch8k?file=%2Fsrc%2Fapp%2Fapp.component.html"
+}
+
+##### Vue
+
+#include btn-open-codesandbox with {
+    href: "https://codesandbox.io/p/sandbox/devextreme-beta-24-2-tabs-onselectionchanging-event-vue-lzqg84?file=%2FApp.vue"
+}
+
+##### React
+
+#include btn-open-codesandbox with {
+    href: "https://codesandbox.io/p/sandbox/devextreme-beta-24-2-tabs-onselectionchanging-event-react-h28s5v?file=%2FApp.tsx"
+}
+
+---
+
+### TabPanel/MultiView - Item Visibility Option
+
+The DevExtreme TabPanel and MultiView include a new [visible](/Documentation/ApiReference/UI_Components/dxTabPanel/Configuration/items/#visible) property for individual items. This feature allows you to manage whether an item is visible at runtime.
+
+---
+##### jQuery
+
+    <!-- tab: index.js -->
+    const tabPanel = $('#tabpanel').dxTabPanel({ 
+        items: [{ visible: false, }], 
+    }).dxTabPanel('instance');
+
+##### Angular
+
+    <!-- tab: app.component.html -->
+    <dx-tab-panel> 
+        <dxi-item [visible]="false"></dxi-item> 
+    </dx-tab-panel>
+
+##### Vue
+
+    <!-- tab: App.vue -->
+    <DxTabPanel> 
+        <DxItem :visible="false" /> 
+    </DxTabPanel>
+
+##### React
+
+    <!-- tab: App.js -->
+    export default function App() { 
+        return ( 
+            <TabPanel> 
+                <Item visible={false} /> 
+            </TabPanel> 
+        ); 
+    }
+
+---
+
+### DataSource - Case Sensitive Filtering
+
+[In v23.1](https://www.devexpress.com/subscriptions/new-2023-1.xml#js-data-layer), we released [langParams](/Documentation/ApiReference/Data_Layer/DataSource/Configuration/langParams) for DataSource. This property can be used to include language-specific parameters for sorting and filtering operations performed on a client.
+
+This update includes case sensitivity for the `langParams` options. As you can see in the image below, you can now introduce case-aware filtering when using DevExtreme UI components with DataSource support (such as DataGrid).
+
+![Case-aware filtering in DevExtreme List bound to DataSource](/images/whats-new/24-2-js-sensitivity-case.gif)
+
+---
+##### jQuery
+
+#include btn-open-codepen with {
+    href: "https://codepen.io/gooddayforsurf/pen/wvVORyr"
+}
+
+##### Angular
+
+#include btn-open-codesandbox with {
+    href: "https://codesandbox.io/p/devbox/devextreme-24-2-beta-case-sensitivity-filtering-jkw8xn?file=%2Fsrc%2Fapp%2Fapp.component.ts"
+}
+
+##### Vue
+
+#include btn-open-codesandbox with {
+    href: "https://codesandbox.io/p/devbox/devextreme-24-2-beta-case-sensitivity-filtering-ndpg9h?file=%2Fsrc%2FApp.vue"
+}
+
+##### React
+
+#include btn-open-codesandbox with {
+    href: "https://codesandbox.io/p/sandbox/devextreme-24-2-beta-case-sensitivity-filtering-t89jzw?file=%2Fsrc%2FApp.tsx"
+}
+
+---
+
+### HTML Editor - Advanced Format Conversion
+
+Previously, the DevExtreme HTML Editor included basic HTML & Markdown conversion support (via [showdown](https://github.com/showdownjs/showdown)/[turndown](https://github.com/mixmark-io/turndown) dependencies).
+
+With v24.2, we removed this capability and added a converter option for custom conversions. For instance, Markdown lacks strikethrough support (as you expect, HTML Editor with `valueType="markdown"` did not offer this option). You can now use the [unified](https://github.com/unifiedjs/unified) [remark-gfm](https://github.com/remarkjs/remark-gfm) plugin to introduce this capability to your DevExtreme-powered app. Unified offers [numerous plugins](https://unifiedjs.com/explore/) for flexible and enhanced formatting.
+
+This update allows greater control/options for HTML Editor-related formatting operations. You can even add support for other formats such as [YAML](https://unifiedjs.com/explore/package/remark-frontmatter/). You will only need a converter from and to HTML.
+
+#include btn-open-demo with {
+    href: "https://js.devexpress.com/Demos/WidgetsGallery/Demo/HtmlEditor/MarkdownSupport/"
+}

concepts/Common/Whats New/00 v24.2 Release Notes/25 Maps.md

@@ -0,0 +1,19 @@
+### Azure Maps Support
+
+As you know, Microsoft discontinued availability of [Bing Maps for Enterprise and associated APIs](https://www.microsoft.com/en-us/maps/bing-maps/discontinued-services). [Azure Maps](https://azure.microsoft.com/en-us/products/azure-maps/) will be Microsoft's single unified enterprise mapping platform moving forward.
+
+Accordingly, DevExtreme Maps now supports Azure Maps (a new map [provider](/Documentation/ApiReference/UI_Components/dxMap/Types/#MapProvider)).
+
+![DevExtreme Map with Azure provider](/images/whats-new/24-2-js-azure-map.png)
+
+We recommend use of a supported map provider (either *'azure', 'google',* or *'googleStatic'*) in your DevExtreme-powered solution.
+
+#include btn-open-demo with {
+    href: "https://js.devexpress.com/Demos/WidgetsGallery/Demo/Map/ProvidersAndTypes/"
+}
+
+### Advanced Google Markers and mapID Support
+
+DevExtreme Maps now supports [advanced Google markers](https://developers.google.com/maps/documentation/javascript/advanced-markers/overview). We also published a new [providerConfig](/Documentation/ApiReference/UI_Components/dxMap/Configuration/providerConfig/) configuration object that contains setting specific to *'google'* and *'googleStatic'* providers. For instance, you can now use the Google Maps [mapID](https://developers.google.com/maps/documentation/get-map-id) option to customize your Map by setting it in our [providerConfig.mapId](/Documentation/ApiReference/UI_Components/dxMap/Configuration/providerConfig/#mapId).
+
+![DevExtreme Map with Google provider, customized](/images/whats-new/24-2-js-map-id.png)

concepts/Common/Whats New/00 v24.2 Release Notes/30 Import.md

@@ -0,0 +1,5 @@
+Previously, for modular projects, you had to import from two packages - devextreme and a framework package (devextreme-{framework}).
+
+v24.2 simplifies this process, and all required types are available for import from the framework package.
+
+[tags] react, vue, angular