Search results

Create custom toolbar with drop-down list

You can create your own ToolBar items in the Grid. It can be added by defining the Toolbar. Actions for this ToolBar template items are defined in the [ToolbarClick]

Step 1:

Initialize the template for your custom component. Using the following code add the DropDownList component to the ToolBar.

<GridTemplates>
    <ToolbarTemplate>
        <EjsToolbar>
            <ToolbarItems>
                    <EjsDropDownList TValue="string" DataSource="@LocalData" Placeholder="Enter the value" Width="200">
                        <DropDownListFieldSettings Text="Name"></DropDownListFieldSettings>
                        <DropDownListEvents TValue="int" ValueChange="OnChange"></DropDownListEvents>
                    </EjsDropDownList>
            </ToolbarItems>
        </EjsToolbar>
    </ToolbarTemplate>
</GridTemplates>

Step 2:

To render the DropDownList component, use the DropDownListEvents You can select the grid row index based on the selected data in the DropDownList. The output will appear as follows.

@using Syncfusion.EJ2.Blazor
@using Syncfusion.EJ2.Blazor.Grids
@using Syncfusion.EJ2.Blazor.Navigations
@using Syncfusion.EJ2.Blazor.DropDowns

<EjsGrid ModelType="@Model" DataSource="@Orders" AllowPaging="true" Height="200" @ref="Grid">
    <GridTemplates>
        <ToolbarTemplate>
            <EjsToolbar>
                <ToolbarItems>
                        <EjsDropDownList TValue="string" DataSource="@LocalData" Placeholder="Enter the value" Width="200">
                            <DropDownListFieldSettings Text="Name"></DropDownListFieldSettings>
                            <DropDownListEvents TValue="int" ValueChange="OnChange"></DropDownListEvents>
                        </EjsDropDownList>
                </ToolbarItems>
            </EjsToolbar>
        </ToolbarTemplate>
    </GridTemplates>

    <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="yMd" 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>
</EjsGrid>

@code{

    EjsGrid<Order> Grid;
    public List<Order> Orders { get; set; }
    Order Model = new Order();
    public class Data
    {
        public string Name { get; set; }

        public string Code { get; set; }
    }

    List<Data> LocalData = new List<Data>
    {
        new Data() { Name = "0" },
        new Data() { Name = "1" },
        new Data() { Name = "2" },
        new Data() { Name = "3" },
        new Data() { Name = "4" },
        new Data() { Name = "5" },
        new Data() { Name = "6" },
        new Data() { Name = "7" },
        new Data() { Name = "8" },
        new Data() { Name = "9" },
    };

    protected override void OnInitialized()
    {
        Orders = Enumerable.Range(1, 10).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 void OnChange(Syncfusion.EJ2.Blazor.DropDowns.ChangeEventArgs<int>args)
    {
        this.Grid.SelectRow(args.Value);
    }

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

Output be like the below. `Final output`