SfMultiSelect - GroupBy Hide Item
Hi Lee,
We understand your requirement regarding the MultiSelect component and the scenario you reported.
By default, the MultiSelect component uses the Category field in the data source to group items. Even if the Category and Vegetable fields have the same value, the component will still render them separately as a group header and a list item. This is the expected behavior of the MultiSelect component.
To achieve your requirement where categories with only one item (and where the Category and Vegetable values are the same) should not display the list item you can follow this approach:
- Add a Boolean property (e.g., CanHide) to your data model.
- Set CanHide = true for items where the category has only one item and the Category and Vegetable values are identical.
- Bind this property to the Disabled field in the MultiSelect component’s FieldSettings. This will mark the item as disabled.
- Use custom CSS to hide disabled items from the dropdown list.
|
SfMultiSelect EnableGroupCheckBox="true" ………… <MultiSelectFieldSettings GroupBy="Category" Value="ID" Text="Vegetable" Disabled="CanHide"></MultiSelectFieldSettings> ………… </SfMultiSelect>
…….. public class Vegetables { ………. public bool CanHide { get; set; }
public List<Vegetables> VegetablesList() { …………
// Count items per category var categoryCounts = vegList.GroupBy(v => v.Category).ToDictionary(g => g.Key, g => g.Count());
// Set CanHide = true for items in categories with only one item foreach (var veg in vegList) { veg.CanHide = categoryCounts[veg.Category] <= 1; }
return vegList; } } }
<style>
.status-multiselect .e-list-group-item ~ .e-list-item.e-disabled { display: none; } </style>
|
Output Screenshot:
Kindly get back to us if you have any concerns or need further clarification.
Regards,
YuvanShankar A
Attachment: MultiSelect_b2e76961.zip
Hi Lee,
We apologize for the inconvenience. We have reviewed your requirement related to the MultiSelect component. When a list item is disabled using the enabled field property, it becomes non-interactive by design.
To achieve your requirement of hiding single group items while keeping the group header checkbox clickable, we recommend using a JavaScript interop workaround. This approach is clean and does not involve any hacks. It allows you to hide specific items and maintain the expected behavior of the group header checkbox.
Please refer to the code snippet and the attached sample for implementation details.
[Home.razor]:
|
<SfMultiSelect EnableGroupCheckBox="true" CssClass="status-multiselect" Mode="VisualMode.CheckBox" TValue="string[]" TItem="Vegetables" Placeholder="Select a vegetable" DataSource="@LocalData"> <MultiSelectFieldSettings GroupBy="Category" Value="ID" Text="Vegetable"></MultiSelectFieldSettings> <MultiSelectEvents TItem="Vegetables" TValue="string[]" Opened="Opened"></MultiSelectEvents> <MultiSelectTemplates TItem="Vegetables"> <ItemTemplate> @if (categoryCounts[context.Category] <= 1) { <span class="e-hide-item">@context.Vegetable</span> } else { <span>@context.Vegetable</span> } </ItemTemplate> </MultiSelectTemplates> </SfMultiSelect>
… public dynamic categoryCounts;
private async void Opened(PopupEventArgs args) { await JS.InvokeVoidAsync("hideItems", "status-multiselect"); } …. protected override async Task OnAfterRenderAsync(bool firstRender) { if (firstRender) { categoryCounts = LocalData.GroupBy(v => v.Category).ToDictionary(g => g.Key, g => g.Count()); } } } |
[App.razor]:
|
<script> window.hideItems = (className) => { setTimeout(function(){ var popupElem = document.querySelector(`.${className}.e-popup-open`); if (popupElem) { var spanElem = popupElem.querySelector('.e-hide-item'); if (spanElem) { spanElem.parentElement.style.display = 'none'; } } },70); } </script> |
Output screenshot:
Please let us know if you need any further assistance on this.
Regards,
YuvanShankar A
Attachment: multselecthideitems_cf1e9dae.zip
