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.
