JavaScript UI Libraries & Blazor Components Suite – Smart UI Forums Docking Layout Dynamically Add TabItem (LayoutPanelItem)

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #102781
    ehill
    Participant
    Up
    0
    Down

    We are evaluating the purchase of your Blazor components, primarily for the DockingLayout and Window components.  We are attempting to emulate a tabbed mdi similar to Visual Studio’s.  However, we have been unable to determine how to add TabItems to an existing LayoutPanel of a DockingLayout.

    In the forums I found several dated references to accomplishing this via the javascript version of the control (the properties used do not exist in the Blazor version) and one reference from almost a year ago stating it was unsupported at that time but that a work item was being added for it.  I also reviewed the demo examples that add an entire new LayoutPanel,  but not TabItems to an existing LayoutPanel.

    Is it now possible to programmatically add tab items to an existing LayoutPanel?

    #102782
    Yavor Dashev
    Participant
    Up
    0
    Down

    Hi Ehill,

    I have created a complete code example which showcases the functionality that you require.

    In your razor file:

    
    <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>
        <button @onclick="addItem"> Add item</button>
    	<DockingLayout @ref="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>
    @code {
        DockingLayout dockingLayout;
    
    	private void addItem () {
            int index= 1;
            dockingLayout.InsertBeforeItem(index,  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"
    								}
    							}
    						}
    					}
    				}
                    }
                    );
        }
    	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 = "What is Lorem Ipsum?\n" +
    						"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\"s standard dummy text ever since the 1500s, when an unknown printer took a galley of" + "type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in " + "the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.\n" +
    						"Why do we use it?\n" +
    						"It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal " + "distribution of letters, as opposed to using \"Content here, content here\", making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their" + "default model text, and a search for \"lorem ipsum\" will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on " + "purpose (injected humour and the like)."
    				}
    			}
    		}
    	};
    	private void OnReady(DockingLayout dockingLayout)
    	{
    	}
    }

    Let me know what you think!

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

    Best regards,
    Yavor Dashev

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

    #102784
    ehill
    Participant
    Up
    0
    Down

    If I am not mistaken that appears to be adding an entire group, panel, and panel items (tabs).  I need to insert a tab (tab item?) into an existing panel.

    For example, in the source you posted the default layoutStructure object array contains a panel with id=”item0′ and a label of “Tabs 0”.  It contains an Item with the label “Tab A” that renders as a tab.  I need to be able to dynamically add a new item (e.g. “Tab B”) to the existing “item0′ panel such that it displays in the same group/panel as Tab A.

    Is this possible to accomplish this in the Blazor version of the control now?  If so, how?

    • This reply was modified 1 week, 3 days ago by ehill.
    #102789
    Yavor Dashev
    Participant
    Up
    0
    Down

    Hi ehill,

    I would like to inform you that I have added a work item for which this functionality will be supported through the ‘Update’ method as this functionality currently is not supported for Blazor.

    We will work on this to be added as soon as we are able to.

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

    Best regards,
    Yavor Dashev

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

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