1. Home
  2. Forum
  3. JavaScript - EJ 2
  4. Search function is not working

Search function is not working

Hi,

I'm trying to use Search feature in JavaScript Grid. Can you please provide the sample code to achieve the searching/filtering?

I'm using .Net web API & adaptor as WebAPIAdaptor.

I saw the sample solution from https://www.syncfusion.com/forums/137936/grid-crud-sample.which not helps.

3 Replies
PK Prasanna Kumar Viswanathan Syncfusion Team February 7, 2020 10:10 AM UTC

Hi Arul, 
 
Thanks for contacting Syncfusion support. 
 
As we discussed in the meeting we have prepared a sample for differentiate the filter and search action in Grid. We have achieved this requirement by using actionBegin event of grid.  
 
In this event  we have added the additional parameters through query property. To add a custom parameter to the data request, use the addParams method of Query class. Assign the Query object with additional parameters to the grid query property. Please refer the below screenshot, code example, sample, and documentation for more information. 
 
Screenshot: 
 
Search action: 
 
 
 
Filter action: 
 
 
 
Code example: 
 
@{ 
    ViewData["Title"] = "Grid"; 
} 
 
 
    <div id="Grid"> 
    </div> 
 
<script type="text/javascript"> 
    $(function () { 
        var data = new ej.data.DataManager({ 
            url: '/api/Orders', 
            adaptor: new ej.data.WebApiAdaptor(), 
            crossDomain: true 
        }); 
 
        var grid = new ej.grids.Grid({ 
            dataSource: data, 
            allowPaging: true, 
            allowFiltering: true, 
            toolbar: ['Search'], 
            actionBegin: actionBegin, 
            pageSettings: { pageSize: 15 }, 
            columns: [ 
                { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120, isPrimaryKey: true }, 
                { field: 'EmployeeID', width: 140, headerText: 'Employee ID' }, 
                { field: 'ShipCountry', headerText: 'Ship Country', width: 140 } 
            ] 
        }); 
 
        grid.appendTo('#Grid'); 
    }); 
</script> 
 
<script> 
    function actionBegin(args) { 
        if (args.requestType === "filtering") { 
            this.query = this.query.addParams("requestType", args.requestType) 
        } 
        else if (args.requestType === "searching") { 
            this.query = this.query.addParams("requestType", args.requestType) 
        } 
    } 
</script> 
 

 
 
 
 
Regards,
Prasanna Kumar N.S.V 


AK Arul Kumar February 7, 2020 07:33 PM UTC

Hi Prasanna,

The sample provided below works when doing filtering alone or searching alone. This doesn't works on applying filters and searching in parallel. I'm getting the below error on using both filter and search at a time.


PK Prasanna Kumar Viswanathan Syncfusion Team February 10, 2020 01:18 PM UTC

Hi Arul, 
 
Thanks for your update. 
 
Query: The sample provided below works when doing filtering alone or searching alone. This doesn't works on applying filters and searching in parallel. I'm getting the below error on using both filter and search at a time. 
 
We are able to reproduce the reported problem at our end. The additional parameter is not cleared properly which is the cause of the issue. You can resolve the reported problem by using below way. Find the below code snippets for your reference. 
 
[code snippets] 
... 
 
<script type="text/javascript"> 
    $(function () { 
        ... 
 
        var grid = new ej.grids.Grid({ 
            dataSource: data, 
            allowPaging: true, 
            allowFiltering: true, 
            toolbar: ['Search'], 
            actionBegin: actionBegin, 
            pageSettings: { pageSize: 15 }, 
            columns: [ 
                ... 
           ] 
        }); 
 
        grid.appendTo('#Grid'); 
    }); 
</script> 
 
<script> 
    function actionBegin(args) { 
        if (args.requestType === "filtering") { 
            if (this.query.params.length > 0) {    //checked whether the params present or not 
                this.query.params = [];    //emptied params 
                this.query = this.query.addParams("requestType", args.requestType); 
            } else { 
                this.query = this.query.addParams("requestType", args.requestType);    
            } 
        } 
        else if (args.requestType === "searching") { 
            if (this.query.params.length > 0) {        //checked whether the params present or not 
                this.query.params = [];      //emptied params 
                this.query = this.query.addParams("requestType", args.requestType); 
            } else { 
                this.query = this.query.addParams("requestType", args.requestType); 
            } 
        } 
    } 
</script> 
 
Regards, 
Prasanna Kumar N.S.V 


Loader.
Up arrow icon