如何在剑道网格单元内的剑道下拉列表中检索文本值，但仍然在 CRUD 中传递 ID

Question

我在寻找与 Kendo Grid 相关的解决方案时遇到了问题。

我在剑道网格的单元格中呈现剑道下拉列表。看起来一切都很好，直到用户将注意力集中在单元格内的下拉列表中或标签上。红色散列表示进行了更改，但它显示的是 kendo DDL 的数据值字段而不是文本。好的，我意识到我可以在 dataTextField 中使用与我在 dataValueField 中使用的 DS 相同的字段，但这对我不起作用......因为当我调用 create 或 update 时，我需要能够将所选项目的主键或 ID 传递回我的 Web api 控制器。

这里是网格 DS

function loadContactGrid(vendorID) {

    var contactsReadURL = null;
    contactsReadURL = "/contacts/getcontacts/" + parseInt(vendorID);

    contactGridDS = new kendo.data.DataSource({
        transport: {
            read: {
                url: contactsReadURL,
                type: 'GET',
                contentType: "application/json; charset=utf-8",
            },
            update: {
                url: "/contacts/UpdateContacts/",
                type: 'PUT',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                error: function(xhRequest, ErrorText, thrownError) {
                    alert('ERROR!!!\n' + ' xhRequest: ' + xhRequest + '\n' + ' ErrorText: ' + ErrorText + '\n' + ' thrownError: ' + thrownError + '\n');
                },
                complete: function(e) {
                    $("#contactGrid").data("kendoGrid").dataSource.read();
                }
            },
            destroy: {
                url: "/contacts/DeleteContact/",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                type: "DELETE"
            },
            create: {
                url: "/contacts/InsertContact/",
                contentType: "application/json; charset=utf-8",
                type: 'POST',
                dataType: "json",
                success: function(results) {
                    alert('Contacts successfully saved!');
                },
                error: function(xhRequest, ErrorText, thrownError) {
                    alert('ERROR!!!\n' + ' xhRequest: ' + xhRequest + '\n' + ' ErrorText: ' + ErrorText + '\n' + ' thrownError: ' + thrownError + '\n');
                },
                complete: function(e) {
                    $("#contactGrid").data("kendoGrid").dataSource.read();
                }
            },
            parameterMap: function(options, operation) {
                if (operation !== "read" && options) {
                    return JSON.stringify(options.models);
                }
                if (operation == "create") {
                    // send the created data items as the "models" service parameter encoded in JSON
                    return { models: kendo.stringify(data.models) };
                }

            }
        },
        batch: true,
        scrollable: false,
        pageSize: 8,
        change: function(e) {
            if (e.action == "itemchange" && e.field == "email") {
                var model = e.items[0];
                if (isEmailValid($('input[name=email]').val()) == false) {
                    e.items[0].receivereport = false;
                }
            }

            if (e.action == "itemchange" && e.field == "contacttype") {
                var model = e.items[0];
                //setTimeout(function () {
                    //$('.k-dirty-cell').focusout(function() {
                        //alert($(this).text(textOverrideContactType(e.items[0].contacttype)));
                    //});
                    //textOverrideContactType(e.items[0].contacttype);

                //}, 1000); attempting to change text in cell here failed
            }

            if (e.action === "remove") {
                this.sync();
            }
        },
        schema: {
            model: {
                id: 'contactid',
                fields: {
                    roletyp_seq: { editable: false, nullable: false, required: true, type: 'string' },
                    contacttype: { editable: true, nullable: false, required: true, type: 'number' },
                    roletyp_pk: { editable: false, nullable: false, required: true, type: 'number' },
                    contactid: { editable: false, nullable: false, required: true, type: 'number' },
                    vendorid: { editable: false, nullable: false, required: true, type: 'number' },
                    prevrole_pk: {
                        editable: false,
                        nullable: true,
                        required: true,
                        type: "number",
                    }
                }
            }
        },
    });

还有我的网格

        $("#contactGrid").kendoGrid({
        dataSource: contactGridDS,
        navigatable: true,
        dataBound: mapContactTypes,
        editable: true,
        //editable: "inline",
        //editable: "popup",
        edit: function (input) {

            if ($('input[name=receivereport]').is(':focus')) {

                //detect if email is valid
                //get input immediately before this one
                if (isEmailValid($('input[name=receivereport]').parent().prev().text()) == false) {
                   // disable check box
                   // alert("invalid");
                    $('input[name=receivereport]').attr('disabled', 'true');
                    $('input[name=receivereport]').prop('checked', false);

                } else {
                   // enable check box
                   // alert("valid");
                    $('input[name=receivereport]').removeAttr('disabled');
                    $('input[name=receivereport]').prop('checked', false);
                }
            }

            //when user clicks into or out of a field, if the name in the respective row name is blank, alert the user
            var grid = this;
            var fieldName = grid.columns[input.container.index()].field;

            if (isNameInContactGridPopulated(fieldName) == false) {
                alert("You can't leave out a contact name in the row you are editing.");
                //disable save button
                $('.k-grid-save-changes').addClass('k-state-disabled');
                $('.k-grid-save-changes').hide();
            } else {
                //do nothing
                $('.k-grid-save-changes').removeClass('k-state-disabled');
                $('.k-grid-save-changes').show();
            }

            if ($('input[name=contactname]').is(":focus") == true) {
                //disable save button
                if ($('input[name=contactname]').val() == '') {
                    $('.k-grid-save-changes').addClass('k-state-disabled');
                    $('.k-grid-save-changes').hide();
                }

            }

            $('input[name=contactname]').keyup(function() {

                if ($(this).val() == '') {
                    $('.k-grid-save-changes').addClass('k-state-disabled');
                    $('.k-grid-save-changes').hide();
                }

            });


            $('input[name=contactname]').focusout(function () {

                if ($(this).val() != '') {
                    $('.k-grid-save-changes').removeClass('k-state-disabled');
                    $('.k-grid-save-changes').show();
                }

            });

        },
        toolbar: ["save", "cancel"],
        pageable: true,
        columns: [
            { field: 'roletyp_seq', title: 'RT Seq.', hidden: true, attributes: { 'class': 'contactCell_roletyp_seq' } },
            { field: 'contacttype', title: 'Contact Type', hidden: false, attributes: { 'class': 'contactCell_contacttype' }, editor: loadContactTypeEditor, width: "200px", template: "#=textOverrideContactType(1)#" },
            //{ field: 'contacttype', title: 'Contact Type', hidden: false, attributes: { 'class': 'contactCell_contacttype' }, editor: loadContactTypeEditor, width: "200px", template: "#=textOverrideContactType(contacttype)#" },
            //{ field: 'contacttype', title: 'Contact Type', hidden: false, attributes: { 'class': 'contactCell_contacttype' }, editor: loadContactTypeEditor, width: "200px" },
            { field: 'prevrole_pk', title: 'prev role ID', hidden: true, attributes: { 'class': 'contactCell_prevrole_pk' } },
            { field: 'roletyp_pk', title: 'Role Type ID', hidden: true, attributes: { 'class': 'contactCell_roletyp_pk' } },
            { field: 'contactid', title: 'Contact ID', hidden: true, attributes: { 'class': 'contactCell_contactid' } },
            { field: 'vendorid', title: 'Vendor ID', hidden: true, attributes: { "class": 'contactCell_vendorid' } },
            { field: 'contactname', title: 'Name', hidden: false, attributes: { "class": 'contactCell_contactname' } },
            { field: 'workphone', title: 'Phone', hidden: false, attributes: { "class": 'contactCell_phone' } },
            { field: 'mobilephone', title: 'Cell', hidden: false, attributes: { "class": 'contactCell_mobilephone' } },
            { field: 'title', title: 'Title', hidden: false, attributes: { "class": 'contactCell_title' } },
            { field: 'email', title: 'Email', hidden: false, attributes: { "class": 'contactCell_email' } },
            { field: 'receivereport', title: 'Receive Reports?', hidden: false, attributes: { "class": 'contactCell_receivereport' }, template: '<input type="checkbox" #= receivereport ? "checked=checked" : "" # value=""  disabled="disabled" ></input>' },

            { command: "destroy", title: "&nbsp;", width: "100px" }
        ],
        sortable: {
            mode: 'single',
            allowUnsort: false
        }
    });

那么，我下面有两个函数。 1 是自定义编辑器，另一个是我认为覆盖剑道 ddl 中显示的文本的尝试。

    function loadContactTypeEditor(container, options) {

    var contactTypeDS = new kendo.data.DataSource({
        dataType: "json",
        type: "GET",
        transport: {
            read: "/contacts/GetAllContactTypes/"
        }
    });
    contactTypeDS.read();

    $('<input class="contactTypeDropDown" required data-text-field="roletyp_dsc" data-value-field="roletyp_pk" data-bind="value:' + options.field + '"/>').appendTo(container).kendoDropDownList({
        dataTextField: "roletyp_dsc",
        dataValueField: "roletyp_pk",
        autoBind: false,
        select: function (e) {
            //if (e.sender.text() != '') {
            //        $('#contactGrid_active_cell').html(e.sender.text());

            //}
            //if (e.sender.text() != '') {
            //    setTimeout(function() {
            //        $('.contactCell_contacttype').text(e.sender.text());
            //    }, 1000);  
            //}

            //options.model[options.field] = e.sender.text();
        },
        //dataBound: function(){

        //    options.model[options.field] = e.sender.text();
        //},
        dataSource: contactTypeDS
    });
}

function textOverrideContactType(roleId) {
    //need to find a match on the passed in role/contact type ID and return it's match to "mask/overwrite" the text that's there after a user selects an item in the dropdown
    $.ajax({
        dataType: 'json',
        type: 'GET',
        url: "/contacts/GetAllContactTypes/",
        contentType: 'application/json; charset=utf-8',
        success: function (data) {
            $.each(data, function (key, val) {
                if (roleId == key) {
                    return val;
                }
            });
        },
        failure: function (error) {
            alert("Error loading contact types.");
        }
    });
}

总而言之：我尝试了一些无济于事的事情。正在发生的事情是，DDL 渲染得很好，即使用户没有离开该 DDL，也会显示正确的“标签”，但是当该控件失去焦点时，它会显示数据值字段。我做不到，我需要能够显示数据文本字段。这就是我编写该 textoverride 方法的原因。但我试图在网格、字段的模板中调用它：但它不起作用。它说它不识别该功能。我不明白；它已明确声明。我应该作为参数传入什么，它与这里的演示不完全一样...有点不同，因为我正在使用另一个远程数据源填充 DDL。

http://demos.telerik.com/kendo-ui/grid/editing-custom

这是另一件事；我需要该数据值字段 ID 持久保存并在它被调用时传递到我的 web api 控制器中。现在，就目前而言，我只能让“文本”显示在控制器中，而不是“ID”。该 ID 在 read 方法中对我不可用。 CRUD 命中的存储过程是完全不同的。我用于插入和更新的存储过程需要获取该联系人类型 ID 作为数字。

提前致谢。我确定我很接近......

Answer 1

根据提供的信息，您似乎需要通过设置列的“值”选项来创建列 ForegnKey。请查看以下示例：

• [demo] Grid: ForeignKey column
• [documentation] Grid API: columns.values option

Answer 2

我实际上最终使用了另一种方法来做到这一点。以上对我来说仍然是虚幻的。我最终更改了另一行中已经可用的键的值，以将其传递回控制器。我尝试了提供的答案，但无济于事。对不起！