@yavordashev

@yavordashev

Forum Replies Created

Viewing 15 posts - 1 through 15 (of 34 total)
  • Author
    Posts
  • in reply to: DropdownList with images #102312
    YavorDashev
    Member
    Up
    0
    Down

    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/

    in reply to: Smart text box title class #102306
    YavorDashev
    Member
    Up
    0
    Down

    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/

    in reply to: uncheck a radioButton after the values are submitted? #102305
    YavorDashev
    Member
    Up
    0
    Down

    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/

    in reply to: Smart text box title class #102300
    YavorDashev
    Member
    Up
    0
    Down

    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/

    in reply to: Scheduler delete button in a repeat event #102294
    YavorDashev
    Member
    Up
    0
    Down

    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/

    in reply to: Custom "Add Column Window" #102293
    YavorDashev
    Member
    Up
    0
    Down

    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/

    in reply to: Angular component as cell editor #102292
    YavorDashev
    Member
    Up
    0
    Down

    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/

    in reply to: smart-multiline-text-box rows seems not working #102288
    YavorDashev
    Member
    Up
    0
    Down

    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/

    in reply to: smart-multiline-text-box rows seems not working #102282
    YavorDashev
    Member
    Up
    0
    Down

    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/

    in reply to: Scheduler delete button in a repeat event #102276
    YavorDashev
    Member
    Up
    0
    Down

    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/

    in reply to: Remove Gantt chart check boxes #102274
    YavorDashev
    Member
    Up
    0
    Down

    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/

    in reply to: Scheduler delete button in a repeat event #102251
    YavorDashev
    Member
    Up
    0
    Down

    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/

    in reply to: Change the symbols of expand and collapse in grid-tree #102250
    YavorDashev
    Member
    Up
    0
    Down

    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/

    in reply to: Bug: Grid OnRowClick OnCellClick #102249
    YavorDashev
    Member
    Up
    0
    Down

    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/

    in reply to: Smart textbox font-size #102248
    YavorDashev
    Member
    Up
    0
    Down

    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/

Viewing 15 posts - 1 through 15 (of 34 total)