UI design Using Tab with master and detail table

Radzen.Blazor Components
1

image

Hello Sir
Our company just bought two Radzen pro licenses. My task is to create a UI (please see uploaded image) by using tabs. In the image, there are two tabs, Software Packages and Software Items tab.
Software Items tab has following features:
The data come from a list of Object with items: Subsystem, software name, Revision, Build Date, CheckSum, Baseline, Software Part number, Software Image File. Part of them are displayed in master table, and the others in Detail table.
Master table, (1) When I click on Software Items Tab, a master table shows on left side, the table includes following columns: Subsystem, software name, Revision, Build Date, CheckSum and Baseline.
Detail Table, (2) when I click a row on the Master table, then a detail form shows on the left side, with following items: Subsystem, Software Name, Revision, Build Date, CheckSum, Software Part number, Software Image File.
for Master and Detail table data in (1) and (2) come from one list of object/table data. Detail table (2) is for editing purpose.
How to implement this task by using Radzen Pro Layout and page design.
Thank you,
John from Quester Tangent

2

Tab component is a container component you can simply drag and drop DataGrid inside desired tab. You can check tab Selected property to switch tabs in design-time. More info about master/detail DataGrids can be found here:

3

I can't drag and drop DataGrid inside desired tab. I event can't drop a button or other components inside a form.
do our radzen has setting problem?
thanks
John, Quester Tangent

4

Drag and drop definitely works in tabs. Not sure why it may not work for you but it isn't a configuration setting.

drag-and-drop-inside-tab
drag-and-drop-inside-tab1877×944 839 KB

5

Can we put two buttons in one tab? I only can put one button in the tab, can't two?
thanks

6

Yes, you can. You need to drop the second button near the first one. Radzen's design time works like this:

  1. You can drop a component in an empty container (similar to an empty tab item)
  2. You can drop a component before or after existing component by hovering it with the mouse before dropping.
    drag-and-drop-buttons
    drag-and-drop-buttons1786×951 213 KB