RadGanttView - Handle colors on tasks

[Fabrice]

Hello, 

I'm using the RadGanttView component and I'm trying to manage multiple coloring on some tasks. 

I've followed the example given in your documentation: 

https://docs.telerik.com/devtools/winforms/controls/ganttview/custom-items/task-elements

I need to be able to condition the coloring of tasks and ensure that vertical scrolling does not affect rendering. 

Do you have any ideas on how to do this?

You'll find a sample project with the case described.

All you have to do is scroll vertically through the tasks, the task coloring will follow the scroll.

Thanks,

Rémi

[Nadya | Tech Support Engineer]

Hello, Fabrice,

The provided project is greatly appreciated.

After investigating it, I have noticed that you created a custom MyGanttViewTaskElement. Note, if you want to customize the look of GanttViewTaskElement it is recomended to use the GraphicalViewItemFormatting event to prevent unusual behavior and undesired coloring when performing fast scrolling either horizontally or vertically. More information and example are available here: GraphicalView Item Formatting - RadGanttView - Telerik UI for WinForms

private void InitializeEvent()
{
    this.radGanttView1.GraphicalViewItemFormatting += RadGanttView1_GraphicalViewItemFormatting;
}

private void RadGanttView1_GraphicalViewItemFormatting(object sender, GanttViewGraphicalViewItemFormattingEventArgs e)
{
    MyGanttViewTaskElement taskElement = e.ItemElement.TaskElement as MyGanttViewTaskElement;
    if (taskElement != null)
    {
       //TO DO
    }
}

Please let me know if I can assist you further. 

Regards,
Nadya | Tech Support Engineer
Progress Telerik

[Fabrice]

Hello Nadia, 

Thank you for your reply.

Unfortunately, I can't get any solution to work.

The aim is to be able to color the tasks (several colors) according to the data associated with the tasks. Each task won't necessarily have the same coloring, the same number of colors, and so on.

Following the documentation, I use the ItemElementCreating event to create tasks with multiple colors.

Using the GraphicalViewItemFormatting event, I can try to reset the values without success. The elements are reused at scroll time, making the visual inconsistent with the data.

Do you have a solution to prevent this behavior during scrolling?

You'll find the project with the case I'm trying to make work. The scroll disturbs the initial coloring of the tasks.

Thanks for your help, 
Rémi.

[Nadya | Tech Support Engineer]

Hello, Fabrice,

Thank you for the attached project. I have carefully reviewed it and would like to note that due to the UI virtualization that RadGanttView control uses, its visual elements are reused during scrolling. To overcome this problem with incorrect applying colors, it is necessary to override the IsCompatible method of the custom MyGanttViewTaskItemElement. This event triggers for every task item element that is about to be created and the purpose  is to ensure that your custom item element will be applied only for the specified tasks in the ItemElementCreating event. 

Then, you should also create additional additional default GanttViewTaskItemElement that should be used for the rest of the cells (let's say create new DefaultGanttViewTaskItemElement for the other elements). Its IsCompatible() must implement the exact opposite logic that you have introduced in your MyGanttViewTaskItemElement class.

Here is a sample implementation for the default task item element that should be used to avoid unwanted coloring when scrolling the Gantt view:

public class DefaultGanttViewTaskItemElement : GanttViewTaskItemElement
{
    public DefaultGanttViewTaskItemElement(GanttViewGraphicalViewElement owner) : base(owner)
    {
    }

    protected override Type ThemeEffectiveType
    {
        get
        {
            return typeof(GanttViewTaskItemElement);
        }
    }
    protected override GanttGraphicalViewBaseTaskElement CreateTaskElement()
    {
        return new DefautGanttViewTaskItemElement();
    }

    public override bool IsCompatible(GanttViewDataItem data, object context)
    {
        return (data is CustomTask && data.Tag != "custom");

    }
}

public class DefautGanttViewTaskItemElement : GanttViewTaskElement
{
    protected override Type ThemeEffectiveType
    {
        get
        {
            return typeof(GanttViewTaskElement);
        }
    }
}

And, you should specify for which elements to use the custom MyGanttViewTaskItemElement, and for which to use DefaultGanttViewTaskItemElement again in the ItemElementCreating event:

private void RadGanttView1_ItemElementCreating(object sender, GanttViewItemElementCreatingEventArgs e)
{
    var item = (CustomTask)e.Item;
    if (e.Item.Items.Count == 0 && e.ViewElement is GanttViewGraphicalViewElement && item.HandleColor)
    {
        //Create custom Element for task with HandleColor
        item.Tag = "custom";
        e.ItemElement = new MyGanttViewTaskItemElement((GanttViewGraphicalViewElement)e.ViewElement, 1);
    }
    else if (e.ViewElement is GanttViewGraphicalViewElement)
    {
        // Create default GanttViewTaskItemElement for the rest of the elements
        e.ItemElement = new DefaultGanttViewTaskItemElement((GanttViewGraphicalViewElement)e.ViewElement);
    }
}

You can see the achieved result when scrolling in the attached gif file. You can see that no additional coloring is applied now when scrolling the gantt view horizontally or vertically. I also attached the modified project to this thread.

Offtopic, I also added an internal task to complete the following article with information about reusing elements when creating custom task elements in RadGanttView: Task Elements - WinForms GanttView Control - Telerik UI for WinForms

I hope this information helps. Please let me know if I can assist you further.

Regards,
Nadya | Tech Support Engineer
Progress Telerik

[Fabrice]

Hello Nadya,

 

Thanks for the feedback and the example, it works well.

In the example, we end up with either a common coloring or no coloring, which makes it possible to reuse the elements.

To go a step further, it's possible that the coloring of the tasks isn't identical.

Tasks can be separated into two color blocks of different sizes, as shown in the screenshot. The number of color blocks per task may also vary etc.

 If I completely deactivate IsCompatible (Return false), it works, but memory quickly climbs during scrolling as no elements are reused.

Is there a way to better manage memory or to be able to use IsCompatible without knowing in advance how many different cases we'll find (number of blocks, block sizes, etc) ?

 

Thanks for your help,

Rémi.

[Nadya | Tech Support Engineer]

Hello, Fabrice,

If I understand you correctly, the provided example was helpful to overcome the problem with unwanted coloring when scrolling. 

The IsCompatible method is needed to show correctly either the custom MyGanttViewTaskElement, or the default one. It is helpful since RadGanttView uses UI virtualization and its elements are reused. This will ensure that the custom task element will be used only in this particular column and it won't be reused in other columns. This is why it is important to override IsCompatible() especially when performing scrolling. 

As to the further setup about how exactly to design your custom task element, it is up to you to choose how exactly to implement it. Creating custom task elements API provides the mechanism for replacing the default task elements, however, how exactly to implement and design a custom task element is up to you considering your specific needs. 

In case you have further difficulties, trying to achieve a specific behavior I would suggest you to provide a sample project that shows your current setup and what exactly you are trying to achieve. Thus, we will be able to provide further assistance, if needed. Feel free to submit a support ticket in order to respect your privacy and protect data. 

Please let me know if I can assist you further.