Kendo Grid在设置了滚动条之后,最后一行如果验证不通过,那么验证信息将不可见,需要滚动条拉到下面才能看到。解决方法有两种:一种是将验证信息滚动到可视区域,另一种是向上弹出验证信息。
第一种方法核心代码如下:
grid.table.on("focusout", ".k-invalid", function () {
var content = grid.content;
var height = content.height();
var cell = $(this).closest("td");
var message = cell.find(".k-invalid-msg");
var callout = message.find(".k-callout");
var position = message.position();
var top = position.top + callout.outerHeight() + message.outerHeight();
if (top > height) {
content.scrollTop(content.scrollTop() + top - height);
}
});
第二种方法核心代码是:
grid.element.on("focusout", ".k-invalid", function () {
var content = grid.content;
var height = grid.lockedContent ? grid.lockedContent.height() : grid.content.height();
var cell = $(this).closest("td");
var message = cell.find(".k-invalid-msg");
if (message.length == 0) { return }
var callout = message.find(".k-callout");
var top = message.position().top + callout.outerHeight() + message.outerHeight();
var horizontalScrollBarHeight = grid.lockedContent ? 0 : (content[0].clientWidth < content[0].scrollWidth ? 17 : 0);
height -= horizontalScrollBarHeight;
if (top > height) {
$(content).animate({
scrollTop: content.scrollTop() + top - height
}, 500);
}
});
grid.bind("edit", function (e) {
// two last rows
if (e.container.closest("tr").is(":nth-last-child(1),:nth-last-child(2)")) {
e.container.data("kendoValidator").bind("validate", function (e) {
if (!e.valid) {
var grid = this.element.closest('.k-grid').data('kendoGrid');
var content = grid.content;
var height = grid.lockedContent ? grid.lockedContent.height() : grid.content.height();
var cell = this.element;
var message = cell.find(".k-invalid-msg");
var callout = message.find(".k-callout");
var top = message.position().top + callout.outerHeight() + message.outerHeight();
var horizontalScrollBarHeight = grid.lockedContent ? 0 : (content[0].clientWidth < content[0].scrollWidth ? 17 : 0);
height -= horizontalScrollBarHeight;
if (top > height) {
message.css("margin-top", -(message.outerHeight() + message.prev().outerHeight() + (message.find('.k-callout').outerHeight()/2) ) + "px").css('z-index', 999);
message.find(".k-callout").removeClass('k-callout-n');
message.find(".k-callout").addClass('k-callout-s');
}
}
});
}
});
在项目上,我使用了第二种方法,但是进行了改进,增加了只有一条数据时的处理,代码如下:
edit: function(e) {
e.container.data("kendoValidator").bind("validate", function(e) {
var $tr, $validationMsg;
if(!e.valid) {
$tr = e.sender.element.closest("tr");
$validationMsg = e.sender.element.find(".k-tooltip-validation");
if($tr.is(":last-child") && $validationMsg.length) {
if($tr.is(":first-child")) { // only one record
e.sender.element.closest(".k-grid-content").css("overflow", "visible")
.prev(".k-grid-header").css("padding-right", 0);
} else {
$validationMsg.css("top", -35);
$validationMsg.find(".k-callout").removeClass("k-callout-n").addClass("k-callout-s");
}
}
}
});
}