Grid with inline editor dropdown lookup not holding text description in grid

[Michael]

I'm having a problem with the Grid where what I'm trying to do, is have a lookup dropdownlist in one of my fields. When the user clicks the field, the dropdown does show itself with the correct items, but when I select something and tab off to the next field (or just move away from the field), it reverts back to the previously selected value, or or shows a null in the table. That being said, if I click save changes, it is actually editing the correct field in one of the tables.

My issue is, When a user clicks on a product in the productFK field, I need the selected description to stay put, yet, when I click save changes, the respective Foreign key for that product gets inserted/updated into my stored proc, and not the description field. I know this can be done, I've done it sometime last year but I haven't worked with the grid for awhile until recently and forgot how to do it.

Here's some code.

$(document).ready(function () {
    var crudServiceBaseUrl = "http://localhost:56291/",
        dataSource = new kendo.data.DataSource({
            transport: {
                read: {
                    url: crudServiceBaseUrl + 'Orders/GetLineItemsForOrder/' + Cookies.get("ponum"),
                    dataType: "json",
                    type: 'GET',
                    contentType: 'application/json; charset=utf-8'
                },
                create: {
                    url: crudServiceBaseUrl + 'Orders/InsertLineItems/' + Cookies.get("ponum"),
                    dataType: "json",
                    type: 'POST',
                    contentType: 'application/json; charset=utf-8',
                    complete: function (e) {
                        //ReloadLineItemGrid();
                    }
                },
                update: {
                    url: crudServiceBaseUrl + "Orders/UpdateLineItems",
                    dataType: "json",
                    type: "PUT",
                    contentType: "application/json; charset=utf-8",
                    complete: function (e) {
                        ReloadLineItemGrid();
                    }
                },
                destroy: {
                    url: crudServiceBaseUrl + 'Orders/DeleteLineItem',
                    datatype: "json",
                    type: 'DELETE',
                    contentType: 'application/json; charset=utf-8',
                    complete: function (e) {
                        //ReloadLineItemGrid();
                    }
                },
                parameterMap: function (options, operation) {
                    if (operation !== "read" && options.models) {
                        return kendo.stringify(options.models);
                    }
                }
            },
            batch: true,
            pageSize: 20,
            schema: {
                model: {
                    id: "LineItemPK",
                    fields: {
                        LineItemPK: { editable: false, type: "string", nullable: true },
                        Quantity: { editable: true, type: "number", format: "{0:d}" },
                        UnitPrice: { editable: true, type: "number", format: "{0:c2}" },
                        ExtPrice: { editable: false, type: "number", format: "{0:c2}" },
                        ProductFK: { editable: true, type: "number" },
                        ProductID: { editable: true, type: "string" },
                        UoM: { editable: true, type: "string" },
                        InvoiceNum: { editable: true, type: "string" },
                        DepFunction: { editable: true, type: "string" },
                        CostCenterFK: { editable: false, type: "number" },
                        AccountFK: { editable: false, type: "number" },
                        OrderFK: { editable: false, type: "number" }
                    }
                }
            }
        });
    $("#gridLineItems").kendoGrid({
        dataSource: dataSource,
        navigatable: true,
        pageable: true,
        editable: {
            mode: "inline"
        },
        toolbar: [{ name: "create", text: "Insert Line" }, { name: "cancel" }, { name: "save" }],
        columns: [
            { field: "LineItemPK", title: "LineItemPK", hidden: true },
            { field: "Quantity", title: "Qty", validation: { min: 0 } },
            { field: "UnitPrice", title: "Unit Price" },
            { field: "ExtPrice", title: "Ext. Price", editable: false, attributes: { "class": "ExtPrice" } },
            { field: "ProductFK", title: "Product FK", editor: productDropDownEditor, template: "#=Description#" },
            { field: "ProductID", title: "Product ID" },
            { field: "UoM", title: "UoM" },
            { field: "InvoiceNum", title: "Invoice #" },
            { field: "DepFunction", title: "Dep. Funct." },
            { field: "CostCenterFK", title: "Cost Center", hidden: false },
            { field: "AccountFK", title: "G/L" },
            { field: "OrderFK", title: "OrderFK", editable: false, hidden: true },
            { command: "destroy", title: " ", width: 120 }
        ],
        editable: true,
        selectable: true,
        edit: function(e) {
            setTimeout(function () {
                var input = e.container.find("input");
                input.select();
            }, 100);
        },
        remove: function (e) {
            dataSource.sync();
        },
        save: function (data) {

            if (data.values.Quantity)
            {

            }
        },
        saveChanges: function (data)
        {

        }
    });

});

function ReloadLineItemGrid()
{
    $("#gridLineItems").data("kendoGrid").dataSource.read();
    $('#gridLineItems').data('kendoGrid').refresh();
}

/* -- custom drop down editors */
function productDropDownEditor(container, options) {
    $('<input data-text-field="Description" data-value-field="ProductPK" data-bind="value:' + options.field + '"/>')
        .appendTo(container)
        .kendoDropDownList({
            autoBind: false,
            dataSource: {
                type: "json",
                transport: {
                    read: "http://localhost:56291/api/products"
                }
            },
            dataTextField: "Description",
            dataValueField: "ProductPK"
        });
}

 

So as you can see, I'm calling another SP to return all products and I'm targeting fields Description and ProductPK. I'm stuffing that into the editor. When the grid does a save, I'm calling another SP that saves line items for an order, and I'm throwing the ProductPK into that SP, so as I explained earlier, I need to have a integer there, but for UX sake, I need the editor to always show the selected PK/index on grid load, and I need it to stay put when the user makes a selection and changes it. I hope I'm explaining this correctly.


I realize I can probably define another method that passes in a value and returns the string, "description" value, but I'm hoping there's an easier way - I thought there was. I thought I recall doing something like this in the past by playing with this line....

$('<input data-text-field="Description" data-value-field="ProductPK" data-bind="value:' + options.field + '"/>')

 

Any help is appreciated.

[Boyan Dimitrov]

Hello Michael,

As far as I understand the main goal is to update the underlying model field with the selected description instead of ProductPK. Since the ProductPK is set as dataValueField for the Kendo UI DropDownList it will update the underlying model with the selected value. 

A possible solution is to set the dataValueField to the description just like the dataTextField. 

$('<input data-text-field="Description" data-value-field="Description" data-bind="value:' + options.field + '"/>')

Regards,
Boyan Dimitrov
Telerik

 

 

[Michael]

Hi. Thanks for the info. However, I tried this, and it doesn't work because I need to insert the ProductPK into the stored procedure. So, the user selecting, viewing, the product description, really needs to be more of a, "mask."

[Boyan Dimitrov]

Hello Michael,

The DropDownList uses value binding in order to update the underlying model. The model is updated with the value of the selected item. In your case this is ProductPK and not the Description field. 

In general it is possible to have a complex object as demonstrated in the Grid / Editing custom editor demo in order to store more than two values. In the referenced demo the Category field of the model is a complex object and has CategoryID, CategoryName and Description fields. 

 

Regards,
Boyan Dimitrov
Telerik