Grid foreign key column won't save new dropdown selections, only update existing non null selections

[Andy]

I'm having an odd problem with my KendoUI grid using Odata-V4. I have a foreign key lookup, and if I have a value in the lookup field, I can update it just fine- I get an indicator that the field is dirty and it's updated when I save the grid. However, if there is no value when I load the item, I can choose an item in the dropdown but the selection isn't saved- the grid shows a blank value when I focus away from the foreign key dropdown and I can't save the grid; if I change another value and save it, the FK dropdown didn't set the value in the object. I'm hoping someone's run into this before? Thanks so much for any input.

 

var dataSource = new kendo.data.DataSource({
                type: "odata-v4",
                transport: {
                    read: {
                        xhrFields: { withCredentials: true },
                        url: "/odata/ProvisionalAppointments"
                    },
                    update: {
                        xhrFields: { withCredentials: true },
                        url: function (data) {
                            return "/odata/ProvisionalAppointments(" + data.Id + ")";
                        }
                    }
                },
                schema: {
                    model: {
                        id: "Id",
                        fields: {
                            Id: {type: "number" },
                            CustomerFirstName: { type: "string", editable: false },
                            CustomerLastName: { type: "string", editable: false },
                            CustomerPhoneNumber: { type: "string", editable: false },
                            FromDate: { type: "date", editable: false },
                            ToDate: { type: "date", editable: false },
                            ServiceId: { type: "number" },
                            LocationId: { type: "number" },
                            EmployeeId: { type: "number" },
                            IsApproved: { type: "bool" }
                        }
                    }
                },
                pageSize: 5,
                serverPaging: true,
                serverFiltering: true,
                serverSorting: true
            });

 

var servicesDataSource = new kendo.data.DataSource({
                type: "odata-v4",
                transport: {
                    read: {
                        xhrFields: { withCredentials: true },
                        url: "/odata/Services"
                    }
                },
                schema: {
                    model:
                    {
                        id: "Id",
                        fields:
                        {
                            Id: {
                                editable: false
                            },
                            Name: {
                                type: "string"
                            }
                        }
                    }
                },
                pageSize: 20,
                serverPaging: true,
                serverFiltering: true,
                serverSorting: true
            });

 

$("#grid").kendoGrid({
                    dataSource: dataSource,
                    toolbar: ["save", "cancel", "excel", "pdf"],
                    excel: {
                        allPages: true,
                        filterable: true
                    },
                    pdf: {
                        allPages: true
                    },
                    sortable: { mode: "multiple" },
                    pageable: {
                        pageSizes: [5, 10, 20, 50]
                    },
                    editable: true,
                    reordable: true,
                    resizable: true,
                    columns: [
                        { field: "CustomerFirstName", title: "First Name" },
                        { field: "CustomerLastName", title: "Last Name" },
                        { field: "CustomerPhoneNumber", title: "Phone" },
                        { field: "FromDate", title: "When", template: '#= kendo.toString(kendo.parseDate(FromDate), "M-d h:mm tt")#-#= kendo.toString(kendo.parseDate(ToDate), "h:mm tt")#' },
                        { field: "ServiceId", title: "Service", dataTextField: "Name", dataValueField: "Id", dataSource: locationsDataSource },
                        { field: "LocationId", title: "Location", dataTextField: "Name", dataValueField: "Id", dataSource: locationsDataSource },
                        { field: "EmployeeId", title: "Employee", dataTextField: "Name", dataValueField: "Id", dataSource: employeesDataSource },
                        {
                            command: [{ name: "approve", template: "<a class='k-button k-grid-approve approve'><span class='k-icon k-i-check-outline'></span>Approve</a>", visible: function (dataItem) { return dataItem.IsApproved === null; }, click: approveAppointment },
                            { name: "revokeApproval", template: "<a class='k-button k-grid-revokeApproval approved'><span class='k-icon k-i-check-circle'></span>Undo Approval</a>", visible: function (dataItem) { return dataItem.IsApproved === true; }, click: revokeApproveAppointment },
                            { name: "reject", template: "<a class='k-button k-grid-reject reject'><span class='k-icon k-i-cancel'></span>Reject</a>", visible: function (dataItem) { return dataItem.IsApproved === null; }, click: rejectAppointment },
                            { name: "revokeRejection", template: "<a class='k-button k-grid-revokeRejection rejected'><span class='k-icon k-i-cancel-circle'></span>Undo Rejection</a>", visible: function (dataItem) { return dataItem.IsApproved === false; }, click: revokeApproveAppointment }
                            ], width: "275px"
                        }
                    ],
                    allowCopy: {
                        delimeter: ","
                    },
                    mobile: true,
                    navigatable: true
                });

[Angel Petrov]

Hi,

We have not been contacted for such a behavior so far. The configuration seems correct. Can you please send us a dojo example that illustrates this?

Regards,
Angel Petrov
Progress Telerik

[Andy]

Hi, sorry I'm just now getting around to this. Here is the dojo example:

 

https://dojo.telerik.com/AxewabAX

It works fine to change an existing value, but if you add a new row and select a category and then take focus away, there's an indicator that the cell has changed but the value is not persisted.

Here's a very similar one where the lookup is done via a JS array and it works just fine:

 

https://dojo.telerik.com/OqiWaCET

[Georgi]

Hi Andy,

Thank you for the provided sample. I have examined it and I noticed that there is a typo in the column.dataValueField setting. Instead of "CategoryID", the value was "CategoryId", thus, the mapper failed to assign the correct value.

I have updated the sample and now it appears to work as expected:

• https://dojo.telerik.com/AxewabAX/2

Even when I create new item, after selecting a category the value is applied.

Regards,
Georgi
Progress Telerik

[Andy]

Hi,

Sorry that I waited so long to reply to this, but I got frustrated and moved to something else. Now it's about the last thing that I have to do before launching, so I have to ride it until I fix it.

I've figured out that the issue is existing rows coming in with a null value for the row I'm editing. I can't simulate that on the dojo since I don't see any entities that return a nullable value as null, so I've reproduced it here:

http://backofficescheduler.com/app/index1

The two grids are nearly identical, but one includes a service that returns rows with nullable values and one doesn't. You'll notice that you can select new category values for new rows on the second grid but not on the first- as soon as the dropdown loses focus the value is lost and the row isn't marked as dirty.

[Georgi]

Hi Andy,

I am sorry to hear about your frustrating experience.

One way to avoid the current behavior is to create a custom drop down editor for the foreign key column and set its valuePrimitive setting to true. Please refer to the following forum thread for further information and a sample:

• https://www.telerik.com/forums/foreign-key-fields-with-null-values

 

Regards,
Georgi
Progress Telerik