HI,
I need to validate Model field as required only if models datasource has items. If var models = [ ] - I don't need to validate.
Thank you for your help.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>how to make required field on condition</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.mobile.all.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.all.min.js"></script>
</head>
<body>
<div id="grid"></div>
<script>
// array of all brands
var brands = [
{ brandId: 1, name: "Ford" },
{ brandId: 2, name: "BMW" }
];
// array of all models
var models = [
{ modelId: 1, name: "Explorer", brandId: 1},
{ modelId: 2, name: "Focus", brandId: 1},
{ modelId: 3, name: "X3", brandId: 2},
{ modelId: 4, name: "X5", brandId: 2}
];
$("#grid").kendoGrid({
dataSource: {
data: [
{ id: 1, brandId: 1, modelId: "" } // initial data item (Ford, Focus)
],
schema: {
model: {
id: "id",
fields: {
id: { editable: false } // the id field is not editable
}
}
}
},
editable: "inline", // use inline mode so both dropdownlists are visible (required for cascading)
columns: [
{ field: "id" },
{
// the brandId column
title: "Brand",
field: "brandId", // bound to the brandId field
template: "#= brandName(brandId) #", // the template shows the name corresponding to the brandId field
editor: function(container) { // use a dropdownlist as an editor
// create an input element with id and name set as the bound field (brandId)
var input = $('<input id="brandId" required name="brandId">');
// append to the editor container
input.appendTo(container);
// initialize a dropdownlist
input.kendoDropDownList({
dataTextField: "name",
optionLabel: "Select...",
dataValueField: "brandId",
dataSource: brands // bind it to the brands array
}).appendTo(container);
}
},
{
//The modelId column
title: "Model",
field: "modelId", // bound to the modelId field
template: "#= modelName(modelId) #", //the template shows the name corresponding to the modelId field
editor: function(container) { // use a dropdownlist as an editor
var input = $('<input id="modelId" name="modelId">');
input.appendTo(container);
input.kendoDropDownList({
dataTextField: "name",
dataValueField: "modelId",
optionLabel: "Select...",
cascadeFrom: "brandId", // cascade from the brands dropdownlist
dataSource: models // bind it to the models array
}).appendTo(container);
}
},
{ command: "edit" }
]
});
function brandName(brandId) {
for (var i = 0; i < brands.length; i++) {
if (brands[i].brandId == brandId) {
return brands[i].name;
}
}
}
function modelName(modelId) {
if (modelId == null || modelId == "") {
return "";
}
for (var i = 0; i < models.length; i++) {
if (models[i].modelId == modelId) {
return models[i].name;
}
}
}
</script>
</body>
</html>
2 Answers, 1 is accepted
Thank you for the runnable example.
In this scenario, I can suggest in the editor function to check if the model's array is empty and based on that to set the input as required or not.
http://dojo.telerik.com/ilikO
Also, as the tooltip can be hidden in some scenarios, please check the following article demonstrating how it can be made visible:
https://docs.telerik.com/kendo-ui/controls/editors/validator/overview#validator-tooltip
I hope this is helpful.
Regards,
Stefan
Progress Telerik
Rank 1
Hi Stefan,
Thank you for your solution. I placed a validation message as you sugested:
var message = $('<span class="k-invalid-msg" data-for="modelId"></span>');
message.appendTo(container);
and it works perfectly!
Thanks again
Vadim