Kendo table 单元格中的验证显示在顶部（z-index）

Question

我的问题是网格内（td 内）kendo 的验证消息隐藏在网格内。无论如何我可以在一切之上展示它吗？我尝试使用 position:relative、z-index 等，但没有任何效果。问题截图：

和 plunker：http://embed.plnkr.co/Wyf24V/preview

添加一些条目，然后添加一个空字符串并保存。验证消息将隐藏在网格内。

Answer 1

尝试position:fixed；当我尝试你的 plunker 时有效

Answer 2

作为记录，我使用以下代码解决了它，每次更新一行：

var gridContent = grid.find('.k-grid-content');
if (gridContent.find('.k-widget.k-tooltip.k-tooltip-validation.k-invalid-msg').length > 0) {
        gridContent.css("overflow", "visible");
    } else {
        gridContent.css("overflow", "auto");
    }

Answer 3

我知道自从有人提出这个答案以来已经有一段时间了，但我遇到了同样的问题，而且我找到的答案对我不起作用。我找到了一个非常简单的解决方案，我想我会分享。如果您使用的是 angularjs 自定义编辑器，您可以执行以下操作：

//columns property inside kendo options object
columns: [
    { field: "Policy", title: "Policy", editor: createDropDownEditor },
    //other column definitions here...
]

//schema property inside kendo options object
schema: {
    model: {
        id: "Id",  //whatever your unique id is per row
        fields: {
            Policy: {
                validation: {
                    required: true,
                    policyValidation: function (input) {
                        return input.val() !== "-- Select --";
                    }
                }
            },
            //other fields
        }
    }
}

//outside of kendo options object define the createTextEditor function

function createDropDownEditor (container, options){
    //using ES6 backticks, but you can use string concatination instead
    $(` <select kendo-drop-down-list
            name="${options.field}"
            k-options="vm.getDropDownListOptions()"></select>`)
            .appendTo(container);
        /*
        This line makes the validation message show up even though it
        extends to outside the td
        */
        container.css("overflow", "visible");
        /*
        This line makes the content show up even if it extends
        outside of the body of the kendo grid.
        The downside to this is that the scroll bar on the right
        disappears when entering the field with this editor
        which makes the columns not line up.  If you can find a way to
        fix that issue it would be the preferred solution IMO
        */
        container.closest(".k-grid-content").css("overflow", "visible");

}

//inside your controller
getDropDownListOptions(){
    return {
        dataSource: ["option1", "option2", "option3"],
        optionLabel: "-- Select --"
    }
}

您可以做的另一件事是向 kendo 网格添加一个 class 并添加一些填充，以便始终在您的行下方为验证消息留出足够的空间。

.my-custom .k-grid-content {
    padding-bottom: 32px;
}

这实际上最适合我的需要，但我仍然更愿意使用：

container.closest(".k-grid-content").css("overflow", "visible");

如果没有弄乱网格列，请从上面开始。

希望对您有所帮助。

Kendo table 单元格中的验证显示在顶部（z-index）

Kendo validation in table cell show on top (z-index)

css

jquery

kendo-ui

angularjs

kendo-grid