This is a migrated thread and some comments may be shown as answers.

RadGantt does not display correctly

1 Answer 323 Views

General Discussions

This is a migrated thread and some comments may be shown as answers.

Melvin asked on 17 Aug 2015, 08:37 PM

gantt_w.png

scheduler_w.png

gantt_b.png

Hi,

I have a problem when I use radTabStrip control with scheduler and gantt. I have three tabs in the first I shows a radgrid control and the second shows a Scheduler control and the last one I show a Gantt Chart.

If I use the property selected of RadTabStrip control in “False”, I can see very well the Scheduler and Gantt (Gantt_w and Scheduler_w). But when I set Selected in “True”, the Scheduler shows well but the Gantt chart does not display correctly.

I do not understand what is the problem?

Here is my code ASP

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="wfGantt.aspx.cs" Inherits="testTelerik.wfGantt" %>

<%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI.Gantt" tagprefix="cc1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<link href="css/Bootstrap/Ajax.Bootstrap.css" rel="stylesheet" />

<link href="css/Bootstrap/Gantt.Bootstrap.css" rel="stylesheet" />

<link href="css/Bootstrap/TabStrip.Bootstrap.css" rel="stylesheet" />

<link href="css/Bootstrap/Calendar.Bootstrap.css" rel="stylesheet" />

<link href="css/Bootstrap/Scheduler.Bootstrap.css" rel="stylesheet" />

<link href="css/Bootstrap/SchedulerRecurrenceEditor.Bootstrap.css" rel="stylesheet" />

<link href="css/Bootstrap/SchedulerReminderDialog.Bootstrap.css" rel="stylesheet" />

<link href="css/Bootstrap/Window.Bootstrap.css" rel="stylesheet" />

<link href="css/Bootstrap/Menu.Bootstrap.css" rel="stylesheet" />

<title></title>

</head>

<body>

<form id="form1" runat="server">

<div>

<telerik:radscriptmanager runat="server"></telerik:radscriptmanager>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

<ajaxsettings>

<telerik:AjaxSetting AjaxControlID="pvScheduler">

<updatedcontrols>

<telerik:AjaxUpdatedControl ControlID="rschCasos" LoadingPanelID="ralpGantt" UpdatePanelCssClass="" />

</updatedcontrols>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="pvGantt">

<updatedcontrols>

<telerik:AjaxUpdatedControl ControlID="GraficoGantt" LoadingPanelID="ralpGantt" UpdatePanelCssClass="" />

</updatedcontrols>

</telerik:AjaxSetting>

</ajaxsettings>

</telerik:RadAjaxManager>

<telerik:RadAjaxLoadingPanel ID="ralpGantt" runat="server" Skin="Default"></telerik:RadAjaxLoadingPanel>

<telerik:RadTabStrip ID="RadTabStrip1" runat="server" MultiPageID="RadMultiPage1">

<Tabs>

<telerik:RadTab runat="server" PageViewID="pvPlanner" Text="Planeador" Value="Planner"></telerik:RadTab>

<telerik:RadTab runat="server" PageViewID="pvScheduler" Text="Scheduler" Value="Scheduler"></telerik:RadTab>

<telerik:RadTab runat="server" PageViewID="pvGantt" Text="Gantt" Value="Gantt"></telerik:RadTab>

</Tabs>

</telerik:RadTabStrip>

<telerik:RadMultiPage ID="RadMultiPage1" runat="server" Width="100%">

<telerik:RadPageView ID="pvPlanner" runat="server">

</telerik:RadPageView>

<telerik:RadPageView ID="pvScheduler" runat="server">

<telerik:radscheduler runat="server"

id="rschCasos"

selectedview="MonthView"

EnableEmbeddedSkins="False"

height="100%" width="100%"

ShowViewTabs="true" StartEditingInAdvancedForm="False"

OverflowBehavior="Auto"

MinimumInlineFormWidth="320" MinimumInlineFormHeight="140">

<TimelineView UserSelectable="false" />

<WeekView UserSelectable="false" />

<DayView UserSelectable="false" />

<MultiDayView UserSelectable="false" />

<localization advancednewappointment="Nuevo Evento"

advancedsubject="Asunto"

headerday="Día" headermonth="Mes" headertimeline="Linea de Tiempo"

headertoday="Hoy" headerweek="Semana" save="Guardar"

show24hours="Mostrar 24 horas..."

ConfirmCancel="Cancelar"

ConfirmDeleteText="Se encuentra seguro de eliminar el evento seleccionado?"

ConfirmDeleteTitle="Eliminar Evento"

ConfirmOK="Aceptar"

ContextMenuAddAppointment="Nuevo Evento"

ContextMenuAddRecurringAppointment="Nuevo Evento Periodico"

ContextMenuDelete="Eliminar"

ContextMenuEdit="Editar"

ShowBusinessHours="Mostrar horas de trabajo" AdvancedAllDayEvent="Todo el día" AdvancedCalendarCancel="Cancelar" AdvancedCalendarOK="Aceptar" AdvancedCalendarToday="Hoy" AdvancedClose="Cerrar" AdvancedDaily="Diario" AdvancedDay="Día" AdvancedDays="dia(s)" AdvancedDescription="Descripción" AdvancedDone="Listo" AdvancedEditAppointment="Editar Evento" AdvancedEndDateRequired="Fecha Final es requerido" AdvancedEndTimeRequired="Hora Final es requerido" AdvancedRecurrence="Periodicidad" AdvancedRepeat="Repetir" AdvancedStartDateRequired="Fecha Inicial es requerida" AdvancedStartTimeRequired="Hora Inicial es requerida" AllDay="todo el día" Cancel="Cancelar" ConfirmRecurrenceDeleteOccurrence="Eliminar solo esta ocurrencia" ConfirmRecurrenceDeleteSeries="Eliminar la serie" ContextMenuGoToToday="Ir a fecha actual" Delete="Eliminar" HeaderAddAppointment="Agregar Evento" HeaderAgendaAppointment="Evento" HeaderAgendaDate="Fecha" HeaderNextDay="siguiente día" HeaderPrevDay="día anterior" Reminder="Recordatorio" ReminderDay="día" ReminderDays="dias" ReminderHour="hora" ReminderHours="horas" ReminderMinute="minuto" ReminderMinutes="minutos" ReminderNone="Ninguno" ReminderOpenItem="Abrir Item" Reminders="Recordatorios" ShowAdvancedForm="Opciones" ShowMore="mas..." />

<monthview minimumrowheight="3" />

<TimeSlotContextMenuSettings EnableDefault="true"></TimeSlotContextMenuSettings>

<AppointmentContextMenuSettings EnableDefault="true" >

</AppointmentContextMenuSettings>

</telerik:radscheduler>

</telerik:RadPageView>

<telerik:RadPageView ID="pvGantt" runat="server">

</telerik:RadPageView>

</telerik:RadMultiPage>

</div>

</form>

</body>

</html>

Code C#

protected void Page_Load(object sender, EventArgs e)

{

RadTabStrip1.Skin = "Bootstrap";

DataTable tasks = new DataTable();

tasks.Columns.Add(new DataColumn("ID", typeof(int)));

tasks.Columns.Add(new DataColumn("ParentID", typeof(int)));

tasks.Columns.Add(new DataColumn("Subject", typeof(string)));

tasks.Columns.Add(new DataColumn("Summary", typeof(bool)));

tasks.Columns.Add(new DataColumn("PercentComplete", typeof(decimal)));

tasks.Columns.Add(new DataColumn("Start", typeof(DateTime)));

tasks.Columns.Add(new DataColumn("End", typeof(DateTime)));

tasks.Rows.Add(1, null, "Defining selection", false, 0.1, new DateTime(2015, 8, 2), new DateTime(2015, 9, 4));

tasks.Rows.Add(2, null, "Researching the market for candidates", true, 0, new DateTime(2015, 8, 3), new DateTime(2015, 8, 15));

tasks.Rows.Add(3, 2, "Advertising the position", false, 0.3, new DateTime(2015, 8, 10), new DateTime(2015, 8, 15));

tasks.Rows.Add(4, 2, "Collecting job applications", false, 0.5, new DateTime(2015, 8, 10), new DateTime(2015, 8, 15));

tasks.Rows.Add(5, null, "Categorizing applications", false, 0.5, new DateTime(2015, 8, 17), new DateTime(2015, 8, 22));

tasks.Rows.Add(6, null, "Assessing applicants", true, 0, new DateTime(2015, 8, 19), new DateTime(2015, 8, 31));

tasks.Rows.Add(7, 6, "Interview with Human Resources representatives", false, 0.2, new DateTime(2015, 8, 24), new DateTime(2015, 8, 26));

tasks.Rows.Add(8, 6, "Asigning and reviewing a sample test task", false, 0.2, new DateTime(2015, 8, 24), new DateTime(2015, 8, 27));

tasks.Rows.Add(9, 6, "Interview with Development representatives", false, 0.6, new DateTime(2015, 8, 26), new DateTime(2015, 8, 28));

tasks.Rows.Add(10, null, "Creating and proposing the job offer", false, 0.7, new DateTime(2015, 8, 27), new DateTime(2015, 8, 29));

tasks.Rows.Add(11, null, "Hiring applicant", false, 0.4, new DateTime(2015, 8, 25), new DateTime(2015, 8, 31));

//Scheduler

rschCasos.ReadOnly = true;

rschCasos.DataSource = tasks;

rschCasos.DataKeyField = "ID";

rschCasos.DataSubjectField = "Subject";

rschCasos.DataStartField = "Start";

rschCasos.DataEndField = "End";

rschCasos.Skin = "Bootstrap";

rschCasos.DataBind();

//Gant

CargarGraficoGantt(tasks);

//RadTabStrip1.Tabs[0].Selected = true;

//RadMultiPage1.SelectedIndex = pvPlanner.Index;

}

private void CargarGraficoGantt(DataTable dsGrafico)

{

RadGantt rgGantt = new RadGantt();

rgGantt.ID = "GraficoGantt";

rgGantt.SnapToGrid = false;

rgGantt.ReadOnly = true;

rgGantt.AllowSorting = false;

rgGantt.SelectedView = GanttViewType.MonthView;

rgGantt.AutoGenerateColumns = false;

//rgGantt.Width = Unit.Percentage(100.0);

//rgGantt.Height = Unit.Percentage(100.0);

//Columnas

agregarColumna("ID", "Id", 50, rgGantt);

agregarColumna("Title", "Tareas a Desarrollar", 350, rgGantt);

agregarColumna("PercentComplete", "Porcentaje", 80, rgGantt);

rgGantt.DataBindings.TasksDataBindings.IdField = "ID";

rgGantt.DataBindings.TasksDataBindings.TitleField = "Subject";

rgGantt.DataBindings.TasksDataBindings.StartField = "Start";

rgGantt.DataBindings.TasksDataBindings.EndField = "End";

rgGantt.DataBindings.TasksDataBindings.ParentIdField = "ParentID";

rgGantt.DataBindings.TasksDataBindings.SummaryField = "summary";

rgGantt.DataBindings.TasksDataBindings.PercentCompleteField = "PercentComplete";

rgGantt.DataSource = dsGrafico;

rgGantt.Skin = "Bootstrap";

rgGantt.DataBind();

pvGantt.Controls.Add(rgGantt);

}

private void agregarColumna(string DataField, string Header, int tamano, RadGantt ctrlGantt)

{

GanttBoundColumn gbc = new GanttBoundColumn();

gbc.DataField = DataField;

gbc.HeaderText = Header;

gbc.Width = Unit.Pixel(tamano);

ctrlGantt.Columns.Add(gbc);

}

So when I activate this:

RadTabStrip1.Tabs[0].Selected = true;

RadMultiPage1.SelectedIndex = pvPlanner.Index;

The Gantt chart does not display correctly ( Gantt_b).

1 Answer, 1 is accepted

answered on 19 Aug 2015, 06:57 AM

Hello,

When the gantt is initialized, it measures its parent container and does some internal calculations, in order to divide up the space between the different view areas. When the parent container is not visible, or has a different size during this initialization, the calculations return the wrong values.

What you have to do in your case is whenever you show the gantt panel, call the following client code, which will refresh the gantt relative to its parent container:

$find("GraficoGantt")._widget.resize()

Regards,
Bozhidar
Telerik

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items