1. Home
  2. Forum
  3. Blazor
  4. Hierarchy Grid Question, no idea how to make

Hierarchy Grid Question, no idea how to make

@code{
[Parameter]
public ImmutableList Digests { get; set; }
}

I have just one parameter called digestViewModel and 
DigestViewModel has {int ID, string name/description, immutableList warning, immutableList error}

Syncfusion.Blazor.Grids.SfGrid DataSource="@Digests" AllowPaging="false" AllowTextWrap="false"
GridTemplates
DetailTemplate
@{
//I want a hierarchy grid that click to list out each err and warning but i don't know how
}
/DetailTemplate
/GridTemplates
Syncfusion.Blazor.Grids.GridColumns
Syncfusion.Blazor.Grids.GridColumn Field=@nameof(DigestViewModel.Id) HeaderText="Number" TextAlign="TextAlign.Left" Width="70" >
Syncfusion.Blazor.Grids.GridColumn Field=@nameof(DigestViewModel.Name) HeaderText="Name" TextAlign="TextAlign.Left" Width="100">
/Syncfusion.Blazor.Grids.GridColumn

Something span out like this    
          Id    Name
  • 01     dfdd     
               [internal error 1]....
               [internal error 2]....     
               ....

3 Replies 1 reply marked as answer
VN Vignesh Natarajan Syncfusion Team September 15, 2020 10:04 AM UTC

Hi Ariel,  
 
Thanks for contacting Syncfusion support.  
 
Query: “I want a hierarchy grid that click to list out each err and warning but i don't know how” 
 
We have analyzed your query and we understand that you want to Render Hierarchical Grid structure. We have achieve your requirement using DetailTemplate feature of Grid and rendering another Grid inside the DetailTemplate. Refer the below code example.  
 
<SfGrid DataSource="@Employees" Height="315px"> 
    <GridTemplates> 
        <DetailTemplate> 
            @{ 
                var employee = (context as EmployeeData); 
                <SfGrid DataSource="@employee.IMList"> // immutable datasource of particular record. 
                    <GridColumns> 
                        <GridColumn Field=@nameof(Order.OrderID) HeaderText="First Name" Width="110"> </GridColumn> 
                        <GridColumn Field=@nameof(Order.CustomerName) HeaderText="Last Name" Width="110"></GridColumn> 
                        <GridColumn Field=@nameof(Order.ShipCountry) HeaderText="Title" Width="110"></GridColumn> 
                    </GridColumns> 
                </SfGrid> 
            } 
        </DetailTemplate> 
    </GridTemplates> 
    <GridColumns> 
        <GridColumn Field=@nameof(EmployeeData.FirstName) HeaderText="First Name" Width="110"> </GridColumn> 
        <GridColumn Field=@nameof(EmployeeData.LastName) HeaderText="Last Name" Width="110"></GridColumn> 
        <GridColumn Field=@nameof(EmployeeData.Title) HeaderText="Title" Width="110"></GridColumn> 
        <GridColumn Field=@nameof(EmployeeData.Country) HeaderText="Country" Width="110"></GridColumn> 
    </GridColumns> 
</SfGrid> 
 
 
Refer our UG documentation and online demo for your reference 
 
 
 
Please get back to us if you have further queries.  
 
Regards, 
Vignesh Natarajan 


AT Ariel Tan September 15, 2020 05:54 PM UTC

I don't understand. for example my secondary grid I want to show my warning list which is immutableList(String). How do I do that

VN Vignesh Natarajan Syncfusion Team September 16, 2020 10:45 AM UTC

Hi Ariel,  
 
Query: “for example my secondary grid I want to show my warning list which is immutableList(String). How do I do that” 
 
We suggest you to achieve your requirement using Column Template feature of Grid to display the ImmutableList(string) in Child Grid. Refer the below code example.  
 
<SfGrid DataSource="@Employees" Height="315px"> 
    <GridTemplates> 
        <DetailTemplate> 
            @{ 
                var employee = (context as EmployeeData); 
                <SfGrid DataSource="@employee.IMList"> 
                    <GridColumns> 
                        <GridColumn HeaderText="Warning" Width="110"> 
                            <Template Context="NewContext"> 
                                @{  
                                    var t = (NewContext as string); 
                                    <div>@t</div> 
                                } 
                            </Template> 
                        </GridColumn>                       
                    </GridColumns> 
                </SfGrid> 
            } 
        </DetailTemplate> 
    </GridTemplates> 
    <GridColumns> 
        <GridColumn Field=@nameof(EmployeeData.FirstName) HeaderText="First Name" Width="110"> </GridColumn> 
        <GridColumn Field=@nameof(EmployeeData.LastName) HeaderText="Last Name" Width="110"></GridColumn> 
        <GridColumn Field=@nameof(EmployeeData.Title) HeaderText="Title" Width="110"></GridColumn> 
        <GridColumn Field=@nameof(EmployeeData.Country) HeaderText="Country" Width="110"></GridColumn> 
    </GridColumns> 
</SfGrid> 
 
public class EmployeeData    {        public int? EmployeeID { get; set; }        public string FirstName { get; set; }        public string LastName { get; set; }        public string Title { get; set; }        public string Country { get; set; }        public ImmutableList<string> IMList = ImmutableList.Create<string>("Error - 404");            }
 
  
Refer the below screenshot for the output 
 
 
 
Kindly download the sample which we have prepared using above sample.  
 
 
Refer our UG documentation for your reference 
 
 
Please get back to us with more details, if you have further queries.  
 
Regards, 
Vignesh Natarajan 
 


Marked as answer
Loader.
Up arrow icon