kendo-uikendo-treelist

Bound Progress Bar Is Lost When Kendo Tree List Expands


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.


Solution

  • 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.

    http://dojo.telerik.com/OLiFE/18