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

RadGantt - Change Timeline View column (cells) Background color

2 Answers 157 Views

Gantt

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

2 Answers, 1 is accepted

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

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

RadGantt - Change Timeline View column (cells) Background color

2 Answers, 1 is accepted