Unable to initialize menu with JSON

7 posts, 0 answers
  1. Matt
    Matt avatar
    6 posts
    Member since:
    Jun 2012

    Posted 25 Jan 2012 Link to this post

    Hi,

    I'm having trouble initializing the menu control from JSON. Using the code from the example:

    $(document).ready(function() {
     $("#menu").kendoMenu({
      dataSource: [
       {
        text: "Menu Item 1",
        items: [
         { text: "Sub Menu Item 1" },
         { text: "Sub Menu Item 2" }
        ]
       },
       {
        text: "Menu Item 2"
       }
      ]
     })
    });

    The menu doesn't show up. I have tried this using <ul id="menu"></ul> as well as <div id="menu"></div> thinking that maybe it had to be an unordered list, but I can't make it work.

    When I check the generated page, I can see that there is some kind of attempt to create the menu, but the items from the JSON aren't populated. As seen in web inspector:

    <ul id="menu" class="k-widget k-reset k-header k-menu k-menu-horizontal"></ul>
  2. Matt
    Matt avatar
    6 posts
    Member since:
    Jun 2012

    Posted 25 Jan 2012 Link to this post

    Super fast update on this one.. I changed the HTML up and got it to work. It appears as though the menu control likes the HTML formatted a certain way. If I use:

    <ul id="menu">
    </ul>

    I don't get a menu. However, if I use:

    <ul id="menu"></ul>

    The menu shows up with the items defined in the JSON.
  3. Kendo UI is VS 2017 Ready
  4. Robert
    Robert avatar
    1 posts
    Member since:
    Jan 2012

    Posted 25 Jan 2012 Link to this post

    I had this same problem. thanks for the fix. worked for me too.
  5. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 26 Jan 2012 Link to this post

    Hello Matthew,

    Thank you for noticing this. I've fixed it and the fix will be available with the next service pack. I've also updated your points.

    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. Sameer
    Sameer avatar
    2 posts
    Member since:
    Feb 2012

    Posted 15 Feb 2012 Link to this post

    Hi,

    Matt, thanks for the fix.

    On a related note, I am trying to populate a menu with remote data (JSON); here is what I am doing:

    <ul id="menu"></ul>

    $("#menu").kendoMenu({
        dataSource: {
            transport: {
                read: "http://example.com/json-resource"
            },
            schema: {
                data: "data"
            }
        }
    })

    I seem to be missing something in the js side - or is that not possible?

    I am very new to Kendo UI, and JQuery.

    regards,
    Sameer
  7. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 15 Feb 2012 Link to this post

    Hi Sameer,

    Unfortunately this is not currently possible. To do this, we would need a hierarchical data source - something we have planned for the future. At this moment you can only initialize Menu, TabStrip, PanelBar and TreeView with a JSON object, like the ones described in Kendo UI documentation I've linked.

    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. Sameer
    Sameer avatar
    2 posts
    Member since:
    Feb 2012

    Posted 16 Feb 2012 Link to this post

    Thanks Kamen,

    Worked on an alternative that suits my current purpose, still using TabStrip, as follows:
    <?php
        foreach ($phpArrayOfObjects as $unit) {
            $JSONArray[] = '{text: "'.$unit->UNIT_CODE.'", contentUrl: "pageToLoad.php"}';
    }
     
    ?>

    $("#tabStrip").kendoTabStrip({
        dataSource:
        [
            <?php echo implode(',', $JSONArray); ?>        
        ],
        animation: {
            open: { effects: "fadeIn" }
        }
    });

    regards,
    Sameer

Back to Top
Kendo UI is VS 2017 Ready