Please add TreeList Export to Excel
Regards
Andrzej
I am overriding the built-in Add command and setting an InsertedItem through the TreeList state. However, it looks like the the built-in validation is invoked twice and two validation Tooltips are displayed for the field.
The code below compiles and doesn't give any browser errors when run, but when you collapse a row, all data is collapsed and you can't expand it again.
If you change the line that generates the data to use a List instead of IEnumerable it will work as expected.
REPRODUCIBLE
<TelerikTreeList Data=Data
IdField="@nameof(Record.Id)"
ParentIdField="@nameof(Record.ParentId)"
Height="100%">
<TreeListColumns>
<TreeListCheckboxColumn CheckBoxOnlySelection="true" />
<TreeListColumn Field="@nameof(Record.Text)" Title="" Expandable="true" />
<TreeListColumn Field="@nameof(Record.Id)" Title="ID" />
<TreeListColumn Field="@nameof(Record.ParentId)" Title="PARENT" />
</TreeListColumns>
</TelerikTreeList>
@code {
protected IEnumerable<Record> Data = new List<Record>();
protected override void OnInitialized()
{
Data = Enumerable.Range(1, 10).Select(i => new Record(i));
}
public class Record
{
public Record(int i)
{
Id = i;
if (i % 5 == 1)
ParentId = null;
else
ParentId = (i - ((i - 1) % 5));
Text = "Item " + i;
}
public long Id { get; set; }
public long? ParentId { get; set; }
public string Text { get; set; }
}
} WORKAROUND
<TelerikTreeList Data=Data
IdField="@nameof(Record.Id)"
ParentIdField="@nameof(Record.ParentId)"
Height="100%">
<TreeListColumns>
<TreeListCheckboxColumn CheckBoxOnlySelection="true" />
<TreeListColumn Field="@nameof(Record.Text)" Title="" Expandable="true" />
<TreeListColumn Field="@nameof(Record.Id)" Title="ID" />
<TreeListColumn Field="@nameof(Record.ParentId)" Title="PARENT" />
</TreeListColumns>
</TelerikTreeList>
@code {
protected List<Record> Data = new List<Record>();
protected override void OnInitialized()
{
Data = Enumerable.Range(1, 10).Select(i => new Record(i)).ToList();
}
public class Record
{
public Record(int i)
{
Id = i;
if (i % 5 == 1)
ParentId = null;
else
ParentId = (i - ((i - 1) % 5));
Text = "Item " + i;
}
public long Id { get; set; }
public long? ParentId { get; set; }
public string Text { get; set; }
}
}
I'm experiencing a flickering in the TreeList InCell Editing demo here: https://demos.telerik.com/blazor-ui/treelist/editing-incell
Steps to reproduce:
1. Click on "Mountain Bikes"
2. Click on "Road Bikes"
3. Click on "Touring Bikes"
It can actually be reproduced by clicking on any three editable cells.
Any ideas?
Thank you.
I am using the TreeList Control and loading the Children on Demand provided in the sample I provided. When I load on the first run, UI displays the Expand/Collapse option but after applying any filter, Expand/Collapse is not visible.
How to make Expand/Collapse visible always irrespective of having Children or not.
Sample Code:
Apply any Column Filter and notice the Expand/Collapse Icon is not visible. I want Expand/Collapse Icon to be visible always.
https://blazorrepl.telerik.com/GJYCbRvb48xy8T7d09
Just add the FilterMenuType="FilterMenuType.Menu"
FilterMode="TreeListFilterMode.FilterMenu" and Apply filter.
The TreeList renders its initial items expanded by default. However, if the Data collection is replaced, the new items will collapse.
The issue appears only when clearing the collection (or creating a new empty collection) and then adding the new items in it. If you create a new collection reference based on the current collection of items, there is no problem and the new items appear expended.
Reproduction: https://blazorrepl.telerik.com/wJEbcXvb207dv5vU11.
======
TELERIK EDIT: You can override the Equals() method of the TreeList model class to prevent the issue:
public class Employee
{
public int Id { get; set; }
public int? ParentId { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
public string Position { get; set; }
public override bool Equals(object? obj)
{
return obj is Employee && ((Employee)obj).Id == Id;
}
}
Hello,
Please add support for sorting and filtering when the TreeList is data bound to a ExpandoObject. Currently these data operations throw an exception System.ArgumentException: Invalid property or field
TreeList REPL page with ExpandoObject
===
TELERIK EDIT: This public item was created as a bug and for both ExpandoObject and Dictionary support. However:
- This is a limitation, rather than a bug, so I am converting the item to a feature request. Dynamic data support needs to be explicitly implemented.
- The required implementation for ExpandoObject and Dictionary support is different, so we are focusing this item just on ExpandoObject, which the Grid already supports. There is another item about TreeList Dictionary support.
Please add support for sorting and filtering when the TreeList is data bound to a Dictionary. Currently this scenario throws a runtime exception:
Error: System.ArgumentException: Invalid property or field - 'Name' for type: Dictionary`2
Test page: https://blazorrepl.telerik.com/czFkOPEp26skrgXJ17
https://docs.telerik.com/blazor-ui/components/grid/selection/multiple#two-way-binding-of-selecteditems
Click the Preview button to load the example. Notice that the 3rd, 4th, and 5th rows are programmatically selected in the OnInitialized() method. Now, if you hold down the Shift key and click on the 6th row, instead of having the 3rd through 6th rows selected, we get the 1st through 6th row selected.
By design, the Shift + Click shortcut starts the selection from the last clicked row. If no click has taken place, the selection always starts from the first row. How to customize this?
For reference in Angular: https://www.telerik.com/kendo-angular-ui-develop/components/grid/api/SelectionDirective/
I would like to start the tree grid with all rows collapsed. At the moment I can do this only through load on demand.
*** Thread created by admin on customer behalf ***
It does not matter whether I drag Items around within the same component or try to move them to another TreeList. The parameter is also empty when I try to drag items from a Grid to a TreeList.
Hello,
Here is your code of the example "how to load hierarchical data on demand" with the option FilterMode = "@ TreeListFilterMode.FilterMenu"As you can see if we click on a node the whole hierarchy disappears. if you remove this option all work fine
@* this sample shows how to load hierarchical data on demand and one way of handling no data being returned. Depending on your models and data logic you may have to tweak some checks, review the code comments for details.
*@<TelerikTreeList Data="@Data"
ItemsField="@(nameof(Employee.DirectReports))"
HasChildrenField="@(nameof(Employee.HasChildren))"
OnExpand="@OnExpandHandler"
Pageable="true" Width="550px" Height="400px" FilterMode="@TreeListFilterMode.FilterMenu" >
<TreeListColumns>
<TreeListColumn Field="Name" Expandable="true" Width="220px" />
<TreeListColumn Field="HireDate" Width="120px" />
</TreeListColumns>
</TelerikTreeList>
@code {
public List<Employee> Data { get; set; }
// load on demand through the event
async Task OnExpandHandler(TreeListExpandEventArgs args)
{
Employee item = args.Item as Employee;
if (item.HasChildren && // it is marked as having children
(item.DirectReports == null || item.DirectReports.Count == 0) // there are no child items
)
{
// request data
var children = await GetChildren(item);
if (children.Count > 0)
{
// child items exist - add them to the current item
item.DirectReports = children;
}
else
{
// no nested data - hide the expand arrow
item.HasChildren = false;
}
}
}
async Task<List<Employee>> GetChildren(Employee itm)
{
await Task.Delay(400); // simulate delay. Remove for a real app
List<Employee> data = new List<Employee>();
// to showcase an example of when no actual child items are returned
// we will check for too long nesting chain with this simpe logic
if (itm.Name.LastIndexOf("Child of") < 15)
{
data.Add(new Employee
{
Name = "Child of " + itm.Name,
HasChildren = true
});
}
return await Task.FromResult(data);
}
// sample model
public class Employee
{
// hierarchical data collections
public List<Employee> DirectReports { get; set; }
public bool HasChildren { get; set; }
// data fields for display
public string Name { get; set; }
public DateTime HireDate { get; set; }
}
// initial data generation
protected override async Task OnInitializedAsync()
{
List<Employee> data = new List<Employee>();
for (int i = 0; i < 6; i++)
{
data.Add(new Employee
{
Name = $"root: {i}",
HireDate = DateTime.Now.AddYears(-i),
HasChildren = true
});
}
// mark an item as non-expandable (not having children)
data[1].HasChildren = false;
data[1].Name += "(not expandable) ";
Data = data;
}
}