Hey,
I have a question that, when Child node is Collapsed and you are checking Parent node then it keeps only Parent node data (included child node), but when Child node is expanded, and you are checking all elements of expanded child node then it keeps child node elements and parent node (included child node) together, so it happens duplicated values. Is it proper approach?
Best regards,
Ali
The same for me, looks like a bug in the component
Didn’t understood much from the first post - no screenshots, no code examples, however if you think you’ve found a bug in some of our components feel free to submit pull request with a fix.
Hi, in order to explain what happens, I've prepared some screenshots for you.
In the above screenshots are describing that if when parent node is collapsed and has been checked then CheckedValue keeps only 1 data (parent node and included sub nodes). It's fine.
But these screenshots are describing that if when parent node is expanded and has been checked so CheckedValue keeps parent node and sub nodes separately. I think that regardless the parent node's state if parent node has been checked then CheckedValue must keep only parent node + into sub nodes, not the parent and sub nodes separately.
If my approach isn't acceptable, please let me know.
Thanks
We will need also runnable example code reproducing the problem.
Sure, please.
@page "/treeView"
@using BlazorApp1.Data
<style>
.search-input {
width: 70%;
margin-left: auto;
margin-right: auto;
margin-top: 3px;
box-shadow: none !important;
font-size: 13px;
height: 33px;
}
.search-input:focus {
border-color: #dddddd;
}
.parent-tree-view-div {
border: 1px solid #dddddd;
border-radius: 5px;
}
.tree-view-div {
overflow-y: auto;
height: 350px;
}
.input-dropdown {
background-color: white !important;
cursor: pointer;
box-shadow: none !important;
}
.input-dropdown:focus {
border-color: #dddddd;
}
.icon-arrow {
position: absolute;
right: 20px;
top: 7px;
bottom: 0;
height: 28px;
margin: auto;
}
</style>
<h3>TreeView</h3>
<div class="row">
<div class="row" style="margin-top: 2px; margin-left: 0; margin-right: 40px;">
<div class="col-md-4 parent-tree-view-div">
<div class="row tree-view-div">
<div class="col-md-12">
<RadzenTree AllowCheckBoxes="true" Data="@continents" Style="width:100%" @bind-CheckedValues="@CheckedValues">
<RadzenTreeLevel TextProperty="ContinentName" ChildrenProperty="Countries"></RadzenTreeLevel>
<RadzenTreeLevel TextProperty="CountryName" ChildrenProperty="Cities" HasChildren="@(country => (country as Country).Cities.Any())"></RadzenTreeLevel>
</RadzenTree>
</div>
</div>
</div>
</div>
</div>
@code {
IEnumerable<Continent> continents;
IEnumerable<object> checkedValues;
IEnumerable<object> CheckedValues
{
get => checkedValues;
set
{
checkedValues = value;
}
}
string GetText(object data)
{
if (data is Continent continent)
{
return continent.ContinentName;
}
if (data is Country country)
{
return country.CountryName;
}
return string.Empty;
}
public class Continent
{
public int ContinentId { get; set; }
public string ContinentName { get; set; }
public IEnumerable<Country> Countries { get; set; }
}
public class Country
{
public int CountryId { get; set; }
public string CountryName { get; set; }
public int ContinentId { get; set; }
public IEnumerable<City1> Cities { get; set; } = new List<City1>();
}
List<Continent> continentList = new List<Continent>()
{
new Continent(){ContinentId = 11, ContinentName = "Afrika"},
new Continent(){ContinentId = 12, ContinentName = "Asia"},
new Continent(){ContinentId = 13, ContinentName = "South America"},
new Continent(){ContinentId = 14, ContinentName = "Euroasia"},
new Continent(){ContinentId = 15, ContinentName = "North America"}
};
List<Country> countryList = new List<Country>()
{
new Country(){CountryId = 101, ContinentId = 11, CountryName = "Angola"},
new Country(){CountryId = 110, ContinentId = 11, CountryName = "Benin"},
new Country(){CountryId = 111, ContinentId = 11, CountryName = "Country 1"},
new Country(){CountryId = 112, ContinentId = 11, CountryName = "Country 2"},
new Country(){CountryId = 113, ContinentId = 11, CountryName = "Country 3"},
new Country(){CountryId = 114, ContinentId = 11, CountryName = "Country 4"},
new Country(){CountryId = 115, ContinentId = 11, CountryName = "Country 5"},
new Country(){CountryId = 116, ContinentId = 11, CountryName = "Country 6"},
new Country(){CountryId = 117, ContinentId = 11, CountryName = "Country 7"},
new Country(){CountryId = 118, ContinentId = 11, CountryName = "Country 8"},
new Country(){CountryId = 103, ContinentId = 12, CountryName = "Azerbaijan"},
new Country(){CountryId = 104, ContinentId = 12, CountryName = "Albania"},
new Country(){CountryId = 108, ContinentId = 12, CountryName = "China"},
new Country(){CountryId = 109, ContinentId = 12, CountryName = "Korea"},
new Country(){CountryId = 105, ContinentId = 13, CountryName = "Brazil"},
new Country(){CountryId = 106, ContinentId = 14, CountryName = "France"},
new Country(){CountryId = 107, ContinentId = 15, CountryName = "USA"},
};
public async Task<List<Continent>> GetLocation()
{
var continents = new List<Continent>();
var countries = new List<Country>();
foreach (var continent in continentList)
{
continent.Countries = countryList.Where(x => x.ContinentId == continent.ContinentId).ToList();
continents.Add(continent);
}
return await Task.FromResult(continents);
}
protected override async Task OnInitializedAsync()
{
continents = await GetLocation();
}
}
Also, you can see this issue on the Radzen site demo version's console window.
Thanks.
Sorry, I've removed unnecessary codes. Please use following these codes.
@page "/treeView"
@using BlazorApp1.Data
<style>
.search-input {
width: 70%;
margin-left: auto;
margin-right: auto;
margin-top: 3px;
box-shadow: none !important;
font-size: 13px;
height: 33px;
}
.search-input:focus {
border-color: #dddddd;
}
.parent-tree-view-div {
border: 1px solid #dddddd;
border-radius: 5px;
}
.tree-view-div {
overflow-y: auto;
height: 350px;
}
.input-dropdown {
background-color: white !important;
cursor: pointer;
box-shadow: none !important;
}
.input-dropdown:focus {
border-color: #dddddd;
}
.icon-arrow {
position: absolute;
right: 20px;
top: 7px;
bottom: 0;
height: 28px;
margin: auto;
}
</style>
<h3>TreeView</h3>
<div class="row">
<div class="row" style="margin-top: 2px; margin-left: 0; margin-right: 40px;">
<div class="col-md-4 parent-tree-view-div">
<div class="row tree-view-div">
<div class="col-md-12">
<RadzenTree AllowCheckBoxes="true" Data="@continents" Style="width:100%" @bind-CheckedValues="@CheckedValues">
<RadzenTreeLevel TextProperty="ContinentName" ChildrenProperty="Countries"></RadzenTreeLevel>
<RadzenTreeLevel TextProperty="CountryName" ChildrenProperty="Cities" HasChildren="@(country => false)"></RadzenTreeLevel>
</RadzenTree>
</div>
</div>
</div>
</div>
</div>
@code {
IEnumerable<Continent> continents;
IEnumerable<object> checkedValues;
IEnumerable<object> CheckedValues
{
get => checkedValues;
set
{
checkedValues = value;
}
}
string GetText(object data)
{
if (data is Continent continent)
{
return continent.ContinentName;
}
if (data is Country country)
{
return country.CountryName;
}
return string.Empty;
}
public class Continent
{
public int ContinentId { get; set; }
public string ContinentName { get; set; }
public IEnumerable<Country> Countries { get; set; }
}
public class Country
{
public int CountryId { get; set; }
public string CountryName { get; set; }
public int ContinentId { get; set; }
}
List<Continent> continentList = new List<Continent>()
{
new Continent(){ContinentId = 11, ContinentName = "Afrika"},
new Continent(){ContinentId = 12, ContinentName = "Asia"},
new Continent(){ContinentId = 13, ContinentName = "South America"},
new Continent(){ContinentId = 14, ContinentName = "Euroasia"},
new Continent(){ContinentId = 15, ContinentName = "North America"}
};
List<Country> countryList = new List<Country>()
{
new Country(){CountryId = 101, ContinentId = 11, CountryName = "Angola"},
new Country(){CountryId = 110, ContinentId = 11, CountryName = "Benin"},
new Country(){CountryId = 111, ContinentId = 11, CountryName = "Country 1"},
new Country(){CountryId = 112, ContinentId = 11, CountryName = "Country 2"},
new Country(){CountryId = 113, ContinentId = 11, CountryName = "Country 3"},
new Country(){CountryId = 114, ContinentId = 11, CountryName = "Country 4"},
new Country(){CountryId = 115, ContinentId = 11, CountryName = "Country 5"},
new Country(){CountryId = 116, ContinentId = 11, CountryName = "Country 6"},
new Country(){CountryId = 117, ContinentId = 11, CountryName = "Country 7"},
new Country(){CountryId = 118, ContinentId = 11, CountryName = "Country 8"},
new Country(){CountryId = 103, ContinentId = 12, CountryName = "Azerbaijan"},
new Country(){CountryId = 104, ContinentId = 12, CountryName = "Albania"},
new Country(){CountryId = 108, ContinentId = 12, CountryName = "China"},
new Country(){CountryId = 109, ContinentId = 12, CountryName = "Korea"},
new Country(){CountryId = 105, ContinentId = 13, CountryName = "Brazil"},
new Country(){CountryId = 106, ContinentId = 14, CountryName = "France"},
new Country(){CountryId = 107, ContinentId = 15, CountryName = "USA"},
};
public async Task<List<Continent>> GetLocation()
{
var continents = new List<Continent>();
var countries = new List<Country>();
foreach (var continent in continentList)
{
continent.Countries = countryList.Where(x => x.ContinentId == continent.ContinentId).ToList();
continents.Add(continent);
}
return await Task.FromResult(continents);
}
protected override async Task OnInitializedAsync()
{
continents = await GetLocation();
}
}
Your code again is invalid, I’m afraid I don’t have any other free time.