MultiSelect

[Shi1996]

Can the mode property of multiselect be realized by using both box and checkbox?

[PonmaniMurugaiyan]

Hi @Shi1996 ,

Yes, you can achieve your requirement by using Multiselect DropDown with mode CheckBox and displaying the values as Chip while selecting the items.

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); 
}, 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/quickstart-1582913320

Regards,
Ponmani M

[gsumankumar]

We are closing this issue since there is no recent activity. Feel free to reopen this and update your comments for the reinvestigation.