We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
|
<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> |
 |
|
<SfMultiSelect TValue="string[]" Width="300px" TItem="GameFields" Mode="@VisualMode.Box" Placeholder="Favorite Sports" DataSource="@Games">
<MultiSelectFieldSettings Text="Text" Value="ID"></MultiSelectFieldSettings>
</SfMultiSelect>
@code{
public class GameFields
{
public string ID { get; set; }
public string Text { get; set; }
}
private List<GameFields> Games = new List<GameFields>()
{
new GameFields(){ ID= "Game1", Text= "American Football" },
new GameFields(){ ID= "Game2", Text= "Badminton" },
new GameFields(){ ID= "Game3", Text= "Basketball" },
new GameFields(){ ID= "Game4", Text= "Cricket" },
new GameFields(){ ID= "Game5", Text= "Football" },
new GameFields(){ ID= "Game6", Text= "Golf" },
new GameFields(){ ID= "Game7", Text= "Hockey" },
new GameFields(){ ID= "Game8", Text= "Rugby"},
new GameFields(){ ID= "Game9", Text= "Snooker" },
new GameFields(){ ID= "Game10", Text= "Tennis"}
};
}
<style>
.e-multi-select-wrapper .e-chips-collection {
display: grid;
}
.e-multi-select-wrapper .e-chips {
background-color: white;
}
.e-multi-select-wrapper .e-chips > .e-chipcontent {
-webkit-text-fill-color: black;
}
.e-multi-select-wrapper .e-chips .e-chips-close::before {
-webkit-text-fill-color: #170606;
}
.e-multi-select-wrapper .e-chips:hover {
background-color: white;
}
.e-multi-select-wrapper .e-chips.e-chip-selected:hover {
background-color: white;
}
.e-multi-select-wrapper .e-chips.e-chip-selected {
background-color: white;
}
</style> |
 |
Hi Ponmani,
Thank you so much for your reply. Although this partially fixes my issue, I need the Multiselect Dropdown Mode to be "VisualMode.CheckBox". With your example I can stack the selections but cannot select multiple items at once without contracting the drop down menu. I need the Multiselect box to be as below so I can click "Select All" or select multiple items without closing the dropdown menu. Is it possible?
Thank you very much.
|
<SfMultiSelect @ref="MultiObj" 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">
<HeaderTemplate>
@{
<span>
<SfCheckBox TChecked="bool" @bind-Checked="isChecked" @onclick="onClick" >SelectAll</SfCheckBox>
</span>
}
</HeaderTemplate>
<ItemTemplate>
@{
var contextValue = (context as EmployeeData).FirstName;
bool 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> |
|
private bool isChecked = false;
private async Task onClick(Microsoft.AspNetCore.Components.Web.MouseEventArgs args)
{
if (isChecked == false)
{
isChecked = true;
MultiVal = new string[] { "Andrew Fuller", "Anne Dodsworth", "Janet Leverling", "Laura Callahan", "Margaret Peacock" };
}
else
{
isChecked = false;
MultiVal = new string[] { };
}
}
} |
 |
Hi Ponmani,
Thank you so much for this. However, there is a small issue when this is tested with Firefox browser. The selected text outgrows the border as below..
