XcMasterDetail

Name

XcMasterDetail

Description

The component is used to show details for a selected entry in a side area. A common use case is displaying information about entries in a XcTable.

Hints

This component is meant for simple use cases. A more versatile alternative is the XcStack. However, it's also somewhat more complex.

Attributes

• xc-master-detail-mode
  • determines the master area's behavior when the details are opened
  • allowed values: side (default), over
  • side: the master area shrinks when the details are shown
  • over: the details overlap with the master area and the master area is locked while the details are shown
• xc-master-detail-opened boolean, controls whether the details are shown
• xc-master-detail-position
  • configures at which side of the master area the details are shown
  • allowed values: start, end (default)
• xc-master-detail-side-area-size
  • sets the horizontal size of the detail area
  • allowed values: full, large, half, golden (default), small (mentioned values sorted from large to small)

Style

The class xc-panel can be used to show to input fields in one row.

Usage

The html page needs an element <xc-master-detail> with two children (recommended type: <xc-panel>). One of them needs to have the attribute master and the other one detail, with each child containing the corresponding content to show.

The directive [xc-master-detail-opened] opens the details when true is passed.

Example Implementation

HTML

<xc-master-detail [xc-master-detail-opened]="selectedCar">
  <xc-panel master>
    ...
  </xc-panel>
  <xc-panel detail>
    ...
  </xc-panel>
</xc-master-detail>

TypeScript

selectedCar = null;

constructor() {
  this.dsCars.localTableData = {...};
  this.dsCars.selectionModel.change.subscribe(this.tableSelectionChange.bind(this));
}

private tableSelectionChange(model) {
  this.selectedCar = model.selection[0] || null;
}

Tutorials

The component is also covered in the YouTube tutorial Zeta Components walk-through.