kendo grid inline edit下拉列表不会在选项卡导航上展开

Question

我在Angular中遇到了Kendo Grid的问题，当我导航到该列时，我自己实现的自定义下拉列表无法打开。内置文本和数字编辑器字段可在选项卡导航中编辑，但我的自定义下拉列表不会扩展。我必须点击它才能获得下拉效果。

我的目标是允许用户记录整行数据，而无需将手从键盘上移开。

我的专栏定义如下：

gridColumns.push({
    field: currentField.FieldName.replace(/ /g, "_"),
    title: currentField.FieldName,
    editor: $scope.dropDownAttEditor,
    template: function (dataItem) {
                return $scope.dropDownTemplate(dataItem, currentField.FieldName);
        }
});

我的gridOptions定义如下：

$scope.gridOptions = {
            dataSource: new kendo.data.DataSource({
                transport: {
                    read: {
                        url: appconfig.basePath + '/api/DrillHoleManager/DrillHoleInterval',
                        type: 'POST',
                        contentType: 'application/json'
                    },
                    update: {
                        url: appconfig.basePath + '/api/DrillHoleManager/DrillHoleIntervalUpdate',
                        type: 'POST',
                        contentType: 'application/json'
                    },
                    parameterMap: function (data, operation) {
                        if (operation === "read") {
                            data.DrillHoleId = $scope.entity.Id;
                            data.DrillHoleIntervalTypeId = $stateParams.ddhinttypeid;
                        // convert the parameters to a json object
                        return kendo.stringify(data);
                    }

                    if (operation === 'update') {
                        // build DrillHoleIntervalDto object with all ATT/CMT values to send back to server
                        var drillHoleInterval = { Id: data.Id, Name: data.Name, From: data.From, To: data.To };
                        drillHoleInterval.Attributes = [];
                        drillHoleInterval.Comments = [];

                        var attributeFields = $.grep($scope.currentFields, function (e) { return e.DrillHoleTabFieldType == DrillHoleTabFieldTypeEnum.IntervalAttribute });
                        $.each(attributeFields, function (idx, attributeField) {
                            drillHoleInterval.Attributes.push({
                                Id: attributeField.AttributeDto.Id,
                                LookupId: data[attributeField.FieldName.replace(/ /g, "_")]
                            });
                        });

                        var commentFields = $.grep($scope.currentFields, function (e) { return e.DrillHoleTabFieldType == DrillHoleTabFieldTypeEnum.IntervalComment });
                        $.each(commentFields, function (idx, commentField) {
                            drillHoleInterval.Comments.push({
                                Id: commentField.CommentDto.Id,
                                Value: ((data[commentField.FieldName.replace(/ /g, "_")] != "") ? data[commentField.FieldName.replace(/ /g, "_")] : null)
                            });
                        });

                        return kendo.stringify(drillHoleInterval);
                    }

                    // ALWAYS return options
                    return options;
                }
            },
            schema: { model: { id : "Id" }},
            serverPaging: false,
            serverSorting: false,
            serverFiltering: false
            //,autoSync: true
        }),
        columns: gridColumns,
        dataBound: onDataBound,
        autoBind: false,
        navigatable: true,
        scrollable: false,
        editable: true,
        selectable: true,
        edit: function (e) {
            var grid = $("#ddhintgrid").data("kendoGrid");
            //grid.clearSelection();
            grid.select().removeClass('k-state-selected');

            // select the row currently being edited
            $('[data-uid=' + e.model.uid + ']').addClass('k-state-selected');

            e.container[0].focus();
        }
    };

这是一个自定义事件来处理＆＃39;标签＆＃39;按键。关键是我想要一个新的记录自动添加到网格中，如果用户按下＆＃39; Tab＆＃39;在最后一行的末尾：

$("#ddhintgrid").keydown(function (e) {
            if (e.key == "Tab") {
                var grid = $("#ddhintgrid").data("kendoGrid");
                var data = grid.dataSource.data();
                var selectedItem = grid.dataItem(grid.select());
                var selectedIndex = null

            if (selectedItem != null) {
                selectedIndex = grid.select()[0].sectionRowIndex;

                if (selectedIndex == data.length - 1) {  // if the bottom record is selected
                    // We need to manually add a new record here so that the new row will automatically gain focus.
                    // Using $scope.addRecord() here will add the new row but cause the grid to lose focus.
                    var newRecord = { From: grid.dataSource.data()[selectedIndex].To };

                    var currentCmtFields = $.grep($scope.currentFields, function (e) { return e.DrillHoleTabFieldType == DrillHoleTabFieldTypeEnum.IntervalComment; });

                    $.each(currentCmtFields, function (idx, currentCmtField) {
                        newRecord[currentCmtField.FieldName.replace(/ /g, "_")] = null;
                    });

                    grid.dataSource.insert(data.length, newRecord);

                    // edit the new row
                    grid.editRow($("#ddhintgrid tr:eq(" + (data.length) + ")"));

                }
            }
        }
    });

以下是我的下拉列模板：

$scope.dropDownTemplate = function (dataItem, fieldName) {
        var currentLookups = $.grep($scope.currentFields, function (e) { return e.FieldName == fieldName; })[0].AttributeDto.Lookups;
        var selectedLookup = $.grep(currentLookups, function (e) { return e.Id == dataItem[fieldName.replace(/ /g, "_")]; })[0];

    // With the custom dropdown editor when going from null to a value the entire lookup object (id, name) is placed in the
    // dataItem[field_name] instead of just the id. We need to replace this object with just the id value and return the name of
    // the lookup to the template.
    if (typeof selectedLookup == 'undefined' && dataItem[fieldName.replace(/ /g, "_")] != null) {
        selectedLookup = angular.copy(dataItem[fieldName.replace(/ /g, "_")]);
        dataItem[fieldName.replace(/ /g, "_")] = selectedLookup.Id;
    }  

    if (selectedLookup != null && selectedLookup != '') {
        return selectedLookup.Name;
    }

    else {
            return '';
    }
};

最后这是下拉列的自定义编辑器：

$scope.dropDownAttEditor = function (container, options) {
    var editor = $('<input k-data-text-field="\'Name\'" k-data-value-field="\'Id\'" k-data-source="ddlDataSource" data-bind="value:' + options.field + '"/>')
        .appendTo(container).kendoDropDownList({
            dataSource: $.grep($scope.currentFields, function (e) { return e.FieldName == options.field.replace(/_/g, ' '); })[0].AttributeDto.Lookups,
            dataTextField: "Name", 
            dataValueField: "Id"
        });
};

我知道这很重要，但如果您有任何问题，请告诉我。

我的最终目标是希望用户能够使用＆＃39; Tab＆＃39;来导航网格。键盘并编辑每个字段而无需使用鼠标。