MultiSelect Value

[Edvardas]

<SfMultiSelect ID="HealthInstitution" TValue="string[]" TItem="Institution" Placeholder="Select institutions" Mode="@VisualMode.CheckBox" DataSource="@Institutions" ShowDropDownIcon="true" EnableSelectionOrder="false" ShowClearButton="false">

                        <MultiSelectFieldSettings Value="Name"></MultiSelectFieldSettings>

                    </SfMultiSelect>

This is my MultiSelect component. When many items are checked, value in input field says "2 selected" or "+2 more". Is it possible instead if displaying this message, to dynamically scale component vertically to show all selected items?

[Joseph Christ Nithin Issack]

Hello Edvardas, 

   Greetings from Syncfusion support. 

   We have checked your query, You can achieve this by simply setting ‘VisualMode.Box’ to the ‘Mode’ property. Please refer the below code snippet. 

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

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

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

            </SfMultiSelect>  

If you are looking for the multiselect dropdown with a checkbox then you can add the checkbox using the ‘ItemTemplate’. Please refer the below code snippet and the attached sample for a detailed information. 

 

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

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

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

            </SfMultiSelect> 

            

 

@code { 

    public string data { get; set; } = "Data"; 

 

    public string[] MultiVal { get; set; } = new string[] {"Andrew Fuller", "Anne Dodsworth" }; 

 

    public List<string> selectedItemData = new List<string> {"Andrew Fuller", "Anne Dodsworth"  }; 

    public class EmployeeData 

    { 

        public string FirstName { get; set; } 

        public string Designation { get; set; } 

        public string Eimg { get; set; } 

    } 

    List<EmployeeData> 

    Data = new List<EmployeeData> 

        { 

        new EmployeeData() { FirstName = "Andrew Fuller",  Designation = "Team Lead", Eimg= "7" }, 

        new EmployeeData() { FirstName = "Anne Dodsworth", Designation = "Developer", Eimg= "1" }, 

        new EmployeeData() { FirstName = "Janet Leverling", Designation = "HR", Eimg= "3" }, 

        new EmployeeData() { FirstName = "Laura Callahan", Designation = "Product Manager", Eimg= "2" }, 

        new EmployeeData() { FirstName = "Margaret Peacock", Designation = "Developer", Eimg= "6" }, 

        new EmployeeData() { FirstName = "Michael Suyama", Designation = "Team Lead", Eimg= "9" }, 

        new EmployeeData() { FirstName = "Nancy Davolio", Designation = "Product Manager", Eimg= "4" }, 

        new EmployeeData() { FirstName = "Robert King", Designation = "Developer", Eimg= "8" }, 

        new EmployeeData() { FirstName = "Steven Buchanan", Designation = "CEO", Eimg= "10" }, 

                        }; 

    private bool IsVisible { get; set; } = false; 

 

    public void onSelect(SelectEventArgs<EmployeeData> e) 

    { 

 

        selectedItemData.Add(e.ItemData.FirstName); 

    } 

} 

Sample: https://www.syncfusion.com/downloads/support/forum/163342/ze/Check-box-itemtemplate1009872578 

Kindly revert to us for further queries. 

Regards, 

Joseph Christ Nithin I 

[Edvardas]

Thank you, this is exactly what I needed. I think this should be in documentation as there is very useful information

[Jeyanth Muthu Pratheeban Sankara Subramanian]

Hi Edvardas,

 

Thanks for the feedback. 

We are glad to hear that your issue has been resolved. We will include this in our documentation and publish it soon. Please let us know if you require any further assistance on this. 

Regards, 

Jeyanth.