Adding a Class to Tree item Span

Implementing the Tree within our existing Admin system. Now that the Admin system is well developed and Webix well integrated within it, opportunities to solve problems by some completely different approach are now closed.


We have a problem with a Row in the Tree.

This is how we generate the Tree (generated by our PHP Function"publishDataTree")

		$wjs .= "
			[{type: 'header', template: adminTitle('".$this->table."', '".$this->type."', 'dtree')},
			{
			    view:'tree', id: 'dtree',  css: 'clqtree',
			    url: '".$this->sitepath."includes/get.php?langcd=".$this->lcd."&action=gettreeset&table=".$this->table."&tabletype=".$this->type."',
			    // template: function(obj) {return '<span class=\"clqrow\">' + obj.value + '</span>';},
			    on:{
			        onBeforeLoad:function(){
			            webix.message('Loading...');
			        },
			        onAfterLoad:function(){				        
			            if (!this.count()) {
    						webix.message('Sorry, there is no data');
			            }
			        },
			        // onItemClick: function(id) { alert('Id: ' +id); },
			        // onContext: function() {}
			        onAfterRender: function() { // Anything that is needed after the Datatree is loaded
						
						// Button Toolbar for Context Menu
						$('div.webix_tree_item span').toolbar({
							content: '#admintoolbar', position: 'top', hideOnClick: true
						}).on('toolbarItemClick', function(event, clicked) {
							toolBarMenu(this, clicked);
						});	

			        }		        
			    }			
			}]
		";
		return $wjs;

This is a snippet of the generated source code for our Menu management Tree:

< div view_id=“dtree” class=“webix_view webix_tree clqtree”
< div class=“webix_scroll_cont”
<div class=“webix_tree_leaves”
< div class=“webix_tree_branch_1”

		          < div webix_tm_id="2" class="webix_tree_item"
				<div class="webix_tree_none" < /div 
				<div class="webix_tree_file" < /div 
				< span a : Home Page < /span
		            < /div

		< /div
		< div class="webix_tree_branch_1"
			
			< div webix_tm_id="4" class="webix_tree_item"
				< div class="webix_tree_open" < /div 
				< div class="webix_tree_folder_open" < /div 
				< span  b : Products < /span
			< /div
                        
                            ......................

                     < /div

< /div< /div< /div

We need to address the within the webix_tree_item. The easiest way to do this would be to do, as we do in Datatable and List, to add a Class of our own, say clqrow.

When we added a Template (see Template commented out) it worked but all the Tree navigation disappeared. In other words, the Template replaced the Div with Class: webix_tree_item. So that is no good.

We have tried various jQuery selector tricks in onAfterRender but that which works in Datatable and List is not working with Tree.

We shall persevere but at the moment we are stopped - if Template does not perform correctly, Span does not contain any Class by default, that we can address and we cannot address the Span, even after Render.

Suggestions please.

Approach with template was correct. Just add the common helper calls to generate tree navigation elements

http://webix.com/snippet/06799ea9

I have a problem with tree control. In your snippet it also presents:
when I moved splitter to right, horizontal scroll appears in the tree.
This is because, that width of “webix_scroll_cont” does not change.
Ho I can fix it? Thank you

width of “webix_scroll_cont” does not change

I can confirm the issue. For now, you can definescroll property to show the needed scrolls (it can’t be changed dynamically) or specify any initialwidth, so the horizontal scroll won’t appear on resize.