@hristofor

@hristofor

Forum Replies Created

Viewing 15 posts - 31 through 45 (of 68 total)
  • Author
    Posts
  • in reply to: docking focus #100945
    Hristofor
    Member

    Hi peter.jak,
    The Smart.DockingLayout doesn’t have a specific event for item focusing. However there are several solutions. One of which is to use the native document.activeElement to get the currently focused element on the page. You can combine that with a click event and you will have exactly what you need. Here’s how to do it:

    
     document.querySelector('smart-docking-layout').addEventListener('click', function() {
            if(document.activeElement) {
                console.log(document.activeElement.closest('.smart-tabs-window'));
            }
        })
    

    This code will log you the currently focused Smart.TabsWindow. From there you can get it’s id,name or any other property.
    Another approach is to get all Smart.DockingLayout items via the getter items and cycle through them to find which one has the ‘active’ attribute, like so:

    
    const items = document.querySelector('smart-docking-layout').items;
    document.querySelector('smart-docking-layout').addEventListener('click', function() {
        console.log(items.find(item => item.hasAttribute('active')));
    })
    

    Best Regards,
    Christopher
    Smart HTML Elements Team
    https://www.htmlelements.com

    in reply to: "tokenClick" and styled elements #100927
    Hristofor
    Member

    Hi edwardsmarkf,
    you shouldn’t be adding HTML into the dataSource array because it is parsed as string and will become the actual item label and value. In your case the item will be labeled ‘<span>Affogato</span>’ in the change event and other places as well. If you need to change the HTML of a dataSource item, there is a itemTemplate property that accepts HTMLTemplate element. Here’s a demo. If you need to change the HTML of a token item, there’s a tokenTemplate property that also accepts HTMLTemplate element. Here’s a demo. If you need to style a token then you should use CSS instead.
    However we consider this as an issue and it will be fixed in our next release. Smart.ComboBox tokens can be styled via the following CSS selector:

    
    .smart-combo-box .smart-token {
    font-weight: 600;
    }
    

    or if you need only the label of the token, then:

    
    .smart-combo-box .smart-token .smart-drop-down-list-selection-label {
    font-weight: 600;
    }
    

    Best Regards,
    Christopher
    Smart HTML Elements Team
    https://www.htmlelements.com

    in reply to: Allow to select text on readonly input #100918
    Hristofor
    Member

    Hi Tr12,
    the Smart.Input is a very flexible component and it’s readonly state doesn’t simply disable text input. As it says in the official documentation for the element, when readonly is set the Smart.Input acts as a drop down list. As such it doesn’t allow text selection. We will add a work item for this missing functionality.
    As a workaround if you begin the text selection outside the element and drag over it the text inside the Smart.Input will be selected.
    However i suggest you use the Smart.TextBox component with readonly because it acts as an HTML input but has a lot more functionality.
    Best Regards,
    Christopher
    Smart HTML Elements Team
    https://www.htmlelements.com

    in reply to: Issue/Question regarding Tree Widget #100890
    Hristofor
    Member

    Hi Tr12,
    1) Currently there is no way to add more than 1 item at a time. However we will consider adding such functionality.
    2) The Smart.Tree does not throw any specfic events regarding context menus, so you will have to add your own. Here’s how to do it:

    
    window.onload = function () {
    const tree= document.querySelector('smart-tree');
    tree.addEventListener('contextmenu', function (event) {
    const target = event.target;
    //Get the target item
    const item = target.closest('smart-tree-item'),
    itemGroup = target.closest('smart-tree-items-group');
    if (!item && !itemGroup) {
    return;
    }
    //Prevent browser's context menu
    event.preventDefault();
    //Open a Smart.Menu
    })
    }
    

    Best Regards,
    Christopher
    Smart HTML Elements Team
    https://www.htmlelements.com

    in reply to: clickable post-selected items revisited #100868
    Hristofor
    Member

    Hi edwardsmarkf,
    Smart.ComboBox has an additional event called tokenClick which is fired when the user clicks on a token item. The event is cancelable, which means that you can call event.preventDefault() to prevent the default behavior and execute your custom logic. The event also contains details (event.detail) which gives information about the clicked item. You can bind to the tokenClick like so:

    
    document.querySelector('smart-combo-box').addEventListener('tokenClick', function(event) {
        console.log(event.detail);
    })
    

    It seems that the event is missing from the API documentation for ComboBox but we will add it as soon as possible.
    Best Regards,
    Christopher
    Smart HTML Elements Team
    https://www.htmlelements.com

    Hristofor
    Member

    Hi edwardsmarkf,
    You can get the AccordionItem instance using the Element.closest() method, like so: event.target.closest('smart-accordion-item'). Another approach is to use Event.composedPath() which will return all parents of the current target (including the AccordionItem).
    Best Regards,
    Christopher
    Smart HTML Elements Team
    https://www.htmlelements.com

    in reply to: Refresh method #100754
    Hristofor
    Member

    Hi FabioNicc,
    we are not able to reproduce this issue ? Can you share a code snippet or a CodePen example (like this one ) so we can investigate ?
    Best Regards,
    Christopher
    Smart HTML Elements Team
    https://www.htmlelements.com

    in reply to: smart-input and remote datasource #100753
    Hristofor
    Member

    Hi Paul Bakker,
    Correct, the Smart Input component doesn’t have that feature. However the TextBox and ComboBox components do. Here’s a demo with a TextBox.
    Best Regards,
    Christopher
    Smart HTML Elements Team
    https://www.htmlelements.com

    in reply to: Dynamic content #100749
    Hristofor
    Member

    Hi Tünde Keller,
    You can do without the additional container and CSS but it will be harder for you without it, because you have to take in considuration that you have a header above the content section of the window.
    Best Regards,
    Christopher
    jQWidgets Team
    http://www.jqwidgets.com

    in reply to: Adding checkbox menu items #100746
    Hristofor
    Member

    Hi Tünde Keller,
    You also need to set checkboxes on the Menu Custom element as well. As it says in the API . We also have a : Demo with Checkbox Menu.
    Best Regards,
    Christopher
    Smart HTML Elements Team
    https://www.htmlelements.com

    in reply to: Dynamic content #100745
    Hristofor
    Member

    Hi Tünde Keller,
    You can append a container with position: relative; and place your desired HTML elements inside it and position them anywhere you want. For example:

    
    cosnt window = document.querySelector('smart-window');
    window.innerHTML = '<div id="myContainer"><div id="someElement">Your content goes here</div></div>';

    CSS:

    
    #myContainer {
    width: 100%;
    height:100%;
    position: relative;
    }
    #myContainer someElement {
    position: absolute;
    top: 50%;
    left: 50%;
    }
    

    Best Regards,
    Christopher
    Smart HTML Elements Team
    https://www.htmlelements.com

    in reply to: Dynamic content #100742
    Hristofor
    Member

    Hi Tünde Keller,
    Yes, the content of the window element can be changed dynamically via JS in severall ways:
    1) innerHTML – setting innerHTML directly on the Window instance, for example:
    document.querySelector('smart-window').innerHTML = 'new content';
    2) appendChild(), removeChild() methods – using these methods you can append or remove HTML elements to the Window content section, for example:
    document.querySelector('smart-window').appendChild(document.createElement('div'));
    Furthermore, the content of the Window can be cleared using innerHTML or the clear() methods. See the official Window API for additional information.
    Best Regards,
    Christopher
    Smart HTML Elements Team
    https://www.htmlelements.com

    in reply to: Adding checkbox menu items #100741
    Hristofor
    Member

    Hi Tünde Keller,
    In order to enable ‘checkbox’ mode or other dynamically for a specific SmartMenuItemsGroup, simply set the checkable property to the target SmartMenuItemsGroup. CheckBox mode is set as the default checkMode. You can change that as well if you need. For example in your code:

    
    function AddItems() {
    ...
    let subMenu = document.createElement(‘smart-menu-items-group’);
    subMenu.checkable = true;
    subMenu.innerHTML = ‘Item 0’
    ...
    }
    

    SmartHTML elements are custom elements and as such they have properties that can be applied dynamically or statically. So the following code is incorrect:

    
    subMenu.setAttribute(“checkable”, “”)
    subMenu.setAttribute(“check-mode”, “checkbox”)
    newItem.setAttribute(“checked”, “”)
    

    In order to set those properties to the SubMenu or the menu you need to set them directly as properties. See the API for additional information.
    Best Regards,
    Christopher
    Smart HTML Elements Team
    https://www.htmlelements.com

    in reply to: Issue while using leaflet.js in tab #100715
    Hristofor
    Member

    Hi Mohit Bhagat,
    Can you please provide a demo because we are not able to reproduce this issue. Here’s the example that we used as a test case – CodePen Demo
    Best Regards,
    Christopher
    Smart HTML Elements Team
    https://www.htmlelements.com

    in reply to: Drag Discretely? #100684
    Hristofor
    Member

    Hi Ask26,
    Currently there’s isn’t an option to determine the dragging mode of the tasks. Timeline tasks are dragged freely.
    However I can suggest something that might be usefull in this situation. You can bind to the dragEnd event and if the desired dateStart/dateEnd from the dragging process is not what you need, you can change it via the updateTask method. Using this approach you can apply some kind of custom validation to the dateStart/dateEnd of a task after dragging is finished.
    Best Regards,
    Christopher
    Smart HTML Elements Team
    https://www.htmlelements.com

Viewing 15 posts - 31 through 45 (of 68 total)