This is a migrated thread and some comments may be shown as answers.

angularjs k-data-source menu binding

4 Answers 260 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Zhonghai
Top achievements
Rank 1
Zhonghai asked on 26 May 2014, 08:01 AM
Hi there,

just try to bind a JSON object to the menu k-data-source, but somehow cannot get it work. Could anyone help me out?
$scope.menuData = [
    {
        text: "Item 1",
        url: "http://www.telerik.com"                // Link URL if navigation is needed, optional.
    },
    {
        text: "<b>Item 2</b>",
        content: "text"                              // content within an item
    },
    {
        text: "Item 4",
    }
];
<div ng-controller="menuCtrl">
    <ul kendo-menu style="display: inline-block" k-data-source="menuData"></ul>
</div>

4 Answers, 1 is accepted

Sort by
0
Accepted
Mihai
Telerik team
answered on 26 May 2014, 11:34 AM
Hello,

It was a bug.  I fixed it in this commit, please take the latest angular-kendo.js from that repository and it should work now.

Regards,
Mihai
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Zhonghai
Top achievements
Rank 1
answered on 27 May 2014, 07:28 AM
Hi Mihai,

thanks for your fix. At the same time, I found another trick to solve the issue, which is the "k-options", define options like in normal kendo ui, then use it with the "k-options" directive.

Regards

Zhonghai
0
Joshua
Top achievements
Rank 1
answered on 29 Sep 2015, 12:20 AM

While I was able to use the angular directive using k-options. It seems from my research that the kendo ui menu does not support updating the dataSource after the kendo widget has been initialized. This is however possible in other kendo widgets such as the grid. I would be interested if anyone else has solved this problem. I have a work around consisting of removing the angular directive all together and using kendo ui javascript implementation to build the menu after the dataSource call is made. To update you must destroy the kendo widget $('#menu').data('kendoMenu').destroy(), then empty out the container dom element using $('#menu').html('') then rebuild it using $('#menu').kendoMenu({ dataSource: myDataSource}) This performs the way I want but unfortunately is not a good angular implementation as it forces me to manually manipulate the dom.

 

Any thoughts would be great.

 

- Josh

0
Kiril Nikolov
Telerik team
answered on 30 Sep 2015, 03:31 PM

Hello Joshua,

 

The problem comes from the fact that the Kendo UI Menu does not use the standard Kendo UI DataSource, but a light version of it, that does not support the data binding mechanisms that you are already familiar with. In an AngularJS application, you can consider using the k-rebind directive that will handle change in the options, so the widget is correctly redrawn. Please check the following documentation article:

 

http://docs.telerik.com/kendo-ui/AngularJS/introduction#updating-widgets-when-options-change

 

Regards,
Kiril Nikolov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Menu
Asked by
Zhonghai
Top achievements
Rank 1
Answers by
Mihai
Telerik team
Zhonghai
Top achievements
Rank 1
Joshua
Top achievements
Rank 1
Kiril Nikolov
Telerik team
Share this question
or