[meezaanParticipant]

Hi Histro,

I’m about half way through re-writing this and what I did was actually pass an object to the value property of a node/item. The result being that I can store as many key value pairs in that as I need.

So, I think I’m all good for the time being.

Just feedback that it may be useful to update a tree with un-ordered lists because we can create one with un-ordered lists. Currently, as it stands, it just means that if we are generating html lists using server side code, that same code can’t be reused to update the tree.

Happy to contribute code to that end if that’s something you would want to consider.

Thank you for all your help.

[meezaanParticipant]

OK, as we cannot to this, let’s say that I decide to use the default method, where I pass a source when initializing jqxTree.

On my tree, each li needs to have custom data attributes. Can I pass these in any way? I need, for instance, data-id, data-type and data-value.

Is there a way to do this using the JSON or the default source method. They need to be data attributes as that will allow me to re-use a lot of existing code. If I have to use something like this example: http://www.jqwidgets.com/community/topic/how-to-add-custom-attribute-in-li/, it is not going to be feasible without rewriting the entire application.

Thank you.

[meezaanParticipant]

Thanks Hristo, yes I will have to do something of the sort, except the tree I am working with is designed based on css that comes with the li.

I will figure something out.

[meezaanParticipant]

Hi Hristo,

Thank you for responding but I think you may have misunderstood the problem.

addTo, addBefore and addAfter work as long as I adhere to a specific data format, like:

 [{
"label": "Root", "expanded": "true",
"items": [
    { "label": "Root Folder 1", "items": [{ "value": "ajax1.htm", "label": "Loading..." }] },
    { "label": "Root Folder 2", "items": [{ "value": "ajax2.htm", "label": "Loading..." }] }]
}]

However, when my data comes back as HTML, like:

"<li>Meezaan Node</li><li>Another Node</li>"

it does not work.

So, in a nutshell, when the following code is triggered:

$('#jqxTree').on('expand', function(event) {
  	var node = '<li>Meezaan Node</li><li>Another Node</li>';

  	var element = event.args.element;
    $('#jqxTree').jqxTree('addTo', node, element[0]);
    $('#jqxTree').jqxTree('refresh');
  });

I get an ‘Item’ on my tree, where as I would like to get Meezaan Node and Another Node.

Is there any way to add nodes via an HTML UL / LI to an already existing tree?

Many thanks.

[meezaanParticipant]

I’ve setup a very simple JS Fiddle of what I’m trying to do using one of he examples posted on this website.

http://jsfiddle.net/qa6t3wgL/2/

Looking forward to answer from someone who understands this better than me!

Thank you very much!

[Author]

Posts