Kendo Grid的小单元中的Kendo DropDownList修剪

Question

我在网格单元格中使用DropDownList编辑器。由于我的项目网格中有很多列，我使用的是非常小的单元格宽度。因此，当我单击单元格以显示DropDownList时，所选单元格的文本将被修剪/替换为“ ... ”这仅在Chrome中发生，其他浏览器可能删除最后一个数字，但这是可以接受的。

这是问题的截图。

我还制作了jsFiddle example（请在Chrome中查看，其他浏览器都可以）。这是DropDownList自定义单元格编辑器的代码片段：

function renderDropDown(container, options) {

$('<input required  name="' + options.field + '"/>')
    .appendTo(container)
    .kendoDropDownList({
        dataTextField: "FilijalaKod",
        dataValueField: "FilijalaId",
        dataSource: filijale,                
        dataBound: function (e) {
            var $dropDown = $(e.sender.element),
            dataWidth = $dropDown.data("kendoDropDownList").list.width(),
            listWidth = dataWidth + 20,
            containerWidth = listWidth + 6;

            // Set widths to the new values
            $dropDown.data("kendoDropDownList").list.width(listWidth);
            //$dropDown.closest(".k-widget").width(containerWidth);
        }
    });
}

有没有办法在Chrome中阻止此类行为？也许一些自定义CSS规则？

Answer 1

您可以尝试定义以下样式：

#grid .k-dropdown-wrap span.k-input {
    text-overflow : clip;
}

您的JSFiddle在此修改：http://jsfiddle.net/OnaBai/uPeN6/14/