Client side paging tied to a RESTful API

[Miles Douglas]

I am trying to do client side paging and filtering on a grid with it hooked up to RESTful web api. When I set up my datasource like this:

            var dataManger = ej.DataManager({
                url: "/read",
                updateUrl: '/update',
                adaptor: 'UrlAdaptor',
                
            });

It tries to do server side paging and sends a POST request with the skips and takes to the server and won't do client side paging. If I add an offline:true:

            var dataManger = ej.DataManager({
                url: "/read",
                updateUrl: '/update',
                adaptor: 'UrlAdaptor',
                offline: true
            });

It will do a GET request and client side paging but when I try to update a cell it will never make an update call to the server.

Suggestions?

[Madhu Sudhanan P]

Hi Miles,

Thanks for using Syncfusion products.

We have analyzed your requirement and we can achieve your requirement with the help of RemoteSave Adaptor of the ejDataManager. The remoteSaveAdaptor will help to bind the local data to the grid and do all the grid actions such as sorting, paging, grouping etc. at the client side itself except that the CRUD operations alone will be performed at the server side.

The remoteSave adaptor can be used as follows.

<script type="text/javascript">

//Getting all the data from the server

var promise = ej.DataManager({ url: "/read", offline: true });

promise.ready.done(function (e) {

$("#Grid").ejGrid({

/* Provided the e.result to `json` property

* Specified the adaptor as ej.remoteSaveAdaptor()

* Now except CRUD, all actions will be performed at client side.

*/

dataSource: ej.DataManager({ json: e.result, updateUrl: '/update', adaptor: ej.remoteSaveAdaptor() }),

columns: [

.........

]

})

});
</script>

Now all the grid actions will be performed at the client side without querying server except the CRUD operations. Please refer the below help link for document on remote save adaptor and other available adaptors in ejDataManager.

http://help.syncfusion.com/ug/js/index.html#!Documents/dataadaptors.htm

Please let us know if you have any queries.

Regards,
Madhu Sudhanan. P

[dan]

I am getting an error when trying the below example using a customAdapter that extends an ODataAdaptor

Error:

Uncaught TypeError: Cannot read property 'apply' of undefined

  i

  (anonymous function)

  fire

  fireWith

  (anonymous function)

  (anonymous function)

  (anonymous function)

  fire

  fireWith

  done

  (anonymous function)

Adapter Code:

  var promise = ej.DataManager({url: INSTANCE_URL + '/api/v2/db/_table/', offline: true,
  adaptor: new syncfusionGridAdapter(),
  headers: [{"X-DreamFactory-API-Key": APP_API_KEY,"X-DreamFactory-Session-Token": token}]});

  promise.ready.done(function (e) {
  $("#Grid").ejGrid({
  dataSource:  ej.DataManager({ json: e.result, adaptor: ej.remoteSaveAdaptor() }),
  columns: ["id","last_name","first_name"
  ]
})
  });

My customAdapter works fine when not using remoteSaveAdapter

[Mani Sankar Durai]

Hi Miles, 

We have analyzed your query and we are able to reproduce this issue only when using ODataAdaptor without passing any URL to the dataSource. Also we suspect that you didn’t mentioned any URL to bind the data when using ODataAdaptor in grid. When using ODataAdaptor it is necessary to mention the URL. Also before proceeding please provide us the following details. 

1.       Share the full grid code that you have rendered. 

2.       You have used custom adaptor named as syncfusionGridAdaptor(). So please share the code details of custom adaptor that how you have returned the JSON data. 

3.       If possible please reproduce the issue in the simple sample. 

The provided information will help us to analyze the issue and provide you the response as early as possible. 

Please let us know if you need further assistance. 

Regards, 

Manisankar Durai.