Binded Progress Bar is lost when Kendo Tree List Expands

[Sibin]

I have bind 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 shows up the Progress bar. However when I click on expand arrow, The Progress bar is not showing up. Any help is appreciated.

[Stefan]

Hello ,

I can assume that the issue occurs because the progressBar is displayed on the dataBound event, but this event is not fired on expand.

I can suggest executing the same code for the progressBar on the expand event of the TreeList:

http://docs.telerik.com/kendo-ui/api/javascript/ui/treelist#events-expand

Please have in mind that the expand event is preventable and the code may need to be executed inside a setTimeout function.

I hope this will help to achieve the desired result.

Regards,
Stefan
Telerik by Progress

[Sibin]

Thank you Stefan for that heads 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.

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