We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Task progress depends on additional property

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.

4 Replies

MK Mahalakshmi Karthikeyan Syncfusion Team January 12, 2016 07:03 AM UTC

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.



YA yaaami January 12, 2016 09:27 AM UTC

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!




YA yaaami January 13, 2016 11:11 AM UTC

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


MK Mahalakshmi Karthikeyan Syncfusion Team January 13, 2016 05:44 PM UTC

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.


Loader.
Live Chat Icon For mobile
Up arrow icon