How to create ul li elements from nested JSON data in HTML DROPDOWN

Question

But below is what I could find on internet. I want to create something like above. Below is the code snippet. It works totally fine. But how can I make it dynamic. I mean if I add ul and li manually the tree gets rendered correctly. But I want that to happen as per the JSON received from REST API. How to add ul and li elements from nested JSON data. Can someone please help me.

Working Code Link: http://jsfiddle.net/jddevight/esS4k/

Working Code snippet:

var dropdown = $("#dropdown").kendoDropDownList({
    dataSource: [{ text: "", value: "" }],
    dataTextField: "text",
    dataValueField: "value",
    open: function (e) {
        // If the treeview is not visible, then make it visible.
        if (!$treeviewRootElem.hasClass("k-custom-visible")) {
            $treeviewRootElem.slideToggle('fast', function() {
                dropdown.close();
                $treeviewRootElem.addClass("k-custom-visible");
            });
        }
    }
}).data("kendoDropDownList");
var $dropdownRootElem = $(dropdown.element).closest("span.k-dropdown");

var treeview = $("#treeview").kendoTreeView({
    select: function (e) {
        // When a node is selected, display the text for the node in the dropdown and hide the treeview.
        $dropdownRootElem.find("span.k-input").text($(e.node).children("div").text());
        $treeviewRootElem.slideToggle('fast', function() {
            $treeviewRootElem.removeClass("k-custom-visible");
        });
    }
}).data("kendoTreeView");
var $treeviewRootElem = $(treeview.element).closest("div.k-treeview");

// Hide the treeview.
$treeviewRootElem
    .width($dropdownRootElem.width())
    .css({ "border":"1px solid grey", "display": "none", "position": "absolute" });

// Position the treeview so that it is below the dropdown.
$treeviewRootElem
    .css({ "top": $dropdownRootElem.position().top + $dropdownRootElem.height(), "left": $dropdownRootElem.position().left });

$(document).click(function(e) {
    // Ignore clicks on the treetriew.
    if ($(e.target).closest("div.k-treeview").length == 0) {
        // If visible, then close the treeview.
        if ($treeviewRootElem.hasClass("k-custom-visible")) {
            $treeviewRootElem.slideToggle('fast', function() {
                $treeviewRootElem.removeClass("k-custom-visible");
            });
        }
    }
});

HTML:

<ul id="treeview">
    <li data-expanded="true">Item 1
        <ul>
            <li>Item 1.1</li>
            <li>Item 1.2</li>
        </ul>
    </li>
    <li data-expanded="true">Item 2
        <ul>
            <li data-expanded="true">Item 2.1
             <ul>
            <li>Item 1.1</li>
            <li>Item 1.2</li>
        </ul></li>
            <li>Item 2.2</li>
        </ul>
    </li>
</ul>

<input id="dropdown"></input>

where is you ajax request?

madalinivascu
– madalinivascu

2016-07-27 09:37:28 +00:00
Commented Jul 27, 2016 at 9:37 — madalinivascu
– madalinivascu, Commented Jul 27, 2016 at 9:37

Vedran Jukic · Accepted Answer · 2016-07-27 10:25:57Z

1

Don't initialize treeview on ul element. Instead use div element. Then use datasource to assign data from json.

var treeview = $("#treeview").kendoTreeView({
  dataSource : [
    {
      "id"   :100,
      "text" :"tree",
      "items":[...

To update data simply call dataStore.data(newData).

treeview.dataSource.data([
  { text: "bar", items: [
    { text: "baz" }
  ] }
]);

Here's example how to that: http://jsfiddle.net/m2Lpw52g/

answered Jul 27, 2016 at 10:25

Vedran Jukic

8518 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Unbreakable Over a year ago

Many Thanks for help!

Unbreakable Over a year ago

Shall the input "dropdown" tag should be inside the div treeview tag. Can you kindly see your fiddle example.

Vedran Jukic Over a year ago

Dropdown element can't be inside treeview div element. They are two separate components that are connected via script to work together.

Collectives™ on Stack Overflow

How to create ul li elements from nested JSON data in HTML DROPDOWN

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related