Search and custom button on toolbar

[E]

I found out how to add a mix of default and custom toolbar items here:

https://blazor.syncfusion.com/documentation/datagrid/how-to/custom-toolbar-items-with-text-name-same-as-default-toolbar-items/

Now I have this

<SfGrid DataSource="@Orders" @ref="Grid" AllowGrouping="true" AllowPaging="true" Height="200" Toolbar="Toolbaritems">
    <GridEvents OnToolbarClick="ToolbarClickHandler" TValue="Order"></GridEvents>
    <GridColumns>
        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>
        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>
        <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>
        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>
    </GridColumns>
</SfGrid>

@code{
    SfGrid<Order> Grid;
    public List<Order> Orders { get; set; }
    protected override void OnInitialized()
    {
        Orders = Enumerable.Range(1, 75).Select(x => new Order()
        {
            OrderID = 1000 + x,
            CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
            Freight = 2.1 * x,
            OrderDate = DateTime.Now.AddDays(-x),
        }).ToList();
    }

    public class Order
    {
        public int? OrderID { get; set; }
        public string CustomerID { get; set; }
        public DateTime? OrderDate { get; set; }
        public double? Freight { get; set; }
    }

    public void ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args)
    {
        if (args.Item.Text == "Add")
        {
            //perform your actions here
        }
        if (args.Item.Text == "Delete")
        {
            //perform your actions here
        }
    }
}

But how do I add search to the same bar?

[Rahul Narayanasamy]

Hi E, 

Greetings from Syncfusion. 

Query: Search and custom button on toolbar 

We have validated your query and you want to add default search toolbar item along with the custom toolbar items. You can achieve your requirement by using both built-in and custom tool bar items at same time. 

In the below example, Search is built-in toolbar item and Add is custom toolbar item. Find the below code snippets for your reference. 

 

<SfGrid DataSource="@Orders" AllowPaging="true" Height="200" Toolbar="Toolbaritems"> 

    <GridEvents OnToolbarClick="ToolbarClickHandler" TValue="Order"></GridEvents> 

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

    <GridColumns> 

        . ..  

    </GridColumns> 

</SfGrid> 

<style> 

    .e-click::before { 

        content: '\e525'; 

    } 

</style> 

 

@code{ 

 

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

    private List<Object> Toolbaritems = new List<Object>() { "Search",  

        new ItemModel() { Text = "Add", TooltipText = "Add", PrefixIcon = "add", Id = "add" } }; 

    . . . 

 

    public void ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args) 

    { 

 

        if (args.Item.Id == "add") 

        { 

            //You can customized your code here.... 

        } 

    } 

} 

Reference: 

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

Please let us know if you have any concerns. 

Regards, 

Rahul