This is a migrated thread and some comments may be shown as answers.

RadGantt - Change Timeline View column (cells) Background color

2 Answers 55 Views
Gantt
This is a migrated thread and some comments may be shown as answers.
Rémi
Top achievements
Rank 1
Rémi asked on 03 Jul 2015, 09:36 AM

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 Answers, 1 is accepted

Sort by
0
Aneliya Petkova
Telerik team
answered on 07 Jul 2015, 07:52 AM
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
0
Rémi
Top achievements
Rank 1
answered on 07 Jul 2015, 08:14 AM
Thanks for your reply, it looks great.
Tags
Gantt
Asked by
Rémi
Top achievements
Rank 1
Answers by
Aneliya Petkova
Telerik team
Rémi
Top achievements
Rank 1
Share this question
or