Treetable (scrollable with fixed 1st col) init from HTML markup

Webix JS
1

Hi,

I was wondering if there is an example on creating a treetable with scroll and fixed 1st column, by using the HTML markup initialization

I would like to acchieve this:
http://docs.webix.com/samples/15_datatable/30_treetable/03_big_datatree.html

but using the HTML markup initialization

2

Something like next must work

<div data-view="treetable" data-autoheight="true" data-left-split="1" data-width="400">
		<div data-view="column" data-width="150" data-id="firstname" data-template="{common.treetable()}#firstname#">
			First Name
		</div>
		<div data-view="column" data-width="150" data-id="lastname">
			Last Name
		</div>
		<div data-view="column" data-width="1200" data-template="{obj.value}">
			Age
		</div>

        <ul data-view="data">
            <li data-firstname="Alex" data-lastname="Wolski"> 55</li>
            <li data-firstname="Rassel" data-lastname="Brown">42</li>
	    </ul>
    </div>
3

That was quick. It works, thanks!

However this solution gives me another issue.
I use JSF (JavaEE) for the view. If I would like to include a JSF component as a value in the tree I can not add it to the attribute inside the li tag (like in your example where you set the first name by setting the attribute data-firstname=“Alex”. I cant set something like data-firstname="<myCustomTag…></ myCustomTag>". It would work only for the column where the data for the age is set.
Or if I would like to add in the first column a link… “<a href…” I would face the same problem.

Or another solution would be to generate the whole webix html “manualy” and then applying the webix functionalities to the generated html. Is it possible?

Thanks again for your help.

4

Instead of embedding data directly into the page, you can use .url property and load the data from the external data feed.

Or another solution would be to generate the whole webix html “manualy”

It will not work, unfortunately.

5

Excuse my ignorance but could you please give me an example of how to pass data for a treetable which contains also html elements (links etc) through the .url property?

Thanks again for all your help.

6

You can use on client side

url:"/some/data"

and on server side return a JSON ( or XML ) that embeds the HTML markup

[{ name:"Alex", homepage:"<a href='http://some.com'>Homepage</a>" }]
7

Thank you very much.
I’ll see what I can do. The problem will be with the JSF components that have to be parsed by the faces servlet so that they are transformed to html code.