JavaScript UI Libraries & Blazor Components Suite – Smart UI Forums Docking Layout Dynamically Add Blazor Component into Docking Layout

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #101738
    Up
    0
    Down

    I would like to add an instance of a custom Blazor component as a smarttabwindow into an existing dockinglayout.
    is this done through reder fragement, if so how do I do this?

    #101740
    admin
    Keymaster
    Up
    0
    Down

    Hi Johnny,
    You can use Blazor’s RenderFragment for that purpose.
    Example:

    @page "/dockinglayout"
    <Example Name="DockingLayout">
    <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>
    <div id="Input">
    <br />
    <br />
    <TextArea Value="What is Lorem Ipsum?"></TextArea>
    </div>
    <div id="Slider">
    <br />
    <br />
    <Slider Value="50" ShowButtons="true" TicksVisibility="TicksVisibility.Major" TicksPosition="TicksPosition.Track"></Slider>
    </div>
    <div id="Custom">
    @DynamicRender
    </div>
    <Button @onclick="InjectBlazorComponent">Inject Component</Button>
    </Example>
    @code {
    private object[] layoutStructure = new object[] {
    new {
    type = "LayoutGroup",
    orientation = "horizontal",
    items = new object[] {
    new {
    type = "LayoutGroup",
    size = 200,
    items = new object[] {
    new {
    type = "LayoutPanel",
    label = "Input",
    id = "tabPanel",
    items = new object[] {
    new {
    type = "LayoutPanel",
    label = "TextBox Tab",
    content = "#Input"
    },
    new {
    type = "LayoutPanel",
    label = "Slider Tab",
    content = "#Slider"
    }
    }
    }
    }
    },
    new {
    type = "LayoutPanel",
    label = "Output",
    items = new object[]{
    new {
    id="outputTab",
    label = "Output",
    headerPosition = "none",
    content = "Write more text here..."
    }
    }
    }
    }
    },
    new {
    id = "item0",
    label = "Tabs 0",
    items = new object[]{
    new {
    label = "Tab A",
    selected = true,
    content = "#Custom"
    }
    }
    }
    };
    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();
    };
    private void InjectBlazorComponent(MouseEventArgs args)
    {
    DynamicRender = CreateDynamicComponent();
    }
    }

    Hope this helps.
    Best regards,
    Boyko Markov
    Smart UI Team
    https://www.htmlelements.com/

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.