Hierarchy Grid Question, no idea how to make

[Ariel Tan]

@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]....     

               ....

SIGN IN To post a reply.

3 Replies 1 reply marked as answer Oldest first

---

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 

 

UG: https://blazor.syncfusion.com/documentation/datagrid/row/#rendering-custom-component  

 

Demo: https://blazor.syncfusion.com/demos/datagrid/hierarchy-grid?theme=material  

 

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.  

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/157871/ze/DataGrid1911729023  

 

Refer our UG documentation for your reference 

 

https://blazor.syncfusion.com/documentation/datagrid/columns/#column-template  

https://blazor.syncfusion.com/documentation/datagrid/templates/  

 

Please get back to us with more details, if you have further queries.  

 

Regards, 

Vignesh Natarajan 

 

Marked as answer

[Vignesh Natarajan]

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 

 

UG: https://blazor.syncfusion.com/documentation/datagrid/row/#rendering-custom-component  

 

Demo: https://blazor.syncfusion.com/demos/datagrid/hierarchy-grid?theme=material  

 

Please get back to us if you have further queries.  

 

Regards, 

Vignesh Natarajan 

[Ariel Tan]

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

[Vignesh Natarajan]

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.  

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/157871/ze/DataGrid1911729023  

 

Refer our UG documentation for your reference 

 

https://blazor.syncfusion.com/documentation/datagrid/columns/#column-template  

https://blazor.syncfusion.com/documentation/datagrid/templates/  

 

Please get back to us with more details, if you have further queries.  

 

Regards, 

Vignesh Natarajan