Sets or gets whether the split layout panel is disabled.

import { Component, ViewChild } from '@angular/core';
 
import { jqxSplitLayoutComponent } from 'jqwidgets-ng/jqxsplitlayout';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxSplitLayout #mySplitLayout 
       [width]='250' [height]='250' [dataSource]='[{ content: "Item 1" }, { content: "Item 2" }, { orientation: "horizontal", items: [ { content: "Item 3" }, { content: "Item 4" } ]}]'
       [disabled]='true'>
    </jqxSplitLayout>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('mySplitLayout', { static: false }) mySplitLayout: jqxSplitLayoutComponent;
}

Sets or gets the data source. The dataSource is an Array of JSON objects. Each object may have 'label', 'content', 'size', 'min', 'modifiers', 'position', 'id', 'type' and 'items' properties. 'label' and 'content' should be strings. 'modifiers' should be an array containing all or any of the following strings: 'resize', 'drag', 'close'. These determine how the user modify the layout panel. 'type' can be 'tabs' or ''. 'position' can be 'top', 'left', 'right', 'bottom'. 'items' expects an array of JSON objects for additional layout panels. 'size' expects string like '30%' or number like 30. 'min' expects a number which is the minimum size of the panel.

import { Component, ViewChild } from '@angular/core';
 
import { jqxSplitLayoutComponent } from 'jqwidgets-ng/jqxsplitlayout';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxSplitLayout #mySplitLayout 
       [width]='250' [height]='250' [dataSource]=' [{ content: "Item 1" }, { content: "Item 2" }, { orientation: "horizontal", items: [ { content: "Item 3" }, { content: "Item 4" } ]}]'>
    </jqxSplitLayout>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('mySplitLayout', { static: false }) mySplitLayout: jqxSplitLayoutComponent;
}

This function is called when the SplitLayout is initialized. It is useful for one-time content initialization.

import { Component, ViewChild } from '@angular/core';
 
import { jqxSplitLayoutComponent } from 'jqwidgets-ng/jqxsplitlayout';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxSplitLayout #mySplitLayout 
       [width]='250' [height]='250' [dataSource]='[{ content: "Item 1" }, { content: "Item 2" }, { orientation: "horizontal", items: [ { content: "Item 3" }, { content: "Item 4" } ]}]'
       [ready]='ready'>
    </jqxSplitLayout>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('mySplitLayout', { static: false }) mySplitLayout: jqxSplitLayoutComponent;
  
  public ready = alert('ready!');
}

Sets or gets the jqxSplitLayout's height.

import { Component, ViewChild } from '@angular/core';
 
import { jqxSplitLayoutComponent } from 'jqwidgets-ng/jqxsplitlayout';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxSplitLayout #mySplitLayout 
       [width]='250' [height]='250' [dataSource]='[{ content: "Item 1" }, { content: "Item 2" }, { orientation: "horizontal", items: [ { content: "Item 3" }, { content: "Item 4" } ]}]'>
    </jqxSplitLayout>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('mySplitLayout', { static: false }) mySplitLayout: jqxSplitLayoutComponent;
}

Sets or gets the jqxSplitLayout's width.

import { Component, ViewChild } from '@angular/core';
 
import { jqxSplitLayoutComponent } from 'jqwidgets-ng/jqxsplitlayout';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxSplitLayout #mySplitLayout 
       [width]='250' [height]='250' [dataSource]='[{ content: "Item 1" }, { content: "Item 2" }, { orientation: "horizontal", items: [ { content: "Item 3" }, { content: "Item 4" } ]}]'>
    </jqxSplitLayout>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('mySplitLayout', { static: false }) mySplitLayout: jqxSplitLayoutComponent;
}

This event is triggered when a layout panel is resized.

Code examples

Bind to the resize event of jqxSplitLayout.

import { Component, ViewChild } from '@angular/core';
 
import { jqxSplitLayoutComponent } from 'jqwidgets-ng/jqxsplitlayout';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxSplitLayout #mySplitLayout (onResize)="onResize($event)" 
       [width]='250' [height]='250' [dataSource]='[{ content: "Item 1" }, { content: "Item 2" }, { orientation: "horizontal", items: [ { content: "Item 3" }, { content: "Item 4" } ]}]'>
    </jqxSplitLayout>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('mySplitLayout', { static: false }) mySplitLayout: jqxSplitLayoutComponent;
  
  public onResize(e: Event): void {
    alert('do something...');
  }
}

This event is triggered when an item is inserted or deleted. For example when you drag and drop a tab panel into another panel or when you click the close button of a tab panel.

Code examples

Bind to the stateChange event of jqxSplitLayout.

import { Component, ViewChild } from '@angular/core';
 
import { jqxSplitLayoutComponent } from 'jqwidgets-ng/jqxsplitlayout';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxSplitLayout #mySplitLayout (onStateChange)="onStateChange($event)" 
       [width]='250' [height]='250' [dataSource]='[{ content: "Item 1" }, { content: "Item 2" }, { orientation: "horizontal", items: [ { content: "Item 3" }, { content: "Item 4" } ]}]'>
    </jqxSplitLayout>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('mySplitLayout', { static: false }) mySplitLayout: jqxSplitLayoutComponent;
  
  public onStateChange(e: Event): void {
    alert('do something...');
  }
}

refreshes the layout and re-arranges the panels

import { Component, ViewChild } from '@angular/core';
 
import { jqxSplitLayoutComponent } from 'jqwidgets-ng/jqxsplitlayout';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxSplitLayout #mySplitLayout 
       [width]='250' [height]='250' [dataSource]='[{ content: "Item 1" }, { content: "Item 2" }, { orientation: "horizontal", items: [ { content: "Item 3" }, { content: "Item 4" } ]}]'>
    </jqxSplitLayout>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('mySplitLayout', { static: false }) mySplitLayout: jqxSplitLayoutComponent;
  
  public ngAfterViewInit(): void {
    this.mySplitLayout.refresh();
  }
}