JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › Docking Layout › Dynamically Add Blazor Component into Docking Layout › Reply To: Dynamically Add Blazor Component into Docking Layout
November 1, 2021 at 12:01 pm
#102476
horacio camacho
Participant
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; } }