This is a migrated thread and some comments may be shown as answers.
Unable to initialize menu with JSON
6 Answers 180 Views
This is a migrated thread and some comments may be shown as answers.
Matt
Top achievements
Rank 2
Matt asked on 25 Jan 2012, 04:53 PM
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>

6 Answers, 1 is accepted

Sort by
0
Matt
Top achievements
Rank 2
answered on 25 Jan 2012, 04:56 PM
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.
0
Robert
Top achievements
Rank 1
answered on 26 Jan 2012, 03:57 AM
I had this same problem. thanks for the fix. worked for me too.
0
Kamen Bundev
Telerik team
answered on 26 Jan 2012, 03:48 PM
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!
0
Sameer
Top achievements
Rank 1
answered on 15 Feb 2012, 07:33 AM
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
0
Kamen Bundev
Telerik team
answered on 15 Feb 2012, 02:44 PM
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!
0
Sameer
Top achievements
Rank 1
answered on 16 Feb 2012, 07:40 AM
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

Tags
Menu
Asked by
Matt
Top achievements
Rank 2
Answers by
Matt
Top achievements
Rank 2
Robert
Top achievements
Rank 1
Kamen Bundev
Telerik team
Sameer
Top achievements
Rank 1
Share this question
or