Products

[svetoslav_borislavov]

Hi,

Take a look at this example: https://codepen.io/yavor_htmlelement/pen/dyVOEpY.
In the example on every grid render a tooltip element for each cell is being created. You can implement your tooltip functionality this way.

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

Best Regards,
Svetoslav Borislavov

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

[svetoslav_borislavov]

Hi,

You have two options:
The first one is to have a custom button with a template.
The second one is to have a regular controlType: ‘button’, but add a unique cssClass and after that get the element and add an eventListener.

Here is a demo in which the two options are shown:  https://codepen.io/svetoslavb04/pen/PoePJdM

Hope this helps and if you need further help, do not hesitate to contact us!

Best Regards,
Svetoslav Borislavov

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

[svetoslav_borislavov]

Hi,

Thank you for the update! I am so happy to hear that. If you need any help, let us know!

Best Regards,
Svetoslav Borislavov

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

[svetoslav_borislavov]

Hi,

You can leave the clipboard enabled and add a callback for the onKey event.
In the callback, you will prevent the default behaviour if the ctrlKey is pressed and the keycode is KeyX.

onKey: (e) => {
if(e.ctrlKey && e.code === “KeyX”) {
e.preventDefault();
}
}

Have a look at this demo: https://codepen.io/svetoslavb04/pen/gOzORrG

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

Best Regards,
Svetoslav Borislavov

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

[svetoslav_borislavov]

Hi,

You can use the dropDownAppendTo property of the smart-date-time-picker and append it to the body

<smart-date-time-picker drop-down-append-to="body"></smart-date-time-picker>

This will fix your problem.

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

Best Regards,
Svetoslav Borislavov

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

• This reply was modified 2 years, 2 months ago by svetoslav_borislavov.

[svetoslav_borislavov]

Hi,

 

We are so happy to hear that! Thank you for the feedback!

 

Best regards,
Svetoslav Borislavov

jQWidgets Team
https://www.jqwidgets.com/

[svetoslav_borislavov]

Hi,

Can you provide us with a quick demo?
Here you can see that on button click the data is being updated: https://stackblitz.com/edit/github-lk2zhn-itgcwr?file=src/app/app.component.ts

 

Best Regards,
Svetoslav Borislavov

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

[svetoslav_borislavov]

Hi,

To disable editing of a column you can set the allowEdit property to false!
Look at this demo: https://codepen.io/svetoslavb04/pen/JjLaoeV
The first three columns are disabled for editing

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

 

Best Regards,
Svetoslav Borislavov

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

[svetoslav_borislavov]

Hi,

Thank you for the feedback!

You can read more about editor in the docs -> grid -> API -> columns (expand the columns) -> editor: editor
In case you can’t find it:

editor: string | { template?: string, settings?: any, onInit?: any, onRender?: any, setValue?: any, getValue?: any}

Sets or gets the column's editor. The property expects 'input', 'autoComplete', 'comboBox', 'dropDownList', 'image', 'numberInput', 'checkBox', 'multiInput', 'multiComboInput', 'checkInput', 'slider', 'dateTimePicker', 'timeInput', 'dateInput', 'dateRangeInput', 'maskedTextBox', 'textArea' or a custom object with 'template' property which defines the editor type, 'settings' property which defines the custom editor's properties, 'onInit(int row, string column, object editor, object rowData): void', 'onRender(int row, string column, object editor, object rowData): void', 'setValue(object value): void' and 'getValue(object value): any' callback functions.

Here is a demo with it editor-demo

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

 

Best regards,
Svetoslav Borislavov

jQWidgets Team
https://www.jqwidgets.com/

[svetoslav_borislavov]

Hi,

You can read more about styling while using shadow dom here: shadow-dom
Basically, the shadow dom inherits the CSS variables so each component has exposed CSS variables to play with.
Here is a link for the grid’s variables: css-variables

 

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

 

Best Regards,
Svetoslav Borislavov

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

[svetoslav_borislavov]

Hi,

Have you applied these styles?

 

smart-tabs.auto-height {

width: 100%;
height: auto;
min-height: initial;

}

smart-tabs.auto-height smart-tab-item:not(.smart-visibility-hidden) {

position: relative;

}

 

You can see them in the auto-height example: https://www.htmlelements.com/demos/tabs/auto-height/

 

If you have and the problem is still there, please give me a quick demo!

 

Best Regards,
Svetoslav Borislavov

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

• This reply was modified 2 years, 3 months ago by svetoslav_borislavov.
• This reply was modified 2 years, 3 months ago by svetoslav_borislavov.
• This reply was modified 2 years, 3 months ago by svetoslav_borislavov.
• This reply was modified 2 years, 3 months ago by svetoslav_borislavov.
• This reply was modified 2 years, 3 months ago by svetoslav_borislavov.

[svetoslav_borislavov]

Hi,

To change the position there are two ways.
The first way is with CSS as shown here in the demo: codepen
The second way is to use the move() method. Here is a link for that: moveMethod
The method accepts the left and top positions.

Also, we do not support opening the modal with a single header click. It will cause a problem with the drag.

 

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

 

Best Regards,
Svetoslav Borislavov

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

• This reply was modified 2 years, 3 months ago by svetoslav_borislavov.

[svetoslav_borislavov]

Hi,

You can set the width with CSS’s width property.

Here is a quick demo of setting the width to 100% and the height to 300px: https://codepen.io/svetoslavb04/pen/OJvEWMe

 

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

 

Best Regards,
Svetoslav Borislavov

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

[svetoslav_borislavov]

Hi,

You can use CSS properties to achieve this. You can set the width and the height to 100%

Look at this example. The chart is integrated into a window and it has width and height set to 100%.

https://codepen.io/svetoslavb04/pen/MWVXJWj

 

Feel free to ask, if you face any difficulties!

 

Best Regards,
Svetoslav Borislavov

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

[svetoslav_borislavov]

Hi,

 

Thank you for your question! We will consider this option in the future. For now, we do not have any plans for that.

 

Best Regards,
Svetoslav Borislavov

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

[Author]

Posts