Filter dialog not showing data using remote data

[Unknown]

Hello,

I am using grid with Excel type filter. When the first time I expand Excel filter in column - I can see all my data. But when I am trying to filter data in this dialog - I am always getting - No Matches Found - although I see that I get no errors and get correct data from WebAPI.

I can represent this issue in this example: https://stackblitz.com/edit/angular-yflj6f?file=app.component.ts

At first I see everything:

After adding some text I can not see records:

 

[Thavasianand Sankaranarayanan]

Hi AC, 

 

Thanks for contacting Syncfusion support. 

 

We have validated the provided example,  If you have using WebAPIAdaptor for Grid data binding , we need to handle the Grid actions(like paging , filtering, sorting) in server side (web service).  In the given demo service we didn’t handle the filtering action. So as per your requirement we have created a sample with WebAPiAdaptor and perform Grid actions in server side. Kindly refer to the below code example and sample for more information.  

 

<ejs-grid #grid [dataSource]='data' allowFiltering="true" allowPaging="true" allowSorting="true" height="320">  

    <e-columns>  

        <e-column field='OrderID' headerText='Order ID' isPrimaryKey=true width='150'></e-column>  

        <e-column field='CustomerID' headerText='Customer Name' width='150'></e-column>  

        <e-column field='ShipCity' headerText='ShipCity' width='150' textAlign='Right'></e-column>        

    </e-columns>  

</ejs-grid>  

 

export class FetchDataComponent {  

    public data: any;  

  @ViewChild('grid')  

  public grid: GridComponent;  

  

  ngOnInit(): void {  

    this.data = new DataManager({  

      url: 'api/Orders',  

      adaptor: new WebApiAdaptor  

    });  

  }  

  

}  

 

public object Get()  

        {  

            var queryString = Request.Query;  

            var data = OrdersDetails.GetAllRecords().ToList();  

            string sort = queryString["$orderby"];   //sorting       

            string filter = queryString["$filter"];  //filtering  

            if (filter != null)  

            {  

                var newfiltersplits = filter;  

                var filtersplits = newfiltersplits.Split('(', ')', ' ');  

                var filterfield = filtersplits[1];  

                var filtervalue = filtersplits[3];  

                if (filtersplits.Length != 5)  

                {  

                    filterfield = filter.Split('(', ')', '\'')[3]; //get field from query  

                    filtervalue = filter.Split('(', ')', '\'')[5]; // get value from query  

                }  

                switch (filterfield)  

                {  

                    case "OrderID":  

  

                        data = (from cust in data  

                                where cust.OrderID.ToString() == filtervalue.ToString()  

                                select cust).ToList();  

                        break;  

                    case "CustomerID":  

                        data = (from cust in data  

                                wherecust.CustomerID.ToLower().StartsWith(filtervalue.ToString())  

                                select cust).ToList();  

                        break;  

                }  

            }  

            int skip = Convert.ToInt32(queryString["$skip"]);  // paging 

            int take = Convert.ToInt32(queryString["$top"]);  

            return take != 0 ? new { Items = data.Skip(skip).Take(take).ToList(), Count = data.Count() } : new { Items = data, Count = data.Count() };  

        }  

          

 

Help documentation :  https://ej2.syncfusion.com/angular/documentation/grid/data-binding/#web-api  

Sample : http://www.syncfusion.com/downloads/support/directtrac/general/ze/angularwebapifilter1248297873   

 

Regards, 

Thavasianand S. 

[Unknown]

Hello,

I was asking not about WebAPI to get correct data but about FrontEnd what to do to see data in Filter dialog despite of what data I am getting from WebAPI because now when I add some text in Search box of Filter dialog - I get data from WebAPI but I see No Matches Found. Also after that when I click X (clear button) in search box - I still see No Matches Found.

Also when I am using Custom filter and trying to search value, I can see The Request Failed message.

By the way, I am using Syncfusion grids version 17.1.48 and my own WebAPI but still facing the same problem.

[Seeni Sakthi Kumar Seeni Raj]

Hi Customer,  

Please share the following details to analyze the problem at our end.  

1. Complete code of the Grid Component
2. dataSource binding
3. server-end code

Regards,  

Seeni Sakthi Kumar S. 

[Unknown]

Hello,

As I mentioned before you can represent this issue in StackBlitz example: https://stackblitz.com/edit/angular-yflj6f?file=app.component.ts

It is modified sample from examples having my mentioned problems. The problem are that we get data from WebAPI but this data is not displayed in Excel filter popup. For now I do not need correct data, I need the data to be displayed where it should be displayed. 

[Balaji Sekar]

Hi Customer, 

We have validated your query with provided the information and we found that webservices is not filtering operation handling on server-side. It is cause of the problem. We have created a sample with Excel Filtering binding in WebApi adaptor in Angular platform. Please refer the below code example and sample for more information. 

[fetchdata.component.html] 

<ejs-grid #grid [dataSource]='data' allowFiltering="true" allowPaging="true" allowSorting="true" height="320" [filterSettings]="filterSettings" (actionComplete)="onActionComplete($event)" > 

    <e-columns> 

        <e-column field='OrderID' headerText='Order ID' isPrimaryKey=true width='150'></e-column> 

        <e-column field='CustomerID' headerText='Customer Name' width='150'></e-column> 

        <e-column field='ShipCity' headerText='ShipCity' width='150' textAlign='Right'></e-column>       

    </e-columns> 

 

[fetchdata.component.ts] 

 

public onActionComplete(args:any){     

    if (args.requestType == 'filterafteropen') { 

        args.filterModel.sInput.onkeyup = this.addfilterParams.bind(this); 

    } 

} 

    public addfilterParams(args: any) {         

        if (this.grid.query.params.length > 0) { 

            this.grid.query.params = []; 

        } 

        this.grid.query.addParams("where", args.currentTarget.value);  // when put input value of excel filter search box to trigger and pass argument to server(its make search action  in excel filtering) 

    } 

} 

 

[OrderDetailsController.cs] 

 

public object Get() 

        { 

            var queryString = Request.Query; 

            var data = OrdersDetails.GetAllRecords().ToList();     

            string filter = queryString["$filter"]; 

            string where = queryString["where"]; //Get the addParam value from client 

            if (where != null && filter !=null) 

            { 

                var newfiltersplits = filter; 

                var filtersplits = newfiltersplits.Split('(', ')', ' '); 

                var filterfield = filtersplits[1] == "tolower" ? filtersplits[2] : filtersplits[1]; 

                var filtervalue = where; 

                if (data.Count == 0) { 

                    data = OrdersDetails.GetAllRecords().ToList(); 

                } 

                switch (filterfield) 

                { 

                    case "OrderID": 

 

                        data = (from cust in data 

                                where cust.OrderID.ToString() == filtervalue.ToString() 

                                select cust).ToList(); 

                        break; 

                    case "CustomerID": 

                        data = (from cust in data 

                                where cust.CustomerID.StartsWith(filtervalue.ToString()) 

                                select cust).ToList(); 

                        break; 

                    case "ShipCity": 

                        data = (from cust in data 

                                where cust.ShipCity.StartsWith(filtervalue.ToString()) 

                                select cust).ToList(); 

                        break; 

 

                } 

            } 

 

            int skip = Convert.ToInt32(queryString["$skip"]); 

            int take = Convert.ToInt32(queryString["$top"]); 

            return take != 0 ? new { Items = data.Skip(skip).Take(take).ToList(), Count = data.Count() } : new { Items = data, Count = data.Count() }; 

        } 

         

Sample link: https://www.syncfusion.com/downloads/support/forum/147163/ze/AngularWebapiExcelFiltering-55907163.zip 

Please get back to us, if you need further assistance: 

Regards, 

Balaji Sekar. 

  

  

[Hao]

Hi,

I got exactly the same issue. I always get the message "No Matches Found" when search for a result in header filter.

The data return from server correctly but the filter is wrong.

After debugging the code, I add this line query.isCountRequired = true; to my processQuery(), then it works fine

I used [email protected]

Is it a bug in data grid?

[Sujith Kumar Rajkumar]

Hi Hao, 

We checked your reported problem and would like to let you know that while typing in the filter search bar, the count required parameter will not be sent as it is not required for this case. This is its default behavior as only the result items need to be returned here as shown in the below image, 

 

So if the requires count parameter in the received request is not true, then please return the result alone back to the Grid from the server. 

We have prepared a sample based on this for your reference to check the request/response flow. You can find it below, 

Sample: https://stackblitz.com/edit/angular-dutycd?file=app.component.ts  

Let us know if you have any concerns. 

Regards, 

Sujith R 

[Hao]

Hi Sujith,

Sorry, I'm not clear your answer

I'm using pure javascript (typescript), not Angular

I have a project list retrieved from a server like this. When I click on the header triangle the checkboxes display correctly.

But when I type "PR" in the search, I got the message "No match found"

The server result a lot of records

If I use custom filter, I got error message "Request failed"

This is my custom adaptor

Regards,

Hao

[Sujith Kumar Rajkumar]

Hi Hao, 

 

While typing in the filter search box, you need to return only the result(record count is not needed in this case) from your server or the overridden Process Response method of the Custom Adaptor. 

 

The below image shows the response that needs to be returned from your server(results and count) when clicking on the filter icon(header triangle), 

 

 

 

And the below image shows the response that needs to be returned from your server(result alone) on typing in the filter search box, 

 

 

 

So for this case you can either directly return the data alone from the server or perform this action in the Process Response method of the custom adaptor. 

 

While typing in the filter search box, the Grid’s actionBegin event will be triggered with requestType argument as ‘filtersearchbegin’. A global flag variable can be enabled here to differentiate this case in the Process Response method. This is demonstrated in the below code snippet, 

 

var filterSearch = false; 

 

// Grid’s actionBegin event handler 

function onActionBegin(args) { 

    // A flag variable is enabled on filter search type 

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

        filterSearch = true; 

    } 

} 

 

class CustomAdaptor extends ODataAdaptor { 

    processResponse(): Object { 

        let original: { result: Object[], count: number } = super.processResponse.apply(this, arguments); 

        // The response is returned based on the flag variable 

        var out = (!filterSearch) ? { result: original.result, count: original.count } : original; 

        filterSearch = false; 

        return out; 

    } 

} 

 

We have prepared a Grid with Custom Adaptor sample based on this in TypeScript for your reference. You can find it below, 

 

Sample: https://stackblitz.com/edit/8ycna4?file=index.ts  

 

Let us know if you have any concerns. 

 

Regards, 

Sujith R 

[Hao]

Hi Sujith,

It works now after I follow your instruction

Thank you very much for your support. I just wonder why we have difference between the data return from filtersearchbegin and normal data? Is there any document about this? This makes it difficult to developer

But you're a very good supporter.

Regards,

Hao

[Sujith Kumar Rajkumar]

Hi Hao, 

 

You’re welcome. We are glad to hear that your query has been resolved. 

 

As for your question – “I just wonder why we have difference between the data return from filtersearchbegin and normal data?”, the data count is required by the Grid only for calculating the page sizes, count and it is not needed while searching in the excel checkbox. That is why the requires count is not sent for this case. We have logged a documentation internally to include this information in the help site. We will update and refresh it online as soon as possible. 

 

Let us know if you have any concerns. 

 

Regards, 

Sujith R