angularjs k-data-source menu binding

5 posts, 1 answers
  1. Zhonghai
    Zhonghai avatar
    20 posts
    Member since:
    Mar 2014

    Posted 26 May 2014 Link to this post

    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>
  2. Answer
    Mihai
    Admin
    Mihai avatar
    153 posts

    Posted 26 May 2014 Link to this post

    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!
     
  3. Kendo UI is VS 2017 Ready
  4. Zhonghai
    Zhonghai avatar
    20 posts
    Member since:
    Mar 2014

    Posted 27 May 2014 Link to this post

    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
  5. Joshua
    Joshua avatar
    2 posts
    Member since:
    Jun 2014

    Posted 28 Sep 2015 Link to this post

    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

  6. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 30 Sep 2015 Link to this post

    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!
     
Back to Top
Kendo UI is VS 2017 Ready