Search immediatly.

[Carlos]

I want to start searching immediatly after user types something in the search textbox. How can i do that?

[Rahul Narayanasamy]

Hi Carlos, 

Greetings from Syncfusion. 

Query: I want to start searching immediatly after user types something in the search textbox. How can i do that?  

We have validated your query and you can achieve your requirement by using the Custom Toolbar feature of Grid component. Using custom toolbar we can render the SfTextBox control and by using the ValueChange event of SfTextBox, we have filtered the Grid using SearchAsync() method. Please refer the below code snippet and the sample 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{ 

    private SfGrid<Order> DefaultGrid; 

 

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

 

    public async Task OnInput(InputEventArgs args) 

    { 

        await this.DefaultGrid.SearchAsync(args.Value); 

    } 

    . . . 

} 

Sample: https://www.syncfusion.com/downloads/support/forum/168530/ze/SampleImmediateSearch466037945  

Please let us know if you have any concerns. 

Regards, 

Rahul 

[Carlos]

Already tried that and it really works but i get an addicional toolbar line.

Maybe if there was an event on the default search box that could be invoked in order to trigger the search?

[Rahul Narayanasamy]

Hi Carlos, 

Thanks for the update. 

We have validated your query with the provided details and we suspect that you have used the provided solution with default toolbar items. So two toolbar items are shown.  

Here, we have prepared a sample with both default and custom toolbar items to achieve your requirement. We have rendered search text box in custom toolbar item by using Template property of ToolbarItem. Find the below code snippets and sample for your reference. 

[Index.razor] 

<SfGrid DataSource="@Employees" ShowColumnChooser="true" Toolbar=@ToolbarItems> 

<GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true"></GridEditSettings> 

    <GridColumns> 

        . . . 

    </GridColumns> 

</SfGrid> 

 

@code{ 

    private List<object> ToolbarItems = new List<object>() { "Add", "Edit", "Delete", "Update", "Cancel","ColumnChooser", new ToolbarItem() { Type = ItemType.Input, Template = title, Align = ItemAlign.Right } }; 

    public List<EmployeeData> Employees { get; set; } 

    . ..  

    private static RenderFragment title = @<Searchtext></Searchtext>;   

} 

[Searchtext.razor] 

@using Syncfusion.Blazor.Inputs 

@using Syncfusion.Blazor.Grids 

@using static DataGrid.Pages.Index; 

 

<SfTextBox Placeholder="Search Text" ShowClearButton="true" Input="OnInput"></SfTextBox> 

 

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

 

@code{ 

    [CascadingParameter] 

    public SfGrid<EmployeeData> Grid { get; set; } 

    public void OnInput(InputEventArgs Args) 

    { 

        Grid.SearchAsync(Args.Value); 

    } 

} 

Sample: https://www.syncfusion.com/downloads/support/forum/168530/ze/DataGridSample-540089258  

Please let us know if you have any concerns. 

Regards, 

Rahul 

[Carlos]

It's been a while but my sugestion is, wouldn't it be easier if you just added an option to the grid to automatically search for the text?

I used a bootstrap datagrid in javascript that did this by default.

I am already using version 20.1.0.50 of syncfusion components maybe this version already has this functionality?

[Rahul Narayanasamy]

Hi Carlos,

Thanks for the update.

We are currently checking the reported query from our end and we will update the further details within two business days. Until then we appreciate your patience.

Regards,

Rahul

[Vignesh Natarajan]

Hi Carlos, 

Thanks for your patience.

We have validated your query and currently we do not have support for this requirement. We have considered you query as an improvement “Need to provide immediate searching support for search toolbar in grid”. We are always trying to make our products better and feature requests like yours are a key part of our product growth efforts. At the planning stage for every release cycle, we review all open features and identify features for implementation based on specific parameters including product vision, technological feasibility, and customer interest. We do not have immediate plan to implement this request. It will be implemented in any of our upcoming releases.  

You can also communicate with us regarding the open features any time using our Feature Report page and you can track the status of your requirement by using the below feedback link.

https://www.syncfusion.com/feedback/30406/need-to-provide-support-for-immediate-searching-for-search-toolbar-in-grid 

We will get back to you once this feature is considered in our roadmap and included in the Volume release. we appreciate your patience until then.

Regards, 

Vignesh Natarajan