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

[Karol Wlodarek]

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]

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.  

 

Sample: http://www.syncfusion.com/downloads/support/forum/130877/ze/EJGrid1907735742.zip 

 

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. 

 

https://help.syncfusion.com/angular-1/grid/data-binding#remote-data 

 

Regards,  

Seeni Sakthi Kumar S. 

[Karol Wlodarek]

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]

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> 

 

https://help.syncfusion.com/js/grid/data-binding#webapi 

 

Regards,  

Seeni Sakthi Kumar S. 

[Karol Wlodarek]

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]

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.  

 

Sample: http://www.syncfusion.com/downloads/support/forum/130877/ze/F130877-2003811012.zip 

 

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.