Проверка Kendo Grid не отображается в других столбцах, она отображается только для Color Column, а не для этого цветного столбца - выпадающего списка с пользовательским редактированием.
проблема возникает только для элемента управления текстовым полем, поэтому проверка не запускается при нажатии кнопки edit или add i. если вы видите, что функция редактирования прокомментирована, если вы попробовали ее, проверка будет срабатывать во всех случаях, если есть значение в текстовом поле или нет
<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>