Gantt Sorting
The Gantt component offers support for sorting.
To enable sorting, set the Sortable parameter to true.
When the user clicks the column header, the Gantt Tree will sort the data according to the column's data type, and an arrow indicator of the sorting direction will be shown next to the column title. Note that the hierarchical structure is kept, so an item's parent(s) will appear before the item.
You can prevent the user from sorting a certain field by setting Sortable="false" on its column.
You can sort the Gantt on the different columns and sorting is done according to the rules for the concrete column type (for example, rules for a string are different from rules for an int).
Sorting keeps the expanded/collapsed state of items. For example, if filtering brings into view a child whose parent is collapsed, you will only see the collapsed parent.
You can let the user sort by more than one field by setting the SortMode parameter to Telerik.Blazor.SortMode.Multiple.
Enable Sorting in Telerik TreeList
Click a column header to sort by its data
<TelerikGantt Data="@Data"
Width="100%"
Height="600px"
IdField="Id"
Sortable="true"
ParentIdField="ParentId">
<GanttViews>
<GanttDayView></GanttDayView>
<GanttWeekView></GanttWeekView>
<GanttMonthView></GanttMonthView>
<GanttYearView></GanttYearView>
</GanttViews>
<GanttColumns>
<GanttColumn Field="Id"
Visible="false">
</GanttColumn>
<GanttColumn Field="Title"
Expandable="true"
Width="160px"
Title="Task Title" >
</GanttColumn>
<GanttColumn Field="PercentComplete"
Width="60px">
</GanttColumn>
<GanttColumn Field="Start"
Width="100px"
TextAlign="@ColumnTextAlign.Right">
</GanttColumn>
<GanttColumn Field="End"
DisplayFormat="End: {0:d}"
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();
}
}