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

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

Thread ID:

Created:

Updated:

Platform:

Replies:

130877 Jun 8,2017 04:57 AM Jun 21,2017 05:14 AM AngularJS 5
loading
Tags: ejGrid
Karol Wlodarek
Asked On June 8, 2017 04:57 AM

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

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On June 9, 2017 02:54 AM

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. 


Karol Wlodarek
Replied On June 9, 2017 06:09 AM

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

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On June 12, 2017 08:12 AM

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. 


Karol Wlodarek
Replied On June 20, 2017 06:29 AM

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

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On June 21, 2017 05:14 AM

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. 


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.

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.

;