October 23, 2020, 07:55:44 AM

See more Support incidents in our old archived forum.

Author Topic: Gantt table and chart not refreshing  (Read 6518 times)

ssunder

  • Customers
  • Newbie
  • *
  • Posts: 25
Gantt table and chart not refreshing
« on: November 20, 2014, 01:23:40 PM »
Hi Team,

I am facing problem in refreshing the gantt container, I have a dropdown based on dropdown change i have to reload gantt chart, for First time it will work properly, once I change the value of dropdown gantt chart & gantt Table disturbed.

Note: I am using RadiantQ-jQuery.Gantt.4.5 JS.
Here I have tried these ways
var $gantt_container = $('#gantt_container');
 gantt = $gantt_container.data("GanttControl");

 $gantt_container.GanttControl("option", "DataSource", null);
 $gantt_container.GanttControl({
        DataSource: self.jsonData
    });

 //RebindPropertychange();
gantt.RedrawChartRows();
this says GanttControl not initilized

Can you suggest where is wrong?

Thanks
Shyam

Rajagopal

  • RQ Members
  • Full Member
  • *
  • Posts: 149
Re: Gantt table and chart not refreshing
« Reply #1 on: November 21, 2014, 01:12:19 PM »
Shyam,

We have tried to reproduce this issue in the reference sample. But, we can't able to reproduce it. Could you please try to reproduce this issue in the reference sample and share with us the code?

It's not necessary to call "RedrawChartRows" method when resetting the ItemsSource.


Regards,
-Raja.

ssunder

  • Customers
  • Newbie
  • *
  • Posts: 25
Re: Gantt table and chart not refreshing
« Reply #2 on: November 24, 2014, 01:16:40 PM »
Hi Raja
Now I am able to rebind ganttdata, but only able to bind Gantt table data not chart.

like this
if (data != undefined) {
        self.jsonData = data;
        var $gantt_container = $('#gantt_container');
        gantt = $gantt_container.data("GanttControl");

        $gantt_container.GanttControl("option", "DataSource", null);
        $gantt_container.GanttControl({
            DataSource: self.jsonData
        });
    }
    else {
        self.jsonData = [];
        $gantt_container.GanttControl("option", "DataSource", null);
        $gantt_container.GanttControl({
            DataSource: self.jsonData
        });
    }

after this chart is redraw only table is loaded.

Shyam

Rajagopal

  • RQ Members
  • Full Member
  • *
  • Posts: 149
Re: Gantt table and chart not refreshing
« Reply #3 on: November 24, 2014, 05:35:18 PM »
Shyam,

Still can't able to reproduce this issue. Could you please share the full code/sample with us?


Regards,
-Raja.

ssunder

  • Customers
  • Newbie
  • *
  • Posts: 25
Re: Gantt table and chart not refreshing
« Reply #4 on: November 25, 2014, 12:20:22 PM »
Raja

First I fetched josn data using service and set that in
var $ganttControl = null, gantt;
var projSchedule = null;
var $gantt_container = null;

$(document).ready(function () {   
self.jsonData = data;//Here is fetch using service
$gantt_container = $('#gantt_container');
GanttChartReady()
});

GanttChartReady = function () {
    // Counter to check loading for first time
    //ganttChartLoadCounter++;
    //debugger;
    if (toolTipDateformat == "" || toolTipDateformat == "null" || toolTipDateformat == 'undefined')
        toolTipDateformat = "dd-MMM-yyyy";

    var WorkDays = 5;
    var WorkWeek = "MonTueWebThuFri";
   
    var tmshs = new RadiantQ.Gantt.TimeScaleHeaderDefinitions();
    var yearHeader = self.yearHeaderLine();
    var monthHeader = self.monthHeaderLine();
    var daysHeader = self.dayHeaderLine();
    var that = this;
    tmshs.add(yearHeader);
    tmshs.add(monthHeader);
    tmshs.add(daysHeader);

    var backGroundBaseLineTemplate;
    var tTemplate;

    backGroundBaseLineTemplate = "<div class='backgroundBaseline-style' " +
        " style='display:none; background: {{html UpdateColorBinding('bgcolorBase')}}; " +
        " width: {{html widthConverter()}}; margin:{{html leftConverter()}}' title='{{html baseLineTooltip()}}'></div>";

    tTemplate = "<div class='taskbar-style' style=\"background:{{html UpdateColorBinding('bgcolor')}} !important;" +
        " border-color:{{html UpdateColorBinding('border')}} !important;\"><div id='GanttTaskBarLabel' class='label'></div></div>";
   
    projSchedule = Custom_Schedule(WorkDays, WorkWeek);

    var currentDate = new Date().clearTime();
    var startTime = projSchedule.ConvertToNextWorkingTime(currentDate);

    var anchorTime = self.jsonData.length == 0 ? startTime : self.jsonData[0].StartTime.clone();
    var projectStart = anchorTime.clone();

    var $GanttChart = null;
    //var $timeline = $("#timeline"), $pagecontent = $("#pagecontent");

    var height = $(window).height();
    var width = $(window).width();

    self.ChangeHeight();

    $gantt_container.GanttControl({
        ProjectStartDate: anchorTime,
        GanttTableRowLoadedCallBack: TemplateInnerCallBack,
        DataSource: jsonData,
        Width: '100%',
        WorkTimeSchedule: projSchedule,
        TaskItemTemplate: tTemplate,
        TaskBarBackgroundTemplate: backGroundBaseLineTemplate,
        CanInsertPropertyChangeTriggeringPropertiesInData: true,
        IDBinding: { Property: "ID" },
        NameBinding: { Property: "Name" },
        IndentLevelBinding: { Property: "IndentLevel" },
        StartTimeBinding: { Property: "StartTime" },
        LagStringUnitsInHours: 8,
        EffortBinding: { Property: "EndTime", Converter: effortConverter },
        PlannedStartTimeBinding: { Property: "PlannedStartTime" },
        PlannedEffort: { Property: "PlannedEffort" },
        PredecessorIndicesBinding: { Property: "PredecessorIndices" },
        ProgressPercentBinding: { Property: "ProgressPercent" },
        DescriptionBinding: { Property: "Description" },
        RoundTimeEditsTo: RadiantQ.Gantt.RoundToOptions.Day,       
        TaskTooltipTemplate: $("<div><table class='TaskTooltip ui-widget-content' style='white-space:nowrap;border:none;'>" +
            "<tr><td colspan='4' style='text-align: center;'><b>Task Details</b></td></tr>" +
            "<tr><td style='width: 80px; text-align: right;'><b>Description:</b></td><td colspan='3' style='padding-left: 3px;'>${this.data.ActivityName}</td></tr>" +
            "<tr><td style='text-align: right;'><b>Start:</b></td><td style='padding-left: 3px;'>${this.data.StartTime.toString('" + toolTipDateformat + "')}</td><td style='width: 80px; text-align: right;'><b>Duration:</b></td><td style='padding-left: 3px;'>${Duration.getTotalHours() / 8 + ' days'} </td></tr>" +
            "<tr><td style='text-align: right;'><b>Finish:</b></td><td style='padding-left: 3px;'>${this.data.EndTime.toString('" + toolTipDateformat + "')}</td><td style='text-align: right;'><b>% Complete:</b></td><td style='padding-left: 3px;'>${this.data.ProgressPercent}%</td></tr>" +
            "</table></div>"),
        TaskBarTooltipTemplate: $("<div><table class='TaskTooltip ui-widget-content' style='white-space:nowrap;border:none;'>" +
            "<tr><td colspan='4' style='text-align: center;'><b>Task Details</b></td></tr>" +
            "<tr><td style='width: 80px; text-align: right;'><b>Description:</b></td><td colspan='3' style='padding-left: 3px;'>${this.data.ActivityName}</td></tr>" +
            "<tr><td style='text-align: right;'><b>Start:</b></td><td style='padding-left: 3px;'>${this.data.PlannedStartTime.toString('" + toolTipDateformat + "')}</td><td style='width: 80px; text-align: right;'><b>Duration:</b></td><td style='padding-left: 3px;'>${PlannedDuration.getTotalHours() / 8 + ' days'} </td></tr>" +
            "<tr><td style='text-align: right;'><b>Finish:</b></td><td style='padding-left: 3px;'>${this.data.PlannedEndTime.toString('" + toolTipDateformat + "')}</td><td style='text-align: right;'><b>% Complete:</b></td><td style='padding-left: 3px;'>${this.data.ProgressPercent}%</td></tr>" +
            "</table></div>"),       
        AdjustDurationOnAssignment: false,
        TimeScaleHeaders: tmshs,
        GanttTable: $("#ganttTable"),
        GanttChartTemplateApplied: function (sender) {
            gantt = $gantt_container.data("GanttControl");
            $GanttChart = gantt.GetGanttChart();
            $GanttChart.GanttChart({ AnchorTime: anchorTime, TimeScalePagerButtonVisisbility: false });
        }
    });

    //RadiantQ
    $table = $("#ganttTable");
    $ganttControl = $gantt_container.data("GanttControl");   

    CreateTaskEditingDialog();   

    ShowHideGanttColumn();   
   
}

// year header definition.
yearHeaderLine = function () {
    var yearHeader = new RadiantQ.Gantt.TimeScaleHeaderDefinition();
    yearHeader.Type = ns_gantt.TimeScaleType.Years;
    return yearHeader;
}

// month header definition.
monthHeaderLine = function () {
    var monthHeader = new RadiantQ.Gantt.TimeScaleHeaderDefinition();
    monthHeader.TextFormat = "MMM yyyy";
    monthHeader.Type = ns_gantt.TimeScaleType.Months;
    return monthHeader;
}

// day header definition.
dayHeaderLine = function () {
    var daysHeader = new RadiantQ.Gantt.TimeScaleHeaderDefinition();
    daysHeader.Type = ns_gantt.TimeScaleType.Days;
    return daysHeader;
}

//To setting custom schedule
Custom_Schedule = function (days, week) {

    if (week == 'undefined')
        week = "MonTueWebThuFri";

    var calString1 = week.toLowerCase().indexOf("mon") >= 0 ? "MON 08:00:00 16:00:00" : "";
    var calString2 = week.toLowerCase().indexOf("tue") >= 0 ? "TUE 08:00:00 16:00:00" : "";
    var calString3 = week.toLowerCase().indexOf("wed") >= 0 ? "WED 08:00:00 16:00:00" : "";
    var calString4 = week.toLowerCase().indexOf("thu") >= 0 ? "THU 08:00:00 16:00:00" : "";
    var calString5 = week.toLowerCase().indexOf("fri") >= 0 ? "FRI 08:00:00 16:00:00" : "";
    var calString6 = week.toLowerCase().indexOf("sat") >= 0 ? "SAT 08:00:00 16:00:00" : "";
    var calString7 = week.toLowerCase().indexOf("sun") >= 0 ? "SUN 08:00:00 16:00:00" : "";
    var calString = calString1;

    if (calString != "" && calString2 != "")
        calString += ";" + calString2;
    else if (calString2 != "")
        calString = calString2;

    if (calString != "" && calString3 != "")
        calString += ";" + calString3;
    else if (calString3 != "")
        calString = calstring3;

    if (calString != "" && calString4 != "")
        calString += ";" + calString4;
    else if (calString4 != "")
        calString = calString4;

    if (calString != "" && calString5 != "")
        calString += ";" + calString5;
    else if (calString5 != "")
        calString = calString5;

    if (calString != "" && calString6 != "")
        calString += ";" + calString6;
    else if (calString6 != "")
        calString = calString6;

    if (calString != "" && calString7 != "")
        calString += ";" + calString7;
    else if (calString7 != "")
        calString = calString7;

    var calendar = new RadiantQ.Gantt.Calendar("8X" + days, calString);
    projSchedule = RadiantQ.Gantt.Calendar.CreateSchedule(calendar);

    return projSchedule;
}

Now after loading I rebind ganttchart with different data as
self.jsonData =  data;//Here data is new data.
$gantt_container.GanttControl("option", "DataSource", null);
    $gantt_container.GanttControl({
        DataSource: self.jsonData
    });

In first time on page load when output data length > 0 and bind it display gantttable and GanttChart now  when data length is 0 and now binding ganttchart with new data it only binds GanttTable not chart.

Can you suggest where is wrong?
like on load when self.JsonData length > 0 then rebinding ganttchart it is displaying ganttchart/ table and on load when self.JsonData lenght = 0 then rebinding ganttchart/ table with data having length > 0 only binding GanttTable not chart.

Rajagopal

  • RQ Members
  • Full Member
  • *
  • Posts: 149
Re: Gantt table and chart not refreshing
« Reply #5 on: November 25, 2014, 04:32:33 PM »
Shyam,

We are looking on this, we will update you soon.


Regards,
-Raja.

Rajagopal

  • RQ Members
  • Full Member
  • *
  • Posts: 149
Re: Gantt table and chart not refreshing
« Reply #6 on: November 26, 2014, 04:01:08 PM »
Shyam,

We have tried to reproduce this issue as you mentioned, But, we can't able to reproduce it. We have sent the reference sample what we  have tried. Could you please try to reproduce your issue in the reference sample?


Regards
Raja.