CODEWITHSUNDEEP
javascriptangularjskendo-uikendo-templatekendo-listview
Haris
Haris

Reputation: 721

AngularJS ng-click is not called when used inside KendoUI's template

I am using kendoui with angularjs and trying to use a checkbox in kendo listView's template. But the problem is that angular's ng-click is not being called. Here is my code:

            var dataSource = new kendo.data.DataSource({
                data: roles
            });

            this.element.find('div#listcontent').kendoListView({
                template: kendo.template("<div><table > \
                                          <tr><td><input type='checkbox' # if(data.IsSelected) {# checked #}# ng-click='toggleSelection(\"#:data.Name#\")' /></td><td>#:data.Name#</td></tr>
                                          </table></div>"),
                dataSource: dataSource,
                selectable: true
            });

The checkbox is rendered like:

<input type="checkbox" ng-click="toggleSelection('Sales Person')">

I have checked that toggleSelection is available in the scope associated with the control. The reason to call toggleSelection is to update the value in model in scope.

I cannot use ng-checked in place of ng-click because ng-checked requires ng-model which would be available if I had used ng-repeat which I cannot use because I have to use kendo's listview. Plus there is no field in model that I can directly bind.

Do I have to somehow $compile the list view?

Upvotes: 1

Views: 1139

Answers (1)

Haris
Haris

Reputation: 721

I fixed it this way:

this.element.find('div#listcontent').kendoListView({
                template: kendo.template("<div><table> \
                                          <tr><td style = '\\padding:8px;'><input type='checkbox' # if(data.IsSelected) {# checked #}# /></td><td style='\\padding:8px;'>#:data.Name#</td></tr> \
                                          </table></div>"),
                dataSource: dataSource,
                selectable: true,
                change: function (e) {
                    var data = dataSource.view();
                    var selected = $.map(this.select(), function (item) {
                            return data[$(item).index()].Name;
                    });

                    if (selected)
                        oThis.toggleSelection(selected);
                }
            });
        }

        public toggleSelection (name: string) {
            /* definition */
        }

Upvotes: 1

Related Questions