EssentialJs Grid with WebAPI and camelcase serialization

[Mitch]

Incident Link:
http://www.syncfusion.com/support/directtrac/incidents/141686
( Unsure if we should have posted this incident on the forums here instead. )

We are trying to get the syncfusion grid to play nice with our WebAPI based server. We have followed the sample here, which gets us almost there. The problem is our webapi server is configured to use camelCase based serialization, so all the server models come back with lower case property names, and the client side JS expects upper case members (e.g. result.Count, result.Items). Example attached (see WebApiConfig.cs)

We have also tried to override the adapter, like follows:

        var camelCaseWebApiAdaptor = new ej.WebApiAdaptor().extend({
            processResponse: function(data, ds, query, xhr, request, changes) {
                data.Items = data.items;
                data.Count = data.count;
                return ej.WebApiAdaptor.prototype.processResponse.call(this, data, ds, query, xhr, request, changes);
            }
        });

This works in that it will now display data in the grid. But then all the sorting/filtering/paging operations fail as the grid sends back camelCase member names to the server, and the server expects PascalCase members.

I know this is an edge case, but have you guys got any ideas?

Happy to turn off the camelCase serialization for all the .net syncfusion and OData related classes if you know how that is possible?

Reference:
https://www.syncfusion.com/forums/118071/editable-grid-powered-by-angularjs-javascript-and-mvc

Attachment: ServerOperations_209b65c5.zip

[Gowthami V]

Hi Mitch,

Thanks for using Syncfusion Products.

We have tested and modified the attached sample based on the requirement. Please download the modified sample from the following link:
Sample: ServerOperations_d028bb0e

We have changed the key value of JSON object to Pascal case (ex: “employeeID” into “EmployeeID”) in the process response function. So, if we perform the server side operation then grid will send the Pascal case members to the server. Please refer the below code example.

<div class="row">

    <div ej-grid id="Grid" e-width="500px" e-datasource="data" e-pagesettings-pagesize="3" e-allowsorting="true" e-allowfiltering="true" e-allowpaging="true" e-editsettings-allowadding="true" e-editsettings-allowdeleting="true" e-editsettings-allowediting="true" e-editsettings-showconfirmdialog="false" e-toolbarsettings-showtoolbar="true" e-toolbarsettings-toolbaritems="tools" e-locale="es-ES" e-showcolumnchooser="true">
        <div e-columns>
            <div e-column e-field="EmployeeID" e-headertext="Employee ID" e-isprimarykey="true" e-textAlign="right"></div>
            <div e-column e-field="Name" e-headertext="Employee Name" e-textalign="right"></div>
        </div>
    </div>

</div>

<script>
    angular.module("GridCtrl", ["ejangular"])
        .controller("bodyCtrl", function ($scope) {

            //Provide the datasource to the grid. Here the WebApiAdaptor is used.
            var camelCaseWebApiAdaptor = new ej.WebApiAdaptor().extend({
                processResponse: function (data, ds, query, xhr, request, changes) {

                    for (var i = 0; i < data.items.length; i++) {
                        var a = data.items[i];
                        for (var key in a) {
                            var temp;
                            if (a.hasOwnProperty(key)) {
                                temp = a[key];
                                delete a[key];
                                a[key.charAt(0).toUpperCase() + key.substring(1)] = temp;
                            }
                        }
                        data.items[i] = a;
                   }

                    data.Items = data.items;
                    data.Count = data.count;
                    return ej.WebApiAdaptor.prototype.processResponse.call(this, data, ds, query, xhr, request, changes);
                }
            });
            var dataManager = ej.DataManager({ url: "api/Orders", adaptor: "WebApiAdaptor" });
            dataManager.adaptor = new camelCaseWebApiAdaptor();
            $scope.data = dataManager;
            $scope.tools = ["add", "edit", "delete", "update", "cancel"];

        });
</script>

Note: But if the JSON key value is Camel Case by default, you need to check the condition as per key value instead of using the above code.

Please try using the above code and get back to us if you have any further assistance.

Regards,
Gowthami V.

[Mitch]

Thanks for that, it is now matching the property names correctly.

It now appears loading the remote data from our Web API picks up the total pages of the data-set fine.
However when we a apply a filter on the data-set the page is correctly filtered but the total number of pages is not updated to the total pages of filtered results. ( visible on the bottom right of the grid )
This is causing issues with the paging, since the range of pages accessible is still the full data-set total rather than the filtered data-set total.
So there are many pages with no data.

Is there way to update the page count to the filtered results page count?

[Saravanan Arunachalam]

Hi Mitch,

Thanks for your update.

In the previously provided sample, we have calculated the total records count before performing filter operation on server side which is the cause of the issue. Now we have modified the sample to calculate the records count after performing filter operation on the server side. Please refer the following code snippet.

[Controller]

public PageResult<EmployeePhoto> Get(ODataQueryOptions opts)

        {

            List<EmployeePhoto> emp = db.EmployeePhotos.ToList();

            var count = 0;

            var results = emp.AsQueryable(); 

            if (opts.InlineCount != null)

                count = results.Count();

            if (opts.Filter != null)

            {

                results = opts.Filter.ApplyTo(results, new ODataQuerySettings()).Cast<EmployeePhoto>();

                count = results.Count();

            }

            return new PageResult<EmployeePhoto>(opts.ApplyTo(emp.AsQueryable()) as IEnumerable<EmployeePhoto>, null, count);
        }

  
Please let us know if you have any queries.

Regards,
Saravanan.A

[Mitch]

Great, that's just what we were looking for.
Thanks!

[Gowthami V]

Hi Mitch,
Thanks for your update.
We are happy to hear that your issue has been resolved.
Please get back to us if you need further assistance. We will happy to assist you.
Thanks & Regards,
Gowthami V.