Binded Progress Bar is lost when Kendo Tree List Expands

3 posts, 0 answers
  1. Sibin
    Sibin avatar
    5 posts
    Member since:
    Nov 2016

    Posted 08 Dec 2016 Link to this post

    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 #}


    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);


             change: function (e)


               if (model.CurrentStatus == "Progress")

               { colorCode = "#235400"; }


             { "background-color": colorCode, "border-color": colorCode });







    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.

  2. Stefan
    Stefan avatar
    3078 posts

    Posted 12 Dec 2016 Link to this post

    Hello Sibin,

    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:

    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.

    Telerik by Progress
    Kendo UI is ready for Visual Studio 2017 RC! Learn more.
  3. Sibin
    Sibin avatar
    5 posts
    Member since:
    Nov 2016

    Posted 12 Dec 2016 in reply to Stefan Link to this post

    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()



     }, 0)

    here is the working dogo.

Back to Top