groups - multi select chips

Question

I was wondering if the chips within the multi-select drop-down can behave similarly to Microsoft Outlook?

- Able to have Department and sub-depts inside the dropdown which will be able to be selected and create a chip.

- Able to have the user to press the "+" icon inside the department chip, which will create multiple users inside the specific department. Also, an option to create users from the department and any sub-departments.

- Able to not remove the dept/sub-dept when it is selected from the drop-down, but disable the item.

- Able to enable the department/sub-dept chip when the user clicks on the "x" icon.

I believe these items will allow the drop-down to have more use-cases.

Karthikeyan Viswanathan · Answer

Hi Patrick, Thanks for contacting Syncfusion support. Based on your requirement, We have prepared a custom sample to modified the multiselect chip selection act similar to MicroSoft Outlook. We have achieved all your mentioned cases by using hideSelectedItem property, tagging and chipSelection event. Please refer the details of the above mentioned property: hideSelectedItem Hides the selected item from the list item. https://ej2.syncfusion.com/react/documentation/multi-select/api-multiSelectComponent.html#hideselecteditem chipSelection triggers when the chip selection. https://ej2.syncfusion.com/react/documentation/multi-select/api-multiSelectComponent.html#chipselection Tagging Fires before set the selected item as chip in the component. https://ej2.syncfusion.com/react/documentation/multi-select/api-multiSelectComponent.html#tagging Please refer the below code example: Differentiate the group data from other.

 
this.vegetables = [ 
  { text: 'Leafy and Salad', Category: 'Vegetables', Id: "1" }, 
  { text: 'Bulb and Stem', Category: 'Vegetables', Id: '2' }, 
  { text: 'Beans', Category: 'Vegetables', Id: '3' }, 
  { text: 'Cabbage', Category: 'Leafy and Salad', Id: 'item1' }, 
  { text: 'Chickpea', Category: 'Beans', Id: 'item2' }, 
  { text: 'Garlic', Category: 'Bulb and Stem', Id: 'item3' }, 
  { text: 'Green bean', Category: 'Beans', Id: 'item4' }, 
  { text: 'Horse gram', Category: 'Beans', Id: 'item5' }, 
  { text: 'Nopal', Category: 'Bulb and Stem', Id: 'item6' }, 
  { text: 'Onion', Category: 'Bulb and Stem', Id: 'item7' }, 
  { text: 'Pumpkins', Category: 'Leafy and Salad', Id: 'item8' }, 
  { text: 'Spinach', Category: 'Leafy and Salad', Id: 'item9' }, 
  { text: 'Wheat grass', Category: 'Leafy and Salad', Id: 'item10' }, 
  { text: 'Yarrow', Category: 'Leafy and Salad', Id: 'item11' } 
];

Check the group data and add the class for icon style.

 
this.tagging = function(e) { 
    if (e.itemData["Category"] == "Vegetables") { 
      e.setClass("GroupHead"); 
    } 
 
  }

Get the control instance. Get the bounded data. Check the non group data and set the Boolean for whether it is non – group item or single. If it is true, select the non group data. Else, select the corresponding group data.

 

this.chipSelection = function(e){ 
    var msObj = document.getElementById('group').ej2_instances[0]; 
    var grouphead = false, subitems = []; 
    for (var i = 0; i < msObj.listData.length; i++) { 
      if (msObj.listData[i].Category == e.target.textContent) { 
        grouphead = true; 
        subitems.push(msObj.listData[i]); 
      } 
    } 
    if (grouphead && subitems.length > 0) { 
      var select = []; 
      for (var i = 0; i < subitems.length; i++) { 
        select.push(subitems[i].Id) 
      } 
      var array = msObj.value; 
      for (var i = 0; i < msObj.listData.length; i++) { 
        if (msObj.listData[i].text == e.target.textContent) { 
          var index = array.indexOf(msObj.listData[i].Id); 
          if (index > -1) { 
           array.splice(index, 1); 
          } 
        } 
      } 
      for(var i = 0; i < array.length; i++){ 
        select.push(array[i]); 
      } 
      var unique = select.filter(function(elem, index, self) { 
        return index == self.indexOf(elem); 
      }); 
      msObj.inputFocus = false; 
       msObj.value = unique; 
      msObj.dataBind(); 
    } 
  }

Refer the React sample link: https://stackblitz.com/edit/react-ghzkbv Refer the Typescript sample link: https://stackblitz.com/edit/multiselect-outlook Regards, Karthikeyan V.

hideSelectedItem	Hides the selected item from the list item.	https://ej2.syncfusion.com/react/documentation/multi-select/api-multiSelectComponent.html#hideselecteditem
chipSelection	triggers when the chip selection.	https://ej2.syncfusion.com/react/documentation/multi-select/api-multiSelectComponent.html#chipselection
Tagging	Fires before set the selected item as chip in the component.	https://ej2.syncfusion.com/react/documentation/multi-select/api-multiSelectComponent.html#tagging