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