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

6 posts, 0 answers
  1. Andy
    Andy avatar
    18 posts
    Member since:
    Sep 2017

    Posted 25 Aug 2020 Link to this post

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

  2. Angel Petrov
    Admin
    Angel Petrov avatar
    1155 posts

    Posted 27 Aug 2020 Link to this post

    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/.

  3. Andy
    Andy avatar
    18 posts
    Member since:
    Sep 2017

    Posted 19 Sep 2020 in reply to Angel Petrov Link to this post

    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

  4. Georgi
    Admin
    Georgi avatar
    703 posts

    Posted 22 Sep 2020 Link to this post

    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/.

  5. Andy
    Andy avatar
    18 posts
    Member since:
    Sep 2017

    Posted 14 Nov 2020 in reply to Georgi Link to this post

    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.

  6. Georgi
    Admin
    Georgi avatar
    703 posts

    Posted 17 Nov 2020 Link to this post

    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/.

Back to Top