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

JavaScript Programming Example of Editing Data in TreeTable

JavaScript Editing Data in TreeTable

A user should be able to effortlessly change data in a TreeTable, e.g., folder and file names. Feel free to use our programming example for making data in a TreeTable editable.

JS Code

/*
  You can implement an ability to edit treetable cells. 
  Click on a cell to start editing its text. 
*/

webix.ready(function(){
  grid = webix.ui({				
    view:"treetable",
    columns:[
      { id:"id",	editor:"text", header:"", css:{"text-align":"right"},  	width:50},
      { id:"value",	editor:"text", header:"Title",	width:250,
       template:"{common.treetable()} #value#" },
      { id:"state",	editor:"text", header:"State",	width:100},
      { id:"hours",	editor:"text", header:"Hours",	width:100}
    ],
    
    editable:true,
    autoheight:true,
    autowidth:true,
    url: "https://docs.webix.com/samples/server/projects"
  });
});