Custom Validation Not Fired If Column Has Not Received Focus

[Brian]

I am using kendo with the ASP.Net MVC wrapper.  I have a grid that has two columns with dropdowns in them, a column with a numeric up/down textbox, and a column with a delete button.  I am using the InCell edit mode.  I am using ClientTemplates for each of my columns to output a hidden field that I can use to submit the values from the grid with the rest of the page.  I have validations set up on each of the columns via .Net attributes.  The columns with the dropdowns are in an invalid state by default, as the user should select a value from each of them before the row is valid.

When I add a new row to the grid, the dropdown in the first column appears automatically, and if I try to submit without selecting a value, I get a validation error for that column and the form is not submitted.  This is working as expected.  I don't get a validation message for the second column though, so if I select a value in the first dropdown I can submit the form.  If I click into the second cell, the dropdown for that cell appears.  If I try to submit at this point, I get a validation error and am not able to submit.  Also as expected.

The problem seems to be that the inputs are not created for the row until their cell receives focus, and validation doesn't run until the inputs exist.  Is there a way to get validation to run on all of the cells of a row, even if the cell has not received focus?

Thanks,
Brian

[Georgi Krustev]

Hello Brian,

It is not very clear how the grid is setup and how the validation is incorporated, as it should trigger on form submit. Could you share more information about your current implementation? A working jsBin/jsFiddle demo would be great.

Regards,
Georgi Krustev
Telerik

[Paul]

I also have this problem. 

How do we validate cells that do not have focus therefore have no input tag created? Want to be able to click submit and have all my required cells flagged for validation. currently it only works if the cells get focus and lose it.

[Paul]

Grid on my editor template:

@(Html.Kendo().Grid<TaskParameterViewModel>(Model.TaskParameters)

    .Name("TaskParameters")

    .Columns(columns =>

    {

        columns.Bound(p => p.ParamName);

        columns.Bound(p => p.ParamValue);

        columns.Bound(p => p.Required);

    })

    .Editable(editable => editable.Mode(GridEditMode.InCell))

    .Pageable()

    .Sortable()

    .AutoBind(false)

    .HtmlAttributes(new {style = "width:700px;height:250px" })

    .DataSource(datasource => datasource

        .Ajax()

        .ServerOperation(false)

        .Batch(true)

        .Model(model =>

        {

            model.Id(p => p.TaskDefaultParamID);

            model.Field(p => p.ParamValue);

            model.Field(p => p.Required).Editable(false);

            model.Field(p => p.ParamName).Editable(false);

        })

 

        .Read(read => read.Action("TaskParameters_Read", "Parameters").Data("theTaskID2"))

        .Update(update => update.Action("TaskParam_Update", "Parameters").Data("theTaskID2"))

 

    )

   .ToClientTemplate()

 

 

)

kendo validator code on index.cshtml:

(function ($, kendo) {
       $.extend(true, kendo.ui.validator, {
           rules: { /* custom rules */
               activeenddatetime: function (input) {
                   if (input.is("[data-val-activeenddatetime]") && input.val() != "") {
                       var enddate = kendo.parseDate(input.val()),
                           startDate = kendo.parseDate($("[name='" + input.attr("data-val-activeenddatetime-activestartdatetime") + "']").val()),
                           indefinite = $("input[type='hidden'][name='" + input.attr("data-val-activeenddatetime-indefinite") + "']").val();

                       /* Ensure end date is >= start date as long as the schedule is not indefinite (requires an end date) */
                       if (indefinite == "false" && startDate.getTime() > enddate.getTime())
                           return false;
                   }
                   return true;
               },
               paramvalue: function (input) {

                   if (input.is("[data-val-paramvalue]") && input.val() == "") {//&& input.val() == ""
                       var required = $("#ParamValue").parent("td").next("td").html();

                       if (required == "Yes")
                           return false;
                   }
                   return true;
               }
           },
           messages: { /*custom rules messages */
               activeenddatetime: function (input) {
                   /* return the message text */
                   return input.attr("data-val-activeenddatetime");
               },
               paramvalue: function (input) {
                   /* return the message text */
                   return input.attr("data-val-paramvalue");
               }
           },
           errorTemplate: "<div>#=message#</div>"
       });
   })(jQuery, kendo);

I want it to say a cell is required if empty and Required cell is 'Yes' for all value cells upon submit.

[Georgi Krustev]

Hello Paul,

Thanks for the code snippets. This really clarified what the problem is. As you mentioned in your first message, Kendo Validator can validate input elements (any successful elements in that matter). It can validate only UI elements and not data models. What you can do to accomplish your goal is to use a different edit mode, for instance "inline", or define default values.

Regards,
Georgi Krustev
Telerik

 

 

[Paul]

I am using inline edit mode on my nested grid. The grid that this whole question is about. Cant have default variables in my case since we're specifying parameters for an executable.

What I ended up doing was setting focus on the cell after another field in my form lost focus then triggering the focusout on the input that is generated when the cell is clicked. Then to ensure the rest of the parameters are accounted for with validation after focus is lost from the cell input it calls focus to the next cell and so on and so forth. The form wont submit if there is validation pending on an input so this works out.

So inside my onEdit() function bound to the edit event on the parent grid I have:

$(function () {
//Go to parameters afer description
            $('#Description').blur(function () {
                goToNextParameter(true);
            });
        });

 Then here is the gotoNextParamFunction

function goToNextParameter(setupBinding) {
    var parameterGrid;
    if (parameterGrid = $("#TaskParameters").data("kendoGrid")) {
        for (var i = 0; i < parameterGrid.tbody[0].rows.length; i++) {
            if (parameterGrid.tbody.find("tr:eq(" + i + ")").find("td:eq(1)").html() == "" && parameterGrid.tbody.find("tr:eq(" + i + ")").find("td:eq(2)").html() == "Yes") {

                parameterGrid.tbody.find("tr:eq(" + i + ")").find("td:eq(1)").click();
                break;
                //if you want to call validation immediately use this line after. I just let user fill in the data
                //parameterGrid.tbody.find("tr:eq(2)").find("td:eq(1) input").focusout();

            }
        }

        if (setupBinding)
            $("#ParamValue").blur(function () {
                goToNextParameter(false);
        });
    }
}

the boolean in the function is only so the binding to the input id doesnt occur more than once. That same input id is used on all of your rows for a given grid column. The id name is whatever you bound the column to.

[Alexander Popov]

Thank you Paul, for taking the time to share your solution. Hopefully it would help someone else having the same scenario.

Regards,
Alexander Popov
Telerik