use angularjs ng-click in listbox template

4 posts, 0 answers
  1. Zac
    Zac avatar
    2 posts
    Member since:
    Oct 2014

    Posted 03 Jan Link to this post

    Hello,

    I've opened a ticket with this question and it occurred to me I should have probably asked it here first. Sorry about that.

     

    Is it possible to use angularjs + ng-click inside of a listbox template if i construct the listbox using angular syntax? For example I have the following plunker, I'd like to be able to click one of the items in the listbox and have it call the same ng-click function that the button can (really I want any angular stuff in there to work, not just ng-click):

    https://embed.plnkr.co/Woy3VBlWOFYFrhdBsjmR/

    In contrast I am able to do what I want (e.g. put a ng-click in the template) if I construct the listbox using jquery syntax
    https://embed.plnkr.co/7fRww24CkslSxWwY3PQy/
    here i can use angular e.g. ng-click in the listbox template, but I'd rather NOT initialize the listbox using jquery syntax since it means I'd have to refactor some stuff.

    I found this link and it makes me think maybe this isn't supported for this listbox? but perhaps you have a clever hack...
    https://docs.telerik.com/kendo-ui/AngularJS/introduction#template-directives

  2. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    482 posts

    Posted 05 Jan Link to this post

    Hi, Zac,

    I will paste my response from the private support thread here as well, in case anyone else needs to know how to compile jQuery Kendo template in an AngularJS application:

    -------------------------

    Indeed the AngularJS templates do not include one which works out of the box for the Kendo UI ListBox. It is possible to use AngularJS directive in the jQuery template with some manual labour, i.e. - we need to compile it programmatically. I tested a dataBound widget and one without dataSource and explored the add with the toolbar and the drag and drop functionality. I think I have covered all possible scenarios but do get back to me with any feedback. Here is a summary of what I have done:

    - added an event handler to the dataBound event of the first ListBox(the one which has a dataSource)
    - added an event handler to both of the ListBoxes add events
    - passed the function to the handlers above using a $timeout only because the add event is triggered before the item is actually added in which the compilation occurs:

    $scope.compileTemplate = function(e){    
     var listbox = this;
     $timeout(function(){
       var rows = listbox.items();
       rows.each(function(index,row){
         if(!$(row).hasClass("ng-scope")){
           $compile(row)($.extend($scope.$new(), listbox.dataItem(row)));
         }              
       });
     });          
    }

    Here is a runnable example that you can test with:

    http://dojo.telerik.com/@bubblemaster/IQatA/2

    Kind Regards,
    Alex Hajigeorgieva
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Zac
    Zac avatar
    2 posts
    Member since:
    Oct 2014

    Posted 05 Jan in reply to Alex Hajigeorgieva Link to this post

    Hi Alex,

    I noticed a bit that still missing: Reordering an item within a single listbox will disable the ng-click on the moved item. Any thoughts?

    Thanks,

    Zac

  4. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    482 posts

    Posted 08 Jan Link to this post

    Hello, Zac,

    Thank you for pointing reorder out. Indeed, the template will need to be compiled at this point also. 

    reorder: function(e){
      var reorderedItem = e.items[0];
      var listbox = this;
      $timeout(function(){
        $compile(reorderedItem)($.extend($scope.$new(), listbox.dataItem(reorderedItem)));
      });
    },

    Here is an updated runnable example:

    http://dojo.telerik.com/@bubblemaster/ALizUR

    Kind Regards,
    Alex Hajigeorgieva
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top