Skip to content

Multi-Column-Layout

Creation

Recommended constructor: 

1
2
3
 
// file: hooks/TABLENAME-dv.js
var dv = AppGiniHelper.DV;
var layout = dv.createLayout([6, 6]);

With title: 

1
2
 
var dv = AppGiniHelper.DV;
var layout = dv.createLayout([6, 6], "My Title");

With title and different variation: 

1
2
 
var dv = AppGiniHelper.DV;
var layout = dv.createLayout([6, 6], "My Title", Variation.warning);

Add fields to Layout-columns 

1
2
3
 
AppGiniHelper.dv.createLayout([6, 6])
    .add(1, ["fieldname_1", "fieldname_2", ...])
    .add(2, ["fieldname_3", "fieldname_4", ...]);

Parameters

  1. column index, starting at 1
  2. array (!) of fielnames

Note

Parameter 2 must be an array, not a string.

Deprecated constructor (do not use): 

1
2
3
 
new AppGiniLayout([6, 6], "title", true | false)
    .add(1, ["fieldname_1", "fieldname_2", ...])
    .add(2, ["fieldname_3", "fieldname_4", ...]);

Please use dv.createLayout() instead.

Add Multi-Column-Layout to Custom tab 

1
2
3
4
5
6
7
 
// create layout
var layout = dv.createLayout()
    .add(1, ["field1", "field2"])
    .add(2, ["field3", "field4"]);

// create tab, append layout
var tab = dv.addTab("tab1", "Caption 1", "icon", [layout]);

Note

When adding layout to a Custom Tab, title will not be rendered;

Mix Layout with fields in Custom Tab 

1
2
3
4
5
6
7
 
// create layout
var layout = dv.createLayout()
    .add(1, ["field1", "field2"])
    .add(2, ["field3", "field4"]);

// create tab, append fields, layout, fields
var tab = dv.addTab("tab1", "Caption 1", "icon", ["field5", "field6", layout, "field7", "field8"]);

Note

When adding layout to a Custom Tab, title will not be rendered;

See also