How to get search result

[Chi Duc]

Hi,

We use built-in Search function in Grid. Which method of Grid returns the search result (e.g. a set of data rows found after applying a search)?

Thanks and best regards,

Chi Duc

[Venkatesh Ayothi Raman]

Hi Chi, 

Thanks for contacting Syncfusion support. 

30 

Query : We use built-in Search function in Grid. Which method of Grid returns the search result (e.g. a set of data rows found after applying a search)? 

 

We have analyzed your query and we can achieve your requirement by using search property of the Datamanager Query class. We have made sample in two different ways, one is using actionComplete event of the grid and in the event, we have passed the search string into Query property to get matched data rows. Please find the below sample code example. 

Code Example:  

   public onComplete(args){ 

if(args.requestType == "searching"){ 

    new DataManager(data) 

        .executeQuery(new Query().search(args.searchString, [])) 

        .then((e: ReturnOption) => { 

            var rows = e.result;                              //here we can get the search results 

            console.log(rows); 

            }); 

    } 

} 

... 

    render() {  

        return (<div> 

<GridComponent id="Grid" dataSource={data} actionComplete={this.onComplete.bind(this)} toolbar={this.toolbarOptions} ref={g => this.gridInstance = g} height={240}> 

            <ColumnsDirective> 

                ... 

            </ColumnsDirective> 

            <Inject services={[ Toolbar ]} /> 

        </GridComponent></div>) 

    } 

Another method is done by the external button click event and in this event we have passed a string(“VI”) to collect the resulted data rows. Please find the below sample and documentation for your reference. 

Code Example: 

[.ts] 

public searchFunction (){ 

new DataManager(this.gridInstance.dataSource) 

        .executeQuery(new Query().search("VI",[])) 

        .then((e: ReturnOption) => { 

            var rows = e.result;                                 //here we can get the search results 

            console.log(rows); 

            }); 

} 

    render() {  

        return (<div> 

        <button onClick={this.searchFunction.bind(this)}> Get search results</button> 

        <GridComponent id="Grid" dataSource={data} actionComplete={this.onComplete.bind(this)} toolbar={this.toolbarOptions} ref={g => this.gridInstance = g} height={240}> 

            <ColumnsDirective> 

                ... 

            </ColumnsDirective> 

            <Inject services={[ Toolbar ]} /> 

        </GridComponent></div>) 

    } 

 

Sample: https://plnkr.co/edit/LvzBNBIaJ0h36sj48wao?p=preview  

Documentation: https://ej2.syncfusion.com/react/documentation/data/querying.html#searching 

                                https://ej2.syncfusion.com/documentation/data/api-query.html?lang=typescript#search  

Please get back to us for further assistance. 

Regards, 

Venkatesh Ayothiraman.