Skip to main content

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

TabPanel Class

Provides information about the Document Viewer’s tab panel.

#Declaration

TypeScript
export class TabPanel extends BaseRenderingModel<ITabPanelViewModel>

#Properties

#collapsed Property

Specifies whether the tab panel is collapsed.

#Declaration

TypeScript
collapsed: boolean

#Property Value

Type
boolean

#Remarks

The code sample below demonstrates how to automatically collapse the tab panel after resetting parameter values in the ASPxClientReportDesigner.PreviewParametersReset event handler.

<script type="text/javascript" id="script">
    function previewParametersReset(s, e) {
        var preview = s.GetPreviewModel();
        if (preview) {
            preview.tabPanel.collapsed(true);
        }
    }
</script>

<dx:ASPxReportDesigner ID="ASPxReportDesigner1" runat="server">      
    <ClientSideEvents PreviewParametersReset="previewParametersReset"/>  
</dx:ASPxReportDesigner>

#keyboardHelper Property

#Declaration

TypeScript
keyboardHelper: DevExpress.Analytics.Internal.RightPanelKeyboardHelperNative

#Property Value

Type
RightPanelKeyboardHelperNative

#tabs Property

Provides access to the tabs of the tab panel.

#Declaration

TypeScript
tabs: DevExpress.Analytics.Utils.TabInfo[]

#Property Value

Type Description
TabInfo<any>[]

An array of tabs.

#Remarks

The code sample below demonstrates how to make a specific tab active.

<script type="text/javascript" id="script">
    function Init(s, e) {
        s.GetPreviewModel().tabPanel.tabs[0].active(true);
    }
</script>

<dx:ASPxReportDesigner ID="ASPxReportDesigner1" runat="server">      
    <ClientSideEvents Init="Init"/>  
</dx:ASPxReportDesigner>

#toggleTabVisibility Property

#Declaration

TypeScript
toggleTabVisibility: (e: any, forceExpand: boolean) => void

#Property Value

Type
(e: any, forceExpand: boolean) => void

#width Property

Specifies the width of the tab panel.

#Declaration

TypeScript
width: number

#Property Value

Type
number

#Remarks

The code sample below demonstrates how to specify the tab panel width in the Init event handler.

<script type="text/javascript" id="script">
    function Init(s, e) {
        s.GetPreviewModel().tabPanel.width(500);
    }
</script>

<dx:ASPxReportDesigner ID="ASPxReportDesigner1" runat="server">      
    <ClientSideEvents Init="Init"/>  
</dx:ASPxReportDesigner>

#zoomFactor Property

#Declaration

TypeScript
zoomFactor: number

#Property Value

Type
number

#Methods

#addTab(tab) Method

#Declaration

TypeScript
addTab(
    tab: DevExpress.Analytics.Utils.TabInfo
): void

#Parameters

Name Type
tab TabInfo<any>

#createViewModel Method

#Declaration

TypeScript
createViewModel(): ITabPanelViewModel

#Returns

Type
ITabPanelViewModel

#getTabByName(tabName) Method

#Declaration

TypeScript
getTabByName(
    tabName: string
): DevExpress.Analytics.Utils.TabInfo

#Parameters

Name Type
tabName string

#Returns

Type
TabInfo<any>

#onPropertyChanged(args) Method

#Declaration

TypeScript
onPropertyChanged(
    args: DevExpress.Analytics.Serializer.Native.PropertyChangedEventArgs | DevExpress.Analytics.Serializer.Native.ArrayPropertyChangedEventArgs
): void

#Parameters

Name Type
args PropertyChangedEventArgs<any> | ArrayPropertyChangedEventArgs<any>

#removeTabs Method

#Declaration

TypeScript
removeTabs(): void

#updateViewModel(args) Method

#Declaration

TypeScript
updateViewModel(
    args: DevExpress.Analytics.Serializer.Native.PropertyChangedEventArgs | DevExpress.Analytics.Serializer.Native.ArrayPropertyChangedEventArgs
): void

#Parameters

Name Type
args PropertyChangedEventArgs<any> | ArrayPropertyChangedEventArgs<any>