How to add dropdownlist inside toolbar-items?

[Roberto]

Hi

How can I add a dropdownlist to toolbar-items using the helper?

 <ejs-toolbar id="alignmentToolbar" style="border:none; margin:0; overflow:visible">

                    <e-toolbar-items style="padding-right:0px;" id="toolbaritems">

                        <e-toolbar-item align="Center" text="@ViewBag.Title" cssClass="disabled titlepage" style="opacity: 1.0 !important"></e-toolbar-item>

                          <ejs-dropdownlist id="themedroplist"

                                  width="100"

                                  value="@themes[0].ID"

                                  dataSource="themes"

                                  popupWidth="300px"

                                  change="onThemeChange"

                                  placeholder="Selecione um tema" popupHeight="220px">

                                 <e-dropdownlist-fields value="ID" text="Text"></e-dropdownlist-fields>

                          </ejs-dropdownlist>

                        <e-toolbar-item prefixIcon="fa-solid fa-copy"

                                        id="toolbarItemCopy"

                                        tooltipText="Copiar página atual"

                                        align="Right"></e-toolbar-item>

                        <e-toolbar-item prefixIcon="fa-solid fa-house"

                                        id="toolbarItemHome"

                                        tooltipText="Ir para página inicial"

                                        align="Right"></e-toolbar-item>

                        <e-toolbar-item prefixIcon="fa-solid fa-bell"

                                        id="toolbarItemNotificacao"

                                        tooltipText="Notificação"

                                        align="Right"></e-toolbar-item>

                        <e-toolbar-item prefixIcon="fa-solid fa-arrow-right-from-bracket"

                                        id="toolbarItemLogin"

                                        tooltipText="Logout"

                                        align="Right"></e-toolbar-item>

                    </e-toolbar-items>

                </ejs-toolbar>

[Venkateshwaran Saravanakumar]

Hi Roberto,

UG: https://ej2.syncfusion.com/aspnetcore/documentation/toolbar/how-to/set-item-wise-custom-template

You can achieve your requirement by using template property in the Toolbar as highlighted in the below code snippet. Try the shared sample and let us know if you need any further assistance.
 

[Index.cshtml]

@{

    string dropdown = "#themedroplist";

}

 

<ejs-toolbar id="alignmentToolbar" style="border:none; margin:0; overflow:visible">

 

    <e-toolbar-items style="padding-right:0px;" id="toolbaritems">       

        <e-toolbar-item template="@dropdown" type=Input align=Left overflow="Show" cssClass="percentage"></e-toolbar-item>       

    </e-toolbar-items>

    </ejs-toolbar>

 

<div>

    <ejs-dropdownlist id="themedroplist" dataSource="@ViewBag.data" width="100" value="50" popupWidth="300px" popupHeight="85px" placeholder="Percentage" showClearButton=false>

        <e-dropdownlist-fields value="ID" text="Text"></e-dropdownlist-fields>

    </ejs-dropdownlist>

</div>

Regards,

Venkatesh

Attachment: ToolbarTemplate_c44dabda.zip

[Roberto]

Perfect.

Thanks

[Satheesh Kumar Balasubramanian]

Roberto,  We are happy that our solution fulfilled your requirement. Please get back to us, if you need any further assistance.