I have bound a progress bar inside a Tree View as given.
<script id="progressField" type="text/x-kendo-template">
#if(CurrentStatus == "Progress")
{#
<div class='progressDetails'></div>
#}
else if(CurrentStatus == "Error")
{#
// Other task
#}
</script>
And added the same to Tree List View as given
columns: [
{ field: "CurrentStatus", title: "Status", template: $("#progressField").html(), width: "170px" }
],
And updated the same on DataBound
function dataBound(e) {
var tree = this;
$(".progressDetails").each(function () {
var row = $(this).closest("tr");
var model = tree.dataItem(row);
$(this).kendoProgressBar({
change: function (e) {
if (model.CurrentStatus == "Progress") {
colorCode = "#235400";
}
this.progressWrapper.css({
"background-color": colorCode,
"border-color": colorCode
});
}
});
$(this).data("kendoProgressBar").value(model.Percentage);
});
};
On load, sorting, and filtering the tree list the progress bar shows up. However when I click on expand arrow, the progress bar is not showing up.
Finally we got the solution, Issue was Collapse and expand method were getting triggered very soon.
Added a timeout and it started working..
expand: function(e){
var scope = e
setTimeout(function(){
$scope.expandOrCollapse(scope);
}, 0)
}
here is the working dogo.