We have a grid which is configured for batch in-cell editing. There is a conditional rule where if the user selects certain types of 'Code' in one column, then another column becomes required. We have implemented this with the following code in the onEdit event of the grid:
if (e.model.code == "A" || e.model.code == "B" || e.model.code == "C" || e.model.code == "D") {
$("#column_LongNameId").attr("required", true);
}
The issue is the name of the column, "column_LongNameId" is long and user-unfriendly and as such, the 'required' pop-up which appears when the user clicks Save Changes, has the message appears "column_LongNameId is required".
We would like to set a custom validation message somehow, such that it simple says "'Name' is required", but cannot find a way via the grid APi or kendo validator to set this message. The conditional-logic nature of the rule plus the fact that we require In-Cell grid editing also makes this difficult to implement via validation rules.
How can we modify/change this validation message?
2 Answers, 1 is accepted
Hi, Andrei,
The Kendo UI Grid for MVC initializes its validator as soon as the grid is put into edit mode and runs its rules on cell close.
To achieve the custom validation, regardless of the edit modes, we have one and the same approach - extend the Kendo UI Validator with the custom rule, much like you are doing in the edit event. We have a runnable demo with sample code that you can use at:
https://demos.telerik.com/aspnet-mvc/grid/editing-custom-validation
The custom required rule in your case would look something like this. Here is a runnable example for your reference:
https://dojo.telerik.com/@bubblemaster/oWIwAMUP/2
<script type="text/javascript">
//register custom validation rules
(function ($, kendo) {
$.extend(true, kendo.ui.validator, {
rules: { // custom rules
customrequired: function (input, params) {
if (input.is("#column_LongNameId") && !input.val()) {
input.attr("data-customrequired-msg", "Name is required");
var grid = input.closest(".k-grid").data("kendoGrid");
var dataItem = grid.dataItem($(".k-grid-edit-row"));
return dataItem.code === "A" || dataItem.code === "B";
}
return true;
}
},
messages: { //custom rules messages
customrequired: function (input) {
// return the message text
return input.attr("data-val-customrequired");
}
}
});
})(jQuery, kendo);
</script>Give this a try and let us know in case you need further assistance.
Kind Regards,
Alex Hajigeorgieva
Progress Telerik
Rank 1