Search function is not working

[Arul Kumar]

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.

[Prasanna Kumar Viswanathan]

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> 

 

 

Sample: https://www.syncfusion.com/downloads/support/forum/151318/ze/151318143389237.zip 

 

Documentation: https://ej2.syncfusion.com/javascript/documentation/grid/data-binding/#sending-additional-parameters-to-the-server 

 

API: https://ej2.syncfusion.com/javascript/documentation/api/grid/#actionbegin 

 

Regards,
Prasanna Kumar N.S.V 

[Arul Kumar]

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.

[Prasanna Kumar Viswanathan]

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