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
  1. Home
  2. Forum
  3. AngularJS
  4. How to catch filtering query to use remote OData service on filtering/paging event

How to catch filtering query to use remote OData service on filtering/paging event

Hi,
I have problem with connecting your two properties in EjGrid Control. 
I need to connect Filtering and DataManager Control. After each filltering I need to pass query into DataManager, but I haven't found any 'afterFilltering' or 'afterPaging' event in the documentation. Is it possible for grid to call Web API directly and execute query again on server site after filtering, so the paging would be maintained.
Our desired result is to achieve flexible paging and filtering, where we call API every time we change page or filter data and then execute query agian, so we get minimal amount of data.

Best Regards,
Karol

5 Replies
SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team June 9, 2017 06:54 AM UTC

Hi  
 
Thanks for contacting Syncfusion Support.  
 
As per your requirement, we have prepared a sample that handling OData call which can be downloaded from the following location.  
 
 
Refer to the following code example and outputs at different scenarios. 
 
 
<div ng-app="listCtrl"> 
    <div ng-controller="PhoneListCtrl"> 
        <div id="Grid" ej-grid e-datasource="data" e-allowpaging="true" e-allowfiltering="true"> 
            <div e-columns> 
                  . ..  
            </div> 
        </div> 
        <script> 
 
            angular.module('listCtrl', ['ejangular']) 
            .controller('PhoneListCtrl', function ($scope) { 
                $scope.data = ej.DataManager({ url: "/odata/Orders", adaptor: new ej.ODataV4Adaptor() }) 
            }); 
        </script> 
    </div> 
</div> 
 
 
1)      At initial render of the Grid (skip and take), used to collect the records and populate them in Grid 
 
 
 
2)      Skip/take while paging action 
 
 
 
 
3)      $filter variable handles the filter query 
 
 
 
 
Refer to the following Help Document. 
 
 
Regards,  
Seeni Sakthi Kumar S. 


KW Karol Wlodarek June 9, 2017 10:09 AM UTC

Hello, 
The above example proved to be helpful, but implementation brought some errors.
During view initialization DataManager calls Web API with correct URL as presented in the example, but somehow API is called five times returning every time correct data, but none of these calls update Grid. 
I suppose reason for this are errors in browser console (returned from Your library).
I wonder wheather it is library error or it is caused by wrong usage.Below I attach screens and code snippet.

<div id="Grid" ej-grid
e-datasource="data"
e-allowgrouping="true"
e-allowfiltering="true"
e-filtersettings="filterType"
e-allowPaging="true">
<div e-columns>
<div e-width="25%" e-column e-field="name" e-headertext="TKey('lblName') | translate"></div>
<div e-width="35%" e-column e-field="description" headertext="TKey('lblDescription') | translate"></div>
<div e-width="30%" e-column e-field="creatorName" headertext="TKey('lblCreatedBy') | translate"></div>
<div e-width="10%" e-column e-field="currentStatus" headertext="TKey('lblStatus') | translate"></div>
</div>
</div>

1st usage:
let customAdaptor = new ej.ODataV4Adaptor().extend({
beforeSend: function (request, settings) {
settings.setRequestHeader('Authorization', 'Bearer ' + localStorage.getItem('access_token'));
}
});

        this.$scope.data = ej.DataManager({
url: "/api/Project/",
            headers: [{'Authorization': 'Bearer ' + localStorage.getItem('access_token')}],
adaptor: new ej.ODataV4Adaptor()
});

2nd usage:
this.$scope.data = ej.DataManager({
url: "/api/Project/",
adaptor: new customAdaptor()
});







Regards,
Karol

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team June 12, 2017 12:12 PM UTC

Hi Karol,  
 
The reported problem may occur due to the absence of the Count property in the resultant object of the server-end. Also, we suspect that you are using a WebApi service in your application. But the adaptor is assigned as the OdataV4Adaptor which is not the recommended implementation. So, we suggest to assign the adaptor as the WebApiAdaptor and return object wrapped with the Items/Count pair from the server-end.  
 
        MyDataDataContext db = new MyDataDataContext(); 
        public object Get() 
        {  
            var queryString = HttpContext.Current.Request.QueryString; 
            int skip = Convert.ToInt32(queryString["$skip"]); 
            int take = Convert.ToInt32(queryString["$top"]); 
            var data = db.Orders.Skip(skip).Take(take).ToList(); 
            return new { Items = data.Skip(skip).Take(take), Count = data.Count() }; 
        } 
 
        <div id="Grid" ej-grid e-datasource="data" e-allowpaging="true" e-allowfiltering="true"> 
                 . .  
                        . .  
             </div> 
        </div> 
        <script> 
 
            angular.module('listCtrl', ['ejangular']) 
            .controller('PhoneListCtrl', function ($scope) { 
                $scope.data = ej.DataManager({ url: "/api/Orders", adaptor: new ej.WebApiAdaptor() }) 
            }); 
        </script> 
 
 
Regards,  
Seeni Sakthi Kumar S. 


KW Karol Wlodarek June 20, 2017 10:29 AM UTC

Hi,

I change my adaptor like you said and It nothing has improved.
I have same errors in browser console.
My api ctrl return correct data, but this ej.Datamanager cannot display correctly this data.

this.$scope.data = ej.DataManager({
url: "/api/Project/",
adaptor: new ej.WebApiAdaptor(),
headers: [{'Authorization': 'Bearer ' + localStorage.getItem('access_token')}]
});

[HttpGet]
[ActionName("Get")]
public object GetAll()
{
    IQueryable<ProjectModels.Project.Dto> projects = this.projectProvider.GetAll(User.Identity.GetUserId())
        .AsQueryable();
 
    var queryString = HttpContext.Current.Request.QueryString;
    int skip = Convert.ToInt32(queryString["$skip"]);
    int take = Convert.ToInt32(queryString["$top"]);
    var data = projects.Skip(skip).Take(take).ToList();
    return new { Items = data.Skip(skip).Take(take), Count = data.Count() };
}





Best Regards,
Karol

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team June 21, 2017 09:14 AM UTC

Hi Karol,  
 
We can reproduce the problem at our end after enabling camelCase for the JsonFormatter in the codebehind which is the cause of the problem. Since camelCase property of JSONFormatter changes the case of the “Items” to “items” and “Count” to “Count” while returning the response from the server-end, the reported issue occurs and WebApiAdaptor will accept the response as Items and count pair which is in the PascalCase. If would like to use the camelCase at the server-side, you must return the Object as the “Result” or “result” and “Count” pair from the server. Refer to the following code example. 
 
        public object Get() 
        { 
            var json = GlobalConfiguration.Configuration.Formatters.JsonFormatter; 
            json.SerializerSettings.ContractResolver = new CamelCasePropertyNamesContractResolver();  
 
            if (order.Count == 0) 
                BindDataSource(); 
            var data = order; 
            var queryString = HttpContext.Current.Request.QueryString; 
            int skip = Convert.ToInt32(queryString["$skip"]); 
            int take = Convert.ToInt32(queryString["$top"]); 
            data = data.Skip(skip).Take(take).ToList(); 
            return new { Result = data, Count = order.Count() }; 
        } 
 
We have prepared a sample that can be downloaded from the following location.  
 
 
If you are still facing any problem at our end, please share the following details to analyze the problem at our end.  
 
1)      Code example of the Grid and code behind 
2)      Screenshot with the replication procedure or video demo of the problem.  
3)      Version of the Essential Studio 
4)      If possible, modify the attached sample and reproduce the problem at our end.  
 
Regards, 
Seeni Sakthi Kumar S. 


Loader.
Up arrow icon