Visible Columns
The TreeList allows you to programmatically hide some of its columns.
In this article:
Basics
To hide a Gantt Tree column set its Visible parameter to false. To hide a column based on a certain condition you can pass, for example, a ternary operator or a method that returns bool - the app can provide an expression according to its logic (like screen size).
Hide a column from the Gantt. Basic example.
@* Hide the Id Gantt Tree column by setting the Visible parameter to false *@
<TelerikGantt Data="@Data"
Width="900px"
Height="600px"
IdField="Id"
ParentIdField="ParentId">
<GanttViews>
<GanttDayView></GanttDayView>
<GanttWeekView></GanttWeekView>
<GanttMonthView></GanttMonthView>
<GanttYearView></GanttYearView>
</GanttViews>
<GanttColumns>
<GanttColumn Field="@nameof(FlatModel.Id)"
Visible="false">
</GanttColumn>
<GanttColumn Field="Title"
Expandable="true"
Width="160px"
Title="Task Title">
</GanttColumn>
<GanttColumn Field="Start"
Width="100px">
</GanttColumn>
<GanttColumn Field="End"
Width="100px">
</GanttColumn>
</GanttColumns>
</TelerikGantt>
@code {
public DateTime SelectedDate { get; set; } = new DateTime(2019, 11, 11, 6, 0, 0);
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 int LastId { get; set; } = 1;
List<FlatModel> Data { get; set; }
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 = "Employee " + i.ToString(),
Start = new DateTime(2020, 12, 6 + i),
End = new DateTime(2020, 12, 11 + i),
PercentComplete = Math.Round(random.NextDouble(), 2)
};
Data.Add(newItem);
var parentId = LastId;
LastId++;
for (int j = 0; j < 5; j++)
{
Data.Add(new FlatModel()
{
Id = LastId,
ParentId = parentId,
Title = " Employee " + i + " : " + j.ToString(),
Start = new DateTime(2020, 12, 6 + i + j),
End = new DateTime(2020, 12, 7 + i + j),
PercentComplete = Math.Round(random.NextDouble(), 2)
});
LastId++;
}
}
base.OnInitialized();
}
}
Notes
Non-visible columns (Visible="false") will have the following behavior:
- Will not be editable.
Examples
In this section you will find the following examples:
Toggle The Visibility Of A Column On Button Click
The application can later the value of the Visible parameter and that will toggle the column.
@* Toggling the visibily of a column keeps its original order in the Gantt Tree. *@
<div>
<TelerikButton OnClick="@(() => isVisible = !isVisible)">Toggle the visibility of the Id column</TelerikButton>
</div>
<TelerikGantt Data="@Data"
Width="900px"
Height="600px"
IdField="Id"
ParentIdField="ParentId">
<GanttViews>
<GanttDayView></GanttDayView>
<GanttWeekView></GanttWeekView>
<GanttMonthView></GanttMonthView>
<GanttYearView></GanttYearView>
</GanttViews>
<GanttColumns>
<GanttColumn Field="@nameof(FlatModel.Id)"
Visible="@isVisible">
</GanttColumn>
<GanttColumn Field="Title"
Expandable="true"
Width="160px"
Title="Task Title">
</GanttColumn>
<GanttColumn Field="Start"
Width="100px">
</GanttColumn>
<GanttColumn Field="End"
Width="100px">
</GanttColumn>
</GanttColumns>
</TelerikGantt>
@code {
public bool isVisible { get; set; }
public DateTime SelectedDate { get; set; } = new DateTime(2019, 11, 11, 6, 0, 0);
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 int LastId { get; set; } = 1;
List<FlatModel> Data { get; set; }
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 = "Employee " + i.ToString(),
Start = new DateTime(2020, 12, 6 + i),
End = new DateTime(2020, 12, 11 + i),
PercentComplete = Math.Round(random.NextDouble(), 2)
};
Data.Add(newItem);
var parentId = LastId;
LastId++;
for (int j = 0; j < 5; j++)
{
Data.Add(new FlatModel()
{
Id = LastId,
ParentId = parentId,
Title = " Employee " + i + " : " + j.ToString(),
Start = new DateTime(2020, 12, 6 + i + j),
End = new DateTime(2020, 12, 7 + i + j),
PercentComplete = Math.Round(random.NextDouble(), 2)
});
LastId++;
}
}
base.OnInitialized();
}
}
Hide A Gantt Column Based On A Condition
This example shows hiding a column based on a simple condition in its data. You can change it to use other view-model data - such as screen dimensions, user preferences you have stored, or any other logic.
@* The Id column is hidden, because the data for the Gantt Chart contains 1 *@
<TelerikGantt Data="@Data"
Width="900px"
Height="600px"
IdField="Id"
ParentIdField="ParentId">
<GanttViews>
<GanttDayView></GanttDayView>
<GanttWeekView></GanttWeekView>
<GanttMonthView></GanttMonthView>
<GanttYearView></GanttYearView>
</GanttViews>
<GanttColumns>
<GanttColumn Field="@nameof(FlatModel.Id)"
Visible="@((Data.Any(x => x.Id == 1)) ? false : true)">
</GanttColumn>
<GanttColumn Field="Title"
Expandable="true"
Width="160px"
Title="Task Title">
</GanttColumn>
<GanttColumn Field="Start"
Width="100px">
</GanttColumn>
<GanttColumn Field="End"
Width="100px">
</GanttColumn>
</GanttColumns>
</TelerikGantt>
@code {
public bool isVisible { get; set; }
public DateTime SelectedDate { get; set; } = new DateTime(2019, 11, 11, 6, 0, 0);
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 int LastId { get; set; } = 1;
List<FlatModel> Data { get; set; }
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 = "Employee " + i.ToString(),
Start = new DateTime(2020, 12, 6 + i),
End = new DateTime(2020, 12, 11 + i),
PercentComplete = Math.Round(random.NextDouble(), 2)
};
Data.Add(newItem);
var parentId = LastId;
LastId++;
for (int j = 0; j < 5; j++)
{
Data.Add(new FlatModel()
{
Id = LastId,
ParentId = parentId,
Title = " Employee " + i + " : " + j.ToString(),
Start = new DateTime(2020, 12, 6 + i + j),
End = new DateTime(2020, 12, 7 + i + j),
PercentComplete = Math.Round(random.NextDouble(), 2)
});
LastId++;
}
}
base.OnInitialized();
}
}