Task progress depends on additional property

[yaaami]

I add two non-default properties to Gantt data-source correctly, say, it is: (EstimationTime and ActualTime).

Now, I want to make task "progress" calculated and rendered in run-time depending on such equation: [("ActualTime" / "EstimationTime") * 100].
How would I do this? thank you.

[Mahalakshmi Karthikeyan]

Hi Yaami,

Thanks for contacting Syncfusion Support.

We can calculate and render the task progress based on the custom column values using “queryCellInfo” client side event. Please refer the below code example for details.

<div id="gantt"></div> 

<script type="text/javascript">

var projectData = [

{

    //…

    ActualTime: "02/03/2014",

    EstimateTime: "03/07/2014",

//…

] }

$("#gantt").ejGantt({

                //…

                load:function(args){

                    var columns=this.getColumns();

                    var EstimateTime={

                        field:"EstimateTime",

                        mappingName:"EstimateTime",

                        headerText:"Estimate Time"

                    }

                    var ActualTime={

                        field:"ActualTime",

                        mappingName:"ActualTime",

                        headerText:"Actual Time"

                    }

                   columns.splice(3, 0, EstimateTime);

                    columns.splice(4, 0, ActualTime);

                },

                queryCellInfo: function (args) {                  

                    if (args.column.field == "status") {                        

                        var actDate = new Date(args.data.ActualTime);

                        var estDate = new Date(args.data.EstimateTime);

                        var calcValue = (actDate.getDate() / estDate.getDate()) * 100;

                        args.data.item[this.model.progressMapping] = Math.round(calcValue);

                        args.data.status = Math.round(calcValue);

                        $(args.cellElement).text(Math.round(calcValue));

                        var width = args.data.width * args.data.status / 100;

                        args.data.progressWidth = width;

                    }

                }

   });

</script>

We have also prepared a sample based on this and you can find the sample under the following location:

Sample: http://jsplayground.syncfusion.com/30ggbe0t

Regards,

Mahalakshmi K.

[yaaami]

Thank you very much. But when I edit a task ActualTime to be as EstimateTime, the task Progress will be 100% (or any value indeed), but its parent progress will still not updated!

[yaaami]

OK. I developed this solution, but it needs more testing:

var editP = false;

$("#GanttContainer").ejGantt({
...
queryCellInfo: function (args) {
            if (args.column.field == "status") {
                updateTaskProgress(args.data, args.cellElement);
            }
        }
...
}

function updateTaskProgress(task, cell) {
    var actData = task.ActualTime;
    var estData = task.Duration;
    var calcValue = (actData / estData) * 100;
    var statusDelta = Math.round(calcValue) - getNum(task.status);
    task.status = getNum(task.status) + statusDelta; 
    task.item[this.model.progressMapping] = task.status;
    if (cell != null)
        $(cell).text(task.status);
    var width = task.width * task.status / 100;
    task.progressWidth = width;
    if (task.parentItem != null && editP) {
        updateParentsProgress(task.parentItem, statusDelta);
        editP = false;
    }
}
function updateParentsProgress(parent, statusDelta) {
    var childs = countArray(parent.childRecords, "isMilestone", false); // To exclude Milestones from subtasks count
    parent.status = getNum(parent.status) + Math.round(statusDelta / childs);
    parent.ActualTime = Math.round(parent.status / parent.Duration);
    parent.item[this.model.progressMapping] = parent.status;
    //$(parent.cellElement).text(parent.data.status);         *** Here I can't access parent cellElement
    var width = parent.width * parent.status / 100;
    parent.progressWidth = width;

    if (parent.parentItem != null)
        updateParentsProgress(parent.parentItem, statusDelta);
}

function countArray(array, prop, value) {
    var total = 0;
    for (var i = 0, len = array.length; i < len; i++)
        if (array[i][prop] === value) total++;
    return total;
}

function getNum(value) {
    return isNaN(value) ? 0 : value;
}

[Mahalakshmi Karthikeyan]

Hi Yaami,

We couldn’t get the Parent task element at the time of child task editing. So we can use “refreshRow” public method to refresh the whole row of parent after its progress changed. Please refer the below code example for details.

function updateParentsProgress(parent, statusDelta, cell, editP) {

            //…

            var childs = countArray(parent.childRecords, "isMilestone", false); // To exclude Milestones from subtasks count

            parent.status = getNum(parent.status) + Math.round(statusDelta / childs);

            parent.ActualTime = Math.round(parent.status / parent.Duration);
            parent.item[this.model.progressMapping] = parent.status;
            //…

            if (editP) {

                editP = false;

                var args = {};

                args.recordIndex = parent.index;

                var ganttobj = $("#gantt").data("ejGantt");

                ganttobj.refreshRow(args);
            }
}

Please try with this code to update the parent and let us know if you have further assistance on this.

Regards,

Mahalakshmi K.