BoldSignEasily embed eSignatures in your .NET applications. Free sandbox with native SDK available.
onChange: function(args) {
var multiSelectObj = this.$refs.multiSelectObj.ej2Instances;
if (multiSelectObj.viewWrapper) {
multiSelectObj.viewWrapper.style.display = 'none';
}
multiSelectObj.chipCollectionWrapper.style.display = 'block';
let inputPos = multiSelectObj.overAllWrapper.getBoundingClientRect()
let popupPos = multiSelectObj.popupWrapper && multiSelectObj.popupWrapper.getBoundingClientRect();
if (inputPos && popupPos && (inputPos.top + inputPos.height > popupPos.top)) {
multiSelectObj.popupWrapper.style.top = (inputPos.top + inputPos.height) + 'px';
}
},
onSelect: function(args) {
var multiSelectObj = this.$refs.multiSelectObj.ej2Instances;
multiSelectObj.addChip(args.itemData.Game, args.itemData.Id, args.e);
setTimeout(this.onChange, 5)
},
onCreated: function() {
var multiSelectObj = this.$refs.multiSelectObj.ej2Instances;
multiSelectObj.chipCollectionWrapper = multiSelectObj.createElement('span', {
className: 'e-chips-collection',
styles: 'display:none'
});
multiSelectObj.componentWrapper.appendChild(multiSelectObj.chipCollectionWrapper);
//multiSelectObj.value = ['Game1','Game2']; // You can set the preselect the value
},
onFocus: function(args) {
document.getElementsByClassName('e-delim-view')[0].style.display = 'none';
},
onSelectAll: function(args) {
var multiSelectObj = this.$refs.multiSelectObj.ej2Instances;
multiSelectObj.hidePopup();
},
onRemove: function(args) {
setTimeout(this.onChange, 5);
}, |
It's more straightforward to shift over to using the Dropdown Tree component, which supports checkboxes with chips out of the box.
https://stackblitz.com/edit/angular-gzmh4z?file=app.component.ts