Change SimpleCellContainer background color

1 Answer 72 Views
GanttView
Leire
Top achievements
Rank 1
Iron
Iron
Leire asked on 06 Jun 2022, 10:10 AM

Hi, I wanted to know if it's possible to change the color of tasks in the colum area. In my case, I need to put colum background on blue if the task has a children. I put an example below of how I want to be the result. 

 

1 Answer, 1 is accepted

Sort by
1
Accepted
Dilyan Traykov
Telerik team
answered on 09 Jun 2022, 09:20 AM

Hi Leire,

Thank you for the provided image.

Based on it, I set up a small sample project to demonstrate a possible approach for achieving the desired result.

It involves modifying the default styles of the CellContainer, CellHighlightContainerTreeCellContainer and TreeCellHighlightContainer elements to ensure they correctly display the desired Background. I then defined an IMultiValueConverter and return an appropriate color based on the item's Children collection.

Please have a look at the attached project and let me know if a similar approach would work for you.

Regards,
Dilyan Traykov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Leire
Top achievements
Rank 1
Iron
Iron
commented on 13 Jun 2022, 07:14 AM

Hi Dylan, 

First of all, thank you for your answer, it helped me to solve the problems with the CellContainers.

The problem cames with the TreeCellContainers. I don't know why, but I have to use the SimpleTreeCellContainer property instead of the TreeCellContainer one, because if not, it doesn't recognize the TreeColums. Do you know why could this be? 

Dilyan Traykov
Telerik team
commented on 15 Jun 2022, 11:54 AM

Hi Leire,

SimpleTreeCellContainer container is created if no template is specified for the column definition. If the CellTemplate property is set, a TreeCellContainer is created instead. With this in mind, would you find it possible to use the CellTemplate property in your project in a similar manner?

                    <telerik:ColumnDefinition.CellTemplate>
                        <DataTemplate>
                            <TextBlock Text="{Binding FormattedValue}" VerticalAlignment="Center" />
                        </DataTemplate>
                    </telerik:ColumnDefinition.CellTemplate>

You can extract this template as a resource to more easily apply it to the different column definitions.

Leire
Top achievements
Rank 1
Iron
Iron
commented on 16 Jun 2022, 08:35 AM

Hi Dylan,

Thank you so much for your help, it worked for me!

Tags
GanttView
Asked by
Leire
Top achievements
Rank 1
Iron
Iron
Answers by
Dilyan Traykov
Telerik team
Share this question
or