JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › General Discussions › Smart Card View › Reply To: Smart Card View
Hi paul,
Glad to hear that the suggestions have worked!
I would like to answer you question regarding the window field values and replacing the smart-input elements with a drop-down instead.
The code snippet below which is pretty self explаnatory will give you example how to achieve both things.
onOpen($event: CustomEvent) {
// event handling code goes here.
const window = document.querySelector('smart-window')
let allInputValues = window.querySelectorAll('smart-input')
for(let i = 0; i < allInputValues.length; i++){
console.log(allInputValues[i].getAttribute('value'))
}
if (($event.target as Element).classList.contains('smart-card-view')) {
window.footerTemplate = 'footerTemplateDelete'
let dropdownContainer: Element = window.querySelector('smart-input'),
inputValue = dropdownContainer.getAttribute('value'),
dropdown = document.createElement('smart-drop-down-list');
dropdown.value = inputValue;
dropdown.placeholder = inputValue;
let dropdownDataSource: string[] = [
"Your Dropdwon List Item 1 ",
"Your Dropdwon List Item 2",
"Your Dropdwon List Item 3",
"Your Dropdwon List Item 4"
];
dropdown.dataSource = dropdownDataSource
dropdownContainer.replaceWith(dropdown)
let id = parseFloat(window.label[0])
let deleteBtn = document.getElementById('deleteButton')
deleteBtn.addEventListener('click', () => {
window.close()
this.removeRecord(id)
})
}
}
And one additional thing is to add the following CSS styles in order the drop-down element to match the styles of the other input elements in the window.
.smart-drop-down-list{
width: 100%;
--smart-surface: white;
}
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/