This is a migrated thread and some comments may be shown as answers.

Multiple Hierarchy

4 Answers 187 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Michael
Top achievements
Rank 2
Michael asked on 04 Oct 2019, 12:23 PM

I'm trying to see more than 1 level of hierarchy in my grid but i don't know how i would to such a thing with the current infrastructure.

 

any idea?

4 Answers, 1 is accepted

Sort by
0
Marin Bratanov
Telerik team
answered on 04 Oct 2019, 12:24 PM

Hello Michael,

If you put a grid in the DetailTemplate of the first grid, you should be able to use its own DetailTemplate to provide further hierarchy. Are you facing issues with this approach?

 

Regards,
Marin Bratanov
Progress Telerik

 UI for Blazor
0
Michael
Top achievements
Rank 2
answered on 08 Oct 2019, 11:29 AM
I've attached a screenshot of what happened when i first try this solution. 
0
Marin Bratanov
Telerik team
answered on 08 Oct 2019, 03:53 PM

Hello Michael,

When nesting RenderFragments, you should name their context variables, so that the framework can tell them apart. Here's an example I made for you that seems to work as expected (a screenshot of the result is attached at the end of this message):

 

<TelerikGrid Data="salesTeamMembers">
    <DetailTemplate Context="employeeItem">
        @{
            var employee = employeeItem as MainModel;
            <TelerikGrid Data="employee.Orders" Pageable="true" PageSize="5">
                <GridColumns>
                    <GridColumn Field="OrderId"></GridColumn>
                    <GridColumn Field="DealSize"></GridColumn>
                </GridColumns>
                <DetailTemplate Context="orderInfo">
                    <TelerikGrid Data="orderInfo.ShippingHistory">
                        <GridColumns>
                            <GridColumn Field="HistoryItem"></GridColumn>
                        </GridColumns>
                    </TelerikGrid>
                </DetailTemplate>
            </TelerikGrid>
        }
    </DetailTemplate>
    <GridColumns>
        <GridColumn Field="Id"></GridColumn>
        <GridColumn Field="Name"></GridColumn>
    </GridColumns>
</TelerikGrid>

@code {
    List<MainModel> salesTeamMembers { get; set; }

    protected override void OnInitialized()
    {
        salesTeamMembers = GenerateData();
    }

    private List<MainModel> GenerateData()
    {
        List<MainModel> data = new List<MainModel>();
        for (int i = 0; i < 5; i++)
        {
            MainModel mdl = new MainModel { Id = i, Name = $"Name {i}" };
            mdl.Orders = Enumerable.Range(1, 15).Select(x => new DetailsModel { OrderId = x, DealSize = x ^ i }).ToList();
            foreach (DetailsModel item in mdl.Orders)
            {
                List<ThirdLevel> history = new List<ThirdLevel>();
                for (int j = 0; j < 5; j++)
                {
                    history.Add(new ThirdLevel { HistoryItem = $"step {j} for Order {item.OrderId}" });
                }
                item.ShippingHistory = history;
            }
            data.Add(mdl);
        }
        return data;
    }

    public class MainModel
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public List<DetailsModel> Orders { get; set; }
    }

    public class DetailsModel
    {
        public int OrderId { get; set; }
        public double DealSize { get; set; }
        public List<ThirdLevel> ShippingHistory { get; set; }
    }

    public class ThirdLevel
    {
        public string HistoryItem { get; set; }
    }
}

 

 

Regards,
Marin Bratanov
Progress Telerik

 UI for Blazor
0
Accepted
Marin Bratanov
Telerik team
answered on 09 Oct 2019, 11:10 AM

Hello,

I am writing to let everyone stumbling on this thread know that the example of multi-level hierarchy is available in the following KB article: https://docs.telerik.com/blazor-ui/knowledge-base/grid-three-level-hierarchy

and more details on nesting RenderFragment content is available in this KB article: https://docs.telerik.com/blazor-ui/knowledge-base/nest-render-fragment

 

Regards,
Marin Bratanov
Progress Telerik

 UI for Blazor
Tags
Grid
Asked by
Michael
Top achievements
Rank 2
Answers by
Marin Bratanov
Telerik team
Michael
Top achievements
Rank 2
Share this question
or