TabPanel: publish keyExpr option (DevExpress#30576)

anna-shakhova · mpreyskurantov · web-flow · commit 87586129bfd2 · 2025-08-04T14:02:32.000+02:00
Co-authored-by: Mikhail Preyskurantov &lt;5574159+mpreyskurantov@users.noreply.github.com&gt;
diff --git a/packages/devextreme-angular/src/ui/card-view/nested/tab-panel-options.ts b/packages/devextreme-angular/src/ui/card-view/nested/tab-panel-options.ts
@@ -172,6 +172,14 @@ export class DxoCardViewTabPanelOptionsComponent extends NestedOption implements
         this._setOption('itemTitleTemplate', value);
     }
 
+    @Input()
+    get keyExpr(): Function | string {
+        return this._getOption('keyExpr');
+    }
+    set keyExpr(value: Function | string) {
+        this._setOption('keyExpr', value);
+    }
+
     @Input()
     get loop(): boolean {
         return this._getOption('loop');
diff --git a/packages/devextreme-angular/src/ui/form/nested/tab-panel-options.ts b/packages/devextreme-angular/src/ui/form/nested/tab-panel-options.ts
@@ -172,6 +172,14 @@ export class DxoFormTabPanelOptionsComponent extends NestedOption implements OnD
         this._setOption('itemTitleTemplate', value);
     }
 
+    @Input()
+    get keyExpr(): Function | string {
+        return this._getOption('keyExpr');
+    }
+    set keyExpr(value: Function | string) {
+        this._setOption('keyExpr', value);
+    }
+
     @Input()
     get loop(): boolean {
         return this._getOption('loop');
diff --git a/packages/devextreme-angular/src/ui/nested/base/tab-panel-options.ts b/packages/devextreme-angular/src/ui/nested/base/tab-panel-options.ts
@@ -126,6 +126,13 @@ export abstract class DxoTabPanelOptions extends NestedOption {
         this._setOption('itemTitleTemplate', value);
     }
 
+    get keyExpr(): Function | string {
+        return this._getOption('keyExpr');
+    }
+    set keyExpr(value: Function | string) {
+        this._setOption('keyExpr', value);
+    }
+
     get loop(): boolean {
         return this._getOption('loop');
     }
diff --git a/packages/devextreme-angular/src/ui/nested/tab-panel-options.ts b/packages/devextreme-angular/src/ui/nested/tab-panel-options.ts
@@ -52,6 +52,7 @@ import { DxiItemComponent } from './item-dxi';
         'items',
         'itemTemplate',
         'itemTitleTemplate',
+        'keyExpr',
         'loop',
         'noDataText',
         'onContentReady',
diff --git a/packages/devextreme-angular/src/ui/tab-panel/index.ts b/packages/devextreme-angular/src/ui/tab-panel/index.ts
@@ -279,6 +279,19 @@ export class DxTabPanelComponent<TItem = any, TKey = any> extends DxComponent im
     }
 
 
+    /**
+     * [descr:dxTabPanelOptions.keyExpr]
+    
+     */
+    @Input()
+    get keyExpr(): Function | string {
+        return this._getOption('keyExpr');
+    }
+    set keyExpr(value: Function | string) {
+        this._setOption('keyExpr', value);
+    }
+
+
     /**
      * [descr:dxMultiViewOptions.loop]
     
@@ -689,6 +702,13 @@ export class DxTabPanelComponent<TItem = any, TKey = any> extends DxComponent im
      */
     @Output() itemTitleTemplateChange: EventEmitter<any>;
 
+    /**
+    
+     * This member supports the internal infrastructure and is not intended to be used directly from your code.
+    
+     */
+    @Output() keyExprChange: EventEmitter<Function | string>;
+
     /**
     
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
@@ -856,6 +876,7 @@ export class DxTabPanelComponent<TItem = any, TKey = any> extends DxComponent im
             { emit: 'itemsChange' },
             { emit: 'itemTemplateChange' },
             { emit: 'itemTitleTemplateChange' },
+            { emit: 'keyExprChange' },
             { emit: 'loopChange' },
             { emit: 'noDataTextChange' },
             { emit: 'repaintChangesOnlyChange' },
diff --git a/packages/devextreme-react/src/card-view.ts b/packages/devextreme-react/src/card-view.ts
@@ -2511,6 +2511,7 @@ type ITabPanelOptionsProps = React.PropsWithChildren<{
   items?: Array<any | dxTabPanelItem | string>;
   itemTemplate?: ((itemData: any, itemIndex: number, itemElement: any) => string | any) | template;
   itemTitleTemplate?: ((itemData: any, itemIndex: number, itemElement: any) => string | any) | template;
+  keyExpr?: (() => void) | string;
   loop?: boolean;
   noDataText?: string;
   onContentReady?: ((e: TabPanelContentReadyEvent) => void);
diff --git a/packages/devextreme-react/src/form.ts b/packages/devextreme-react/src/form.ts
@@ -827,6 +827,7 @@ type ITabPanelOptionsProps = React.PropsWithChildren<{
   items?: Array<any | dxTabPanelItem | string>;
   itemTemplate?: ((itemData: any, itemIndex: number, itemElement: any) => string | any) | template;
   itemTitleTemplate?: ((itemData: any, itemIndex: number, itemElement: any) => string | any) | template;
+  keyExpr?: (() => void) | string;
   loop?: boolean;
   noDataText?: string;
   onContentReady?: ((e: TabPanelContentReadyEvent) => void);
diff --git a/packages/devextreme-vue/src/card-view.ts b/packages/devextreme-vue/src/card-view.ts
@@ -2912,6 +2912,7 @@ const DxTabPanelOptionsConfig = {
     "update:items": null,
     "update:itemTemplate": null,
     "update:itemTitleTemplate": null,
+    "update:keyExpr": null,
     "update:loop": null,
     "update:noDataText": null,
     "update:onContentReady": null,
@@ -2959,6 +2960,7 @@ const DxTabPanelOptionsConfig = {
     items: Array as PropType<Array<any | dxTabPanelItem | string>>,
     itemTemplate: {},
     itemTitleTemplate: {},
+    keyExpr: [Function, String] as PropType<((() => void)) | string>,
     loop: Boolean,
     noDataText: String,
     onContentReady: Function as PropType<((e: TabPanelContentReadyEvent) => void)>,
diff --git a/packages/devextreme-vue/src/form.ts b/packages/devextreme-vue/src/form.ts
@@ -966,6 +966,7 @@ const DxTabPanelOptionsConfig = {
     "update:items": null,
     "update:itemTemplate": null,
     "update:itemTitleTemplate": null,
+    "update:keyExpr": null,
     "update:loop": null,
     "update:noDataText": null,
     "update:onContentReady": null,
@@ -1013,6 +1014,7 @@ const DxTabPanelOptionsConfig = {
     items: Array as PropType<Array<any | dxTabPanelItem | string>>,
     itemTemplate: {},
     itemTitleTemplate: {},
+    keyExpr: [Function, String] as PropType<((() => void)) | string>,
     loop: Boolean,
     noDataText: String,
     onContentReady: Function as PropType<((e: TabPanelContentReadyEvent) => void)>,
diff --git a/packages/devextreme-vue/src/tab-panel.ts b/packages/devextreme-vue/src/tab-panel.ts
@@ -50,6 +50,7 @@ type AccessibleOptions = Pick<Properties,
   "items" |
   "itemTemplate" |
   "itemTitleTemplate" |
+  "keyExpr" |
   "loop" |
   "noDataText" |
   "onContentReady" |
@@ -102,6 +103,7 @@ const componentConfig = {
     items: Array as PropType<Array<any | dxTabPanelItem | string>>,
     itemTemplate: {},
     itemTitleTemplate: {},
+    keyExpr: [Function, String] as PropType<((() => void)) | string>,
     loop: Boolean,
     noDataText: String,
     onContentReady: Function as PropType<((e: ContentReadyEvent) => void)>,
@@ -150,6 +152,7 @@ const componentConfig = {
     "update:items": null,
     "update:itemTemplate": null,
     "update:itemTitleTemplate": null,
+    "update:keyExpr": null,
     "update:loop": null,
     "update:noDataText": null,
     "update:onContentReady": null,
diff --git a/packages/devextreme/js/ui/multi_view.d.ts b/packages/devextreme/js/ui/multi_view.d.ts
@@ -108,7 +108,7 @@ export interface dxMultiViewBaseOptions<
     TComponent extends dxMultiView<TItem, TKey> = dxMultiView<any, any>,
     TItem extends ItemLike = any,
     TKey = any,
-> extends CollectionWidgetOptions<TComponent, TItem, TKey> {
+> extends Omit<CollectionWidgetOptions<TComponent, TItem, TKey>, 'keyExpr'> {
     /**
      * @docid dxMultiViewOptions.animationEnabled
      * @default true
diff --git a/packages/devextreme/js/ui/multi_view.js b/packages/devextreme/js/ui/multi_view.js
@@ -3,17 +3,17 @@ import MultiView from '../__internal/ui/multi_view/multi_view';
 export default MultiView;
 
 /**
- * @name dxMultiViewOptions.selectedItems
+ * @name dxMultiViewOptions.keyExpr
  * @hidden
  */
 
 /**
- * @name dxMultiViewOptions.selectedItemKeys
+ * @name dxMultiViewOptions.selectedItems
  * @hidden
  */
 
 /**
- * @name dxMultiViewOptions.keyExpr
+ * @name dxMultiViewOptions.selectedItemKeys
  * @hidden
  */
 
diff --git a/packages/devextreme/js/ui/tab_panel.d.ts b/packages/devextreme/js/ui/tab_panel.d.ts
@@ -210,6 +210,11 @@ export interface dxTabPanelOptions<
      * @public
      */
     items?: Array<TItem>;
+    /**
+     * @docid
+     * @public
+     */
+    keyExpr?: string | Function;
     /**
      * @docid
      * @default null
diff --git a/packages/devextreme/ts/dx.all.d.ts b/packages/devextreme/ts/dx.all.d.ts
@@ -23173,7 +23173,7 @@ declare module DevExpress.ui {
     TComponent extends dxMultiView<TItem, TKey> = dxMultiView<any, any>,
     TItem extends DevExpress.ui.dxMultiView.ItemLike = any,
     TKey = any
-  > extends CollectionWidgetOptions<TComponent, TItem, TKey> {
+  > extends Omit<CollectionWidgetOptions<TComponent, TItem, TKey>, 'keyExpr'> {
     /**
      * [descr:dxMultiViewOptions.animationEnabled]
      */
@@ -28338,6 +28338,10 @@ declare module DevExpress.ui {
      * [descr:dxTabPanelOptions.items]
      */
     items?: Array<TItem>;
+    /**
+     * [descr:dxTabPanelOptions.keyExpr]
+     */
+    keyExpr?: string | Function;
     /**
      * [descr:dxTabPanelOptions.onTitleClick]
      */

Original file line number	Diff line number	Diff line change
`@@ -126,6 +126,13 @@ export abstract class DxoTabPanelOptions extends NestedOption {`
`126`	`126`	`this._setOption('itemTitleTemplate', value);`
`127`	`127`	`}`
`128`	`128`
	`129`	`+ get keyExpr(): Function \| string {`
	`130`	`+ return this._getOption('keyExpr');`
	`131`	`+ }`
	`132`	`+ set keyExpr(value: Function \| string) {`
	`133`	`+ this._setOption('keyExpr', value);`
	`134`	`+ }`
	`135`	`+`
`129`	`136`	`get loop(): boolean {`
`130`	`137`	`return this._getOption('loop');`
`131`	`138`	`}`