Declined
Last Updated: 26 Jul 2020 10:47 by ADMIN
Alberto
Created on: 01 Jul 2020 21:13
Category: UI for Blazor
Type: Bug Report
0
Problem tryng to render Blazor Treeview component

Hello,

 

im trying to render a treview but its not showing any item, im also print the results of my query on a table using a for loop and it shows the results ok , but the trevieww its not loading any data. Attached my code :

@inherits LayoutComponentBase
@inject Blazored.LocalStorage.ILocalStorageService oLocalStorage
@using MAPCRUD.Model
@using MAP.Interfaces 
@inject IMapTreeviewMenuService MapTreeviewMenuService
<TelerikRootComponent>
    <div class="sidebar">

        <NavMenu />
        @if (MapMenuData == null)
        {
            <p><em>Loading...</em></p>
        }
        else
        {
            <TelerikTreeView Data="@MapMenuData">
                <TreeViewBindings>
                    <TreeViewBinding ParentIdField="@(nameof(MapTreeviewMenu.ParentIdValue))" TextField="@(nameof(MapTreeviewMenu.Text))" UrlField="@(nameof(MapTreeviewMenu.Url))" IconField="@(nameof(MapTreeviewMenu.Icon))" ></TreeViewBinding>
                </TreeViewBindings>
            </TelerikTreeView>
            <table>
                <thead>
                    <tr>
                        <th>Text</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach (var menuData in MapMenuData)
                    {
                        <tr>
                            <td style="color:#fff;">@menuData.Url</td>
                        </tr>
                    }
                </tbody>
            </table>
        }
    </div>

    <div class="main">
        <div class="top-row px-4">
            <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
        </div>

        <div class="content px-4">
            @Body
        </div>
    </div>
</TelerikRootComponent>
@code {
    private IEnumerable<MapTreeviewMenu> MapMenuData;
    protected override async Task OnInitializedAsync()
    {
        await oLocalStorage.SetItemAsync("CollegeID", 1);
        await oLocalStorage.SetItemAsync("ApplicationID", 1);
        await oLocalStorage.SetItemAsync("RoleID", 2);
        await oLocalStorage.SetItemAsync("UserID", 1);

        int CollegeID = await oLocalStorage.GetItemAsync<int>("CollegeID");
        int ApplicationID = await oLocalStorage.GetItemAsync<int>("ApplicationID");
        int RoleID = await oLocalStorage.GetItemAsync<int>("RoleID");
        int UserID = await oLocalStorage.GetItemAsync<int>("UserID");

        MapMenuData = await MapTreeviewMenuService.GetMenuItems(CollegeID, ApplicationID, RoleID,  UserID);
    }
}
Attached Files:
3 comments
ADMIN
Marin Bratanov
Posted on: 26 Jul 2020 10:47

Hi Alberto,

I'm happy to hear you have solved this. I am marking this with the "Declined" status, as it is not a bug in the component.

Regards,
Marin Bratanov
Progress Telerik

Alberto
Posted on: 25 Jul 2020 00:44
Thank you so much, the problem was with my MapTreeviewMenu class, just changed the property definition  as a nullable reference and it worked perfectly.
ADMIN
Svetoslav Dimitrov
Posted on: 03 Jul 2020 08:06

Hello Alberto,

As attached file I am sending a demo project, which has a TelerikTreeView in the MainLayout. The main difference between our projects is that I have used hardcoded data, it is easier to read and follow.

That being said, I suspect that the data you are providing to the TreeView does not have a null value for the ParentId field. You can read more on flat data binding in our documentation. When there is no null value the component will not render any information, because there is no root level item.

Regards,
Svetoslav Dimitrov
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.