Question

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

和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 --"
    }
}

你可以做的另一件事是在kendo网格中添加一个类，只需添加一些填充，以便在行下面留出足够的空间来验证消息。

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

这实际上最适合我的需求，但我仍然希望使用：

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

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

。

我希望这会有所帮助。

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

3 个答案: