23 days to give it a try before you buy! Download now. The best deals on licenses are coming soon Download now. The best deals on licenses are coming soon

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?