2 Answers, 1 is accepted
0
Hi Rémi,
You can use jQuery and CSS to achieve this. Here is an example:
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
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.