blazor-devexpress-dot-blazor-dot-dxtreelistcolumn-37e3dbc9.md
Allows you to anchor the column to the TreeList’s left or right edge.
Namespace : DevExpress.Blazor
Assembly : DevExpress.Blazor.v25.2.dll
NuGet Package : DevExpress.Blazor
[DefaultValue(TreeListColumnFixedPosition.None)]
[Parameter]
public TreeListColumnFixedPosition FixedPosition { get; set; }
| Type | Default | Description |
|---|---|---|
| TreeListColumnFixedPosition | None |
An enumeration value.
|
Available values:
| Name | Description |
|---|---|
| None |
The column moves when a user scrolls the TreeList horizontally.
| | Left |
The column is anchored to the TreeList’s left edge and remains visible when a user scrolls the TreeList horizontally.
| | Right |
The column is anchored to the TreeList’s right edge and remains visible when a user scrolls the TreeList horizontally.
|
A TreeList component displays a horizontal scrollbar when the total width of all its columns exceeds the size of the component. Use a column’s FixedPosition property to freeze the column and keep it visible on screen while users scroll the TreeList horizontally.
Note
When you export TreeList data to an XLS or XLSX file, TreeList keeps data columns anchored to the left edge frozen, while columns anchored to the right edge become regular columns.
The following code snippet anchors (fixes) the Name and Type columns to the TreeList’s left and right edges:
<DxTreeList @ref="TreeList"
Data="Data"
ChildrenFieldName="Satellites">
<Columns>
<DxTreeListDataColumn FieldName="Name" Width="200px"
FixedPosition="TreeListColumnFixedPosition.Left" />
<DxTreeListDataColumn FieldName="TypeOfObject" Caption="Type" Width="150px"
FixedPosition="TreeListColumnFixedPosition.Right" />
<DxTreeListDataColumn FieldName="Mass10pow21kg" Caption="Mass, kg" Width="150px" DisplayFormat="N2">
<HeaderCaptionTemplate>Mass, 10<sup>21</sup> × kg</HeaderCaptionTemplate>
</DxTreeListDataColumn>
<DxTreeListDataColumn FieldName="MeanRadiusInKM" Caption="Radius, km" Width="150px" DisplayFormat="N2">
<HeaderCaptionTemplate>Radius, km</HeaderCaptionTemplate>
</DxTreeListDataColumn>
<DxTreeListDataColumn FieldName="MeanRadiusByEarth" Caption="Radius, Ratio to Earth" Width="160px" DisplayFormat="N2" />
<DxTreeListDataColumn FieldName="Volume10pow9KM3" Width="150px" DisplayFormat="N2">
<HeaderCaptionTemplate>Volume, 10<sup>9</sup> × km<sup>3</sup></HeaderCaptionTemplate>
</DxTreeListDataColumn>
<DxTreeListDataColumn FieldName="VolumeRByEarth" Caption="Volume, Ratio to Earth" Width="160px" DisplayFormat="N2" />
<DxTreeListDataColumn FieldName="SurfaceGravity" Caption="Gravity" Width="150px" DisplayFormat="N2">
<HeaderCaptionTemplate>Gravity, m/s<sup>2</sup></HeaderCaptionTemplate>
</DxTreeListDataColumn>
<DxTreeListDataColumn FieldName="SurfaceGravityByEarth" Caption="Gravity, Ratio to Earth" Width="160px" DisplayFormat="N2" />
</Columns>
</DxTreeList>
@code {
ITreeList TreeList { get; set; }
object Data { get; set; }
protected override void OnInitialized () {
Data = SpaceObjectDataProvider.GenerateData();
}
}
using System.Collections.Generic;
public class SpaceObject {
public string Name { get; set; }
public double MeanRadiusInKM { get; set; }
public double Volume10pow9KM3 { get; set; }
public double Mass10pow21kg { get; set; }
public double Density { get; set; }
public double SurfaceGravity { get; set; }
public string TypeOfObject { get; set; }
public List<SpaceObject> Satellites { get; set; }
public SpaceObject(
string name,
double meanRadiusInKM,
double volume10pow9KM3,
double mass10pow21kg,
double density,
double surfaceGravity,
string typeOfObject,
List<SpaceObject> satellites = null
) {
Name = name;
MeanRadiusInKM = meanRadiusInKM;
Volume10pow9KM3 = volume10pow9KM3;
Mass10pow21kg = mass10pow21kg;
Density = density;
SurfaceGravity = surfaceGravity;
TypeOfObject = typeOfObject;
Satellites = satellites ?? new List<SpaceObject>();
}
}
public class SpaceObjectDataProvider {
public List<SpaceObject> GenerateData() {
return new List<SpaceObject>() {
new SpaceObject("Sun", 696000, 1412000000, 1989100000, 1.409, 274.0, "Star", new List<SpaceObject>() {
new SpaceObject("Mercury", 2439.7, 60.83, 330.2, 5.43, 3.7, "Planet"),
new SpaceObject("Venus", 6051.8, 928.43, 4868.5, 5.24, 8.872, "Planet"),
new SpaceObject("Earth", 6371.0, 1083.21, 5973.6, 5.515, 9.78033, "Planet", new List<SpaceObject> () {
new SpaceObject("Moon", 1737.1, 21.958, 73.5, 3.3464, 1.625, "Satellite")
}),
new SpaceObject("Mars", 3390.0, 163.18, 641.85, 3.94, 3.7, "Planet"),
new SpaceObject("Jupiter", 69911, 1431280, 1898600, 1.33, 24.79, "Planet", new List<SpaceObject>() {
new SpaceObject("Ganymede", 2631.2, 76.30, 148.2, 1.936, 1.428, "Satellite"),
new SpaceObject("Callisto", 2410.3, 58.65, 107.6, 1.83, 1.23603, "Satellite"),
new SpaceObject("Io", 1821.5, 25.32, 89.3, 3.528, 1.797, "Satellite"),
new SpaceObject("Europa", 1561, 15.93, 48, 3.01, 1.316, "Satellite"),
}),
new SpaceObject("Saturn", 58232, 827130, 568460, 0.70, 10.445, "Planet", new List<SpaceObject>() {
new SpaceObject("Titan", 2576, 71.52, 134.5, 1.88, 1.354, "Satellite"),
new SpaceObject("Rhea", 764.4, 1.87, 2.3166, 1.23, 0.26, "Satellite"),
new SpaceObject("Iapetus", 736, 1.55, 1.9739, 1.08, 0.223, "Satellite"),
new SpaceObject("Dione", 561.6, 0.73, 1.096, 1.48, 0.232, "Satellite"),
new SpaceObject("Tethys", 533, 0.624, 0.6173, 1.15, 0.145, "Satellite"),
new SpaceObject("Enceladus", 252.1, 0.067, 0.108, 1.61, 0.111, "Satellite"),
new SpaceObject("Mimas", 198.3, 0.033, 0.03749, 1.15, 0.06363, "Satellite")
}),
new SpaceObject("Uranus", 25362, 68340, 86832, 1.30, 8.87, "Planet", new List<SpaceObject>() {
new SpaceObject("Titania", 788.9, 2.06, 3.526, 1.72, 0.378, "Satellite"),
new SpaceObject("Oberon", 761.4, 1.85, 3.014, 1.63, 0.347, "Satellite"),
new SpaceObject("Umbriel", 584.7, 0.84, 1.2, 1.4, 0.234, "Satellite"),
new SpaceObject("Ariel", 578.9, 0.81, 1.35, 1.67, 0.269, "Satellite"),
new SpaceObject("Miranda", 235.8, 0.055, 0.0659, 1.20, 0.07910375, "Satellite"),
}),
new SpaceObject("Neptune", 24622, 62540, 102430, 1.76, 11.15, "Planet", new List<SpaceObject>() {
new SpaceObject("Triton", 1353.4, 10.38, 21.5, 2.061, 0.782, "Satellite"),
new SpaceObject("Proteus", 210, 0.038, 0.050, 1.3, 0.0666, "Satellite"),
}),
new SpaceObject("Eris", 1170, 7, 16.7, 2.25, 0.662, "Dwarf planet"),
new SpaceObject("Pluto", 1153, 7.15, 13.105, 2.0, 0.61, "Dwarf planet"),
new SpaceObject("Makemake", 710, 1.8, 3, 2.0, 0.4, "Dwarf planet"),
new SpaceObject("Haumea", 575, 1.3, 4.006, 3, 0.44, "Dwarf planet"),
new SpaceObject("Ceres", 475, 0.437, 0.95, 2.08, 0.27, "Dwarf planet"),
new SpaceObject("Pallas", 266, 0.078, 0.211, 2.8, 0.2, "Asteroid"),
new SpaceObject("Vesta", 264.6, 0.078, 0.262, 3.42, 0.251, "Asteroid")
})
};
}
}
// ...
builder.Services.AddSingleton<SpaceObjectDataProvider>();
Run Demo: Fixed (Anchored) Columns
The TreeList layout can include multiple zones with columns. The display order of zones is as follows:
In a zone, the TreeList displays columns based on their visible indexes in the following order:
Columns with non-negative visible indexes. The smaller the index, the more to the left the TreeList displays the column.
Columns with unset and negative visible indexes. The display order of these columns corresponds to the column order in the treelist markup.
Note: the sum of fixed column widths should not exceed the component width. Refer to the following section for additional information about the TreeList layout: Column Layout Specifics.
Implement custom UI elements to allow users to fix and unfix columns at runtime. The following code snippet changes the command column’s FixedPosition once a user changes the value of a combo box. In the example, fixed columns are colored gray for demonstration purposes.
<div class="option-component">
<label for="combo-box" class="pe-2">Selection Column Fixed Position:</label>
<DxComboBox Data="Enum.GetValues<TreeListColumnFixedPosition>()"
CssClass="my-combo-box-class"
Id="combo-box"
Value="SelectionColumnFixedPosition"
ValueChanged="(TreeListColumnFixedPosition newValue) => ChangeSelectionColumnFixedPosition(newValue)" />
</div>
<DxTreeList @ref="TreeList"
Data="TreeListData"
KeyFieldName="Id"
ParentKeyFieldName="ParentId"
CssClass="my-treelist-class"
CustomizeElement="OnCustomizeElement">
<Columns>
<DxTreeListSelectionColumn @ref="SelectionColumn" Width="150px" />
<DxTreeListDataColumn FieldName="Name" Caption="Task" Width="400px" />
<DxTreeListDataColumn FieldName="EmployeeName" Width="200px" />
<DxTreeListDataColumn FieldName="StartDate" Width="150px" />
<DxTreeListDataColumn FieldName="DueDate" Width="150px" />
</Columns>
</DxTreeList>
@code {
List<EmployeeTask> TreeListData { get; set; }
ITreeList TreeList { get; set; }
ITreeListSelectionColumn SelectionColumn { get; set; }
TreeListColumnFixedPosition SelectionColumnFixedPosition { get; set; } = TreeListColumnFixedPosition.None;
protected override void OnInitialized() {
TreeListData = EmployeeTaskService.GenerateData();
}
void OnCustomizeElement(TreeListCustomizeElementEventArgs e) {
if (e.ElementType == TreeListElementType.SelectionCell && e.Column.FixedPosition != TreeListColumnFixedPosition.None) {
e.Style = "background-color: #efefef;";
}
}
void ChangeSelectionColumnFixedPosition(TreeListColumnFixedPosition fixedPosition) {
SelectionColumnFixedPosition = fixedPosition;
TreeList.BeginUpdate();
SelectionColumn.FixedPosition = SelectionColumnFixedPosition;
TreeList.EndUpdate();
}
}
.my-treelist-class {
width: 950px;
}
.my-combo-box-class {
width: 200px;
}
.option-component {
display: flex;
align-items: center;
margin-bottom: 0.35rem;
}
public class EmployeeTask{
public int Id { get; set; }
public int ParentId { get; set; }
public string Name { get; set; }
public string EmployeeName { get; set; }
public DateTime StartDate { get; set; }
public DateTime DueDate { get; set; }
public EmployeeTask(
int id,
int parentId,
string name,
string employeeName,
DateTime startDate,
DateTime dueDate
)
{
Id = id;
ParentId = parentId;
Name = name;
EmployeeName = employeeName;
StartDate = startDate;
DueDate = dueDate;
}
}
public class EmployeeTaskService {
public List<EmployeeTask> GenerateData() {
return new List<EmployeeTask>() {
new EmployeeTask(1, 0, "Simplify & Clarify Product Messaging", "John Heart", new DateTime(2018, 4, 3), new DateTime(2018, 4, 14)),
new EmployeeTask(2, 1, "Prepare Financial Reports", "Samantha Bright", new DateTime(2018, 4, 3), new DateTime(2018, 4, 7)),
new EmployeeTask(3, 1, "Prepare Marketing Plan", "Arthur Miller", new DateTime(2018, 4, 7), new DateTime(2018, 4, 14)),
new EmployeeTask(4, 0, "Create Action Plan To Improve Customer Engagement", "Robert Reagan", new DateTime(2017, 8, 8), new DateTime(2018, 4, 8)),
new EmployeeTask(5, 4, "Update Personnel Files", "Greta Sims", new DateTime(2017, 8, 8), new DateTime(2017, 10, 18)),
new EmployeeTask(6, 4, "Review Health Insurance Options ", "Brett Wade", new DateTime(2017, 9, 27), new DateTime(2017, 11, 10)),
new EmployeeTask(7, 4, "Choose Between PPO And HMO Health Plan", "Sandra Johnson", new DateTime(2017, 12, 13), new DateTime(2018, 3, 23)),
new EmployeeTask(8, 4, "Update Google Adwords Strategy", "Ed Holmes", new DateTime(2017, 8, 23), new DateTime(2017, 12, 23)),
new EmployeeTask(9, 4, "Create New Brochure Design", "Barb Banks", new DateTime(2018, 1, 3), new DateTime(2018, 3, 14)),
new EmployeeTask(10, 4, "Obtain Price Quote For New Brochure", "Kevin Carter", new DateTime(2018, 2, 1), new DateTime(2018, 3, 15)),
new EmployeeTask(11, 4, "Brochure Design Review", "Cindy Stanwick", new DateTime(2017, 8, 22), new DateTime(2017, 10, 28)),
new EmployeeTask(12, 4, "Review Website Re-Design Strategy", "Sammy Hill", new DateTime(2017, 9, 16), new DateTime(2018, 3, 6)),
new EmployeeTask(13, 4, "Rollout New Website", "Davey Jones", new DateTime(2017, 11, 7), new DateTime(2018, 2, 6)),
new EmployeeTask(14, 4, "Update Sales/Marketing Strategy", "Victor Norris", new DateTime(2017, 12, 13), new DateTime(2018, 4, 2)),
new EmployeeTask(15, 4, "Update Sales/Revenue Report", "Mary Stern", new DateTime(2017, 12, 25), new DateTime(2018, 4, 2)),
new EmployeeTask(16, 4, "Direct Vs Online Sales Comparison Report", "Robin Cosworth", new DateTime(2018, 1, 2), new DateTime(2018, 3, 20)),
new EmployeeTask(17, 4, "Review Sales Report and Approve Modifications", "Kelly Rodriguez", new DateTime(2017, 9, 4), new DateTime(2017, 10, 30)),
new EmployeeTask(18, 4, "Update R&D Strategy", "James Anderson", new DateTime(2017, 11, 13), new DateTime(2017, 12, 4)),
new EmployeeTask(19, 4, "Discuss Updated R&D Strategy", "Antony Remmen", new DateTime(2017, 10, 29), new DateTime(2017, 12, 31)),
new EmployeeTask(20, 4, "Update QA Strategy", "Olivia Peyton", new DateTime(2017, 10, 31), new DateTime(2017, 11, 2)),
new EmployeeTask(21, 4, "Schedule Training Events", "Taylor Riley", new DateTime(2017, 11, 19), new DateTime(2018, 4, 7)),
new EmployeeTask(22, 4, "Approve The Hiring Of John Jeffers", "Amelia Harper", new DateTime(2018, 1, 7), new DateTime(2018, 4, 8)),
new EmployeeTask(23, 0, "Increase Average Subscription Price ", "Wally Hobbs", new DateTime(2017, 8, 9), new DateTime(2017, 9, 13)),
new EmployeeTask(24, 23, "Update Non-Compete Agreements", "Brad Jameson", new DateTime(2017, 8, 9), new DateTime(2017, 9, 3)),
new EmployeeTask(25, 23, "Update Employee Records With New NDA", "Karen Goodson", new DateTime(2017, 8, 23), new DateTime(2018, 9, 10))
};
}
}
// ...
builder.Services.AddSingleton<EmployeeTaskService>();
When users move a column in the TreeList or Column Chooser, the TreeList component updates the column’s VisibleIndex property and reorders columns in the corresponding zone.
The TreeList prevents users from moving a column from one zone to another. For instance, users cannot place an unfixed column before columns anchored to the TreeList’s left edge.
Set the TreeList’s ColumnResizeMode property to NextColumn or ColumnsContainer to allow users to change column widths. A column before a fixed column is not resizable. The image below demonstrates how users can resize columns in ColumnsContainer resize mode. Fixed columns on the image are colored gray for demonstration purposes.
In NextColumn resize mode, users cannot change the width of a zone at the expense of another zone. That is, users cannot drag borders that separate zones.
See Also