Products

[svetoslav_borislavov]

Hi,

You can remove the inner button.
Here is the modified demo: https://stackblitz.com/edit/github-xcjyz2?file=src%2Fapp%2Fapp.component.ts

If you need further assistance, do not hesitate to contact us!

Best Regards,
Svetoslav Borislavov

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

[svetoslav_borislavov]

Hi,

Insert the default values after setting the dataSource.
Here is the modified version: https://stackblitz.com/edit/github-eefp9l-nzupc5?file=src/app/app.component.ts

Best Regards,
Svetoslav Borislavov

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

[svetoslav_borislavov]

Hi,

The solution to this problem is a bit complex, but here you are: https://codepen.io/Svetoslav-Borislavov/pen/yLxeqVP
You should save the removed tab details and its index in the tabs then remove the tab at that index from the tabs element.
When you want to show the tab again you should insert the tab in the smart-tabs element.

I hope this helps you resolve the problem, if not, do not hesitate to contact us!

Best Regards,
Svetoslav Borislavov

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

[svetoslav_borislavov]

Hi,

A comparison is available here: https://www.htmlelements.com/docs/grid-and-table/

If you have any additional questions, do not hesitate to contact us!

Best Regards,
Svetoslav Borislavov

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

[svetoslav_borislavov]

Hi,

if you need help, do not hesitate to write!

Best Regards,
Svetoslav Borislavov

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

[svetoslav_borislavov]

Hi,

You can change the value with the localization functionality.
Just set the message for ’empty’ this way:

messages: {
en: {
empty: "Its empty"
}
}

Here is an example: https://codepen.io/Svetoslav-Borislavov/pen/zYLVmGY?editors=0010

If you face any further difficulties, do not hesitate to contact us!

Best Regards,
Svetoslav Borislavov

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

[svetoslav_borislavov]

Hi,

We do support only the following views: “day” | “week” | “month” | “year”.
To style the task connections you can use its class smart-task-connection
You can scroll by dragging tasks. On mobile devices the drag scroll is available.
You may open a demo from a mobile device to see. Here is an example of a demo:
https://www.htmlelements.com/react/demos/gantt/overview/

Other custom modifications should be implemented by you.

Best Regards,
Svetoslav Borislavov

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

[svetoslav_borislavov]

Hi,

What exactly you are passing to the addTask method?
Yes, you can change the dataSource at any time.

Please, share your code for adding a task

Best Regards,
Svetoslav Borislavov

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

[svetoslav_borislavov]

Hi,

You have done it correctly but have a space in the event name – ‘click ‘.
It should be only ‘click’. Try it and the problem must be fixed

Best Regards,
Svetoslav Borislavov

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

[svetoslav_borislavov]

Hi,

You can do the following to display a label with the value
{
label: “Uptime”,
dataField: “uptime”,
controlType: ‘template’,
}

 

Best Regards,
Svetoslav Borislavov

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

[svetoslav_borislavov]

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/

• This reply was modified 1 year, 10 months ago by svetoslav_borislavov.
• This reply was modified 1 year, 10 months ago by svetoslav_borislavov.

[svetoslav_borislavov]

Hi,

You can set the event listener to the element as you did.
If you want to append children you can use the appendChild method.

Best Regards,
Svetoslav Borislavov

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

[svetoslav_borislavov]

Hi,

These options can be passed to the ‘submit’ method, not to the form itself

I hope your problem is now resolved!

Best Regards,
Svetoslav Borislavov

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

[svetoslav_borislavov]

Hi,

As it is a custom toolbar item you should add the event manually.
Your custom toolbar item object should look like this:

{
name: “settings”,
width: “auto”,
template: (element) => {
element.textContent = “settings”;
element.addEventListener(“click”, () => {
console.log(“click”);
});
},
}

Best Regards,
Svetoslav Borislavov

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

• This reply was modified 1 year, 10 months ago by svetoslav_borislavov.

[svetoslav_borislavov]

Hi,

The toolbar item click event is an event of the editor. You should add an event handler to the smart editor.
It is expected that you receive an empty array because when the component mounts the smart editor has not been initialized yet.

See the console when you click a toolbar item here: https://codepen.io/svetoslavb04/pen/BaPYmKZ

If you have any additional questions, do not hesitate to contact us!

Best Regards,
Svetoslav Borislavov

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

[Author]

Posts