Add built-in toolbar functions to custom toolbar

[SZL]

Hello,

I try create a custom grid toolbar and add the built-in and my custom buttons / functions.

The custom button is ok, but how can I add the built-in functions, like 'add', 'edit', 'columnchooser', 'search' ?

I try at this way:

 <GridTemplates>

                            <ToolbarTemplate>

                                <SfToolbar>

                                    <ToolbarEvents Clicked="ToolbarClickHandler"></ToolbarEvents>

                                    <ToolbarItems>

                                        <ToolbarItem Type="@ItemType.Button" PrefixIcon="e-add" Id="Grid_add" TooltipText="Add button"></ToolbarItem>

                                        <ToolbarItem Type="@ItemType.Button" PrefixIcon="e-icons e-collapse" Id="collapseall" TooltipText="Collapse"></ToolbarItem>

                                    </ToolbarItems>

                                </SfToolbar>

                            </ToolbarTemplate>

                        </GridTemplates>

The add button appear in toolbar, but the Grid Add Dialog not open, when I click on button.

("Grid" is the ID of my grid)

Can you help me please what property is not good or missing?

(I prefer the component-style toolbar definition, I try with backend code too and that works, but is much harder to bind the visibility and enabled properties).

Thank you!

BR, SZL

[Naveen Palanivel]

Hi Szl,

We checked your query and we suggest you to handle the Grid CRUD operation using public method of Grid.  Refer the below API documentation for your reference. We can use built in Toolbar function in the custom Toolbar by programmatically methods(AddRecordAsync, DeleteRecordAsync, EndEditAsync, OpenColumnChooserAsync). Please refer the below link for more details.

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

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

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

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

https://blazor.syncfusion.com/documentation/datagrid/column-chooser#open-column-chooser-by-external-button

Also refer the below documentation to render the custom toolbar items with built in toolbar items.

https://blazor.syncfusion.com/documentation/datagrid/tool-bar#built-in-and-custom-items-in-toolbar

Please get back to us if you have further queries.

Regards,

Naveen Palanivel.

[SZL]

Hi,

Thank you, thats works! Only the Search field missing.

Can you help me please with the Search field too?

Thank you!

Regards,

SZL

[Naveen Palanivel]

Hi Szl,

We checked your query and we suggest you to refer the below API documentation for your reference. We can use built in Toolbar function in the custom Toolbar by programmatically methods. Please refer the below link for more details.

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

we can also achieved  render the SfTextBox control and by using the ValueChange event of SfTextBox, we have filtered the Grid using Search() method. Please refer the below code snippet for your reference.

<SfGrid @ref="DefaultGrid" DataSource="@Orders" AllowSorting="true" AllowFiltering="true" AllowPaging="true"> 

    <SfToolbar> 

        <ToolbarItems> 

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

                <Template> 

                    @*Apply styles for Textbox accordingly*@ 

                    <SfTextBox Placeholder="Enter values to search" Input="OnInput"></SfTextBox> 

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

                </Template> 

            </ToolbarItem> 

        </ToolbarItems> 

    </SfToolbar> 

 

    <GridColumns> 

        .. 

        .. 

    </GridColumns> 

</SfGrid> 

 

@code{ 

 

    public void OnInput(InputEventArgs args) 

    { 

        this.DefaultGrid.Search(args.Value); 

    } 

} 

Please get back to us if you need further assistance. 

Regards,

Naveen Palanivel.