NEW VERSION RELEASED! Webix 11 Read More Core Updates, Extended Functionalities in SpreadSheet and File Manager and more

Programming examples of DataTable 3-state Checkboxes in TreeTable

JavaScript DataTable 3-state Checkboxes in TreeTable

Get a JavaScript programming example for DataTable 3-state Checkboxes in TreeTable. Webix TreeTable widget combines Table and Tree functions for data display and management. With our JS programming sample, you can create DataTable 3-state Checkboxes in TreeTable. Feel free to use our coding samples or a snippet tool below for building your own web apps.

JS Code

var grida = {
  view:"treetable",
  columns:[
    { id:"id", header:"", css:{"text-align":"right"}, width:50 },
    { id:"value", header:"Title", fillspace:true,
     template:"{common.space()}{common.icon()}{common.treecheckbox()}{common.folder()}#value#" },
    { id:"state", header:"State", width:100 },
    { id:"hours", header:"Hours", width:100 }
  ],
  threeState:true,
  editable:true,
  autoheight:true,
  scroll:false,
  url:"https://docs.webix.com/samples/15_datatable/30_treetable/data/treedata.php", datatype:"xml"
};

webix.ready(function(){
  webix.ui({
    padding:10, rows:[
      {
        height:40,
        template:"<b>3-state checkboxes</b>"
      },
      grida,
      {}
    ]
  });
});		

How to create DataTable 3-state Checkboxes with Webix TreeTable widget?