DropDown with custom Popup content.

[Vladimir Melnik]

Hello,

currently I'm trying to create a dropdown component which must look like as normal combobox but in popup part I want to add any kind of other components(f.e. grid, buttons). I also need a possiblity to control it's behaviour - open/close from the code, cancel closing. Is there any component who could provide this flexibility?

Best regards,

Volodymyr Melnyk

[Mohan Kumar Ramasamy]

Hi Volodymyr, 

 

We have checked the reported query. We can render dropdownlist component for DropDownButton popup using PopupContent. Please refer the below code snippets 

 

<SfDropDownButton CssClass="e-caret-hide" IconCss="e-ddb-icons e-profile" IconPosition="SplitButtonIconPosition.Left"> 

    <PopupContent> 

        <div id="dropDownFilterExpenses"> 

            <SfDropDownList TValue="string" TItem="GameFields" PopupHeight="230px" Placeholder="Select a game" DataSource="@Games"> 

                <DropDownListFieldSettings Text="Text" Value="ID"></DropDownListFieldSettings> 

                <DropDownListEvents Opened="OpenPopup" OnClose="beforeClose" TValue="string"></DropDownListEvents> 

            </SfDropDownList> 

        </div> 

    </PopupContent> 

    <ChildContent> 

        <DropDownButtonEvents OnClose="popupClose"></DropDownButtonEvents> 

    </ChildContent> 

</SfDropDownButton> 

 

 

@code { 

 

    private bool ispopUp = false; 

 

    private void popupClose(BeforeOpenCloseMenuEventArgs args) 

    { 

        args.Cancel = this.ispopUp; 

    } 

 

    private void OpenPopup(PopupEventArgs args) 

    { 

        this.ispopUp = true; 

    } 

 

    private void beforeClose(PopupEventArgs args) 

    { 

        this.ispopUp = false; 

    } 

 

} 

 

<style> 

    .e-dropdown-popup.e-transparent div { 

        display: none; 

    } 

</style> 

 

For your reference, we have prepared a sample please refer a below link. 

 

Link: https://www.syncfusion.com/downloads/support/forum/156291/ze/156291BlazorApp1-1519089992  

 

Please let us know, if you need any further assistance, 

 

Regards, 

Mohankumar R 

[Unknown]

Hello,

Sorry for continuing on the same thread, but I am facing the case that I need almost the same behaviour, in my case I need to put a treeview inside the dropdown.

Thanks.

[Janakiraman Sakthivel]

Hi Andrianjafimanana, 

  

Thank you for your update. 

  

For your convenience, now we have rendered the TreeView component inside the DropDownButton popup using PopupContent. Please refer the below code snippets  

  

 

 <SfDropDownButton CssClass="e-caret-hide" IconCss="e-ddb-icons e-profile" IconPosition="SplitButtonIconPosition.Left"> 

    <PopupContent> 

        <div id="dropDownFilterExpenses"> 

            <SfTreeView TValue="MailItem"> 

               <TreeViewFieldsSettings TValue="MailItem" Id="Id" DataSource="@MyFolder" Text="FolderName" ParentID="ParentId" HasChildren="HasSubFolders" Expanded="Expanded"></TreeViewFieldsSettings> 

            </SfTreeView> 

        </div> 

    </PopupContent> 

    <ChildContent> 

        <DropDownButtonEvents OnClose="popupClose"></DropDownButtonEvents> 

    </ChildContent> 

</SfDropDownButton> 

 

<style> 

     .e-dropdown-popup .e-ul .e-list-parent { 

         border: none; 

     } 

</style> 

  

For your reference, we have prepared a sample please refer a below link.  

  

Sample Link: https://www.syncfusion.com/downloads/support/forum/156291/ze/156291BlazorApp1-1519089992-770496144 

  

Please let us know, if you need any further assistance,  

  

Regards,
Janakiraman S.