# Master Page
## HTML
```html
Löschen
```
## Javascript
Assuming allItems array is loaded from the backend without lazy loading:
```javascript
const grid = document.getElementById('grid');
grid.items = allItems;
grid.rowDetailsRenderer = (root, grid, model) => root.innerHTML = `More Information for ID ${model.item.id}
`;
document.querySelector('#birthdate').renderer = (root, column, model) => root.textContent = model.item.birthdate.toLocaleString('de-DE', {year: 'numeric', month: '2-digit', day: '2-digit'});
document.querySelector('#gender').renderer = (root, column, model) => root.textContent = model.item.gender == DummyGender.Female ? 'Weiblich' : model.item.gender == DummyGender.Male ? 'Männlich' : 'Divers';
const gridAddon = document.getElementById('gridAddon');
gridAddon.rowProvider = item => {
if (!item) return {};
return { disabled: item.username.startsWith('s'), hasDetails: item.gender === DummyGender.Female };
};
gridAddon.primaryActionColumnProvider = item => {
if (!item) return {};
return { tooltipText: `Aktionen für ${item.username}`, children: [ { text: 'Bearbeiten' }, { text: 'Löschen', disabled: true, tooltipText: 'Du kannst dieses Element nicht löschen' }, { text: 'Children', children: [ { text: 'Test', tooltipText: 'My tooltip' }, { text: 'Male', hidden: item.gender != DummyGender.Male } ] } ] };
};
const filterPanel = document.getElementById('filterPanel');
const arrayFilter = (selector, itemProperty) => {
const filterInputValue = document.getElementById(selector).value;
return item => {
if (!filterInputValue || filterInputValue.length < 1) {
return true;
}
const itemValue = item[itemProperty];
if (!itemValue || itemValue.length < 1) {
return false;
}
return itemValue.toLowerCase().includes(filterInputValue.toLowerCase());
};
};
filterPanel.addEventListener('search-click', e => {
grid.items = allItems.filter(arrayFilter('usernameFilter', 'username')).filter(arrayFilter('prenameFilter', 'prename')).filter(arrayFilter('familyNameFilter', 'familyName'));
grid.clearCache();
});
filterPanel.addEventListener('reset-click', e => {
document.getElementById('usernameFilter').value = '';
document.getElementById('prenameFilter').value = '';
document.getElementById('familyNameFilter').value = '';
grid.items = allItems;
grid.clearCache();
});
const deleteButton = document.getElementById('deleteButton');
deleteButton.addEventListener('click', e => {
if (grid.selectedItems) {
grid.selectedItems.forEach(item => allItems.splice(allItems.indexOf(item), 1));
grid.clearCache();
}
});
```
For lazy loading examples see Grid component examples.