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

Selected Date And Range

  • Demo Configurator
Set Visible Range
Set Selected Date

You can now set a visible range between the Start and End dates as well as to set a selected date:

  • In each of the available views using the following properties: [ViewName]-RangeStart, [ViewName]-RangeEnd and [ViewName]-SelectedDate
  • Or globally for all views via the RangeStart, RangeEnd and SelectedDate.

You can also apply this functionality for the selected view through the client-side API:

  • gantt.set_rangeStart(date)
  • gantt.set_rangeEnd(date)
  • gantt.set_selectedDate(date)
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
<%@ Page Language="C#"  AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Gantt.Examples.Functionality.SelectedDateAndRange.DefaultCS" %>

<%@ Register TagPrefix="sds" Namespace="Telerik.Web.SessionDS" %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <script type="text/javascript" src="scripts.js"></script>
</head>

<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <telerik:RadCodeBlock runat="server">
        <script type="text/javascript">
            function getGantt() {
                return $find("<%=RadGantt1.ClientID %>");
            }

            function getStartRangeDatePicker() {
                return $find("<%=StartRangeDatePicker.ClientID %>");
            }

            function getEndRangeDatePicker() {
                return $find("<%=EndRangeDatePicker.ClientID %>");
            }

            function getSelectedDateDatePicker() {
                return $find("<%=SelectedDateDatePicker.ClientID %>");
            }
        </script>
    </telerik:RadCodeBlock>
    <div class="demo-container no-bg">
        <telerik:RadAjaxManager runat="server" ID="RadAjaxManager" >
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadGantt1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl  ControlID="RadGantt1"/>
                        <telerik:AjaxUpdatedControl  ControlID="StartRangeDatePicker"/>
                        <telerik:AjaxUpdatedControl  ControlID="EndRangeDatePicker"/>
                        <telerik:AjaxUpdatedControl  ControlID="SelectedDateDatePicker"/>
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
            <telerik:RadGantt RenderMode="Lightweight" runat="server"
                ShowFullTime="true" ShowFullWeek="true"
                OnNavigationCommand="RadGantt1_NavigationCommand"
                DayView-RangeStart="2014/6/2" DayView-RangeEnd="2014/6/8" DayView-SelectedDate="2014/6/2"
                WeekView-RangeStart="2014/6/1" WeekView-RangeEnd="2014/7/13" WeekView-SelectedDate="2014/6/1"
                MonthView-RangeStart="2014/5/18" MonthView-RangeEnd="2014/8/3" MonthView-SelectedDate="2014/5/18"
                RangeStart="2014/6/1" RangeEnd="2014/7/13" SelectedDate="2014/6/1"
                ID="RadGantt1" DataSourceID="TasksDataSource" Height="600px" ListWidth="350px"
                DependenciesDataSourceID="DependenciesDataSource" SelectedView="WeekView" AutoGenerateColumns="false">
                <Columns>
                    <telerik:GanttBoundColumn DataField="Title" DataType="String" Width="120px"></telerik:GanttBoundColumn>
                    <telerik:GanttBoundColumn DataField="Start" DataType="DateTime" DataFormatString="dd/MM/yy" Width="40px"></telerik:GanttBoundColumn>
                    <telerik:GanttBoundColumn DataField="End" DataType="DateTime" DataFormatString="dd/MM/yy" Width="40px"></telerik:GanttBoundColumn>
                </Columns>
                <DataBindings>
                    <TasksDataBindings
                        IdField="ID" ParentIdField="ParentID"
                        StartField="Start" EndField="End"
                        OrderIdField="OrderID"
                        SummaryField="Summary"
                        TitleField="Title" PercentCompleteField="PercentComplete" />
                    <DependenciesDataBindings
                        TypeField="Type" IdField="ID"
                        PredecessorIdField="PredecessorID"
                        SuccessorIdField="SuccessorID" />
                </DataBindings>
            </telerik:RadGantt>
    </div>
    <sds:SessionDataSource ID="TasksDataSource" runat="server" DisplayWarning="false"
        PrimaryKeyFields="ID" ProviderName="System.Data.SqlClient"
        ConnectionString="<%$ ConnectionStrings:TelerikConnectionString %>"
        DeleteCommand="DELETE FROM [GanttTasks] WHERE [ID] = @ID"
        InsertCommand="INSERT INTO [GanttTasks] ([ParentID], [OrderID], [Title], [Start], [End], [PercentComplete], [Expanded], [Summary]) VALUES (@ParentID, @OrderID, @Title, @Start, @End, @PercentComplete, @Expanded, @Summary)"
        SelectCommand="SELECT * FROM [GanttTasks]"
        UpdateCommand="UPDATE [GanttTasks] SET [ParentID] = @ParentID, [OrderID] = @OrderID, [Title] = @Title, [Start] = @Start, [End] = @End, [PercentComplete] = @PercentComplete, [Expanded] = @Expanded, [Summary] = @Summary WHERE [ID] = @ID">
        <DeleteParameters>
            <asp:Parameter Name="ID" Type="Int32" />
        </DeleteParameters>
        <InsertParameters>
            <asp:Parameter Name="ParentID" Type="Int32" />
            <asp:Parameter Name="OrderID" Type="Int32" />
            <asp:Parameter Name="Title" Type="String" />
            <asp:Parameter Name="Start" Type="DateTime" />
            <asp:Parameter Name="End" Type="DateTime" />
            <asp:Parameter Name="PercentComplete" Type="Decimal" />
            <asp:Parameter Name="Expanded" Type="Boolean" />
            <asp:Parameter Name="Summary" Type="Boolean" />
        </InsertParameters>
        <UpdateParameters>
            <asp:Parameter Name="ParentID" Type="Int32" />
            <asp:Parameter Name="OrderID" Type="Int32" />
            <asp:Parameter Name="Title" Type="String" />
            <asp:Parameter Name="Start" Type="DateTime" />
            <asp:Parameter Name="End" Type="DateTime" />
            <asp:Parameter Name="PercentComplete" Type="Decimal" />
            <asp:Parameter Name="Expanded" Type="Boolean" />
            <asp:Parameter Name="Summary" Type="Boolean" />
            <asp:Parameter Name="ID" Type="Int32" />
        </UpdateParameters>
    </sds:SessionDataSource>

    <sds:SessionDataSource ID="DependenciesDataSource" runat="server" DisplayWarning="false"
        PrimaryKeyFields="ID" ProviderName="System.Data.SqlClient"
        ConnectionString="<%$ ConnectionStrings:TelerikConnectionString %>"
        DeleteCommand="DELETE FROM [GanttDependencies] WHERE [ID] = @ID"
        InsertCommand="INSERT INTO [GanttDependencies] ([PredecessorID], [SuccessorID], [Type]) VALUES (@PredecessorID, @SuccessorID, @Type)"
        SelectCommand="SELECT * FROM [GanttDependencies]"
        UpdateCommand="UPDATE [GanttDependencies] SET [PredecessorID] = @PredecessorID, [SuccessorID] = @SuccessorID, [Type] = @Type WHERE [ID] = @ID">
        <DeleteParameters>
            <asp:Parameter Name="ID" Type="Int32" />
        </DeleteParameters>
        <InsertParameters>
            <asp:Parameter Name="PredecessorID" Type="Int32" />
            <asp:Parameter Name="SuccessorID" Type="Int32" />
            <asp:Parameter Name="Type" Type="Int32" />
        </InsertParameters>
        <UpdateParameters>
            <asp:Parameter Name="PredecessorID" Type="Int32" />
            <asp:Parameter Name="SuccessorID" Type="Int32" />
            <asp:Parameter Name="Type" Type="Int32" />
            <asp:Parameter Name="ID" Type="Int32" />
        </UpdateParameters>
    </sds:SessionDataSource>

    <qsf:ConfiguratorPanel ID="ConfiguratorPanel" runat="server">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" Title="Set Visible Range" runat="server" Size="Medium">
                    <qsf:DatePicker ID="StartRangeDatePicker" runat="server"
                        Label="Start Date"
                        MaxDate="2014/7/12"
                        SelectedDate="2014/6/1"
                        DateInput-ClientEvents-OnValueChanged="startRangeDatePickerValueChanged">
                    </qsf:DatePicker>
                    <qsf:DatePicker ID="EndRangeDatePicker" runat="server"
                        Label="End Date"
                        MinDate="2014/6/2"
                        SelectedDate="2014/7/13"
                        DateInput-ClientEvents-OnValueChanged="endRangeDatePickerValueChanged">
                    </qsf:DatePicker>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn2" Title="Set Selected Date" runat="server" Size="Medium">
                    <qsf:DatePicker ID="SelectedDateDatePicker" runat="server"
                        Label="Selected Date"
                        MinDate="2014/6/1"
                        MaxDate="2014/7/12"
                        SelectedDate="2014/6/1"
                        DateInput-ClientEvents-OnValueChanged="selectedDateDatePickerValueChanged">
                    </qsf:DatePicker>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance