Reply To: Dynamically Add Blazor Component into Docking Layout

[Yavor Dashev]

Hi horacio camacho,

I have modified you code snippet so that it may suit your needs and the cause of this behavior is because you are redefine the whole layout for the Docking layout in the InjectBlazorComponent method. You only need to set the items in order to add multiple tabs in the docking layout.

Modified code:

<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 @red="dockingLayout" OnReady="OnReady" Layout=@layoutStructure>
</DockingLayout>
@foreach (var label in _labels)
{
    <div id="@label">
        "@label"
    </div>
}
<Button @onclick="InjectBlazorComponent">Inject Component</Button>
@code {
    DockingLayout dockingLayout;
    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)
    {
        List<object>  NewItems = new List<object> ();

        for (int x=0;x<4;x++)
        {
            DynamicRender = CreateDynamicComponent();
            layoutStructureTmp = layoutStructure.ToList();
            labelCounter++;
    
            var label = "Custom" + labelCounter;
            if (!_labels.Contains(label))
            {
                _labels.Add(label);
            }
        
            
            NewItems.Add( new 
                            {
                            label = "Tab " + labelCounter,
                            content = "#" + label
                            }
                        );
           
        }
            doRender = true;

            layoutStructureTmp.Add(
                new
                {
                    id = "item" + labelCounter,
                    label = "Tabs" + labelCounter,
                    items = NewItems

                }
            );

    }
}

Let me know if that works for you!

Please, do not hesitate to contact us if you have any additional questions.

Best regards,
Yavor Dashev

Smart UI Team
https://www.htmlelements.com/