Persisting search input in SfTextbox when navigating to other page

[Pieterjan van der Leur]

I have a SfTextbox: 

and on input it will search the grid:

Now when i navigate away from the page and come back the text box in empty:

How can i persist the search input? 

This is very important because let's say that the user does a search that has no result:

When he navigates away from the page and comes back (even if he comes back after 2 days because the state of the grid is persistent), he wil see this page:

And there is absolutely no way to know what's going on...

Many thanks in advance!

[Sarveswaran Palani]

Hi Pieterjan,

Greetings from Syncfusion support.

From your query, we suspect that you want persist data on Searching. We have already given persist support for inbuilt searching Toolbar. If you want to search externally, you need to bind value from the local storage. Kindly refer the attached video demo for your reference.

Regards,

Sarveswaran PK

Attachment: Search_Data_Persist_7a4ee2f8.zip

[Pieterjan van der Leur]

It would be nice if you would share code instead of a video. 

[Sarveswaran Palani]

Hi Pieterjan,

As per your request, we prepared sample to persist data after searching the records in the grid. Kindly refer the attached sample for your reference.

Regards,
Sarvesh

Attachment: SfGridPersistData_5c9a3899.zip

[Pieterjan van der Leur]

Please provide sample when searching externally and binding  value with local storage, Thank you.

[Sarveswaran Palani]

Hi Pieterjan,

Query: Provide sample when searching externally and binding value with local storage.

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); 

    } 

    . . . 

} 

Regards, 
Sarveswaran PK

Attachment: SfGridSearchTextBox_55271beb.zip