ejGrid with OData Update Single Column + Date format while sending to server is causing bad request

[Adeel Rizvi]

Hello,

This is my code 

 $(function () {
            window.dataManager = ej.DataManager({
                url: "somedata.svc/Invoices"
            });
            $("#Grid").ejGrid({
                dataSource: window.dataManager,
                toolbarSettings: {
                    showToolbar: true,
                    toolbarItems: [
                       ej.Grid.ToolBarItems.Edit,
                       ej.Grid.ToolBarItems.Update,
                       ej.Grid.ToolBarItems.Cancel
                    ]
                },
                editSettings: { allowEditing: true },
                allowPaging: true,
                columns: [
                    { field: "InvoiceID", headerText: "Invoice ID", width: 75, isPrimaryKey: true },
                    { field: "InvoiceDate", headerText: "Invoice Date", width: 75, format: "{MM/dd/yyyy}", allowEditing: false },
                    { field: "TotalAmount", headerText: "Total Amount", width: 80, allowEditing: false, textAlign: ej.TextAlign.Right, format: "{0:c2}" },

                    { field: "AmountPaid", headerText: "Amount Paid", width: 100, textAlign: ej.TextAlign.Right, format: "{0:c2}" },
                    { field: "Balance", headerText: "Balance", width: 100, allowEditing: false, textAlign: ej.TextAlign.Right, format: "{0:c2}" }
                ]
            });
        });

There 2 problems i am facing, 1st i don't know to update only single cell to server not whole data and because its using PUT method i have to pass whole data. how i can just update the single cell to server i don't want to send every field to server???

2. At the time of load the InvoiceDate showing me "07/27/2015" which is right but when i double click on the editable field the InvoiceDate show like this "Mon Jul 27 2015 01:47:22 GMT+0500 (Pakistan Standard Time)" and once i click save it its still showing the same long format and the ejGrid sending the data to server in the same format which casues 400 bad request with inner exception "Input string was not in a correct format." because of this date format see the header below :

Host: store.somedata.com

User-Agent: Mozilla/5.0 (Windows NT 6.2; WOW64; rv:39.0) Gecko/20100101 Firefox/39.0

Accept: application/json, text/javascript, */*; q=0.01

Accept-Language: en-US,en;q=0.5

Accept-Encoding: gzip, deflate

Content-Type: application/json; charset=utf-8

DataServiceVersion: 2.0

MaxDataServiceVersion: 2.0

X-Requested-With: XMLHttpRequest

Referer: http://store.somedata.com/customer.html?id=1

Content-Length: 357

Cookie: ASP.NET_SessionId=3rq1xc1x03iyzh5v32okssxl

Connection: keep-alive

{"InvoiceID":1,"InvoiceDate":"Mon Jul 27 2015 01:47:20 GMT+0500 (Pakistan Standard Time)","TotalAmount":"2500.0000","AmountPaid":"34","Balance":"2500.0000"}

Please help to resolve these issues

[Madhu Sudhanan P]

Hi Adeel,

Thanks for using Syncfusion products.

Query #1: “how can I just update the single cell to server I don't want to send every field to server?”

From the query we understood that you don’t want to send the column values whose allowEditing property is set as  false. If so we can achieve this requirement with the following code snippet.

$("#Grid").ejGrid({

                . . . . . . .

               actionBegin: function (args) {

                    if (args.requestType == "save") {

                        cols = this.model.columns, len = cols.length

                        while (len--) {

                            /* Deleting the records with allowEditing disabled

                             * Now the edited values alone will be send(In your case single cell value)

                             */

                            if (!ej.isNullOrUndefined(cols[len]["allowEditing"]) && !cols[len]["allowEditing"])

                                delete args.data[cols[len]["field"]];

                        }

                    }

                }
            });

In the above we have removed the values from the edited data in the actionBegin event. Now while saving the values of the column with allowEditing as true will alone be send to the server in your case the value of the column AmountPaid will be send to  the server.

Query #2: “ejGrid sending the data to server in the same format which causes 400 bad request with inner exception "Input string was not in a correct format."”

The issue is due to the fact that while editing the string edit type will be used by the column when no editType is specified and hence to resolve this issue please provide the editType for the InvoiceDate column as follows.

$("#Grid").ejGrid({
. . .  . . . .

columns: [

{ field: "InvoiceDate", headerText: "Invoice Date", editType: ej.Grid.EditingType.DateTimePicker, width: 75, format: "{0:MM/dd/yyyy}", allowEditing: false },
. . . . .
]      

});         

Now the DateTimePicker will used for editing and the correct value will be send to the server. And also we noticed that you have specified the format value as {MM/dd/yyyy} which is invalid. The format value should be wrapped within  {0: and }, please refer the above code for correct format value.   

Please let us know if you have any queries.

Regards,
Madhu Sudhanan. P