JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › General Discussions › Smart Card View › Reply To: Smart Card View
Hi paul,
Thank you for contacting us!
Let me answer your enquiries:
1. Can you share a code example of this case, because I was unable to reproduce this case.Also check the console for errors.
2. You can use the footerTemplate property of the smart-window to overwrite the default one and create custom one. I
have prepared a little code example on how to achieve this. I used the event ‘open’ of the smart-card-view.
More about the footerTemplate you can check in the smart-window API here :https://www.htmlelements.com/docs/window-api/
//In you JS File:
window.onload = function ( ){
const cardview = document.querySelector('smart-card-view');
cardview.addEventListener('open', function (event) {
const window = document.querySelector('smart-window')
window.footerTemplate = 'footerTemplate'
let id = parseFloat(window.label[0])
let deleteBtn= document.getElementById('deleteButton')
deleteBtn.addEventListener('click', () =>{
window.close()
removeRecord(id)
})
});
function removeRecord(id){
cardview.removeRecord(id-1)
}
}
And in your HTML file:
<smart-card-view id="cardView"></smart-card-view>
<template id='footerTemplate'>
<smart-button id ='deleteButton'> Delete</smart-button>
</template>
Note that I have used this demo for base : https://www.htmlelements.com/demos/cardview/deferred-scroll/
3.This on will be similar to the previous one:
//In your JS file:
window.onload = function ( ){
const cardview = document.querySelector('smart-card-view');
cardview.addEventListener('open', function (event) {
const window = document.querySelector('smart-window')
let okBtn = window.querySelector('.ok .smart-button')
console.log(okBtn)
okBtn.addEventListener('click', function (){
alert(okBtn.textContent)
})
})
}
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/