Custom Toolbar and Search in the same line?

[Istvan Piroska]

Hello,

I would like to ask, is it possible to place the default searchbox and a custom toolbar on the same line?

Like on this image?

https://prnt.sc/timg90

The grid simply:

    <SfGrid @ref="@StoreProductsGrid" AllowPaging="true" Toolbar="@(new[] {"Search"})" DataSource="@StoreProducts">

        <GridPageSettings PageSize="14" />

        <GridSearchSettings Fields="@(new[] {nameof(StoreProduct.ProductId), nameof(StoreProduct.ProductName)})" Operator="Operator.Contains" Key="" IgnoreCase="true" />

        <SfToolbar>

            <ToolbarItems>

                <ToolbarItem Type="ItemType.Input">

                    <Template>

                        <span class="my-auto mr-1">Mode:</span>

                        <SfDropDownList TItem="string" TValue="string" DataSource="@StoreProductModes" Context="modeContext" @bind-Value="@SelectedStoreProductMode"

                                        CssClass="w-130px">

                            <DropDownListEvents TValue="string" ValueChange="@StoreProductModeChanged"/>

                        </SfDropDownList>

                    </Template>

                </ToolbarItem>

            </ToolbarItems>

        </SfToolbar>

     ... Columns ...

    </SfGrid>

[Renjith Singh Rajendran]

Hi Istvan, 

Greetings from Syncfusion support. 

Based on your requirement, we suggest you to use the Search as a custom toolbar item in Grid instead of using default search. So now you can have the search textbox and custom toolbar as a single toolbar. Please download the sample from the link below, 

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

 

We have used a custom SfTextBox to perform search in Grid. By using the Search() method in the ValueChange event of SfTextBox you can perform search action in Grid. 

 

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

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

    <SfToolbar> 

        <ToolbarItems> 

            <ToolbarItem Type="ItemType.Input"> 

                <Template> 

                    ... 

                </Template> 

            </ToolbarItem> 

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

                <Template> 

                    @*Apply styles for SfTextbox accordingly*@ 

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

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

                </Template> 

            </ToolbarItem> 

        </ToolbarItems> 

    </SfToolbar> 

    ... 

</SfGrid> 

 

@code{ 

    SfGrid<Order> Grid; 

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

    public async Task SearchValueChange(ChangedEventArgs args) 

    { 

        await Grid.Search(args.Value); 

    } 

    ... 

} 

Please get back to us if you need further assistance. 

Regards, 

Renjith Singh Rajendran 

[Robert Chitoiu]

Renjit, I have a similar problem and I am doing the same thing as you are, but the search itself is not working. I opened an issue here:

https://www.syncfusion.com/forums/156122/search-not-working

[Istvan Piroska]

Hi Renjith,

Perfect, thank you.

Regards,

Istvan

[Renjith Singh Rajendran]

Hi Istvan, 

Thanks for your update. We are glad to hear that the provided suggestion helped you in achieving your requirement. 

Robert, we have updated the response for your query in the corresponding thread. Please follow up on the below thread for more details regarding this. 

https://www.syncfusion.com/forums/156122/search-not-working 

Regards, 

Renjith Singh Rajendran.