Skip to content

1.03 Grid layout

Jump to bottom Edit New page
koalyptus edited this page Sep 21, 2018 · 5 revisions
Property Type Description Remarks Example
grid_layout boolean|object enables / disables grid layout generation (default - false)   
var tfConfig = { grid_layout: true };
// or
var tfConfig = { 
  grid_layout: {} 
};
width string this property defines the width of the main container of the grid (default - null)   
var tfConfig = { 
  grid_layout: {
    width: '850px'
  } 
};
height string this property defines the height of the main container of the grid (default - null)   
var tfConfig = { 
  grid_layout: {
    height: '400px'
  } 
};
cont_css_class string defines the css class of the main container of the grid (default * 'grd_Cont')

this div contains the whole grid which comprises:

  • a top div containing the headers' table
  • a middle div containing the data table
  • a bottom div containg the paging elements
 
var tfConfig = { 
  grid_layout: {
    cont_css_class: 'myclass'
  } 
};
tbl_cont_css_class string defines the css class of the container of the data table (default * 'grd_tblCont')   
var tfConfig = { 
  grid_layout: {
    tbl_cont_css_class: 'myclass'
  } 
};
tbl_head_css_class string defines the css class of the container of the headers' table (default * 'grd_headTblCont')   
var tfConfig = { 
  grid_layout: {
    tbl_head_css_class: 'myclass'
  } 
};
inf_grid_css_class string defines the css class of the bottom div containing the paging elements (default - 'grd_inf')   
var tfConfig = { 
  grid_layout: {
    inf_grid_css_class: 'myclass'
  } 
};
filters boolean enables/disables the filters generation (default - true)   
var tfConfig = { 
  grid_layout: {
    filters: false
  } 
};
default_col_width string defines the default column width if no width is defined (default * '100px')   
var tfConfig = { 
  grid_layout: {
    default_col_width: '125px'
  } 
};
no_headers boolean instructs the component that current working table has no headers (default - false)   
var tfConfig = { 
  grid_layout: {
    no_headers: true
  } 
};

Website | Examples | Es6 documentation

Clone this wiki locally