// The template that defines the look for the task bars. "taskbar-style" is a built-in style that defines a default look for the task bars. The method taskBarSizeChanged(passed as attribute value of SizedChanged will be called when the taskbar position recomputed.

        var tTemplate = "<div SizeChanged ='taskBarSizeChanged'><div  class='dragThumb'></div><div class='progress-bar'></div></div>";

//Called when taskbar size chnaged. Here we update the progress bar's width.

function taskBarSizeChanged(boundData, ganttChart) {

    var startInX = ganttChart.ConvertTimeToX(boundData.StartTime);

    var endInX = ganttChart.ConvertTimeToX(boundData.EndTime);

    var progessEndPos = startInX + ((endInX - startInX) * boundData.progress / 100);

    var progressEndTime = ganttChart.ConvertXToTime(progessEndPos);

    var width = ganttChart.ConvertTimeToX(progressEndTime) - ganttChart.ConvertTimeToX(boundData.StartTime);            //To cache the element after the template rendered.

    var progressBar = $("div.progress-bar", this);

    progressBar.width(width);

}