JavaScript Colspan in TreeTable
Programming examples of TreeTable Colspan

JavaScript Colspan in TreeTable

Get a JavaScript programming example for merging cells horizontally in TreeTable. This JavaScript code sample will enable a single table cell to span the width of more than one cell or column within the TreeTable. Feel free to make use of our coding samples or a snippet tool below to create effective web applications.

JS Code

var grida = {
  view:"treetable",
  columns:[
    { id:"id", header:"", css:{"text-align":"right"}, width:50 },
    { id:"value", header:"Film title", fillspace:true, template:"{common.treetable()} #value#" },
    { id:"chapter",	header:"Mode",	width:200 }
  ],
  autoheight:true,
  scroll:false,
  data: [
    { "id":"1", "$row":"value", "value":"The Shawshank Redemption", "open":true, "data":[
      { "id":"1.1", "value":"Part 1", "chapter":"alpha"},
      { "id":"1.2", "value":"Part 2", "chapter":"beta", "open":true, "data":[
        { "id":"1.2.1", "value":"Part 1", "chapter":"beta-twin"},
        { "id":"1.2.2", "value":"Part 1", "chapter":"beta-twin"}
      ]},
      { "id":"1.3", "value":"Part 3", "chapter":"gamma" }
    ]},
    { "id":"2", "$row":"value", "value":"The Godfather", "data":[
      { "id":"2.1", "value":"Part 1", "chapter":"alpha" },
      { "id":"2.2", "value":"Part 2", "chapter":"beta" }
    ]}
  ]
};

webix.ready(function(){
  webix.ui({
    padding:10, rows:[
      {
        template:"<b>Colspan in grid</b>",
        height:40
      },
      grida,
      {}
    ]
  });	
});

How to specify the number of columns a cell should span with Webix TreeTable widget?