Multiple Dropdowns, Accordion

[Nathanael]

I am going to have multiple MultiSelect Dropdowns on my Sidebar. Is there a way to set them up Accordian style? So that when I expand one, it doesnt cover up the other ones?

Does that make sense?

Thank you

Nathanael

[Sevvandhi Nagulan]

Hi Nathanael, 

Greetings from Syncfusion support. 

We are currently checking the feasibility for the reported requirement at our end. We will update further details on 19^th March,2021. We appreciate your patience until then. 

Regards, 

Sevvandhi N 

[Sevvandhi Nagulan]

Hi Nathanael, 

Thanks for your patience. 

We checked your query. We could not achieve the requested requirement within the MultiSelect component. Since the multiselect component is a popup component. So, we used the accordion component and rendered the multiselect component inside the header template. The ListBox component, which acts as the popup for the multiselect component, was rendered in the content template. The chosen value in the listbox component was also updated to the multiselect component. Please see the code below. 

 

<SfAccordion> 

    <AccordionItems> 

        <AccordionItem> 

            <HeaderTemplate> 

                <SfMultiSelect TValue="string[]" TItem="DataValues" @bind-Value="@inputValue1" DataSource="@Data" Width="500px" Mode="VisualMode.Delimiter" ShowClearButton="false" OnKeyUp="keydown1"> 

                    <MultiSelectEvents TValue="string[]" TItem="DataValues" OnOpen="onOpen"></MultiSelectEvents> 

                    <MultiSelectFieldSettings Text="Text" Value="Text"></MultiSelectFieldSettings> 

                </SfMultiSelect> 

            </HeaderTemplate> 

            <ContentTemplate> 

                <SfListBox @bind-Value=@ListValue1 DataSource="@Data" TValue="string[]" TItem="DataValues"> 

                    <ListBoxFieldSettings Text="Text" Value="Text"></ListBoxFieldSettings> 

                    <ListBoxSelectionSettings Mode="SelectionMode.Multiple"></ListBoxSelectionSettings> 

                    <ListBoxEvents TValue="string[]" TItem="DataValues" ValueChange="OnChange1"></ListBoxEvents> 

                </SfListBox> 

            </ContentTemplate> 

        </AccordionItem> 

 

 .  .  .   

</SfAccordion> 

.  .  . 

public void OnChange1(ListBoxChangeEventArgs<string[],DataValues> args) 

    { 

        inputValue1 = ListValue1; 

    } 

Screenshot: 

 

Please find the sample below. 

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

Note: To select multiple items, use the CTRL key and mouse click to make selections. 

Please check the above sample and get back to us if you need further assistance. 

Regards, 

Sevvandhi N