I am struggling to trigger a function when selecting a checkbox in a Kendo grid using AngularJS and Kendo grid. Surprisingly, I am not getting any response on click - no errors or logs either. I attempted placing console.log() at the beginning of the function being called but it did not show anything. I have experimented with placing the method both within a service in scope and directly in scope.
My main query revolves around how to effectively utilize ng-click on a checkbox embedded within a cell template of a Kendo grid?
Here is the code snippet for binding the grid:
var cols = this.GetGridColumns(uiConfig.GridColumns);
var grid = $("#kGrid").kendoGrid({
dataSource: {
serverPaging: true,
serverSorting: true,
schema: {
data: "data",
total: "total",
model: {
id: "relatedEntityID"
}
},
pageSize: 10,
transport: {
read: function(options) {
// read from service
}
}
},
columns: cols,
scrollable: false,
pageable: { "refresh": true, "pageSizes": true },
sortable: true,
filterable: true,
selectable: "multiple",
change: () => this.onChange()
});
Below is the definition:
GetGridColumns(columns: Array<servicePath.SLF.solutionEngine.Model.Admin.GridColumn>): any
{
var colHeader = new Array();
colHeader.push({
template: '<input type="checkbox" id="cbItem" class="checkbox" ng-click="genericServices.selectRow(\'kGrid\', $event)" />',
headerTemplate: '<input type="checkbox" id="check-all" ng-click="genericServices.ToggleCheckAllInGrid(\'#kGrid\', $event)" />',
width: '30px'});
var column = new servicePath.SLF.solutionEngine.Model.CMs.GridColumnCM();
for (var j=0 ; j < columns.length; j++)
{
column = new servicePath.SLF.solutionEngine.Model.CMs.GridColumnCM();
column.Field = columns[j].BindingName;
column.Title = columns[j].BindingName;
column.ColumnType = columns[j].GridColumnType;
column.HorizontalAlignment = columns[j].HorizontalAlignment;
column.LocalizedName = columns[j].LocalizedLabel;
colHeader.push({ title: column.Name, field: columns[j].BindingName, template: column.Template } );
}
return colHeader;
}
The function genericServices.ToggleCheckAllInGrid used in the header template appears to be functioning correctly within the above code.
This is the definition of genericServices.
this.selectRow = function (gridId: string, e: any): void {
gridId = '#' + gridId;
console.log(gridId);
var elem = angular.element(e.currentTarget);
var row = elem.closest("tr");
var checked = elem.prop('checked');
if (checked) {
//-select the row
row.addClass("k-state-selected");
} else {
//-remove selection
row.removeClass("k-state-selected");
}
};