表格单元格中的剑道验证显示在顶部（z-index）

Question

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

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

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

Answer 1

尝试位置：固定；当我尝试你的 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 --"
    }
}

您可以做的另一件事是在剑道网格中添加一个类，然后添加一些填充以始终在行下方为验证消息留出足够的空间。

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

这实际上最适合我的需求，但我仍然更喜欢使用：

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

如果它没有弄乱网格列，则从上面。

我希望这会有所帮助。