How to make selected items as chips when mode=checkbox

[Subash]

Hi,

I am using multiselect dropdown with mode='CheckBox', and the requirement is that I want the selected items in text field to be chips instead of comma seperated text.

Is there way to do that  in Blazor application? Thank you

[Dineshkumar Arumugam]

Hi Subash, 

Greetings from Syncfusion support. 

 

As pe your requirement, we have prepared sample with CheckBox and when you select the value, selected value will be displayed as chips. Kindly refer the below code example  

 

<SfMultiSelect TValue="string[]" TItem="EmployeeData" ClosePopupOnSelect="false" HideSelectedItem="false" @bind-Value="@MultiVal" Mode="Syncfusion.Blazor.DropDowns.VisualMode.Box" Placeholder="Select a customer" DataSource="@Data">  

    <MultiSelectTemplates TItem="EmployeeData">  

        <ItemTemplate>  

            @{  

                        var contextValue = (context as EmployeeData).FirstName;  

                        var isChecked = MultiVal != null ? MultiVal.Contains(contextValue) : false;  

                                      

                        <span>  

                            <SfCheckBox TChecked="bool" @bind-Checked="isChecked"></SfCheckBox>  

                            @contextValue  

                        </span>  

                }  

            </ItemTemplate>  

    </MultiSelectTemplates>  

    <MultiSelectEvents TValue="string[]" TItem="EmployeeData" OnValueSelect="onSelect"></MultiSelectEvents>  

    <MultiSelectFieldSettings Value="FirstName"></MultiSelectFieldSettings>  

</SfMultiSelect>  

 

   

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp2325675568 

 

Kindly check with the above sample meets your requirement. Please get back us if you need further assistance.  

 

Regards,  

Dineshkumar A. 

[Durai]

Hi Team, 

Can you please send the sample for above scenario in Syncfusion JavaScript Multiselect control? 

Multiselect item to be select using checkbox and text fields to be chips with removing functionality (Close Icon).

[Durai]

Hi Team,

When i will get the update?

[Ponnambalam S]

Hi team,

Kindly, Share the sample of the above mentioned chipset dropdown with check box for all the values.

[UdhayaKumar Duraisamy]

In JavaScript MultiSelect component, you can use the code snippet below to show the selected items as chips with MultiSelect checkbox mode.

var checkList = new ej.dropdowns.MultiSelect({

  dataSource: window.ddCountryData,

  fields: { text: 'Name', value: 'Code' },

  placeholder: 'Select countries',

  mode: 'CheckBox',

  showSelectAll: true,

  showDropDownIcon: true,

  filterBarPlaceholder: 'Search countries',

  change: onChange,

  select: onselect,

  created: onCreate,

  focus: onfocus,

  selectedAll: onSelectedAll,

  removed: onRemoved,

});

checkList.appendTo('#checkbox');

var mulObj;

 

function onChange(args) {

  this.mulObj = document.getElementById('checkbox').ej2_instances[0];

  if (this.mulObj.viewWrapper) {

    this.mulObj.viewWrapper.style.display = 'none';

  }

  this.mulObj.chipCollectionWrapper.style.display = 'block';

  let inputPos = this.mulObj.overAllWrapper.getBoundingClientRect();

  let popupPos =

    this.mulObj.popupWrapper &&

    this.mulObj.popupWrapper.getBoundingClientRect();

  if (inputPos && popupPos && inputPos.top + inputPos.height > popupPos.top) {

    this.mulObj.popupWrapper.style.top = inputPos.top + inputPos.height + 'px';

  }

  this.selectedItems =

    document.getElementById('checkbox').ej2_instances[0].text;

}

function onselect(args) {

  this.mulObj.addChip(args.itemData.Name, args.itemData.Code, args.e);

  setTimeout(function () {

    onChange(args);

  }, 50);

}

function onCreate(args) {

  this.mulObj = document.getElementById('checkbox').ej2_instances[0];

  this.mulObj.chipCollectionWrapper = this.mulObj.createElement('span', {

    className: 'e-chips-collection',

    styles: 'display:none',

  });

  this.mulObj.componentWrapper.appendChild(this.mulObj.chipCollectionWrapper);

}

function onfocus(args) {

  this.mulObj.viewWrapper.style.display = 'none';

}

function onSelectedAll(args) {

  this.mulObj.hidePopup();

}

function onRemoved(args) {

  setTimeout(function () {

    onChange(args);

  }, 10);

}

Sample: https://stackblitz.com/edit/xf7naa-weyfnf?file=index.js