Grouping Option

  • grid1.options.groupVisible = true; // grouping panel will be displayed
// Examples
//grid setting
let columns = [
      { name : "custcd"     , header: { text:"Code"                }, width : 100 }
    , { name : "usernm"     , header: { text:"Manager"             }, width : 100 }
    , { name : "custnm"     , header: { text:"Customer"            }, width : 100 }
    , { name : "bizno"      , header: { text:"Biz Number"          }, width : 100 }
    , { name : "ceo"        , header: { text:"ceo"                 }, width : 100 }
    , { name : "tel"        , header: { text:"Telephone"           }, width : 100 }
    , { name : "email"      , header: { text:"E-Mail"              }, width : 100 }
    , { name : "saddr"      , header: { text:"Area"                }, width : 100 }
    , { name : "addr"       , header: { text:"Address"             }, width : 100 }
    , { name : "creditamt"  , header: { text:"Credit limit"        }, type : 'number', scale : '18,2', summaryType: 'sum' }
    , { name : "payamt_d"   , header: { text:"Other Payable"       }, type : 'number', scale : '18,2', summaryType: 'avg' }
    , { name : "getamt_d"   , header: { text:"Accounts receivable" }, type : 'number', scale : '18,2', summaryType: 'max' }
    , { name : "useyn"      , header: { text:"Use"                 }, width : 60  }
    , { name : "custnote"   , header: { text:"note"                }, width : 100 }
];
let groupColumns =  [
       { name: "saddr" }
     , { name: "ceo"   }
];
let sortColumns =  [
      { name: "saddr", order: 'asc' }
    , { name: "ceo"  , order: 'desc'}
];

let options = {};
grid1 = new TbsGrid('grid1');
grid1.setGrid(columns, options);

grid1.showGroupPanel();
//grid1.hideGroupPanel();
grid1.setGroupColumns(groupColumns);
grid1.setSortColumns(sortColumns)
grid1.setData(grid_data);
//grid1.setData(grid_data, 1);
//grid1.setData(grid_data, 2);