jQuery UI Widgets Forums Navigation Tree dynamically add li item with custom class as the first item

This topic contains 6 replies, has 2 voices, and was last updated by  Hristo 7 years ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author

  • jnanartham
    Participant

    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

    • This topic was modified 7 years ago by  jnanartham.
    • This topic was modified 7 years ago by  jnanartham.

    jnanartham
    Participant

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


    Hristo
    Participant

    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


    jnanartham
    Participant

    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.


    Hristo
    Participant

    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


    jnanartham
    Participant

    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


    Hristo
    Participant

    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

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.