Unable to initialize menu with JSON

[Matt]

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>

[Matt]

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.

[Robert]

I had this same problem. thanks for the fix. worked for me too.

[Kamen Bundev]

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

[Sameer]

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

[Kamen Bundev]

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

[Sameer]

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