Custom Toolbar with ColumnChooser

[Patrick]

I'm trying to add some custom actions to the toolbar and currently have it working with the following code:

        <SfToolbar> 

            <ToolbarItems>

                <ToolbarItem>

                    <Template>

                        <SfDropDownButton Content="Options">

                            <DropDownButtonEvents ItemSelected="ItemSelected"></DropDownButtonEvents>

                            <DropDownMenuItems>

                                <DropDownMenuItem Text="Collapse"></DropDownMenuItem>

                                <DropDownMenuItem Text="Expand"></DropDownMenuItem>

                                <DropDownMenuItem Text="Export"></DropDownMenuItem>

                                <DropDownMenuItem Text="Reset"></DropDownMenuItem>

                            </DropDownMenuItems>

                        </SfDropDownButton>

                    </Template>

                </ToolbarItem>

                <ToolbarItem Type="ItemType.Input" Align="Syncfusion.Blazor.Navigations.ItemAlign.Right"> 

                    <Template>

                        <SfTextBox ValueChange="SearchValueChange" Placeholder="Search"></SfTextBox> 

                        <span class="e-search-icon e-icons" /> 

                    </Template> 

                </ToolbarItem> 

            </ToolbarItems> 

        </SfToolbar> 

As noted above, I already had to manually reimplement the Search box to get it on the same toolbar.  How can I do this with the ColumnChooser?  I don't need to change how it works, I just want it to appear (except maybe left aligned).

[Balasubramanian Sattanathan]

Hi Proton,  

Greetings from Syncfusion support.  

We have validated your query and we suggest you to use the below code to render column chooser in SfToolbar.  

<SfGrid DataSource="@Orders" AllowPaging="true" Height="200" @ref="Grid" ShowColumnChooser="true">  

    <SfToolbar>  

        <ToolbarItems>  

            <ToolbarItem Type="ItemType.Input">  

                <Template>  

                    <SfDropDownList TValue="string" TItem="Select" DataSource=@LocalData Width="200">  

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

                        <DropDownListEvents TValue="string" TItem="Select" ValueChange="OnChange"></DropDownListEvents>  

                    </SfDropDownList>  

                </Template>  

            </ToolbarItem>  

            <ToolbarItem SuffixIcon="e-columnchooser-btn" Text="Columns" CssClass="e-cc e-ccdiv e-cc-toolbar"OnClick="@ToolbarClickHandler">  

//Set Align="ItemAlign.Right" to open column chooser in right side  

           </ToolbarItem>  

        </ToolbarItems>  

    </SfToolbar>  

</SfGrid>  

@code{  

  

    public async Task ToolbarClickHandler(ClickEventArgs args)  

    {  

        await Grid.OpenColumnChooser();  

    }  

}  

Sample - https://www.syncfusion.com/downloads/support/directtrac/general/ze/ServerApp738495604  

(Index.razor – open column chooser in left side,  

Component.razor – open column chooser in Right Side)  

Documentation :  

https://blazor.syncfusion.com/documentation/datagrid/tool-bar/  

https://blazor.syncfusion.com/documentation/toolbar/getting-started/  

https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_OpenColumnChooser_System_Nullable_System_Double__System_Nullable_System_Double__  

Please get back to us if you have any other queries.  

Regards,  

Balasubramanian S 

[Patrick]

Works perfectly.  Thank you!

[Nevitha Ravi]

Hi Patrick, 

You are most welcome..! we are glad that our provided solution helped you. Please get back to us if you need any further assistance. 

Regards, 

Nevitha