Access Model Fields in the Gantt Timeline Tooltip

Environment

Product

Gantt for Blazor

Description

I want to access and display model fields in the Gantt Timeline Tooltip. In the TooltipTemplate I can access some of the model fields, which match the properties of a Gantt Tree item. But how to access and show all model fields?

Solution

You can access and display all fields of the model in the Gantt Timeline TooltipTemplate. Follow these steps:

1. Cast the TooltipTemplate context to TooltipTemplateContext.
2. Use the available properties of the TooltipTemplateContext to find the data item in the Gantt data collection.
3. Display the desired fields of the model instance in the TooltipTemplate.

<TelerikGantt Data="@Data"
              Width="900px"
              Height="600px"
              IdField="Id"
              ParentIdField="ParentId">
    <TooltipTemplate>
        @{
            FlatModel model = GetModel(((TooltipTemplateContext)context).Title);
        }
        @model.CustomField
        <br/>
        @model.SomeIntField
    </TooltipTemplate>
    <GanttColumns>
        <GanttColumn Field="Title"
                     Expandable="true"
                     Width="160px"
                     Title="Task Title">
        </GanttColumn>
        <GanttColumn Field="PercentComplete"
                     Title="Status"
                     Width="60px"
                     DisplayFormat="{0:P}">
        </GanttColumn>
        <GanttColumn Field="Start"
                     Width="100px"
                     DisplayFormat="{0:d}">
        </GanttColumn>
        <GanttColumn Field="End"
                     Width="100px"
                     DisplayFormat="{0:d}">
        </GanttColumn>
    </GanttColumns>
    <GanttViews>
        <GanttWeekView></GanttWeekView>
    </GanttViews>
</TelerikGantt>

@code {
    private List<FlatModel> Data { get; set; }

    private FlatModel GetModel(string title)
    {
        return Data.FirstOrDefault(x => x.Title == title);
    }

    public class FlatModel
    {
        public int Id { get; set; }
        public int? ParentId { get; set; }
        public string Title { get; set; }
        public double PercentComplete { get; set; }
        public DateTime Start { get; set; }
        public DateTime End { get; set; }
        public string CustomField { get; set; }
        public int SomeIntField {get; set;}
    }

    public int LastId { get; set; } = 1;

    protected override void OnInitialized()
    {
        Data = new List<FlatModel>();
        var random = new Random();

        for (int i = 1; i < 6; i++)
        {
            var newItem = new FlatModel()
                {
                    Id = LastId,
                    Title = "Task  " + i.ToString(),
                    Start = new DateTime(2021, 7, 5 + i),
                    End = new DateTime(2021, 7, 11 + i),
                    PercentComplete = Math.Round(random.NextDouble(), 2),
                    CustomField = "Details for task " + i, 
                    SomeIntField = i
                };

            Data.Add(newItem);
            var parentId = LastId;
            LastId++;

            for (int j = 0; j < 5; j++)
            {
                Data.Add(new FlatModel()
                    {
                        Id = LastId,
                        ParentId = parentId,
                        Title = "    Task " + i + " : " + j.ToString(),
                        Start = new DateTime(2021, 7, 5 + j),
                        End = new DateTime(2021, 7, 6 + i + j),
                        PercentComplete = Math.Round(random.NextDouble(), 2),
                        CustomField = "Details for task " + i,
                        SomeIntField = j
                    });

                LastId++;
            }
        }

        base.OnInitialized();
    }
}

See Also

• Gantt Overview - Telerik UI for Blazor
• Live Demo: Gantt Templates