Reply To: Smart Card View

[yavordashew]

Hi paul,
Thank you for contacting us, again!
For your fist question I forgot to mention in my previous reply that you have to place the whole template element for the window footer in your
index.html file after <app-root> tag.
And for your second question I have made yet another code snippet similar to the last one but with a little differences and we will need to add another click event to the SmardCardView component.
//In your app.component.html file:

<!-- Note the new click event -->
smart-card-view
(open)="onOpen($event)"
[coverField]="coverField"
(click)="newCardEvent($event)"
[editable]="true"
[titleField]="titleField"
[allowDrag]="true"
[addNewButton]="true"
[dataSource]="dataSource" [columns]="columns" #cardview id="cardView"></smart-card-view>

//In your index.html file:

<!-- Its important to add the templates after <app-root> -->
  <app-root></app-root>
  <template id='footerTemplateDelete'>
    <smart-button id ='deleteButton'> Delete</smart-button>
  </template>
  <template id='footerTemplateNew'>
    <smart-button id ='newBtn'> Your New Button</smart-button>
    <smart-button id ='anotherBtn'> Another Button</smart-button>
  </template>

//In your app.component.ts file:

   onOpen($event:CustomEvent) {
            // event handling code goes here.
        const window = document.querySelector('smart-window')
        if(($event.target as Element).classList.contains('smart-card-view')){
            window.footerTemplate = 'footerTemplateDelete'
            let id = parseFloat(window.label[0])
            let deleteBtn= document.getElementById('deleteButton')
            deleteBtn.addEventListener('click', () =>{
              window.close()
              this.removeRecord(id)
            })
        }
    }
    newCardEvent($event:CustomEvent) {
       // event handling code goes here.
        let targetElement = ($event.target as Element).classList
        const window = document.querySelector('smart-window');
        if(targetElement.contains('smart-add-new-button')){
             window.footerTemplate = 'footerTemplateNew';
             let anotherBtn= document.getElementById('anotherBtn')
             anotherBtn.addEventListener('click', () =>{
               console.log('Another Button in the window footer was clicked')
             })
         }
     }
    removeRecord(id):void{
      console.log(typeof id)
      this.cardview.removeRecord(id-1)
    }
 

I know its a long post but I wanted to be comprehensive as possible.
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/