We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Persisting search input in SfTextbox when navigating to other page

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!


5 Replies

SP Sarveswaran Palani Syncfusion Team December 1, 2022 04:13 AM UTC

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


PV Pieterjan van der Leur December 5, 2022 08:27 AM UTC

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



SP Sarveswaran Palani Syncfusion Team December 7, 2022 04:19 AM UTC

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


PV Pieterjan van der Leur December 12, 2022 01:45 PM UTC

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



SP Sarveswaran Palani Syncfusion Team December 14, 2022 04:12 AM UTC

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 { getset; } 

 

    public async Task OnInput(InputEventArgs args) 

    { 

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

    } 

    . . . 

} 


Regards, 
Sarveswaran PK


Attachment: SfGridSearchTextBox_55271beb.zip

Loader.
Live Chat Icon For mobile
Up arrow icon