Products

[Hristofor]

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

[Hristofor]

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

[Hristofor]

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

[Hristofor]

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

[Hristofor]

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]

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

[Hristofor]

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

[Hristofor]

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

[Hristofor]

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

[Hristofor]

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

[Hristofor]

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

[Hristofor]

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

[Hristofor]

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

[Hristofor]

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

[Hristofor]

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

[Author]

Posts