HTML Elements Forums Docking Layout How to set content Tag into HTML

This topic contains 1 reply, has 2 voices, and was last updated by Avatar Hristofor 10 months, 1 week ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #100535
    Avatar
    soumaya
    Participant

    Hi !

    I have a question about Docking Layout. How can I call content tag of  LayoutPanelItem into HTML :  <smart-docking-layout></smart-docking-layout>

    without mentionned it into Json, for example I want to set content of tab1 into the tag smart-docking-layout:

    [{
    type: “LayoutGroup”,
    orientation: “horizontal”,
    items: [
    {
    type: “LayoutGroup”,
    items: [
    {
    type: “LayoutPanel”,
    id: “item1”,
    label: “Tabs 1”,
    tabPosition: “top”,
    dropPosition: [“top”, “bottom”, “header”, “layout-top”, “layout-left”, “layout-right”, “layout-bottom”],
    items: [
    {
    type: “LayoutPanelItem”,
    id: ‘tab1’,
    label: “Tab 1”,
    selected: true
    //content: “Item dropping is allowed only on the top, bottom and header positions.”
    }],
    min: 200,
    size: 627
    }]

    }]

    }];

    Could you help me please !

    Thank you.

    #100536
    Avatar
    Hristofor
    Participant

    Hi soumaya,

    it is not possible set the content of a LayoutPanelItems inside the HTML tag of the element on initialization. The proper way to set the content is by defining it inside the json or dynamically change it later using the update method documented in the API or use the id of the target item and change it’s innerHTML property to the new content. Here’s an example:
    1) Using the update method

    
    const targetLayoutPanel = document.getElementById('#item1');
    document.querySelector('smart-docking-layout').update(targetLayoutPanel, { items: [{index: 0, content: 'New Content Here ...' }]});
    

    2) Changing the content directly using innerHTML

    
    const targetLayoutPanelItem = document.getElementById('#item1');
    targetLayoutPanelItem.innerHTML = 'New Content Here ...';
    

    Best Regards,
    Christopher

    Smart HTML Elements Team
    https://www.htmlelements.com

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.