JavaScript UI Libraries & Blazor Components Suite – Smart UI Forums General Discussions smart editor add dropdownbutton to custom editor

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #104308
    jqwidgetsdev
    Participant

    Hi,

    I am trying to add a drop down button to my custom editor.
    The drop down button is appearing at the bottom of the screen, but not in the editor.

    Am I using dropdownbutton.dropDownAppendTo = element; correctly?

    My code is based on vue drop down button

        <smart-drop-down-button drop-down-width="auto">
          <smart-tree>
            <smart-tree-item>Home</smart-tree-item>
            <smart-tree-items-group>
              Solutions
              <smart-tree-item>Education</smart-tree-item>
              <smart-tree-item>Financial services</smart-tree-item>
              <smart-tree-item>Government</smart-tree-item>
              <smart-tree-item>Manufacturing</smart-tree-item>
              <smart-tree-item>All industries and solutions</smart-tree-item>
            </smart-tree-items-group>
            <smart-tree-items-group expanded>
              Products
              <smart-tree-item>PC products</smart-tree-item>
              <smart-tree-item>Mobile products</smart-tree-item>
              <smart-tree-item>All products</smart-tree-item>
            </smart-tree-items-group>
          </smart-tree>
        </smart-drop-down-button>
    
              {
                name: "ddl",
                width: "auto",
                template: (element) => {
    
                  var dropDownButton = document.querySelector("smart-drop-down-button"),
                    tree = dropDownButton.querySelector("smart-tree");
                  //Get the label of the selected tree item
    
                  dropdownbutton.dropDownAppendTo = element;
    
                  tree.whenRendered(() => {
                    dropDownButton.placeholder = tree.querySelector(
                      "smart-tree-item[selected], smart-tree-items-group[selected]"
                    ).label;
                  });
                },
              },
    

    Any questions?

    #104309

    Hi,

    You should append the drop-down button to the element, you should also append the drop-down to the body and set additional styles.
    Here is the whole App.vue file for you:

    <template>
    <div class=”vue-root”>
    <smart-editor id=”editor”></smart-editor>
    <smart-drop-down-button drop-down-width=”auto” ref=”dropDownButtonRef”>
    <smart-tree ref=”treeRef” @change=”onTreeChange”>
    <smart-tree-item selected>Home</smart-tree-item>
    <smart-tree-items-group>
    Solutions
    <smart-tree-item>Education</smart-tree-item>
    <smart-tree-item>Financial services</smart-tree-item>
    <smart-tree-item>Government</smart-tree-item>
    <smart-tree-item>Manufacturing</smart-tree-item>
    <smart-tree-item>All industries and solutions</smart-tree-item>
    </smart-tree-items-group>
    <smart-tree-items-group expanded>
    Products
    <smart-tree-item>PC products</smart-tree-item>
    <smart-tree-item>Mobile products</smart-tree-item>
    <smart-tree-item>All products</smart-tree-item>
    </smart-tree-items-group>
    </smart-tree>
    </smart-drop-down-button>
    </template>
    <script setup>
    import { onMounted, ref } from “vue”;
    import “smart-webcomponents/source/styles/smart.default.css”;
    import “smart-webcomponents/source/modules/smart.editor.js”;
    import “smart-webcomponents/source/modules/smart.dropdownbutton”;
    import “smart-webcomponents/source/modules/smart.tree.js”;
    const dropDownButtonRef = ref();
    const treeRef = ref();
    const onTreeChange = (e) => {
    dropDownButtonRef.value.placeholder = e.detail.item.label;
    };
    window.Smart(
    “#editor”,
    class {
    get properties() {
    return {
    //Properties
    toolbarItems: [
    {
    name: “ddl”,
    width: “auto”,
    height: “10px”,
    template: (element) => {
    dropDownButtonRef.value.dropDownAppendTo = “body”;
    element.appendChild(dropDownButtonRef.value);
    dropDownButtonRef.value.placeholder = treeRef.value.querySelector(
    “smart-tree-item[selected], smart-tree-items-group[selected]”
    ).textContent;
    },
    },
    “Underline”,
    “StrikeThrough”,
    “FontName”,
    “FontSize”,
    “FontColor”,
    “BackgroundColor”,
    ],
    };
    }
    }
    );
    onMounted(() => {});
    </script>
    <style>
    html,
    body {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    }
    #app,
    .vue-root {
    width: 100%;
    height: 100%;
    }
    .smart-editor {
    width: 100%;
    height: 100%;
    }
    .smart-editor div[item-name=”ddl”] {
    height: -webkit-fill-available;
    }
    smart-drop-down-button {
    –smart-editor-drop-down-max-height: none;
    }
    smart-tree {
    width: 100%;
    border: 0;
    height: auto;
    }
    .smart-drop-down-container .smart-scroll-viewer-content-container {
    display: flex;
    }
    </style>

    Best Regards,
    Svetoslav Borislavov

    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.