Angular Grid with Spring Data Rest - HATEOAS

[Shannon Pence]

Is there an example of using the Grid component - Paging and Sorting with Spring Data Rest?

Spring Data Rest returns the following data.

{

"_embedded": {

"CmnNotes": [

{

"id": "208e740b-ab13-420d-b44e-66282ee2eb44",

"parentId": "086cc930-a3db-4e7e-9250-72ae22164dd8",

"parentName": "Pattie Kohler DVM",

"parentUrl": "koelpin.name",

"relatedId": null,

"deleted": false,

"createdDate": "2020-09-22T17:12:16.562488",

"createdBy": "addbfbe5-a102-453c-9c36-e230d94c071c",

"createdByName": "Evonne Will III",

"lastModifiedDate": "2020-10-31T12:33:16.562565",

"lastModifiedBy": "8f2146e6-c960-4b84-9c79-2ea17a5a6d46",

"lastModifiedByName": "Mrs. Elwood Walter",

"name": "Hayes, Cristobal",

"description": "A camera cancelled after one car ran under some tour booked after the insurance follow from the customer deliver until some coast ran at the car booked over any hotel.",

"active": false,

"_links": {

"self": {

"rel='nofollow' href": "http://localhost:7150/api/cmn-notes/208e740b-ab13-420d-b44e-66282ee2eb44"

},

"note": {

"rel='nofollow' href": "http://localhost:7150/api/cmn-notes/208e740b-ab13-420d-b44e-66282ee2eb44"

}

}

}

]

},

"_links": {

"first": {

"rel='nofollow' href": "http://localhost:7150/api/cmn-notes?page=0&size=20"

},

"self": {

"rel='nofollow' href": "http://localhost:7150/api/cmn-notes"

},

"next": {

"rel='nofollow' href": "http://localhost:7150/api/cmn-notes?page=1&size=20"

},

"last": {

"rel='nofollow' href": "http://localhost:7150/api/cmn-notes?page=2&size=20"

},

"profile": {

"rel='nofollow' href": "http://localhost:7150/api/profile/cmn-notes"

},

"search": {

"rel='nofollow' href": "http://localhost:7150/api/cmn-notes/search"

}

},

"page": {

"size": 20,

"totalElements": 50,

"totalPages": 3,

"number": 0

}

}

[Manivel Sellamuthu]

Hi Shannon, 

Thanks for contacting Syncfusion support. 

Based on your query you need to use Spring Data Rest as dataSource for the Syncfusion Grid.  By default in EJ2 Grid we have built-in support for data Adaptors,  Json Adaptor, UrlAdaptor ,RemoteSave Adaptor, etc., and each adaptor uses different way in accepting request and sending back the response by DataManager. It uses the adaptor concept to communicate with particular data source. 

 

Adaptors Documentation: https://ej2.syncfusion.com/documentation/data/adaptors/ 

 

Grid with On-demanding data adaptor Documentation: https://ej2.syncfusion.com/aspnetcore/documentation/grid/data-binding/#handling-on-demand-grid-actions      

 

For example, we have bound the remote data to Grid component using Url Adaptor. In server side, We need to convert the remote service data into IEnumerable/IQueryable type and the response object should contain properties result and count whose values are collection of entities and total count of the entities respectively. 

Please find the below reference code blocks. 

[Server-side code- HomeController.cs] 

        public ActionResult UrlDatasource([FromBody]DataManagerRequest dm) 

        { 

            IEnumerable DataSource = _context.Orders.ToList(); // You need to convert the SQL Apex data to IEnumerable type 

            DataOperations operation = new DataOperations(); 

            if (dm.Sorted != null && dm.Sorted.Count > 0) //Sorting 

            { 

                DataSource = operation.PerformSorting(DataSource, dm.Sorted); 

            } 

            int count = DataSource.Cast<Orders>().Count(); 

            if (dm.Skip != 0)//Paging 

            { 

                DataSource = operation.PerformSkip(DataSource, dm.Skip);          

            } 

            if (dm.Take != 0) 

            { 

                DataSource = operation.PerformTake(DataSource, dm.Take); 

            } 

            

            return Json(new { result = DataSource, count = count }); // It should return Json object in result and count format 

        } 

When you use UrlAdaptor the DataSource must be set to url property and set UrlAdaptor to the adaptor property.  

If you bind remote data to Grid without using adaptor, It is possible to handle data processing externally and bind the result to the grid. This help you to provide your own custom data logic. Grid expects an object as the result of the custom logic and the emitted value should be an object with properties result and count.  

For every grid actions(such as filter, page etc.,) we have triggered the dataStateChange event and in that event arguments we have send the corresponding action details(like skip, take, filter field, value, sort direction etc.,)  based on that you can perform the action in your service and return data as result and count object.   

Note:  ‘dataStateChange’ event is not triggered at the Grid initial render. You need to call your remote service by manually with pagination query (need to set skip value as 0 and take value based on your pageSize of pageSettings in Grid. If you are not defined pageSize in pageSettings , you need send the default value as 12 ) in dataBound event of Grid. and please return the result like as “{result: […], count: …}” format to Grid 

API links: https://ej2.syncfusion.com/documentation/api/grid/#datastatechange 

                 https://ej2.syncfusion.com/documentation/api/grid/#datasource 

Please get back to us, if you need any further assistance. 

Regards, 

Manivel 

[Shannon Pence]

Thank you for the response.  I did look at the Adapters.  The json adapter seemed logical.  Very little documentation was found for it.  The backend response is not something I want to change for the UI.  The UI needs to adapt to the backend.  We have no intention of supporting odata on the backend.

[Manivel Sellamuthu]

Hi Shannon, 

Thanks for your update. 

Based on your query we suspect that you are having OData and do not want to handle the grid actions on the backend. So we suggest you to use ODataAdaptor with offline as true for your requirement. 

When we define offline as true, then the grid to load all data on initial rendered and it will avoid postback for every Grid action performing ( the Grid action executed only at client-side).  Please refer the below documentation for  more information. 

import { Component, OnInit } from '@angular/core'; 

import { DataManager, ODataAdaptor } from '@syncfusion/ej2-data'; 

 

@Component({ 

    selector: 'app-root', 

    template: `<ejs-grid [dataSource]='data' [allowPaging]='true' [allowGrouping]='true' [allowSorting]='true' [pageSettings]='pageOptions'> 

. . . 

                </ejs-grid>` 

}) 

export class AppComponent implements OnInit { 

 

    public data: DataManager; 

    public pageOptions = { pageSize: 7 }; 

 

    ngOnInit(): void { 

        this.data = new DataManager({ 

            url: 'https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Orders?$top=7', 

            adaptor: new ODataAdaptor(), 

            offline: true 

        }); 

    } 

} 

Documentation: https://ej2.syncfusion.com/angular/documentation/grid/data-binding/#offline-mode 

Please let us know, if you need further assistance. 

Regards, 

Manivel