Hi,
I have 3 grids each one in another tab (another view).
for each one of them I have different Kendo extend validation for example:
function ($, kendo) {
$.extend(true, kendo.ui.validator, {
rules: { // custom rules
dateValidation: function (input, params) {
debugger;
if (input.is("[name='ActualStartDate']") && input.val() != "") {
var startDate = kendo.parseDate(input.val());
var endDate = kendo.parseDate($('#ActualEndDate').val());
if (startDate != null && endDate != null) {
input.attr("data-dateValidation-msg", "Start date should be before End date");
return startDate.getTime() <= endDate.getTime();
}
} else if (input.is("[name='ActualEndDate']") && input.val() != "") {
var endDate = kendo.parseDate(input.val());
var startDate = kendo.parseDate($('#ActualStartDate').val());
if (startDate != null && endDate != null) {
input.attr("data-dateValidation-msg", "End date should be after Start date ");
return startDate.getTime() <= endDate.getTime();
}
}
if (input.is("[name='Description']") && input.val() != "") {
debugger
input.attr("data-dateValidation-msg", "A Description Cannot Be Longer Than 250 Characters");
return (input.val().length <= 250)
}
return true;
}
},
messages: { //custom rules messages
dateValidation: function (input) {
// return the message text
return input.attr("data-val-dateValidation");
}
}
});
})(jQuery, kendo);
because of cache , sometimes the the wrong validator is called and then the validation went wrong.
How can I force that the right validator will be called? is there some unique name for each one?
Thank you
3 Answers, 1 is accepted
Thank you for the provided code.
After inspecting it I notice that the validation for the "Description" input is under the "dateValidation" rule which may be causing the conflict. I can suggest making different rules for the different inputs.
Notice how multiple rules can be added instead of using one rule with multiple if-else statements:
https://docs.telerik.com/kendo-ui/api/javascript/ui/validator#configuration-rules
If the issue still occurs, please provide a fully runnable example, as the issue could be caused by a factor which we are overlooking at this moment.
Regards,
Stefan
Progress Telerik
Rank 1
Hi,
What you wrote to me it's right but it's not the issue.
I have 3 tabs in each one of them I have grid and each one of them has a Kendo extend validator.
The browser saves in cache the first vaildator and then in every grid the first validator is called and it's not good..
here is my first grid:
<script src="~/JavaScript/SavedProducts.js"></script>
<link href="~/Css/SavedProducts.css" rel="stylesheet" />
@(Html.Kendo().Grid<TaskManagementUI.Models.ProductViewModel>()
.Name("GridProducts")
.Columns(columns =>
{
columns.Bound(c => c.ID).Hidden();
columns.Bound(c => c.Name).Title("Name").Width(200).HtmlAttributes(new { @class = "inputValid" });
columns.Bound(c => c.CreateDate).Title("Creation date").Format("{0: MM/dd/yyyy}").Width(200);
columns.Bound(c => c.StakeHolder.Name).Title("Creator").Width(200);
columns.Bound(c => c.ActiveDirectoryGroupName).Title("AD Group Name").Width(200);
columns.Bound(c => c.Description).Title("Description").HtmlAttributes(new { @class = "customCell" }).Width(250);
if (User.IsInRole("secSftwrProjMgmtAdmn"))
{
columns.Command(command => command.Custom("ADDPROJECT").Text("Add Project").Click("addProject")).Title("Add Project").Width(170).HtmlAttributes(new { id = "addProjectButton" });
columns.Command(command => { command.Edit().CancelText(" ").UpdateText(" ").Text(" "); command.Destroy().Text(" "); }).Width(200);
}
})
.Resizable(resize => resize.Columns(true))
.Filterable()
.ToolBar(toolbar =>
{
toolbar.Excel();
if (User.IsInRole("secSftwrProjMgmtAdmn"))
{
toolbar.Create().Text("Add New Product");
}
})
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Excel(excel => excel
.AllPages(true)
.FileName("Products.xlsx")
.Filterable(true)
.ForceProxy(true)
.ProxyURL(Url.Action("FileExportSave", "Home")))
.Pageable(pager => pager
.Refresh(true)
.PageSizes(true)
.PageSizes(new int[] { 6, 15, 20 })
.ButtonCount(5))
.Sortable(sortable =>
{
sortable.SortMode(GridSortMode.MultipleColumn)
.Enabled(true);
})
.Scrollable()
.Events(e => e.Edit("onProductEdit").Save("onProductSave").Cancel("onProductCancel").DataBound("onDataBoundSavedProducts"))
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Events(events => events.Error("errorHandlerProduct"))
.Model(model =>
{
model.Id(item => item.ID);
model.Field(a => a.StakeHolder).DefaultValue(new Developer { ID = Model.UserID, Name = Model.UserName }).Editable(false);
model.Field(a => a.CreateDate).Editable(false);
model.Field(a => a.StakeHolder.Name).Editable(false);
})
.Read(read => read.Action("GetSavedProducts", "Product"))
.Update(update => update.Action("UpdateProduct", "Product"))
.Destroy(update => update.Action("DeleteProduct", "Product"))
.Create(update => update.Action("CreateProduct", "Product"))))
Here is my first validator:
(function ($, kendo) {
$.extend(true, kendo.ui.validator, {
rules: { // custom rules
dateValidation: function (input, params) {
if (input.is("[name='Description']") && input.val() != "") {
debugger
input.attr("data-dateValidation-msg", "A Description Cannot Be Longer Than 250 Characters");
return (input.val().length <= 250)
}
if (input.is("[name='ActiveDirectoryGroupName']") && input.val() != "") {
debugger
input.attr("data-dateValidation-msg", "A Group name Cannot Be Longer Than 50 Characters");
return (input.val().length <= 50)
}
return true;
}
},
messages: { //custom rules messages
dateValidation: function (input) {
// return the message text
return input.attr("data-val-dateValidation");
}
}
});
})(jQuery, kendo);
Here is the second grid:
<link href="~/Css/SavedManagementProjects.css" rel="stylesheet" />
<script src="~/JavaScript/SavedManagementProjects.js"></script>
@Html.Partial("~/Views/Shared/Info.cshtml", Model)
@(Html.Kendo().Grid<ProjectViewModel>()
.Name("GridManagementProjects")
.Columns(columns =>
{
columns.Bound(c => c.ProductID).Title("Product Id").Hidden();
columns.Bound(c => c.ProductName).Title("Product Name").Hidden();
columns.Bound(c => c.Name).Title("Name").Width(120);
columns.Bound(c => c.Leader.Name).EditorTemplateName("LeaderEditor").Title("Leader").Width(150)
.Filterable(f => f.UI("developersFilter")
.Mode(GridFilterMode.Row)
.Extra(false).Messages(m => m.Info("Show items with this leader"))
.Operators(operators => operators
.ForString(str => str.Clear()
.IsEqualTo("Is equal to"))));
columns.Bound(c => c.CodeReviewer.Name).EditorTemplateName("CodeReviewerEditor").Title("Code Reviewer").Width(150)
.Filterable(f => f.UI("developersFilter")
.Mode(GridFilterMode.Row)
.Extra(false).Messages(m => m.Info("Show items with this code reviewer"))
.Operators(operators => operators
.ForString(str => str.Clear()
.IsEqualTo("Is equal to"))));
columns.Bound(c => c.ActualStartDate).Title("Actual Start Date").Format("{0: MM/dd/yyyy}").Width(150);
columns.Bound(c => c.ActualEndDate).Title("Actual End Date").Format("{0: MM/dd/yyyy}").Width(150);
columns.Bound(c => c.EstimatedStartDate).Title("Estimated Start Date").EditorTemplateName("EstimatedStartDateEditor").Format("{0: MM/dd/yyyy}");
columns.Bound(c => c.EstimatedEndDate).Title("Estimated End Date").EditorTemplateName("EstimatedEndDateEditor").Format("{0: MM/dd/yyyy}");
columns.Bound(c => c.GitUrl).Title("Git Url").ClientTemplate("<a href='#= GitUrl #'>#= GitUrl #</a>").Width(120);
columns.Bound(c => c.StageId).Title("Stage").EditorTemplateName("StageEditor").Width(110);
columns.Bound(c => c.PercentCompleted).Title("Percent Completed").Width(130).ClientTemplate("<div style='width:94px; height:94px;'><canvas id='projectManagementChart_#=ID #' width='94' height='94' style='display: block; width: 94px; height: 94px;'></canvas></div>");
columns.Bound(c => c.Description).Title("Description").Width(120).HtmlAttributes(new { @class = "customCell" });
columns.Command(command => { command.Edit().UpdateText(" ").Text(" ").CancelText(" "); if (User.IsInRole("secSftwrProjMgmtAdmn")) { command.Destroy().Text(" "); } }).Width(150);
columns.Command(command => {command.Custom("ADDTASK").Text("Add Task").Click("addTask");
if (User.IsInRole("secSftwrProjMgmtAdmn"))
{
command.Custom("DeployProject").Click("DeployProject").Text("Deploy");
command.Custom("CompleteTask").Click("CompleteProject").Text("Complete");
}
}).Width(150).HtmlAttributes(new { id = "addTaskButton" });
})
.Groupable(g => g.Enabled(false))
.Filterable()
.ToolBar(toolbar =>
{
if (User.IsInRole("secSftwrProjMgmtAdmn")) {
toolbar.Template(@<text>
<div class="toolbar" style="float:left">
<a class="k-button k-button-icontext" onclick='addProjectAjax()' href="#">
<span class="k-icon k-i-add"></span> ADD PROJECT
</a>
<a class="k-button k-grid-excel k-button-icontext" href="#">
<span class="k-icon k-i-excel"></span>Export to Excel
</a>
</div>
</text>);
}
else
toolbar.Excel();
})
.Resizable(resize => resize.Columns(true))
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Excel(excel => excel
.AllPages(true)
.FileName("Projects.xlsx")
.Filterable(true)
.ForceProxy(true)
.ProxyURL(Url.Action("FileExportSave", "Home")))
.Pageable(pager => pager
.Refresh(true)
.PageSizes(true)
.PageSizes(new int[] { 6, 15, 20 })
.ButtonCount(5))
.Sortable(sortable =>
{
sortable.SortMode(GridSortMode.MultipleColumn)
.Enabled(true);
})
.Scrollable()
.Events(events => events.FilterMenuInit("filterMenuInitProject").DataBound("onDataBoundSavedProjects").Cancel("createPieAfterCancellation").Edit("onProjectEdit").Save("onProjectSave"))
.DataSource(dataSource => dataSource
.Ajax()
.Group(group => group.Add(p => p.ProductName))
.PageSize(20)
.Events(events => events.Error("errorHandlerProject"))
.Read(read => read.Action("GetSavedManagementProjects", "Project"))
.Model(model =>
{
model.Id(item => item.ID);
model.Field(a => a.ActualStartDate).Editable(false);
model.Field(a => a.ActualEndDate).Editable(false);
model.Field(a => a.PercentCompleted).Editable(false);
})
.Update(update => update.Action("UpdateProject", "Project"))
.Destroy(update => update.Action("DeleteProject", "Project"))))
Here my second validtor:
(function ($, kendo) {
$.extend(true, kendo.ui.validator, {
rules: { // custom rules
dateValidation: function (input, params) {
if (input.is("[name='Description']") && input.val() != "") {
debugger
input.attr("data-dateValidation-msg", "A Description Cannot Be Longer Than 250 Characters");
return (input.val().length <= 250)
}
if (input.is("[name='EstimatedStartDate']") && input.val() != "") {
var startDate = kendo.parseDate(input.val());
var endDate = kendo.parseDate($('#EstimatedEndDate').val());
if (startDate != null && endDate != null) {
input.attr("data-dateValidation-msg", "Estimated Start date should be before End date");
return startDate.getTime() <= endDate.getTime();
}
}
else if (input.is("[name='EstimatedEndDate']") && input.val() != "") {
var endDate = kendo.parseDate(input.val());
var startDate = kendo.parseDate($('#EstimatedStartDate').val());
if (startDate != null && endDate != null) {
input.attr("data-dateValidation-msg", "Estimated End date should be after Start date");
return startDate.getTime() <= endDate.getTime();
}
}
return true;
}
},
messages: { //custom rules messages
dateValidation: function (input) {
// return the message text
return input.attr("data-val-dateValidation");
}
}
});
})(jQuery, kendo);
Here us my third grid:
<link href="~/Css/SavedTasks.css" rel="stylesheet" />
<script src="~/JavaScript/SavedTasks.js"></script>
@Html.Partial("~/Views/Shared/Info.cshtml", Model)
@(Html.Kendo().Grid<TaskManagementUI.Models.TaskViewModel>()
.Name("GridTasks")
.Columns(columns =>
{
columns.Bound(c => c.ID).Hidden();
columns.Bound(c => c.ProjectID).Title("Project Id").Hidden();
columns.Bound(c => c.ProjectName).Title("Project Name").Hidden();
columns.Bound(c => c.Name).Title("Name");
columns.Bound(c => c.Developer.Name).Title("Developer");
columns.Bound(c => c.ActualStartDate).Title("Actual Start Date").EditorTemplateName("ActualStartDateEditor").Format("{0: MM/dd/yyyy}");
columns.Bound(c => c.ActualEndDate).Title("Actual End Date").EditorTemplateName("ActualEndDateEditor").Format("{0: MM/dd/yyyy}");
columns.Bound(c => c.PercentCompleted).Title("Percent Completed").Width(130).ClientTemplate(" <div style='width:94px; height:94px;'><canvas id='taskChart_#=ID #' width='94' height='94' style='display: block; width: 94px; height: 94px;'></canvas></div>").EditorTemplateName("PercentCompletedEditor");
columns.Bound(c => c.Description).Title("Description").HtmlAttributes(new { @class = "customCell" });
columns.Command(command => { command.Custom("DeployTask").Click("DeployTask").Text("Deploy"); command.Custom("CompleteTask").Click("CompleteTask").Text("Complete"); });
columns.Command(command => { command.Edit().UpdateText(" ").Text(" ").CancelText(" "); command.Destroy().Text(" "); }).Width(150);
})
.Scrollable()
.Resizable(resize => resize.Columns(true))
.Editable(editable => editable.Mode(GridEditMode.InLine).TemplateName("TaskEdit"))
.Groupable(g => g.Enabled(false))
.Filterable()
.ToolBar(toolbar =>
{
toolbar.Template(@<text>
<div class="toolbar" style="float:left">
<a class="k-button k-button-icontext" onclick='addTaskAjax()' href="#">
<span class="k-icon k-i-add"></span> ADD TASK
</a>
<a class="k-button k-grid-excel k-button-icontext" href="#">
<span class="k-icon k-i-excel"></span>Export to Excel
</a>
</div>
</text>);
})
.Excel(excel => excel
.AllPages(true)
.FileName("Tasks.xlsx")
.Filterable(true)
.ForceProxy(true)
.ProxyURL(Url.Action("FileExportSave", "Home")))
.Pageable(pager => pager
.Refresh(true)
.PageSizes(true)
.PageSizes(new int[] { 6, 15, 20 })
.ButtonCount(5))
.Sortable(sortable =>
{
sortable.SortMode(GridSortMode.MultipleColumn)
.Enabled(true);
})
.Events(events => events.DataBound("onDataBoundSavedTasks").Cancel("createPieAfterCancellation").Edit("onTaskEdit").Save("onTaskSave"))
.DataSource(dataSource => dataSource
.Ajax()
.Group(group => group.Add(p => p.ProjectName))
.PageSize(20)
.Events(events => events.Error("errorHandlerTask"))
.Read(read => read.Action("GetSavedTasks", "Task"))
.Update(update => update.Action("UpdateTask", "Task"))
.Destroy(update => update.Action("DeleteTask", "Task"))
.Model(model =>
{
model.Id(item => item.ID);
model.Field(a => a.Developer.Name).Editable(false);
})))
Here is my third validator:
(function ($, kendo) {
$.extend(true, kendo.ui.validator, {
rules: { // custom rules
dateValidation: function (input, params) {
debugger;
if (input.is("[name='ActualStartDate']") && input.val() != "") {
var startDate = kendo.parseDate(input.val());
var endDate = kendo.parseDate($('#ActualEndDate').val());
if (startDate != null && endDate != null) {
input.attr("data-dateValidation-msg", "Start date should be before End date");
return startDate.getTime() <= endDate.getTime();
}
} else if (input.is("[name='ActualEndDate']") && input.val() != "") {
var endDate = kendo.parseDate(input.val());
var startDate = kendo.parseDate($('#ActualStartDate').val());
if (startDate != null && endDate != null) {
input.attr("data-dateValidation-msg", "End date should be after Start date ");
return startDate.getTime() <= endDate.getTime();
}
}
if (input.is("[name='Description']") && input.val() != "") {
debugger
input.attr("data-dateValidation-msg", "A Description Cannot Be Longer Than 250 Characters");
return (input.val().length <= 250)
}
return true;
}
},
messages: { //custom rules messages
dateValidation: function (input) {
// return the message text
return input.attr("data-val-dateValidation");
}
}
});
})(jQuery, kendo);
thanks!
Thank you for the additional details.
The issue occurs because the same Kendo UI validator is extended creating a scenario where the validator-rules get overwritten.
In this scenario, I can suggest using only one validator for all of the tabs and to add a check for the Grid as well. I noticed that the field names are the same, and I can recommend checking if this is the "GridProducts" Grid and the input name is "Description". This will allow using only one validator for the three Grids with multiple rules.
Let me know if there is a limitation in the suggested approach which is making it not suitable for the current implementation.
Regards,
Stefan
Progress Telerik