Umar Umar - 29 days ago 14
AngularJS Question

cannot refresh a kendo grid in angular JS

since i am using kendo Grid in my view. I am using custom template of the rows.
I need to update my Grid on each ajax call my code is here.

View.html

<div kendo-grid="grid" options="mainGridOptions"></div>


Controller.js

//method to update Grid when source website is changed
$scope.updateDetails = function () {
$scope.selectedSource = websiteService.getFilteredObject($scope.list, $scope.singleObject.FK_Name);
//$scope.updateTree();
var webName = "";
if ($scope.Option == 'newInstance' || ($scope.Option != "newInstance" && $scope.singleObject.FK_Name == ""))
webName = 'MetisEmptyTemplate';
else
webName = $scope.singleObject.FK_Name;

webName = webName == null ? "MetisEmptyTemplate" : webName;

//Grid code here
featuresService.getJson(webName, function (callBackData) {
$scope.featuresArray = JSON.parse(callBackData);

$scope.mainGridOptions = {
dataSource: {
data: $scope.featuresArray
},
columns: featuresService.GetColsArray()
};

//$scope.grid.refresh(); //$scope.grid gets undefined here

});

//Grid code ended
}


Here is some other function where i access this grid.

$scope.onCheckBoxClick = function (elem) {
featuresService.onCheckBoxClick(elem.currentTarget, this.grid.dataSource);
}


featuresService.js

app.service('featuresService', ['$http', '$rootScope', '$q', function ($http, $rootScope, $q) {

var self = this;


// method that return all websites from an http request
this.getJson = function (websiteName, callback) {
$http({
method: 'GET',
url: $rootScope.url + 'GetFeaturesJSON?webName=' + websiteName,
//data: JSON.stringify({ webName: websiteName }),
//contentType: 'application/json',
crossDomain: true
}).then(
function(successdata) {
callback(successdata.data);
});

//}).success(function (data) {
// callback(data);
//});
}

//headers of columns
this.GetColsArray = function() {
var colsArray = [{
field: "Analysis",
title: "Analysis",
}, {
field: "Home",
title: "Home",
template: function (data) {
return self.checkBoxColTemplate(data, 'Home');
}
}, {
field: "Admin",
title: "Admin",
template: function (data) {
return self.checkBoxColTemplate(data, 'Admin');
}
}, {
field: "Strategy",
title: "Strategy",
template: function (data) {
return self.checkBoxColTemplate(data, 'Strategy');
}
}, {
field: "Portfolio",
title: "Portfolio",
width: 250,
template: function (data) {
return self.checkBoxColTemplate(data, 'Portfolio');
}
}, {
field: "Project",
title: "Project",
template: function (data) {
return self.checkBoxColTemplate(data, 'Project');
}
}, {
field: "Output",
title: "Output",
template: function (data) {
return self.checkBoxColTemplate(data, 'Output');
}
}];
return colsArray;
}

//wrapper to get specific template
this.checkBoxColTemplate = function (data, columnName) {
var html = '',
checkBoxes = data[columnName];
if (checkBoxes.length) {
for (var i = 0; i < checkBoxes.length; i++) {

var inputState = (checkBoxes[i]['value']) ? 'checked' : '';

html += '<div><input type="checkbox" data-id="' + checkBoxes[i]['dataId'] + '" class="' + checkBoxes[i]['dataParent'].join(' ') + '" ng-click="onCheckBoxClick($event)" ' + inputState + ' index=' + i + ' col-name="' + checkBoxes[i]['colName'] + '" />' + checkBoxes[i]['label'] + '</div>';

}
}

return html;
}

//function to handle checkbox click
this.onCheckBoxClick = function (el, dataSource) {
var $el = $(el);
var isChecked = $el.is(':checked');
var dataId = $el.attr('data-Id');
var children = $el.closest('tr').find('input.' + dataId + '');
self.setCheckBoxDataSource(el, isChecked, dataSource.data());
children.each(function () {
$(this).prop('checked', isChecked);
$(this).prop('disabled', !isChecked);
self.setCheckBoxDataSource(this, isChecked, dataSource.data());
});

//dataSource.read();
}

//
this.setCheckBoxDataSource = function (el, val, data) {
var $el = $(el);
var rowIndex = $el.closest('tr')[0].rowIndex;
var inputIndex = parseInt($el.attr('index'));
var colName = $el.attr('col-name');

if (rowIndex > -1) {
data[rowIndex][colName][inputIndex].value = val;
}
}

}])


Why does my $scope.grid goes undefined? I am accessing that in onCheckBoxClick function.
Thanks in advance!

Answer

so after alot of R&D it helped me. Re bind the gridoptions to itself in k-rebind.

    k-rebind="mainGridOptions"

source: https://www.roelvanlisdonk.nl/2014/11/12/how-to-refresh-kendo-ui-widget-when-options-on-the-angularjs-scope-change/

Comments