Posted 20 January 2019, 6:28 pm EST
Yes, you may also display headers in the dropdown. To do so, please enable the select all checkbox by setting the showSelectAllCheckbox property to true and then format the select-all header to display our multi-column header.
Please refer to the following code snippet and updated sample:
let editor = new wjcInput.MultiSelect(rootEl, {
itemsSource: this.multiSelSource,
displayMemberPath: 'country',
selectedValuePath: 'id',
showSelectAllCheckbox: true
});
editor.isDroppedDownChanged.addHandler((s,e) => {
if(!editor.isDroppedDown){
return;
}
let dropDown = editor.dropDown;
let selAllContainer = dropDown.querySelector('.wj-listbox-item.wj-header.wj-select-all');
// save selectAll checkbox, since this instance is saved in the control to determine selectAll cb
let selAllCb = selAllContainer.querySelector('input');
selAllContainer.innerHTML = '<table><tr>' +
'<td class="sel-all-cb" style="width:30px;text-align:right">' +
// '<input type="checkbox" '+ (wjcCore.hasClass(e.item, 'wj-state-checked')? 'checked' :'') +'/>'+
'</td>' +
'<td style="width:30px;text-align:center">' + 'ID' + '</td>' +
'<td style="width:100px">' + 'Country' + '</td>' +
'<td style="width:80px;text-align:right">' +
'Downloads' +
'</td>' +
'<td style="width:80px;text-align:right">' +
'Sales' +
'</td>' +
'</tr></table>';
// append selectAll checkbox
selAllContainer.querySelector('.sel-all-cb').appendChild(selAllCb);
});
https://stackblitz.com/edit/angular-o1srtk?file=app/app.component.ts