RadGantt does not display correctly

2 posts, 0 answers
  1. Melvin
    Melvin avatar
    14 posts
    Member since:
    Apr 2015

    Posted 17 Aug 2015 Link to this post

    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>
     
    <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" />
        <!--Scheduler-->
        <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).

     

     

  2. Bozhidar
    Admin
    Bozhidar avatar
    1101 posts

    Posted 19 Aug 2015 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top