This is a migrated thread and some comments may be shown as answers.
use angularjs ng-click in listbox template
3 Answers 37 Views
This is a migrated thread and some comments may be shown as answers.
Zac
Top achievements
Rank 1
Zac asked on 03 Jan 2018, 02:56 PM

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

3 Answers, 1 is accepted

Sort by
0
Alex Hajigeorgieva
Telerik team
answered on 05 Jan 2018, 07:55 AM
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.
0
Zac
Top achievements
Rank 1
answered on 05 Jan 2018, 09:33 PM

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

0
Alex Hajigeorgieva
Telerik team
answered on 08 Jan 2018, 11:23 AM
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.
Asked by
Zac
Top achievements
Rank 1
Answers by
Alex Hajigeorgieva
Telerik team
Zac
Top achievements
Rank 1
Share this question
or