dynamically add li item with custom class as the first item

[jnanarthamParticipant]

I have a tree with ul li items. I have a custom class for the li item. How to add an item dynamically under a particular node with that custom class set? Also, how to add it as the first child? and set the newly added item as selected item and expand the tree automatically to that item?

Any help is greatly appreciated.

Thanks in advance…

Shakti

[jnanarthamParticipant]

also, how to set the tooltip to the newly added item?

[HristoParticipant]

Hello Shakti,

Please, take a look at this example:
https://www.jseditor.io/?key=tree-add-select-and-change

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[jnanarthamParticipant]

this is how my li is:

<li class=”myclass” id=”education”>Education
all the li’s have this class and so the newly added item also needs it.
new item should be added as the first item for this li.

secondly, the tooltip:
the tooltip should be added to the newly added item, it need not be the first item of the tree. is there anyway i can access the element using the id of its li?

another question: is there anyway to set the tooltip when the tree is initialized itself.

Note: my tree has several items and sub-items, looping through all the elements to get an item or to set a tooltip takes time.

[HristoParticipant]

Hello Shakti,

Please, take a look at this example below it shows how to add sub items:

var loop = 1;
$('#jqxbutton').click(function () {
	var content = "Item " + loop;
	if (loop == 1) {
		var firstItemElement = getFirstItem();
		$('#jqxTree').jqxTree('addBefore', { label: content, id: 'Item' + loop }, firstItemElement);
		$('#jqxTree').jqxTree('selectItem', $('#Item' + loop)[0]);
	} else {
		var selectedItem = $('#jqxTree').jqxTree('selectedItem');
		$('#jqxTree').jqxTree('addTo', { label: 'SubItem ' + (loop - 1), id: 'SubItem' + (loop - 1) }, selectedItem.element, false);
	}

	loop++;
});

You could use fact that you have an ID for each one new added item and after it is in the Tree you could set a tooltip to it.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[jnanarthamParticipant]

Thanks Hristo for the response.

i think the question is still not clear…

i want to dynamically add an item as first item under the node ‘Solutions’, for example (but the node to which the new item has to be added is determined dynamically), with some id and class for the li of the new item, at the same time set a tooltip. The node may or may not have items under it. if the node is empty, by default the newly added item is first. if the node is non-empty, it has to be added as the first item.

getFirstItem() in the above code returns the root (first item) of the tree. the newly added item is either the first item or the last item of the selected node. it should be added as the first item of the selected node (whether the selected node is empty or not)

-Shakti

[HristoParticipant]

Hello Shakti,

I suggest you a solution when an item is selected and add an item to it.
You should know (or to have) the element to which you will add (before/after/to) a new item.
I would like to suggest you look at this example:
http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxtree/settings.htm?light

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Author]

Posts