Hi! I’m trying to create a TreeTable with column “folder_id” which should contain kind of custom editor. In our database we have a tree-like like structure which consists of nested folders. An user should be able to select a folder from that tree.
So we have a TreeTable with several columns in it.
- An user clicks on a cell of “folder_id” column.
- Large bootstrap modal popup appears.
- It has a webix tree view inside it, which contains our folders tree.
- The user double-clicks a folders he needs.
- The modal closes.
- Corresponding “folder_id” cell now contains a text representation of the selected folder, like “folder 1 > nested folder > level 3 folder”. It is for humans.
“folder_id” column resizes accordingly to “folder_id” column text content. - The user clicks “Save” button.
- table.serialize() is being called. But “folder_id” fields in the data returned by serialize() should contain not the text representation, but ID of folders - it is for server, which operates with IDs.
I mean I expect serialize() should return data like this:
{
id: 1494299107063,
$level: 1,
$parent: 0,
title: "Folder title",
url: '/'
is_visible: 1,
is_mobile: 1,
folder_id: 123
}
I was able to write some. Here are excerpts from it:
var adjustColumns = function (table) {
table.adjustColumn('title');
table.adjustColumn('url');
table.adjustColumn('is_mobile');
table.adjustColumn('folder_id');
};
var table = webix.ui({
container: 'top-menu-left-webix',
view: 'treetable',
select: false,
navigation: false,
autoheight: true,
autowidth: true,
editable: true,
drag: true,
columns: [
{id:'title', header:'Title', editor:'text', template:'{common.treetable()} #title#'},
{id:'url', header:'URL', editor:'text', width:270},
{id:'is_visible', header:'<span class="glyphicon glyphicon-eye-open vmiddle"></span>', template:'<label class="top-menu-full-label">{common.checkbox()}</label>', width:50},
{id:'is_mobile', header:'Mobile', template:'<label class="top-menu-full-label">{common.checkbox()}</label>', width:120},
{id:'folder_id', header:'Link', template:'<label class="top-menu-full-label link-folder"></label>', width:150},
{id:'buttons', header:'', template:'<?=$buttonsTemplate?>', width:180}
],
data: data[e.side],
on: {
onAfterEditStop: function () {
//adjustColumns(this);
}
}
});
//It's for the TreeTable
table.on_click['link-folder'] = function (e, id, target) {
linkFolderData = {table:table, id:id};
$('.top-menu-folders-modal').modal();
};
//It's for popup
var foldersTree = webix.ui({
container: 'top-menu-folders-webix',
view: 'tree',
select: false,
navigation: false,
data: foldersTreeData,
on: {
onItemDblClick: function (id, e, node) {
//Updating data storage
var menuItem = linkFolderData.table.getItem(linkFolderData.id.row);
menuItem.folder_id = id;
linkFolderData.table.updateItem(linkFolderData.id.row, menuItem); // <--- Problem 1
//Drawing path for selected folder
var pathPartsList = [];
do {
var item = this.getItem(id);
pathPartsList.push(item.value);
id = item.parent;
} while (id > 0);
pathPartsList = pathPartsList.reverse();
var html = '';
for (var a in pathPartsList) {
html += '<div style="padding-left:'+(a*20)+'px">'+pathPartsList[a]+'</div>';
}
$(linkFolderData.table.getItemNode(linkFolderData.id)).find('.link-folder').html(html);
adjustColumns(linkFolderData.table); // <--- Problem 2
//Hiding popup
$('.top-menu-folders-modal').modal('hide');
}
}
});
This part works by itself:
$(linkFolderData.table.getItemNode(linkFolderData.id)).find('.link-folder').html(html);
But if one of these lines is uncommented then all markup resets to one defined in the template:
linkFolderData.table.updateItem(linkFolderData.id.row, menuItem); // <--- Problem 1
adjustColumns(linkFolderData.table); // <--- Problem 2
Looks like I don’t fully understand how webix works, it’s logic is conflicting with how I think things should work. I tried to create a custom editor via webix.editors - but was puzzled even more. So I’m stuck now. Can you please help me and point out how to implement the algorithm I described above?