Add Buttons and Search on Grid Toolbar

[slynch]

Is there a way to add a few buttons in addition to the search feature on tool bar?  For example,

<Syncfusion.Blazor.Grids.SfGrid DataSource="@clientsactive" Toolbar="Toolbar" AllowPaging="true">

@{

    List<ItemModel> Toolbar = new List<ItemModel>();

    Toolbar.Add(new ItemModel { Text = "Copy", TooltipText = "Copy", PrefixIcon = "e-copy", Id = "copy" });

    Toolbar.Add(new ItemModel { Text = "Copy With Header", TooltipText = "Copy With Header", PrefixIcon = "e-copy", Id = "copyheader" });

    Toolbar.Add(new List<string>() { "Search" });

}

and have the buttons to the left and search to the right?

[Rahul Narayanasamy]

Hi Slynch, 

Greetings from Syncfusion. 

Query: Add Buttons and Search on Grid Toolbar 

We have validated your query and you want to add button in toolbar in along with default search box. You can achieve your requirement by using Template Property. Here, we have achieved your requirement by defining ToolbarTemplate. In this template, we have rendered buttons using RenderFragment. Find the below code snippets and sample for your reference. 

 

 

<SfGrid DataSource="@Orders" AllowPaging="true" Toolbar="@(new List<object>() {  

                                                               new ToolbarItem() 

                        { Template = Button, Id = "button1", TooltipText = "Button1", Align = ItemAlign.Right, 

                            Type = ItemType.Button, CssClass = "custom-toolbar-item-label" 

                        },  

                        "Search",  

                        new ToolbarItem() 

                        { Template = Button2, Id = "button", TooltipText = "Button2", Align = ItemAlign.Right, 

                            Type = ItemType.Button, CssClass = "custom-toolbar-item-label" 

                        } 

                                                           })" Height="315"> 

    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Normal"></GridEditSettings> 

    <GridColumns> 

        . . . 

    </GridColumns> 

</SfGrid> 

 

@code{ 

    public List<Order> Orders { get; set; } 

    SfButton ToggleBtn; 

    . . . 

   private RenderFragment Button =>@<SfButton @ref="ToggleBtn" @onclick="onToggleClick" CssClass="e-flat" IsToggle="true" IsPrimary="true" Content="@Content"></SfButton>; 

    private RenderFragment Button2 =>@<SfButton CssClass="e-flat" Content="Button2"></SfButton>; 

 

    private void onToggleClick(Microsoft.AspNetCore.Components.Web.MouseEventArgs args) 

    { 

        . . . 

    } 

} 

Sample: https://www.syncfusion.com/downloads/support/forum/159677/ze/BlazorApp31095534774  

Please let us know if you have any concerns. 

Regards, 

Rahul