Reply To: Dynamically Add Blazor Component into Docking Layout

[horacio camacho]

Hello,

With the example above a single docking item can be added dynamically. I tried to add multiple items dynamically (see example), but only the last item added renders its custom content.

Thank you,

Horacio

<hr />

<style>
    smart-docking-layout {
        width: 100%;
        height: 500px;
        max-width: 1000px;
        background-color: #EEEDF3;
    }
 
        smart-docking-layout .smart-items-container smart-splitter-item.smart-element,
        smart-docking-layout .smart-items-container > .smart-container > smart-splitter-item.smart-element {
            width: 50%;
            height: 50%;
        }
 
        smart-docking-layout smart-tabs-window smart-slider.smart-element,
        smart-docking-layout smart-tabs-window smart-multiline-text-box.smart-element {
            height: 100%;
            width: 100%;
        }
 
        smart-docking-layout smart-tabs-window smart-multiline-text-box.smart-element {
            display: block;
        }
</style>
<DockingLayout OnReady="OnReady" Layout=@layoutStructure>
</DockingLayout>
@foreach (var label in _labels)
{
    <div id="@label">
        "@label"
    </div>
}
<Button @onclick="InjectBlazorComponent">Inject Component</Button>
@code {
    private List<object> layoutStructureTmp = new List<object>();
    private List<object> layoutStructure = new List<object> {
        new {
            type = "LayoutGroup",
            orientation = "horizontal",
            items = new object[0]
        }
    };
    private bool doRender;
 
    private RenderFragment DynamicRender { get; set; }
    private void OnReady(DockingLayout dockingLayout)
    {
    }
 
    private RenderFragment CreateDynamicComponent() => builder =>
    {
        builder.OpenComponent(0, typeof(SurveyPrompt));
        builder.AddAttribute(1, "Title", "Some title");
        builder.CloseComponent();
    };
 
    protected override void OnAfterRender(bool firstRender)
    {
        if (doRender)
        {
            layoutStructure = layoutStructureTmp.ToList();
            InvokeAsync(StateHasChanged).Wait();
        }
        doRender = false;
    }
 
    int labelCounter = 0;
    List<string> _labels = new List<string>();
    private void InjectBlazorComponent(MouseEventArgs e)
    {
        DynamicRender = CreateDynamicComponent();
        layoutStructureTmp = layoutStructure.ToList();
        labelCounter++;
 
        var label = "Custom" + labelCounter;
        if (!_labels.Contains(label))
        {
            _labels.Add(label);
        }
        layoutStructureTmp.Add(
            new
            {
                id = "item" + labelCounter,
                label = "Tabs" + labelCounter,
                items = new object[]{
                        new {
                            label = "Tab " + labelCounter,
                            content = "#" + label
                        }
                                                                                                                                                                                                                                        }
            }
        );
        doRender = true;
    }
}