angularjs k-data-source menu binding

[Zhonghai]

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>

[Mihai]

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

 

 

[Zhonghai]

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

[Joshua]

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

[Kiril Nikolov]

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