Building Multi-level Menu's From XML?

10 posts, 0 answers
  1. Jeffrey Edgett
    Jeffrey Edgett avatar
    22 posts
    Member since:
    Jun 2005

    Posted 30 Dec 2011 Link to this post

    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>
  2. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 02 Jan 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Jeffrey Edgett
    Jeffrey Edgett avatar
    22 posts
    Member since:
    Jun 2005

    Posted 03 Jan 2012 Link to this post

    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?
  5. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 04 Jan 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Jeffrey Edgett
    Jeffrey Edgett avatar
    22 posts
    Member since:
    Jun 2005

    Posted 04 Jan 2012 Link to this post

    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.  


  7. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 05 Jan 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  8. Jeffrey Edgett
    Jeffrey Edgett avatar
    22 posts
    Member since:
    Jun 2005

    Posted 05 Jan 2012 Link to this post

    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.
  9. Jeffrey Edgett
    Jeffrey Edgett avatar
    22 posts
    Member since:
    Jun 2005

    Posted 02 Mar 2012 Link to this post

    Has this been addressed yet?
  10. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 07 Mar 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  11. Ashok
    Ashok avatar
    2 posts
    Member since:
    Jan 2015

    Posted 30 Jan 2015 in reply to Kamen Bundev Link to this post

    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....

     
Back to Top
Kendo UI is VS 2017 Ready