Products

[yavordashew]

Hi Gowtham M,
I have tested the current version of the docking layout in different scenarios and did not had the issue you do.
My best advise is to give us a bit more context and a code example in order to be able to give you the best solution.
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[yavordashew]

Hi Dark Beccion,
The validate function returns true if all rules are valid you can use this to trigger a function when the validator validates.
However if this doesn’t suit your needs you can set the type="custom" to the validation rule and to validationCallback property to call a custom function defined by you.
If the above suggestions don’t suit your needs maybe you can add more context in order to be able to give you the best solution.

 function validationCallbackEvenNum(event) {
        console.log(event)
        const window = document.querySelector('smart-window')
        window.close()
    }
const rules =[ { input: '#evenInput', message: 'Please enter an even one.', action: 'keyup, blur', type: 'custom', validationCallback: validationCallbackEvenNum },
 { input: '#evenInput', message: 'The even number must be between 20 and 50', action: 'keyup, blur', type: 'range', min: 20, max: 50 },
      ]

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

[yavordashew]

Hi Dark Beccio,
Yes you can add a button to clear the grid filters. For your case I can suggest three options and you can choose which one you will fit your needs the best.All of the solutions use the clearFilter() methods which clears all all filtering on the grid.
Option 1 which in my opinion is the most clean solution is to clear the filter when the ‘smart-input’ value is empty string.
Example:

 input.addEventListener('change', () => {
                        if (input.value === '') {
                            grid.clearFilter();
                        } else {
                        column.filter = 'equal "' + input.value.trim() + '"';
                        }
                        });

Option 2 is to add the button in the filterEditor template after the smart-input component in the filter row, but I don’t recommend this option because UI point of view.
Example:
//In the filterEditor template:

filterEditor: {
                        template: '<smart-input drop-down-button-position="right" placeholder="Azienda" style="border-radius: 0px; border: none; width: 50%; height:100%"></smart-input><smart-button >Clear</smart-button>',
                        onInit(column, editor) {
                        const input = editor.querySelector('smart-input');
                        const productNames = comboAziendeJson;
                        let result = [];
                        for (let d = 0; d < productNames.length; d++) {
                        result.push((productNames[d].Dex));
                        }
                        const btn= editor.querySelector('smart-button')
                        btn.addEventListener('click', ()=>{
                            grid.clearFilter();
                        })

Option 3- to add a button outside the grid component to clear the filters.
Example:
//In your HTNML file

 <smart-grid id="grid"></smart-grid>
        <smart-button id='clearFilterButton'>Clear Filter</smart-button>

//In your Js file

window.onload = function () {
    const grid = document.getElementById('grid');
    const clearFilterButton = document.getElementById('clearFilterButton');
    clearFilterButton.addEventListener('click', ()=>{
        grid.clearFilter();
    })
};

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

[yavordashew]

Hi David,
It will be the best to share a complete code example of your situation if we are to be able to give a solution for this problem.
But from the code you shared I can advise you to check if you use the push method into the correct Array of items.
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[yavordashew]

Hi David,
From your last post I suggest you want to get the tab index when the tab fire the event closing.
You achieve this in a bit more convenient way :

 this.docking.addEventListener('closing', (event: Event) => {
            const customEvent = <CustomEvent>event;
            console.log(customEvent.detail.index);
})

Hope this solution suits 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/

[yavordashew]

Hi david,
If in your case you can’t use number index you can add new items with native Javascript methods such as unshift() or push () and this way is perfectly fine because our components are made purely with vanilla JS.
I have made a little code example on how to do it:

export class AppComponent implements AfterViewInit {
	 @ViewChild('docking', { read: DockingLayoutComponent, static: false }) docking: DockingLayoutComponent;
   tabsWindowObject = {
    label: 'New tab Item',
    size: '25%',
    items: [{
        label: 'New INSERTED Item',
        content: 'New INSERTED Item Content'
      }]
    }
    layout = [
        {
            type: 'LayoutGroup',
            orientation: 'horizontal',
            items: [
                {
                    type: 'LayoutGroup',
                    items: [
                        {
                            type: 'LayoutPanel',
                            id: 'tabPanel',
                            label: 'Input',
                            items: [{
                                label: 'TextBox Tab',
                                content: ''
                            },
                            {
                                label: 'Slider Tab',
                                content: ''
                            }],
                            size: '50%'
                        },
                        {
                            type: 'LayoutPanel',
                            label: 'Output',
                            items: [
                                {
                                    id: 'outputTab',
                                    label: 'Output',
                                    headerPosition: 'none',
                                    content: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.'
                                }
                            ]
                        }
                    ],
                    orientation: 'vertical',
                    size: '50%'
                },
                {
                    id: 'item0',
                    label: 'Tabs 0',
                    items: [{
                        label: 'Tab A',
                        selected: true,
                        content: 'What is Lorem Ipsum?\n' +
                            'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of' + 'type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in ' + 'the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.\n' +
                            'Why do we use it?\n' +
                            'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal ' + 'distribution of letters, as opposed to using \'Content here, content here\', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their' + 'default model text, and a search for \'lorem ipsum\' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on ' + 'purpose (injected humour and the like).'
                    }]
                }]
        }];
	ngAfterViewInit(): void {
    this.init();
  }
  init(): void {
    const smartDockingLayout: DockingLayoutComponent = this.docking as DockingLayoutComponent;
    smartDockingLayout.layout[0].items[0].items.push(this.tabsWindowObject)
    smartDockingLayout.layout.unshift( this.tabsWindowObject)
  }
} 

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

[yavordashew]

Hi Tullio,
We hope that you will be satisfied with our components.I guess by trial version you use the community version which will have the watermark showing up except for our free components such as Table, Tree, Tabs, Menu
However we have tested the combobox with the code that you provided us and looking at the function I can suggest that mostraAlertMsgOption(this); eseguiRefresh(this); functions are invoking an alert message and a page reload. After some testing I encountered your problem in Firefox and the problem was coming from the selected attribute from the list item which is a native HTML attribute.Solution for fixing this is to use selectedIndexes or selectedValues property of the combobox.A quick example on how to do this :
 `<smart-combo-box id=”combobox” name=”e818843742″                     
drop-down-position=”bottom”                     
selected-indexes='[1]’  
                   onchange = “mostraAlertMsgOption();reloadFunction();”>        
<smart-list-item value=”LAN” >Lang</smart-list-item>       
 <smart-list-item value=”LAN2″ >Lang2</smart-list-item>    
</smart-combo-box>`
If you prefer to use selctedValues just replace the selected-indexes with selected-values= '["LAN"]'.
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[yavordashew]

Hi Dark Beccio,
I have made a test with the menu tree in Firefox and I didn’t encounter this behaviour as you do.
If its possible that you provide us with code example of this situation in order to give a solution for 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/

[yavordashew]

Hi Ronak,
I used the codepen example you shared but unfortunately when I tried to reproduce your issue it didn’t occur as it happens to you.
Even when you have set the grid summaryRow property you still need to set the summary property of the column you want the summaryRow to be displayed.
For example :
` columns = [
{
label: ‘First Name’, dataField: ‘firstName’
},
{ label: ‘Last Name’, dataField: ‘lastName’ },
{ label: ‘Product’, dataField: ‘productName’ },
{ label: ‘Quantity’,summary: [‘sum’], dataField: ‘quantity’ }];`
If this is not the case I recommend to share a code example in order to be able to find a solution 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/

[yavordashew]

Hi Gourav,
Thank you for contacting us again.
Unfortunately still we can reproduce this situation without a code example because its a bit more complex.
However I would advise you to double check if you have set properly the filtering properties if the filter row is not visible.
For your workaround suggestion if the filter box doesn’t suit your needs I can recommend you to check the following demo regarding custom editor in the filtering row.
https://www.htmlelements.com/demos/grid/filtering-row-custom-editor/
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[yavordashew]

Hi Gourav,
From what you shared as a code I was unable to reproduce the issue you encounter.
It will be the best to share a code example in order to give you the best solution.
However I would suggest you to check the demos regarding data binding of the grid which use Smart.DataAdapter
https://www.htmlelements.com/angular/demos/grid/datagrid-bind-to-json/
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[yavordashew]

Hi Dark Beccio,
Yes it is possible to achieve this by using the CSS classes and pseudo elements.
I have made a little example how to place it on the right side of the input.

/* This selector removes the element with the  exclamation mark if you want to be visible you can opt no to use this selector */
.jqx-success-label-like-after-element::after, .jqx-error-label-like-after-element::after{
    display: none;
}
/* With this selector you can customise the error message according to your needs */
.jqx-error-holder{
    width: 500px;
    position: absolute;
    margin-left: 180px;
    margin-top: -25px;
}

Note that I used this demo https://www.htmlelements.com/demos/validator/base-inputs/ for testing this functionality and its possible that you need to adjust to your requirements.
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[yavordashew]

Hi davout,
IF you want the ‘date-time-picker’ to display the correct date you have to pass the value to it in a ‘new Date()’ constructor, also if you want to make the ‘date-time-pciker’ reactive you have to bind its value property to the corresponding FormControl instance.
I have made a code very basic code example for you:
//In your app.component.html file :

<smart-date-time-picker #datetimepicker
                        [calendarButton]="true"
                        [formatString]="'ddd dd-MMM-yyyy'"
                        [dropDownDisplayMode]="'calendar'"
                        [enableMouseWheelAction]="true"
                        [dropDownPosition]="'bottom'"
                        [spinButtons]="true"
                        [value] = "dateValue.value"
                        [spinButtonsPosition]="'left'">
</smart-date-time-picker>
<br><br>
<label>
  Date:
  <input type="text" [formControl]="dateValue">
</label>
<p>Date Value: {{ dateValue.value }}</p>
<button (click) = "updateDate()"> Another date </button>
<button (click) = "clearDate()"> Today's date </button>

//And in your app.component.ts file :

export class AppComponent implements AfterViewInit, OnInit {
	@ViewChild('datetimepicker', { read: DateTimePickerComponent, static: false }) datetimepicker: DateTimePickerComponent;
	dateValue = new FormControl(new Date('1995-12-17T03:24:00'));
  updateDate(){
      this.dateValue.patchValue(new Date('November 16, 1994 03:24:00'));
      this.datetimepicker.value = this.dateValue.value;
  }
  clearDate(){
    this.dateValue.patchValue(null)
    this.datetimepicker.value = this.dateValue.value;
  }
	ngOnInit(): void {
		// onInit code.
	}
	ngAfterViewInit(): void {
		// afterViewInit code.
		this.init();
    }
	init(): void {
   this.datetimepicker.value = this.dateValue.value;
	}
}

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

[yavordashew]

Hi Walter,
This is not an issue its the default functionality and how it you should behave.
That is because when you don’t set the hours and just the date like in your case (to either dateStart or dateEnd) the date that the gantt chart will output is the following (startDate : Fri Apr 02 2021 00:00:00 , endDate : Mon Apr 05 2021 00:00:00) and thus the cells that the task is covering start for the beginning of the cell on 02.04 date and ends on the very end of 04.04 date cell.
However if you want the task to cover the cell you will have to set hours,minutes and seconds.
For example in order the cell on 05.04 date to be covered you can set the dates like this :

   {
    label: 'Interior Arrangement',
    dateStart: '2021-04-02 16:30:59 ',
    dateEnd:'2021-04-05 23:59:59',
    type: 'task',
    },

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

[yavordashew]

Hi Johnny Johnny,
I would like to give you my apologies because I mislead you with my previous reply about the ‘removeRow’ function and the reason for that is that I
tested it with a newer version of ‘smart-webcomponents’ which will be released next week.
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