use angularjs ng-click in listbox template in Kendo UI for jQuery

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

use angularjs ng-click in listbox template

3 Answers 37 Views

ListBox

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

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

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.

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.