Building Multi-level Menu's From XML?

[Jeffrey Edgett]

I need to know how to build a multi-level menu from an XML data source.   Right now the child elements are appearing in the main level.

My JavaScript:

var template_navigation_menu = kendo.template('<li><a href="#=url#" target="#=target#" title="#=title#">#=text#</a></li>');

var navigation_menu = $("#navigation_menu").kendoMenu();

$(document).ready(function () {

    function navigation_menu_render()

    {

        $("#navigation_menu").html(kendo.render(template_navigation_menu, this.view()));

    }

 

    var datasource_navigation_menu = new kendo.data.DataSource(

    {

        transport:

        {

            read: "xml/navigation" + get_culture_path_modifier() + ".xml"

        },

        schema:

        {

            type: "xml",

            data: "/navigation/menu/item",

            model:

            {

                fields:

                {

                    item_id: "item_id/text()",

                    parent_id: "parent_id/text()",

                    text: "text/text()",

                    url: "url/text()",

                    target: "target/text()",

                    title: "title/text()",

                    google_sitemap_priority: "google_sitemap_priority/text()",

                    google_sitemap_frequency: "google_sitemap_frequency/text()",

                    main_inclusion: "main_inclusion/text()",

                    footer_inclusion: "footer_inclusion/text()"

                }

            }

        },

        change: navigation_menu_render

    });

 

    datasource_navigation_menu.filter({ field: "main_inclusion", operator: "eq", value: "true" });

    datasource_navigation_menu.read();

});

My XML Data Source:

<?xml version="1.0" encoding="utf-8" ?>

<navigation>

    <menu>

        <item>

            <item_id>1</item_id>

            <parent_id>0</parent_id>

            <text>Home</text>

            <url>/</url>

            <target>_top</target>

            <title>Click here to return to the Home Page.</title>

            <google_sitemap_priority>1.0</google_sitemap_priority>

            <google_sitemap_frequency>daily</google_sitemap_frequency>

            <main_inclusion>true</main_inclusion>

            <footer_inclusion>true</footer_inclusion>

        </item>

    </menu>

    <menu>

        <item>

            <item_id>2</item_id>

            <parent_id>0</parent_id>

            <text>Item 1</text>

            <url>/item.html</url>

            <target>_top</target>

            <title>Click here to view item 1.</title>

            <google_sitemap_priority>0.8</google_sitemap_priority>

            <google_sitemap_frequency>daily</google_sitemap_frequency>

            <main_inclusion>true</main_inclusion>

            <footer_inclusion>true</footer_inclusion>

        </item>

    </menu>

    <menu>

        <item>

            <item_id>3</item_id>

            <parent_id>0</parent_id>

            <text>Item 2</text>

            <url>/item.html</url>

            <target>_top</target>

            <title>Click here to view item 2.</title>

            <google_sitemap_priority>0.5</google_sitemap_priority>

            <google_sitemap_frequency>daily</google_sitemap_frequency>

            <main_inclusion>true</main_inclusion>

            <footer_inclusion>true</footer_inclusion>

        </item>

    </menu>

    <menu>

        <item>

            <item_id>4</item_id>

            <parent_id>0</parent_id>

            <text>Item 3</text>

            <url>/item.html</url>

            <target>_top</target>

            <title>Click here to view item 3.</title>

            <google_sitemap_priority>0.8</google_sitemap_priority>

            <google_sitemap_frequency>weekly</google_sitemap_frequency>

            <main_inclusion>true</main_inclusion>

            <footer_inclusion>true</footer_inclusion>

        </item>

    </menu>

    <menu>

        <item>

            <item_id>5</item_id>

            <parent_id>0</parent_id>

            <text>Footer-Only Item 1</text>

            <url>/item.html</url>

            <target>_blank</target>

            <title>Click here to view item.</title>

            <google_sitemap_priority>0.3</google_sitemap_priority>

            <google_sitemap_frequency>monthly</google_sitemap_frequency>

            <main_inclusion>false</main_inclusion>

            <footer_inclusion>true</footer_inclusion>

        </item>

    </menu>

    <menu>

        <item>

            <item_id>6</item_id>

            <parent_id>0</parent_id>

            <text>Footer-Only Item 2</text>

            <url>/item.html</url>

            <target>_blank</target>

            <title>Click here to view item.</title>

            <google_sitemap_priority>0.3</google_sitemap_priority>

            <google_sitemap_frequency>monthly</google_sitemap_frequency>

            <main_inclusion>false</main_inclusion>

            <footer_inclusion>true</footer_inclusion>

        </item>

    </menu>

    <menu>

        <item>

            <item_id>7</item_id>

            <parent_id>0</parent_id>

            <text>Item 4</text>

            <url>/item.html</url>

            <target>_top</target>

            <title>Click here to view item.</title>

            <google_sitemap_priority>0.3</google_sitemap_priority>

            <google_sitemap_frequency>monthly</google_sitemap_frequency>

            <main_inclusion>true</main_inclusion>

            <footer_inclusion>true</footer_inclusion>

        </item>

    </menu>

    <menu>

        <item>

            <item_id>8</item_id>

            <parent_id>7</parent_id>

            <text>Item 4 - Sub Item 1</text>

            <url>/subitem.html</url>

            <target>_top</target>

            <title>Click here to view sub item.</title>

            <google_sitemap_priority>0.3</google_sitemap_priority>

            <google_sitemap_frequency>monthly</google_sitemap_frequency>

            <main_inclusion>true</main_inclusion>

            <footer_inclusion>true</footer_inclusion>

        </item>

    </menu>

</navigation>

[Atanas Korchev]

Hello,

 The child items appear on the first level because that is how you have configured your menu. Currently the Kendo DataSource does not support hierarchy and as a result the view() method returns all data. Then the template renders a <li> for every single item in the array. You need to find the children of every item returned in the view() method and then add a child items using the client-side API of the menu. 

Regards,
Atanas Korchev
the Telerik team

[Jeffrey Edgett]

So it appears I would need to loop through each item as I encountered it, and look for children? 

Do you have any examples of how to do this in relation to the KendoUI datasource object?

[Kamen Bundev]

Hello Jeffrey,

You can also use a JSON object to build your menu, using a structure like the one outlined in this forum post.

Kind regards,
Kamen Bundev
the Telerik team

[Jeffrey Edgett]

Thanks for the suggestion.   However, I am trying to reuse an existing XML file -- with the structure I called out in the early post -- so I am not sure that the JSON solution would work?

To me it seems that for tree controls and menu's, etc. KendoUI REALLY needs to have a built-in method of dealing with parent/child data or at least a clearly documented method.  

[Kamen Bundev]

Hello Jeffrey,

Menu binding to the Kendo UI DataSource is planned, but first the DataSource has to support hierarchical structures. In the mean time, you can probably build the JSON object on the server from the existing XML file and feed it to the Menu when initializing it.

Greetings,
Kamen Bundev
the Telerik team

[Jeffrey Edgett]

In this case, we are trying to build a disconnected web app (hence the reason for using Kendo UI instead of the excellent Telerik .NET controls) so having the server create the JSON object won't work.

I guess I will impatiently wait for the DataSource to be updated to support hierarchical structures.

[Jeffrey Edgett]

Has this been addressed yet?

[Kamen Bundev]

Hi Jeffrey,

No, binding to a data source hasn't been addressed yet, our DataSource doesn't yet support hierarchical structures. We do plan to address it soon, however most likely this feature won't make it for the Q1 2012 release this month.

All the best,
Kamen Bundev
the Telerik team

[Ashok]

Hi.... Kamen


is it possible to create json object from xml ?.and is it support the hierarchical structures?

Actually i want to create menu dynamically in kendo using xml as data source .but the Data Source Doesn't Support Hierarchical Structures. Can u give alternative any possible Way .
Thank you....