Products

[YavorDashev]

Hi tullio0106,
Yes it’s possible using ‘token-template’ property for which I have created yet another code example for how to achieve this functionality:
In your HTML file:

    <template id="tokenTemplate">
        <span><img class="avatar" src="" width="35" height="35" /></span>
        <span>{{data}}</span>
    </template>
    <smart-drop-down-list
        selection-display-mode="tokens"
        token-template="tokenTemplate"
        selection-mode='zeroOrMany'
        drop-down-open-mode='dropDownButton'
        display-member="value"
        drop-down-height='800'
        drop-down-width='1300'>
            <smart-list-item value="first image">
                <div>
                    <img src="your-img-src" alt="">
                    <p  class="image-description"s> First image desscription </p>
                </div>
            </smart-list-item>
            <smart-list-item value="second image">
                <div>
                    <img src="your-img-src" alt="">
                    <p class="image-description"> Second image desscription </p>
                </div>
            </smart-list-item>
    </smart-drop-down-list>

This time we will need to add some JavaScript as well:

window.onload = function () {
    document.querySelector('smart-drop-down-list').addEventListener('change', function () {
        const tokens = this.getElementsByClassName('smart-token');
        for (let i = 0; i < tokens.length; i++) {
            if (tokens[i].textContent.indexOf('first image') > -1) {
                tokens[i].getElementsByClassName('avatar')[0].src = 'https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg';
            }
            else if (tokens[i].textContent.indexOf('second image') > -1) {
                tokens[i].getElementsByClassName('avatar')[0].src = 'https://hatrabbits.com/wp-content/uploads/2017/01/random-word-1.jpg';
            }
        }
    });
}

And again the needed CSS:

smart-drop-down-list{
    min-height: 35px;
    height: auto;
    width: 30%;
}
.smart-list-item-container img {
    width: 70%;
    height: 100%;
}
smart-list-item .smart-content,
smart-list-item .smart-overlay,
smart-list-item,
smart-drop-down-list {
    height: 300px;
}
.smart-list-item-container .image-description {
    display: block;
    position: absolute;
    z-index: 99999;
    top: 0;
    left: 70%;
}
.avatar {
    border-radius: 50%;
}
.smart-token > span:first-of-type {
    padding-left: initial;
}
.smart-token {
    margin-left: 5px;
}
.smart-token > span {
    display: table-cell;
    vertical-align: middle;
    padding-left: 5px;
}
smart-drop-down-list[selection-display-mode="tokens"] .smart-selection-field > .smart-token {
    box-shadow: initial;
}

Let me know if that works for you!
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[YavorDashev]

Hi tullio0106,
When I tested the tooltip with the code that you have provided the tooltip appears truncated/cut when it overflowing the browser window which is expected, but when setting the position to absolute I was able to access the checkboxes for the dropdown.
However for your scenario I would suggest to set the tooltip position to absolute and add the following code snippet so that the tooltip is closed when the dropdown is opened:

 const dropDownList = document.querySelector('smart-drop-down-list'),
                    tooltip  = document.querySelector('smart-tooltip');
            dropDownList.addEventListener('open', () => {
                if(dropDownList.opened) {
                    tooltip.close();
                }
            });

Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[YavorDashev]

Hi Tony,
When you have radio buttons grouped always one of the radio buttons must be checked as this is the proper behavior of RadioButton component.
However if you need to set the checked button to be the same before the form is submitted I have prepared a quick code snippet that showcases how to set the checked property of the first radio button component:

 //In your click/submit handler funciton:
const radiobuttons = document.querySelectorAll('smart-radio-button ');
        radiobuttons[0].checked= true;

Let me know what you think!
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[YavorDashev]

Hi tulion0106,
We will require a code example which reproduces this issue as when I tested the SmartTextbox component with the tooltip component I didn’t encounter the described by you behavior.
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[YavorDashev]

Hi Javi Navarrete,
I guess there has been some misunderstanding from my side.
When you have a repeating event which repeats each day from monday to friday you can remove the repeated event by using the exceptions property of the event.
Code snippet for this:

{
        label: 'Design Review',
        dateStart: new Date(currentYear, currentMonth, 1),
        dateEnd: new Date(currentYear, currentMonth, 2),
        allDay: true,
        backgroundColor: '#388E3C',
        repeat: {
            repeatFreq: 'daily',
            repeatInterval: 1,
            repeatEnd: 15,
            exceptions: [
                {
                    date: new Date(currentYear, currentMonth, 2),
                    label: 'Official Holliday',
                    backgroundColor: '#64DD17',
                    hidden: true
                },
                {
                    date: new Date(currentYear, currentMonth, 7),
                    label: 'Day off',
                    hidden: true
                },
                {
                    date: new Date(currentYear, currentMonth, 15),
                    label: 'Day off',
                    hidden: true
                },
                {
                    date: new Date(currentYear, currentMonth, 9),
                    label: 'Rescheduled. Simon is not available',
                    dateStart: new Date(currentYear, currentMonth, 8),
                    dateEnd: new Date(currentYear, currentMonth, 9),
                    backgroundColor: '#2196F3'
                }
            ]
        }
    },

Also demo for repeating events: https://www.htmlelements.com/demos/scheduler/repeating-events/
Let me know what you think!
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[YavorDashev]

Hi Trist B,
These events are not yet available and the code example that I have sent you does not overwrite the default functionality of default column dialog window event.
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[YavorDashev]

Hi aconley,
Yes, that is correct that the template has to be a string and I will add a feature request item for this use case.
However I have create a little workaround so that you can have similar functionality:

cellEditComponenet () {
        const container = document.createElement('div');
        let component = this.service.loadComponent(YourCustomComponent, container);
        (component.componentRef.instance as YourCustomComponent).value = 123;
        container.id = "editorComponent"
        document.body.appendChild(container)
    }
	columns = [
		{ label: 'Sales person', dataField: 'Salesperson', icon: 'fa-user', showIcon: true ,
        editor: {
            template: '<div> </div>',
            settings: {value: null},
                onInit(row: number, column: string, editor: any) {
                    let customEditor = document.getElementById('editorComponent');
                    editor.firstElementChild.appendChild(customEditor)
                },
                onRender(row: number, column: string, editor: any) {
                    const container = document.createElement('div');
                    let customEditor = document.getElementById('editorComponent');
                    console.log(editor)
                    editor.firstElementChild.appendChild(customEditor)
                },
            }
        },
		{ label: 'City', dataField: 'City', showIcon: true, icon: 'fa-university' },
		{ label: 'Product', dataField: 'ProductName', icon: 'fa-product-hunt', showIcon: true },
		{ label: 'Payment Method', dataField: 'PaymentMethod', icon: 'fa-money', showIcon: true },
	];
    ngAfterViewInit():void {
        this.cellEditComponenet();
    }

Let me know what you think about this!
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[YavorDashev]

Hi tulllio0106,
I have tested the MultilineTextBox component with the same version of jQuery and jQueryUI and still no success in reproducing the reported behavior from you.
If you share code example on how you generate the MultilineTextBox component from your smart element we will be able to find a solution for your use case.
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[YavorDashev]

Hi tullio0106,
Still we are unable to reproduce this scenario as described by you. Using the exact same MultilineTextBox component that you are using when the rows property is set to ‘2’ the height/size of the component is as intended.
It is possible that you are overwriting the rows value somewhere in your code that is what I would suggest.
Anyway this is how the HTML is rendered using you code:

<smart-multiline-text-box id="e497880705" class="elemento_textarea_valore smart-element smart-multiline-text-box smart-drop-down-box has-value" placeholder="Insert value" horizontal-scroll-bar-visibility="auto" vertical-scroll-bar-visibility="auto" enter-key-behavior="newLine" rows="2" value="
        " name="e497880705" drop-down-button-position="right" drop-down-open-mode="default" type="textarea" role="textbox" aria-multiline="true" aria-describedby="e497880705Hint" aria-labelledby="e497880705Label">

And the textarea:
<textarea class="smart-input" autocapitalize="none" autocomplete="off" cols="20" minlength="0" name="e497880705" placeholder="Insert value" rows="2" wrap="soft" aria-label="Insert value" smart-id="input" id="e497880705Input"></textarea>
If you can create a code example that we can reproduce the same scenario it will be the best so that we could be able to give you a solution about it.
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[YavorDashev]

Hi Javi Navarrete,
The Scheduler component doesn’t support this type of functionality because the repeat exceptions can only remove the whole repeating event.
However I will add a work item as a feature request for this functionality.
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[YavorDashev]

Hi Maserati,
If you want to have this functionality but with Blazor/C# I have prepeared another code snippet for you to showcase you how to achieve this.
In your razor file:

	<style>
			.smart-gantt-chart.disabled-selection .smart-table-select-row{
				pointer-events: none;
			}
			.smart-gantt-chart.disabled-selection .smart-table-select-row.selected {
				pointer-events: initial;
			}
	</style>
	<GanttChart class="@ganttSelectionClass"  @ref="ganttChart" OnChange="@ChangedHandler" DataSource="Data" OnProgressChangeEnd ="@ProgressChangedHandler"  TaskColumns="taskColumns" DurationUnit="Duration.Hour"></GanttChart>
@code {
	GanttChart ganttChart;
 	string ganttSelectionClass= "";
	public async void ChangedHandler(Event args)
	{
		IEnumerable<object> SelectedTasks = await ganttChart.GetSelectedTasks();
		List<object> tasksList = SelectedTasks.ToList();
		int maxCount = 1;
		if (tasksList.Count() >= maxCount)
		{
			ganttSelectionClass= "disabled-selection";
		}
		else
		{
			ganttSelectionClass= "";
		}
	}

Let me know what you think!
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[YavorDashev]

Hi Javi Navarrete,
Yes the Scheduler component support such type of functionality using the hideNonworkingWeekdays and nonworkingDays properties.
Demo for it: https://www.htmlelements.com/demos/scheduler/hide-view-days/
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[YavorDashev]

Hi Oleg Ilin,
This functionality is easily achievable with the --smart-icon--arrow-down CSS variable.
Quick code snippet that I have made to showcase you how to set it up:

smart-grid {
  height: auto;
  width: 100%;
  --smart-icon-arrow-down: var(--smart-icon-clock);
}

Let me know if that works for you!
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[YavorDashev]

Hi xyzzy,
I wasn’t able to reproduce the issue as you do, that is why I would like to ask for a code example which reproduces the error that you are having so that we can evaluate your use case.
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[YavorDashev]

Hi tuillio0106,
I have code snippet for you to showcase you how set a CSS variable in the SmartTextBox component.

smart-text-box {
    --smart-font-size: 25px;
}

You have to set the CSS variable itself and to ‘force’ set the property with the font-size attribute.
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[Author]

Posts