Page 5 – Smart UI Components

@yavordashew

Forum Replies Created

Viewing 15 posts - 61 through 75 (of 178 total)

← 1 2 3 4 5 6 … 10 11 12 →

Author

Posts
May 17, 2021 at 8:05 am in reply to: smart text box don't limitate the number of introduced chars #101808

yavordashew
Member

Hi tullio0106,
This behavior is normal because you haven’t set the max-length property properly.
When setting a property in your HTML file you have to use kebab casing(for a property with more than one word) like so:
<smart-text-box class="elemento_testo_valore" value="0" name="e708213883" max-length="2"></smart-text-box>
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

May 17, 2021 at 7:57 am in reply to: smart-multiline-text-box rows seems not working #101807

yavordashew
Member

Hi tullio0106,
Thank you for contacting us!
We have tested the Smart-Multiline-Text-Box component and it works as it should.
Maybe you can share a code example with us that reproduces your issue in order to be able to give a solution for it.
One thing I strongly advise you is to check if you have included all the necessary scripts and styles for the component.
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

May 14, 2021 at 11:14 am in reply to: Image with magnifier #101804

yavordashew
Member

Hi tullio0106,
Thank you for contacting us!
If I have understood your question correctly you want to have a component that magnifies(zooms) an image, if this is correct we don’t have a component that meets your requirement.
However we offer development of custom elements and if that suggestion suits you feel free to make your enquiry with sales@jqwidgets.com.
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

May 13, 2021 at 1:00 pm in reply to: How can I destroy the Smart instance after I created it? #101802
yavordashew
Member
Hi mannok,
When using SmartQueryBuilder you can ‘destroy’ it by using the remove() method like in the following code snippet:
```
    let queryBuilder = document.getElementById('queryBuilder');
        queryBuilder.remove();
```
One thing to note here is that the remove() method removes the element from DOM.
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/
May 12, 2021 at 5:00 pm in reply to: Mapping dataField to complex JSON structure #101800
yavordashew
Member
Hi I.garcia,
I would like to share with you a code snippet which showcases the functionality you want to achieve.
```
            dataSource: new window.Smart.DataAdapter({
                dataSource: [
					{
						"empName": "Peter",
						"age": "33",
						"company": { "id": "1234", "description": "Sales" },
						"author": "Johny Bravo"
					}
				],
                dataFields: [
                    { name: 'empName', dataType: 'string' },
                    { name: 'age', dataType: 'int' },
                    { name: 'id',map: 'company.id', dataType: 'int' },
                    { name: 'name', map: 'company.description', dataType: 'string' },
                    { name: 'author', dataType: 'string' }
                ]
            }),
            columns:
			[
			  { label: 'Name', dataField: 'empName', width: 250 },
			  { label: 'Age', dataField: 'age', width: 250 },
			  { label: 'Department Name', dataField: 'name', width: 180 },
			  { label: 'Author', dataField: 'author'}
            ]
```
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/
May 12, 2021 at 4:32 pm in reply to: Carousel as input data #101799
yavordashew
Member
Hi Tullio,
I have made yet another code snippet for you which demonstrates how to achieve this functionality.
In your JS file:
```
    let carouselItems = document.querySelectorAll('.smart-carousel-item-container'),
        carouselIndicator  = document.querySelectorAll('.smart-indicator');
    carousel.addEventListener ('click', ()=>{
        for (let i= 0; i <carouselItems.length; i ++){
            if(carouselIndicator[i].ariaSelected == 'true'){
                console.log(carouselItems[i].style.backgroundImage)
            }
        }
    })
  
```
This will give you the url of the background-image of the currently selected carousel.
In your HTML file:
```
<body>
    <smart-carousel  slide-show interval="2000" loop></smart-carousel>
	
    <script type="module" src="../../../source/modules/smart.carousel.js"></script>
    <script type="module" src="index.js"></script>
</body>
```
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/
May 12, 2021 at 4:08 pm in reply to: Web Component (TimePicker), toggle visibility #101798
yavordashew
Member
Hi gcatellier,
Unfortunately I was not able to reproduce the issue you have if you can create a code example for us it will be the best in order to give you the best solution.
However I have made a little code snippet which showcases how to have similar functionality:
In your HTML file:
```
    <smart-date-time-picker calendar-button enable-mouse-wheel-action drop-down-position="center-bottom" spin-buttons spin-buttons-position="left"></smart-date-time-picker>
    <button id='toggleElement'>  Toggle element</button>
    
    <script type="module" src="../../../source/modules/smart.datetimepicker.js"></script>
    <script type="module" src="index.js"></script>
	
```
In your JS file:
```
window.onload = ()=>{
    const button = document.getElementById('toggleElement'),
          datePicker = document.querySelector('smart-date-time-picker');
    button.addEventListener('click', () => {
        if ( datePicker.style.visibility === 'hidden' ) {
            datePicker.style.visibility = 'visible';
        }
        else {
            datePicker.style.visibility = 'hidden';
        }
    })
}
```
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/
May 12, 2021 at 3:54 pm in reply to: Combobox returning wrong value ? #101797
yavordashew
Member
Hi Tullio,
Thank you for contacting us!
In your case I would recommend you to use the dataSource property of the component and then set the value-member to the value and also the display-member to the value that will be displayed like in the following code snippet:
```
        <smart-combo-box
                        id = 'combobox'
                        selectionMode="zeroOrOne"
                        class="elemento_combobox_valore"
                        name="e681760908"
                        value-member='value'
                        display-member = 'label'
                        filterable=""
                        optional="true"
                        type="combo"
                        selected-indexes='[0]'
                        desc="ProdottoFERRETTI"
                        onchange="mostraAlertMsgOption(this); "
                        onfocus="on_focus(this)"
                        placeHolder = "LAN"
        >
        </smart-combo-box>
	<script>
        window.onload = function (){
            let comboboxMemberValue = document.getElementById('combobox')
            comboboxMemberValue.dataSource =
                    [{
                        label: "Andrew",
                        value: 1222,
                        group: "Product Owners"
                    },
                    {
                        label: "Natalia",
                        value: 2222,
                        group: "Developers"
                    }];
                comboboxMemberValue.addEventListener('change', ()=>{
                    alert( comboboxMemberValue.selectedValues)
                })
        }
    </script>
```
Or if that doesn’t suits you we have made another code snippet for you which showcases you how to achieve the functionality you aim to
```
        <smart-combo-box selectionMode="zeroOrOne"
                        class="elemento_combobox_valore"
                        name="e681760908"
                        value-member='value'
                        filterable=""
                        optional="true"
                        type="combo"
                        selected-indexes='[0]'
                        desc="ProdottoFERRETTI"
                        onchange="mostraAlertMsgOption(this); "
                        onfocus="on_focus(this)"
                        placeHolder = "  LAN">
            <smart-list-item style="background-color: transparent;" alert_msg="" value="111111113">1231</smart-list-item>
            <smart-list-item style="background-color: transparent;" alert_msg="" value="LAN1223">Lang</smart-list-item>
        </smart-combo-box>
	<script>
        function on_focus() {
        }
        function mostraAlertMsgOption(){
            const combobox = document.querySelector('smart-combo-box');
            console.log( combobox.selectedValues)
        };
        function reloadFunction (){
            window.location.reload();
        }
 
```
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/
May 5, 2021 at 4:53 pm in reply to: Custom column header with html code #101782
yavordashew
Member
Hi Emmanuel,
This is default functionality of this property and it escapes html code.
However if you want to achieve this kind of functionality I have prepared a little code snippet for you:
```
   // In your JS file
    const grid = document.querySelector('smart-grid');
    const column = grid.querySelectorAll('smart-grid-column')
    let customHeaderColumn = column[2]
    customHeaderColumn.classList.add('custom-column-header')
    customHeaderColumn.innerHTML= '<h3> Custom Header </h3>'
```
And the CSS class needed:
```
/*In your CSS file */
.custom-column-header{
    line-height: unset!important;
    justify-content: center!important;
}
```
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/
May 5, 2021 at 2:23 pm in reply to: Smart Card View #101781
yavordashew
Member
Hi Paul,
Thank you for contacting us and excuse me for the late reply.
Here are my suggestions for your questions:
1.I have aa code snippet on how to use the formatFunction:
//In the columns array
```
        { label: 'First Name', dataField: 'firstName', icon: 'firstName' ,
            formatFunction: function (settings: { value: any; template: string; }) {
                    const value = settings.value;
                    let className='not-visible-input';
                    settings.template = <code><div style=&quot;display:'none';&quot; class=&quot;${className}&quot;>${value}</div></code>;
                }
        },
```
//And in you app.component.css file add the following class
```
.not-visible-input{
    display: none;
}
```
2.Can you give a bit more context what exactly you want to achieve if you want to display alert message you can do so by binding to the ‘change’ event of the input like so:
```
  dateInput[2][2].addEventListener('change', ()=>{
            // your validation
            alert('Validation error')
        })
```
3. For this one maybe it will be best to create a code example for us because when I create new card it is displayed and I also advice you to check the following demo: https://www.htmlelements.com/demos/cardview/server-side-crud/
4.And for this one I have another code snippet for you:
//In your app.component.ts file
```
    ngAfterViewInit() {
        // afterViewInit code.
        this.init();
    }
    init() {
            if(this.dataSource.length <= 1){
                window.onload = () => {
                    let oneCard = document.querySelector('.smart-card') as HTMLElement
                    oneCard.style.width = '30%'
                }
            }
    }
```
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/
April 29, 2021 at 11:30 am in reply to: Smart Card View #101768
yavordashew
Member
Hi paul,
Thank you for contacting us!
For your first question I have another code snippet that worked for me. If it doesn’t for you it will be best to create a code example for us.
1. Code snippet:
//In the onOpen event Handler
```
    onOpen($event: CustomEvent) {
        // event handling code goes here.
        const window = document.querySelector('smart-window')
        let dateInput = window.querySelectorAll('input')
        console.log(dateInput[2].value)
        // outputed format of the date is MM/DD/YY
        //rest of the function code
```
And for your second question this is the default functionality of the checkbox but you can use the native method blur() to disable this appearance like so:
```
    const checkbox = document.getElementById('checkBox')
    checkbox.addEventListener('click', ()=>{
        if(!checkbox.checked){
            checkbox.blur()
        }
     
```
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/
April 29, 2021 at 9:32 am in reply to: Grid and Table Uncaught ReferenceError #101766

yavordashew
Member

Hi Eric,
We have evaluated the issue and we have released a new version of smart-webcomponents-angular(9.3.33) this morning which fixes this error.
You only have to update to the newest version with the following command: npm update smart-webcomponents-angular
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

April 28, 2021 at 5:37 pm in reply to: Event for docking occure #101763
yavordashew
Member
Hi Josef,
Thank you for your post!
The stateChange event has also type like ‘float’ when you take a window is outside the dockingLayout and also has ‘dock’ type.
I have a code snippet for you on how to bind for ‘dock’ type on stateChange:
//In your app.component.ts:
```
    onStateChange($event:any) {
      if( $event.detail.type === 'dock'){
        console.log($event)
      }
    }
```
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/
April 28, 2021 at 4:57 pm in reply to: Activate tab over API #101762
yavordashew
Member
Hi Josef,
I have another code snippet for you in which we use the native focus method like so:
```
      that.dockinglayout.items[0].select(1)
      that.dockinglayout.items[0].focus()
     
```
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/
April 27, 2021 at 2:39 pm in reply to: Display blob data as image #101752
yavordashew
Member
Hi Neo Ng,
Thank you for contacting us!
I would like to ask you to give us a bit more context or code example of your use case.
However as much as I understood your case you want to display the data from the Blob into image in the table component.
If you want to have an image to be displayed in the table you can do so like in the code example below:
//In the columns array we will use the formatFunction callback to create a new layout for the column
```
                {
                    label: 'Symbol', dataField: 'symbol', dataType: 'string', width: 150,
                    formatFunction(settings) {
                        settings.template = <code><img src=&quot;${settings.value}.jpg&quot; /></code>;
                    }
                },
```
Also note that the value of the dataField must be the name of picture you want to display.
Let me know if that is the case or if it 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/
Author

Posts

Viewing 15 posts - 61 through 75 (of 178 total)

← 1 2 3 4 5 6 … 10 11 12 →