How to work with a custom REST web service?

[Rainier Wolfcastle]

I have a lot of existing web services (written in C# .NET with WCF) and would like to know if it's possible to connect the Essential Studio JavaScript widgets up to a custom service? All the online demos just talk to a DataManager and don't actually explain what format the data needs to be in from the server.

I'm evaluating your product since Sencha massively increased their prices for Ext JS. My web services return a JSON-serialised object similar to this:

{

    "data": [

        {

            "SupervisorName":"Smithers, Waylon",

            "EmployeeID":123456,

            "FamilyName":"Simpson",

            "Gender":"Male",

            "GivenName":"Homer",

            "LastUpdate":"\/Date(1415748740403+1100)\/",

            "MiddleName":"J",

            "Phone":"555 1234"

        }

    ],

    "message":"",

    "success":true,

    "total":10

}

The .data property would contain more than just one row, mostly, but only the rows in the current page of data for a grid. The .total represents the maximum number of records that could possibly be paged through, not the number of records in the current page.

Any ideas? So far it seems that you expect things like this:

d {

    count: 123,

    results: [

        // array of records here

    ]

}

It would be great to read some actual documentation, though. I also find the .message property helpful with Ext JS because it contains an error message (if appropriate) or a "Record saved successfully" message, perhaps. How does this framework handle errors?

[Alan Sangeeth S]

Hi Rainier,

 

Thanks for using Syncfusion Products.

 

Query 1: “Remote binding with server-side paging”

 

We would like to let you know that when we use Remote binding with server-side paging, we need to return the data as JSON and the JSON object must contain field name as “result” with its value as dataSource and one more field name as “count” with its value as dataSource total records count.

 

But from your code snippets we found that your web services return a JSON-serialised object as “data” and “total” and we have created a custom Adaptor of DataManager to bind data which are returned as “data” and “total”. And in the Grid “load” event we have assigned the Custom Adaptor to Grid DataSource property. Please refer the following code snippets.

var customAdaptor = new ej.UrlAdaptor().extend({//creating custom adaptor by extending UrlAdaptor of DataManager

        processResponse: function (data, ds, query, xhr, request, changes) {

 

            var pvt = request.ejPvtData || {};

            data.result = data.data; // converting data and total values as "result" and "count" for further grid processing

            data.count = data.total;

...

            return data;

        }

    });

 

$("#Grid").ejGrid({

            // the datasource "window.gridData" is referred from jsondata.min.js

            dataSource: ej.DataManager({url: "Home/Datasource", ..})

...

load:'loadHandler'

        });

 

function loadHandler(args) {

        this.model.dataSource.adaptor = new customAdaptor()
 }

 

 

Query 2: “read some actual documentation”

 

Please refer the following DataManager Custom Adaptor documentation for further reference.

 

http://help.syncfusion.com/ug/js/documents/conceptsandfeatures10.htm

 

 

Query 3: “handle errors”

 

We would like to let you know that using “validationRules” property of Grid Columns we can add validation to the Grid columns. Please refer the following code snippets.

$("#Grid").ejGrid({
...
columns: [

                    { field: "OrderID", isPrimaryKey: true, headerText: "Order ID", textAlign: ej.TextAlign.Right, validationRules: { required: true, number: true }, width: 90 },

                    { field: "CustomerID", headerText: 'Customer ID', validationRules: { required: true, minlength: 3 }, width: 90 },
....

})

 

 

Please refer the following documentation for further details about Validation in Grid.

http://help.syncfusion.com/ug/js/documents/validation.htm

 

We also would like to let you know that the “validationRules” property performs client-side validation and if we misunderstood your requirement or if you need server-side validation then please get back to us so that we could provide a response as early as possible.

 

For your convenience we have created a sample and the same can be downloaded from below link

Sample: http://www.syncfusion.com/downloads/support/directtrac/131546/EJGrid-1657659330.zip

 

Please let us know if you have any queries.

Regards,

Alan Sangeeth S

[Rainier Wolfcastle]

Thanks for providing the demo zip file. It's quite a lot to take in, though it doesn't compile at the moment. No doubt I've got to license a trial version and add some DLL references.

The style of development with Syncfusion is quite different to Ext JS (which is probably the odd one out). The client/server code seem to be closely coupled as opposed to Ext JS where javascript project & .NET service code are 100% separate beasts. It'll take me some time to absorb all of this and do a proper evaluation.

With regard to handling errors, I was getting at how a DataManager for a grid, for example, might show you a message box if the server couldn't process a request. Does it handle errors gracefully which we can capture and show to the user in a message box or does it redirect to a separate error page?

Thanks again.

[Ajith R]

Hi Rainier,

 

Thanks for your update.

 

Query: The client/server code seem to be closely coupled as opposed to Ext JS 

 

We have consider your requirement as feature request and we have created a separate incident “#132631” to follow up the feature for better follow up. We will update the response for other queries in the above mentioned incident.

 

Please let us know if you have any concerns.

 

Regards,

Ajith R