This is a migrated thread and some comments may be shown as answers.

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

5 Answers 595 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Andy
Top achievements
Rank 1
Veteran
Andy asked on 25 Aug 2020, 09:23 PM

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
                });

5 Answers, 1 is accepted

Sort by
0
Angel Petrov
Telerik team
answered on 27 Aug 2020, 02:26 PM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Andy
Top achievements
Rank 1
Veteran
answered on 19 Sep 2020, 12:48 PM

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

0
Georgi
Telerik team
answered on 22 Sep 2020, 12:54 PM

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:

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

Regards,
Georgi
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Andy
Top achievements
Rank 1
Veteran
answered on 14 Nov 2020, 10:36 PM

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.

0
Georgi
Telerik team
answered on 17 Nov 2020, 12:33 PM

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:

 

Regards,
Georgi
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Grid
Asked by
Andy
Top achievements
Rank 1
Veteran
Answers by
Angel Petrov
Telerik team
Andy
Top achievements
Rank 1
Veteran
Georgi
Telerik team
Share this question
or