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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Search function is not working

Thread ID:

Created:

Updated:

Platform:

Replies:

151318 Feb 6,2020 05:19 PM UTC Feb 10,2020 01:18 PM UTC JavaScript - EJ 2 3
loading
Tags: Grid
Arul Kumar
Asked On February 6, 2020 05:19 PM UTC

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 [Syncfusion]
Replied On 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 


Arul Kumar
Replied On 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.


Prasanna Kumar Viswanathan [Syncfusion]
Replied On 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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon