Reply To: Smart Card View

[yavordashew]

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/