RadGantt - Change Timeline View column (cells) Background color

3 posts, 0 answers
  1. Rémi
    Rémi avatar
    24 posts
    Member since:
    May 2015

    Posted 03 Jul 2015 Link to this post

    Hi,

    Is there a way to change specified column's cells Background color ?

    For example, I would like to represent holidays' period by changing the column's cells color.

     Thanks, Rémi.

  2. Aneliya Petkova
    Admin
    Aneliya Petkova avatar
    207 posts

    Posted 07 Jul 2015 Link to this post

    Hi Rémi,

    You can use jQuery and CSS to achieve this. Here is an example:
    <head runat="server">
        <title>GanttChart Sql DataSource</title>
        <style>
            html .RadGantt .radGridHeader th.test {
                background-image: none;
                background-color: yellowgreen;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server" method="post">
            <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
            <telerik:RadGantt ID="RadGantt1" runat="server" EnableEmbeddedSkins="true" Width="1760" SelectedView="WeekView"
                DataSourceID="SqlDataSource1" DependenciesDataSourceID="SqlDataSource2">
                <DataBindings>
                    <TasksDataBindings IdField="ID" ParentIdField="ParentID" StartField="Start" EndField="End" TitleField="Title" PercentCompleteField="PercentComplete" OrderIdField="OrderID" ExpandedField="Expanded" SummaryField="Summary" />
                    <DependenciesDataBindings TypeField="Type" IdField="ID" PredecessorIdField="PredecessorID" SuccessorIdField="SuccessorID" />
                </DataBindings>
            </telerik:RadGantt>
     
     
            <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:GanttChartTestConnectionString %>" 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>
            </asp:SqlDataSource>
            <asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:GanttChartTestConnectionString %>" 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>
            </asp:SqlDataSource>
            <script type="text/javascript">
                var $ = $telerik.$;
     
                function pageLoad() {
                    $('.radGridHeader th.radHeader:contains("Tue 6/10")').addClass("test");
                }
            </script>
        </form>
    </body>

    Using jQuery I select a th element of the RadGantt that contains text "Tue 6/10" and add to this element class "test". Then using CSS I remove the default background-image of this element and add background-color instead. I took a screen-shot showing how the RadGantt looks at my side: http://screencast.com/t/cglzgw8QK

    Hope this helps.

    Regards,
    Aneliya Petkova
    Telerik
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Rémi
    Rémi avatar
    24 posts
    Member since:
    May 2015

    Posted 07 Jul 2015 in reply to Aneliya Petkova Link to this post

    Thanks for your reply, it looks great.
Back to Top