New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

View Types

  • Demo Configurator
  • View Settings
  • Common Settings
View Type
Month View Settings
  • Week Header Formatddd M/dd
    Month Header FormatM
  • Slot Width (px)85
  • ShowFullTime
  • ShowFullWeek
  • Work Week StartSunday
    Work Week EndFriday

The Gantt offers different types of views (Day, Week, Month and Year), where you could control the internal appearance of the timeline. For example, you could customize the control to show only the business hours in the Day view and business days in Week and Month view.

  • DefaultVB.aspx
  • DefaultVB.aspx.vb
<%@ Page Language="vb" AutoEventWireup="true" CodeFile="DefaultVB.aspx.vb" Inherits="Telerik.Web.Examples.GanttExamples.Functionality.ViewTypes.DefaultVB" %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />

    <div class="demo-container no-bg">
        <telerik:RadGantt RenderMode="Lightweight" runat="server" ID="RadGantt1" Height="450px" SelectedView="MonthView" AutoGenerateColumns="false" OnNavigationCommand="RadGantt1_NavigationCommand">
            <YearView UserSelectable="true" />
            <Columns>
                <telerik:GanttBoundColumn DataField="Title"></telerik:GanttBoundColumn>
            </Columns>
        </telerik:RadGantt>
    </div>



    <telerik:RadAjaxManager ID="Manager" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="ConfiguratorPanel">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGantt1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="RadGantt1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="ConfiguratorPanel" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>

    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel" runat="server" />

    <qsf:ConfiguratorPanel ID="ConfiguratorPanel" runat="server">
        <Views>
            <qsf:View Title="View Settings">
                <qsf:ConfiguratorColumn Title="View Type" runat="server" Size="Narrow">
                    <qsf:RadioButtonList ID="GanttViews" runat="server" Orientation="Vertical"
                        OnSelectedIndexChanged="GanttViews_SelectedIndexChanged" AutoPostBack="true">
                        <asp:ListItem Text="Day View" Value="DayView" />
                        <asp:ListItem Text="Week View" Value="WeekView" />
                        <asp:ListItem Text="Month View" Value="MonthView" Selected="True" />
                        <asp:ListItem Text="Year View" Value="YearView" />
                    </qsf:RadioButtonList>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="DayView" Title="Day View Settings" runat="server" Size="Medium" Visible="false">
                    <ul class="fb-group">
                        <li>
                            <qsf:DropDownList runat="server" ID="DayViewDayHeaderDateFormat" AutoPostBack="true" Size="Medium"
                                Label="Day Header Format" ToolTip="Controlled by the DayView.DayHeaderDateFormat property">
                                <Items>
                                    <telerik:DropDownListItem Value="d" Text="d" />
                                    <telerik:DropDownListItem Value="dd" Text="dd" />
                                    <telerik:DropDownListItem Value="ddd" Text="ddd" Selected="true" />
                                    <telerik:DropDownListItem Value="dddd" Text="dddd" />
                                </Items>
                            </qsf:DropDownList>
                            <qsf:DropDownList runat="server" ID="DayViewHoursTimeFormat" AutoPostBack="true" Size="Medium"
                                Label="Hours Header Format" ToolTip="Controlled by the DayView.TimeHeaderDateFormat property">
                                <Items>
                                    <telerik:DropDownListItem Value="H:mm" Text="H:mm" Selected="true" />
                                    <telerik:DropDownListItem Value="H:mm:ss" Text="H:mm:ss" />
                                    <telerik:DropDownListItem Value="t" Text="t" />
                                    <telerik:DropDownListItem Value="T" Text="T" />
                                </Items>
                            </qsf:DropDownList>
                        </li>

                        <li>
                            <qsf:DropDownList runat="server" ID="DayViewSlotWidth" AutoPostBack="true" Size="Medium"
                                Label="Slot Width (px)" ToolTip="Controlled by the DayView.SlotWidth property">
                                <Items>
                                    <telerik:DropDownListItem Value="65px" Text="65" />
                                    <telerik:DropDownListItem Value="85px" Text="85" Selected="true" />
                                    <telerik:DropDownListItem Value="100px" Text="100" />
                                </Items>
                            </qsf:DropDownList>
                            <qsf:DropDownList runat="server" ID="DayViewHourSpan" AutoPostBack="true" Size="Medium"
                                Label="Cell Hour Span" ToolTip="Controlled by the DayView.HourSpan property">
                                <Items>
                                    <telerik:DropDownListItem Value="1" Text="1" />
                                    <telerik:DropDownListItem Value="2" Text="2" Selected="true" />
                                    <telerik:DropDownListItem Value="3" Text="3" />
                                    <telerik:DropDownListItem Value="4" Text="4" />
                                </Items>
                            </qsf:DropDownList>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="WeekView" Title="Week View Settings" runat="server" Size="Medium" Visible="false">
                    <ul class="fb-group">
                        <li>
                            <qsf:DropDownList runat="server" ID="WeekViewDayHeaderDateFormat" AutoPostBack="true" Size="Medium"
                                Label="Day Header Format" ToolTip="Controlled by the WeekView.DayHeaderDateFormat property">
                                <Items>
                                    <telerik:DropDownListItem Value="d" Text="d" />
                                    <telerik:DropDownListItem Value="dd" Text="dd" />
                                    <telerik:DropDownListItem Value="ddd" Text="ddd" Selected="true" />
                                    <telerik:DropDownListItem Value="dddd" Text="dddd" />
                                </Items>
                            </qsf:DropDownList>
                            <qsf:DropDownList runat="server" ID="WeekViewWeekHeaderDateFormat" AutoPostBack="true" Size="Medium"
                                Label="Week Header Format" ToolTip="Controlled by the WeekView.WeekHeaderDateFormat property">
                                <Items>
                                    <telerik:DropDownListItem Value="d" Text="d" />
                                    <telerik:DropDownListItem Value="dd" Text="dd" />
                                    <telerik:DropDownListItem Value="ddd" Text="ddd" Selected="true" />
                                    <telerik:DropDownListItem Value="dddd" Text="dddd" />
                                </Items>
                            </qsf:DropDownList>
                        </li>
                        <li>
                            <qsf:DropDownList runat="server" ID="WeekViewSlotWidth" AutoPostBack="true" Size="Medium"
                                Label="Slot Width (px)" ToolTip="Controlled by the WeekView.SlotWidth property">
                                <Items>
                                    <telerik:DropDownListItem Value="65px" Text="65" />
                                    <telerik:DropDownListItem Value="85px" Text="85" Selected="true" />
                                    <telerik:DropDownListItem Value="100px" Text="100" />
                                </Items>
                            </qsf:DropDownList>
                        </li>
                        <li>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="MonthView" Title="Month View Settings" runat="server" Size="Medium">
                    <ul class="fb-group">
                        <li>
                            <qsf:DropDownList runat="server" ID="MonthViewWeekHeaderDateFormat" AutoPostBack="true" Size="Medium"
                                Label="Week Header Format" ToolTip="Controlled by the MonthView.WeekHeaderDateFormat property">
                                <Items>
                                    <telerik:DropDownListItem Value="ddd M/dd" Text="ddd M/dd" Selected="true" />
                                    <telerik:DropDownListItem Value="d MMMM" Text="d MMMM" />
                                </Items>
                            </qsf:DropDownList>
                            <qsf:DropDownList runat="server" ID="MonthHeaderDateFormat" AutoPostBack="true" Size="Medium"
                                Label="Month Header Format" ToolTip="Controlled by the MonthView.MonthHeaderDateFormat property">
                                <Items>
                                    <telerik:DropDownListItem Value="M" Text="M" Selected="true" />
                                    <telerik:DropDownListItem Value="Y" Text="Y" />
                                    <telerik:DropDownListItem Value="MMM" Text="MMM" />
                                </Items>
                            </qsf:DropDownList>
                        </li>
                        <li>
                            <qsf:DropDownList runat="server" ID="MonthViewSlotWidth" AutoPostBack="true" Size="Medium"
                                Label="Slot Width (px)" ToolTip="Controlled by the MonthView.SlotWidth property">
                                <Items>
                                    <telerik:DropDownListItem Value="65px" Text="65" />
                                    <telerik:DropDownListItem Value="85px" Text="85" Selected="true" />
                                    <telerik:DropDownListItem Value="100px" Text="100" />
                                </Items>
                            </qsf:DropDownList>
                        </li>
                        <li>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="YearView" Title="Year View Settings" runat="server" Size="Medium" Visible="false">
                    <ul class="fb-group">
                        <li>
                            <qsf:DropDownList runat="server" ID="YearViewMonthHeaderDateFormat" AutoPostBack="true" Size="Medium"
                                Label="Month Header Format" ToolTip="Controlled by the YearView.MonthHeaderDateFormat property">
                                <Items>
                                    <telerik:DropDownListItem Value="M" Text="M" Selected="true" />
                                    <telerik:DropDownListItem Value="Y" Text="Y" />
                                    <telerik:DropDownListItem Value="MMM" Text="MMM" />
                                </Items>
                            </qsf:DropDownList>
                              <qsf:DropDownList runat="server" ID="YearViewYearHeaderDateFormat" AutoPostBack="true" Size="Medium"
                                Label="Year Header Format" ToolTip="Controlled by the YearView.YearHeaderDateFormat property">
                                <Items>
                                    <telerik:DropDownListItem Value="yy" Text="yy" />
                                    <telerik:DropDownListItem Value="yyyy" Text="yyyy" Selected="true" />
                                </Items>
                            </qsf:DropDownList>
                        </li>
                        <li>
                            <qsf:DropDownList runat="server" ID="YearViewSlotWidth" AutoPostBack="true" Size="Medium"
                                Label="Slot Width (px)" ToolTip="Controlled by the YearView.SlotWidth property">
                                <Items>
                                    <telerik:DropDownListItem Value="65px" Text="65" />
                                    <telerik:DropDownListItem Value="85px" Text="85" Selected="true" />
                                    <telerik:DropDownListItem Value="100px" Text="100" />
                                </Items>
                            </qsf:DropDownList>
                        </li>
                        <li>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
            <qsf:View Title="Common Settings">
                <qsf:ConfiguratorColumn runat="server" Size="Medium">
                    <ul class="fb-group">
                        <li>
                            <span class="label">ShowFullTime</span>
                            <qsf:RadioButtonList ID="ShowFullTime" runat="server" AutoPostBack="true" Orientation="Horizontal">
                                <asp:ListItem Text="True" Selected="True" />
                                <asp:ListItem Text="False" />
                            </qsf:RadioButtonList>
                        </li>
                        <li>
                            <span class="label">ShowFullWeek</span>
                            <qsf:RadioButtonList ID="ShowFullWeek" runat="server" AutoPostBack="true" Orientation="Horizontal">
                                <asp:ListItem Text="True" Selected="True" />
                                <asp:ListItem Text="False" />
                            </qsf:RadioButtonList>
                        </li>
                        <li>
                            <qsf:DropDownList runat="server" ID="WorkWeekStart" AutoPostBack="true" Size="Medium"
                                Label="Work Week Start">
                                <Items>
                                    <telerik:DropDownListItem Text="Sunday" Value="0" />
                                    <telerik:DropDownListItem Text="Monday" Value="1" />
                                </Items>
                            </qsf:DropDownList>
                            <qsf:DropDownList runat="server" ID="WorkWeekEnd" AutoPostBack="true" Size="Medium"
                                Label="Work Week End">
                                <Items>
                                    <telerik:DropDownListItem Text="Friday" Value="5" />
                                    <telerik:DropDownListItem Text="Saturday" Value="6" />
                                </Items>
                            </qsf:DropDownList>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance