Opened

Does Blazorise support nested tables? Looking to display an Array List embedded in my DataGrid

webman commented

Does Blazorise support nested tables? Looking to display an Array List embedded in my DataGrid

Similar to this url? https://demos.devexpress.com/blazor/GridMasterDetail

Can you show me some examples?

mladenmacanovic commented

We have nested tables, and they're called detail rows. You can see them in https://blazorise.com/docs/extensions/datagrid/templates under the DetailRowTemplate section.

Also, on our demo page https://bootstrapdemo.blazorise.com/tests/datagrid/selection/row-detail, and the code for the demos https://github.com/Megabit/Blazorise/tree/master/Demos/Blazorise.Demo/Pages/Tests/DataGrid

webman commented

<DataGrid TItem="Employee"
Data="@employeeList"
@bind-SelectedRow="@selectedEmployee"
DetailRowTrigger="@((item)=>item.Salaries?.Count > 0 && item.Id == selectedEmployee?.Id)"
Responsive>

 **`       <DataGrid TItem="Salary"`**
                  Data="salaries"
                  Sortable="false"
                  ShowCaptions="false">
            <DataGridCommandColumn TItem="Salary" />
            <DataGridDateColumn TItem="Salary" Field="@nameof(Salary.Date)" Caption="Date" />
            <DataGridNumericColumn TItem="Salary" Field="@nameof(Salary.Total)" Caption="Total" />
        </DataGrid>
    }
</DetailRowTemplate>
webman commented

In this code how is Salary defined? Is this field initialized somewhere?

Almost got this working but cant understand where this field comes from?

David-Moreira commented

Hello,
Employee and Salary are just regular classes.
If you want to take a look at their definition, it's here:
https://github.com/Megabit/Blazorise/blob/master/Shared/Blazorise.Shared/Models/Employee.cs
https://github.com/Megabit/Blazorise/blob/master/Shared/Blazorise.Shared/Models/Salary.cs

You can put anything you want in the DetailRowTemplate. In this example, we're nesting a DataGrid, and you can just "program" it however you want.

Typically you'll want to fill it with Data related to the currently selected row. In the example you pasted, the data comes from the selected row employee salaries.

var salaries = ( context as Employee ).Salaries;
Data="salaries"
Want to comment on this issue? Log in and write your comment.
Asignee
No assignee
Labels
No Labels