Question: how do you get DockViewV2 to work?

[celadaris]

I have tried to paste the razor code from multiple samples on the website and i tried to remove some of the code too so that it could maybe work on a fresh template and nothing seems to work. i installed BootstrapBlazor.DockView but trying to do @inherits BaseDockView just gives errors because it cant find the files that it needs. im not sure what im missing

i got v1 to load with the following code, which is great, but i wanted V2:

<DockView Name="DockViewColumn">
    <DockContent Type="DockContentType.Column">
        <DockComponent Title="left dock" ShowClose="false">
            <div>
                left dock
            </div>
        </DockComponent>
        <DockComponent Title="right dock" ShowClose="false">
            <div>
                right dock
            </div>
        </DockComponent>
    </DockContent>
</DockView>

[bb-auto[bot]]

@celadaris Thank you for reporting. We will give triage later.

[celadaris]

ive tried pasting alot of different examples, but...

here is a sample of something i tried to run:

<DockViewV2 Name="DockViewV2LayoutGroup" class="dockview-demo">
    <DockViewContent Type="DockViewContentType.Row">
        <DockViewContent Type="DockViewContentType.Group">
            <DockViewComponent Key="tab1" Title="Headers1">
                <Table TableSize="TableSize.Normal" RenderMode="@TableRenderMode.Table" TItem="MarginalElement" Items="@allSearches" HeaderStyle="TableHeaderStyle.Dark" IsBordered="true" IsTree="true" IsFixedHeader="true">
                    <TableColumns>
                        <TableColumn @bind-Field="@context.Name" />
                        <TableColumn @bind-Field="@context.HTMLValidated">
                            <Template Context="value">
                                <Checkbox Value="@value.Value" IsDisabled="true"></Checkbox>
                            </Template>
                        </TableColumn>
                    </TableColumns>
                </Table>
            </DockViewComponent>
            <DockViewComponent Key="tab2" Title="Footers2">
                <Table TableSize="TableSize.Normal" RenderMode="@TableRenderMode.Table" TItem="MarginalElement" Items="@allSearches" HeaderStyle="TableHeaderStyle.Dark" IsBordered="true" IsTree="true" IsFixedHeader="true">
                    <TableColumns>
                        <TableColumn @bind-Field="@context.Name" />
                        <TableColumn @bind-Field="@context.HTMLValidated">
                            <Template Context="value">
                                <Checkbox Value="@value.Value" IsDisabled="true"></Checkbox>
                            </Template>
                        </TableColumn>
                    </TableColumns>
                </Table>
            </DockViewComponent>
        </DockViewContent>
    </DockViewContent>
</DockViewV2>

[ArgoZhang]

@celadaris could you provider a mini-repro-project?

[celadaris]

DockRepro.zip

This project was made from the bootstrap blazor project (Server-Side) template

This project has BootstrapBlazor.DockView installed from nuget

In the Pages folder I have a SimpleTableTest.razor page. I used this to help me figure out how to create Items from Foo

In the Pages folder I have a DockTest.razor page. This has commented code pasted from here to see if I could get DockViewV2 to work.

I also added a code-behind to both the DockTest.razor page and the SimpleTableTest.razor page in order to create Items list from Foo

[ArgoZhang]

@celadaris hi. I get the point.

Tips

1. remove the Table inside DockViewComponent for make clear of DockView
2. add a style for the DockView container cause tabs-body does not height

DockRepro.zip