grids validation

4 posts, 0 answers
  1. Michael
    Michael avatar
    50 posts
    Member since:
    May 2014

    Posted 01 Feb 2018 Link to this post

    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

     

  2. Stefan
    Admin
    Stefan avatar
    2819 posts

    Posted 05 Feb 2018 Link to this post

    Hello, Michael,

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Michael
    Michael avatar
    50 posts
    Member since:
    May 2014

    Posted 06 Feb 2018 Link to this post

    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!

     

  4. Stefan
    Admin
    Stefan avatar
    2819 posts

    Posted 07 Feb 2018 Link to this post

    Hello, Michael,

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top