Kendo Grid 验证不会出现在其他列中，只是出现在颜色列中，而不是颜色列是自定义编辑下拉列表。
问题仅针对文本框控件，因此单击编辑或添加按钮时不会触发验证如果您看到编辑功能，我尝试了很多事情如果您尝试过它，则验证将在所有情况下触发如果文本框中有值或没有值
<script>
function GridParams() {
var json = {
CompanyId: <%= CompanyId%>,
LangParameter: "<%= LangParameter%>",
};
return json;
}
var Colors = [
{ text: 'Blue', value: "Blue" },
{ text: 'Green', value: "Green" },
{ text: 'Orange', value: "Orange" },
{ text: 'Yellow', value: "Yellow" },
{ text: 'Red', value: "Red" },
];
$(document).ready(function () {
kendo.ui.progress($(".chart-loading"), true);
var d = $("#gvPerformanceRate").kendoGrid({
dataSource: {
transport: {
read: function (options) {
$.ajax({
type: "GET",
data: GridParams(),
url: "<%= ExtensionsClass.GetAppSetting("APIURL") %>/api/PerformanceRate/GetPerformanceRates",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
options.success(msg);
}
});
},
},
pageSize: 6
},
dataBound: function (e) {
kendo.ui.progress($(".chart-loading"), false);
},
filter: function (e) {
kendo.ui.progress($(".chart-loading"), true);
},
page: function (e) {
kendo.ui.progress($(".chart-loading"), true);
},
schema: {
model: {
id: 'PerformanceRateId',
fields: {
PerformanceRateId: { editable: false, nullable: true },
PerformanceRateValue: {
type: "string", editable: true, validation: {
required: true,
validatePerformanceRateValue: function (input) {
console.log("v");
if (input.is("[name='PerformanceRateValue']") && input.val() == "") {
input.attr("data-performanceratevaluevalidation-msg", "Performance Rate Value required");
return false;
}
return true;
}
}
},
PerformanceRateDescEn: { type: "string", validation: { required: true }, editable: true },
PerformanceRateDescAr: { type: "string", validation: { required: true }, editable: true },
Color: { type: "string", validation: { required: true }, editable: true },
}
}
},
filterMenuInit: function (e) {
$(e.container).css("width", "300px")
},
filterable: {
extra: false,
operators: {
string: {
startswith: "<%= GetGlobalResourceObject("GlobalResource","Startswith").ToString() %>",
eq: "<%= GetGlobalResourceObject("GlobalResource","IsEqualTo").ToString() %>",
neq: "<%= GetGlobalResourceObject("GlobalResource","IsNotEqualTo").ToString() %>",
gt: "<%= GetGlobalResourceObject("GlobalResource","After").ToString() %>",
lt: "<%= GetGlobalResourceObject("GlobalResource","Before").ToString() %>",
isnull: "<%= GetGlobalResourceObject("GlobalResource","Null").ToString() %>",
isnotnull: "<%= GetGlobalResourceObject("GlobalResource","IsNotNull").ToString() %>",
gte: "<%= GetGlobalResourceObject("GlobalResource","AfterOrEqualTo").ToString() %>",
lte: "<%= GetGlobalResourceObject("GlobalResource","BeforeOrEqualTo").ToString() %>"
},
},
messages: {
info: "<%= GetGlobalResourceObject("GlobalResource","FilterHeaderText").ToString() %>", // Sets the text on top of the Filter menu.
filter: "<%= GetGlobalResourceObject("GlobalResource","FilterButton").ToString() %>", // Sets the text for the "Filter" button.
clear: "<%= GetGlobalResourceObject("GlobalResource","FilterClear").ToString() %>", // Sets the text for the "Clear" button.
// When filtering Boolean numbers.
isTrue: "<%= GetGlobalResourceObject("GlobalResource","isTrue").ToString() %>", // Sets the text for "isTrue" radio button.
isFalse: "<%= GetGlobalResourceObject("GlobalResource","isFalse").ToString() %>", // Sets the text for "isFalse" radio button.
// Changes the text of the "And" and "Or" of the Filter menu.
and: "<%= GetGlobalResourceObject("GlobalResource","And").ToString() %>",
or: "<%= GetGlobalResourceObject("GlobalResource","Or").ToString() %>"
},
},
toolbar: ["create"],
editable: {
mode: "popup",
//template: kendo.template($("#popup_editor").html())
},
scrollable: false,
groupable: false,
sortable: true,
pageable: {
refresh: true,
pageSizes: [6, 9, 12, "All"],
buttonCount: 5,
messages: {
display: "<%= GetGlobalResourceObject("GlobalResource","items").ToString() %>", //{0} is the index of the first record on the page, {1} - index of the last record on the page, {2} is the total amount of records
empty: "<%= GetGlobalResourceObject("GlobalResource","empty").ToString() %>",
page: "<%= GetGlobalResourceObject("GlobalResource","Page").ToString() %>",
of: "<%= GetGlobalResourceObject("GlobalResource","of").ToString() %>", //{0} is total amount of pages
itemsPerPage: "<%= GetGlobalResourceObject("GlobalResource","NumberOfEntries").ToString() %>",
first: "<%= GetGlobalResourceObject("GlobalResource","first").ToString() %>",
previous: "<%= GetGlobalResourceObject("GlobalResource","previous").ToString() %>",
next: "<%= GetGlobalResourceObject("GlobalResource","next").ToString() %>",
last: "<%= GetGlobalResourceObject("GlobalResource","last").ToString() %>",
refresh: "<%= GetGlobalResourceObject("GlobalResource","refresh").ToString() %>"
}
},
save: function (e) {
//console.log(e.model.isNew());
},
//edit: function (e) {
// var validator = e.container.getKendoValidator();
// var options = validator.options;
// options.rules.myRule = function () {/*...*/ };
// options.messages.myRule = "message";
// validator.setOptions(options);
//},
columns: [
{
field: "PerformanceRateValue",
title: "PerformanceRateValue",
filterable: {
cell: {
operator: "contains",
suggestionOperator: "contains"
}
}
},
{
field: "PerformanceRateDescEn",
title: "PerformanceRateDescEn",
filterable: {
cell: {
operator: "contains",
suggestionOperator: "contains"
}
}
},
{
field: "PerformanceRateDescAr",
title: "PerformanceRateDescAr",
filterable: {
cell: {
operator: "contains",
suggestionOperator: "contains"
}
}
},
{
template: ColorPerformanceRate,
field: "Color",
title: "Color",
editor: ColorEditor,
filterable: {
cell: {
operator: "contains",
suggestionOperator: "contains"
}
}
},
{
command: [
{ name: "edit", template: "<a class='btn btn-sm btn-icon btn-default k-grid-edit' onclick='' data-toggle='tooltip' title='Edit' ><i class='fas fa-pencil'></i></a>" },
{ name: "destroy", template: "<a class='btn btn-sm btn-icon btn-danger' onclick='setPerformanceRateFadeInOutStatus(0);RunLoadingWithoutVaildation();return confirmmessage();' data-toggle='tooltip' title='Remove' ><i class='fas fa-trash'></i></a>" },
]
},
]
}).data("kendoGrid");
d.table.kendoSortable({
filter: ">tbody >tr",
hint: $.noop,
cursor: "move",
placeholder: function (element) {
return element.clone().addClass("k-state-hover").css("opacity", 0.65);
},
container: "#gvPerformanceRate tbody",
change: function (e) {
var skip = d.dataSource.skip(),
oldIndex = e.oldIndex + skip,
newIndex = e.newIndex + skip,
data = d.dataSource.data(),
dataItem = d.dataSource.getByUid(e.item.data("uid"));
d.dataSource.remove(dataItem);
d.dataSource.insert(newIndex, dataItem);
}
});
});
var ColorPerformanceRate = function (e) {
return "<i class='fas fa-star StarRate float-left' style='color:" + e.Color + "'></i>"
};
function ColorEditor(container, options) {
$('<input name="' + options.field + '" required data-text-field="text" data-value-field="value" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: true,
valuePrimitive: true,
optionLabel: "-- Select -- ",
dataTextField: "text",
dataValueField: "value",
dataSource: Colors
});
$("<span class='k-invalid-msg' data-for='" + options.field + "'></span>").appendTo(container);
}
</script>