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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Filter dialog not showing data using remote data

Thread ID:

Created:

Updated:

Platform:

Replies:

147163 Sep 3,2019 12:54 PM UTC Sep 11,2019 04:05 AM UTC Angular - EJ 2 5
loading
Tags: Grid
Unknown
Asked On September 3, 2019 12:54 PM UTC

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 [Syncfusion]
Replied On September 4, 2019 11:52 AM UTC

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() };  
        }  
          
 

 
Regards, 
Thavasianand S. 


Unknown
Replied On September 5, 2019 06:35 AM UTC

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 [Syncfusion]
Replied On September 9, 2019 01:53 PM UTC

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
Replied On September 9, 2019 02:09 PM UTC

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 [Syncfusion]
Replied On September 11, 2019 04:05 AM UTC

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() }; 
        } 
         


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

Regards, 
Balaji Sekar. 
  
  


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