Behaviour of Manual validation of In-Cell Edit Grid

[Andrei]

Hello,

We have a batch-edit in-cell edit grid with various validation rules. Because it is in-cell, we have manually implemented validation of our rules in the SaveChanges event as can be seen in the following example:

https://feedback.telerik.com/kendo-jquery-ui/1359255-grid-new-row-validation-when-in-cell-edit-mode
https://dojo.telerik.com/OjuViFub

saveChanges: function(e) {
              e.preventDefault();

              var grid = e.sender;
              var data = grid.dataSource.data();
              var validationPassed = true;

              data.forEach(function(e, i){

                if(e.dirty || e.id === null) {
                  var uid = e.uid;
                  var row = grid.element.find("tr[data-uid=" + uid + "]");
                  var tds = row.find("td");

                  tds.each(function(i, e) {
                    grid.editCell(e);

                    if (grid.editable) {
                      var valid = grid.editable.validatable.validate();

                      if (!valid) {
                        validationPassed = false;
                        return false;
                      }
                    }
                  });
                }
              });

              if (validationPassed) {
                grid.dataSource.sync();
              }
            }
          });

It loops through each cell on save, entering edit mode to render the input, and running the validation on the input. The issue with this is that one of our custom validation rules is that one of two columns are required (i.e.  A XOR B - you must enter a value for one of them, but not both). The issue arises in the fact that the above manual validation loops through each cell, left to right, top row to bottom. 

For reference, here is the custom validation rule:

(function ($, kendo) {
        $.extend(true, kendo.ui.validator, {
            rules: {
                AorBRequired: function (input, params) {
                    if (input.is("#ColumnA") || input.is("#ColumnB")){
                        var grid = input.closest(".k-grid").data("kendoGrid");
                        var dataItem = grid.dataItem($(".k-grid-edit-row"));
                        input.attr("data-AorBRequired-msg", "You must enter A or B");
                        //Compare input value of A to dataItem value of B and vice-versa
                        //In-cell grid only allows us to enter edit for one cell at a time thus we cannot compare two inputs directly
                        if (input.is("#ColumnA")) {
                            return !($("#ColumnA").val() === '' && dataItem.ColumnB === null);
                        } else if (input.is("#ColumnB")) {
                            return !($("#ColumnB").val() === '' && dataItem.ColumnA === null);
                        }
                    }
                    return true;
                }
            },
            messages: {
                customrequired: function (input) {
                    return input.attr("data-val-customrequired");
                },
                AorBRequired: function (input) {
                    return input.attr("data-val-AorBRequired");
                }
            }
        });
    })(jQuery, kendo);

 

Because of this, if the user leaves both columns A and B empty, the validation stops on column A (since it appears to the left of B, and the validation reaches it first). Now, the grid is "stuck" in this cell, and the user cannot leave it until they enter a value.

This is problematic, because perhaps the user wanted to enter column B and forgot, but now they are stuck inside the cell for column A. Now they must enter a value for column A so they may leave the cell, cancel all changes, and re-add the record.

Given this information, is there an alternative/work-around to enforce this 'Column A XOR B is required' validation rule whilst using in-cell grid editing with the manual save changes loop logic, which does not result in the described unwanted behaviour?

[Alex Hajigeorgieva]

Hello, Andrei,

Thank you for the provided relevant resources to support the explanation of your case. The user does not need to cancel all changes when they enter a value in Column B. The can just enter some value so the cell can close, go back to Column A and enter the value there and then return to Column B. At least this is what the custom validation is doing even in normal editing (before saveChanges).

If the desired behaviour is to skip the validation of A then it seems that this part of the condition needs revising:

if (input.is("#ColumnA")) {
   return !($("#ColumnA").val() === '' && dataItem.ColumnB === null);
}

Alternatively, you could change the condition and skip the Column A like this but then the user will get stuck at Column B, is this the desired outcome?

https://dojo.telerik.com/uyEsuKux

if (!(valid || $(e).find("[name='UnitsInStock']").length)) { // check if this is A
     validationPassed = false;
     return false;
}

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[Andrei]

Hey Alex,

The issue with the validation of A or B is it's an Exclusive OR (they cannot leave both blank, but they cannot enter values for both either). The validation enforces this by disabling B when A is entered, or by disabling A when B is entered. For this reason the user can't enter a value for A, then fill out B, then erase the value in A (this would be fine if the requirement was not A XOR B).

As such, we can't simply skip validating one or the other because when both are empty, since one of the two is required and the program doesn't know which one the user intends to enter, and so by being 'stuck' in column A, the user is prevented from filling column B.

[Alex Hajigeorgieva]

Hello, Andrei,

I am not sure what mechanism is used in the application but I believe that the change event of the data source can help. You can  set one field to null if the other has a value and vice versa. I believe that the manual model validation should be transformed to be triggered on field B if A has no value:

Depending on the user input, you can decide which field value will be recorded:

https://dojo.telerik.com/@bubblemaster/ETuLECIH

Otherwise, I believe that the users will get stuck either in A or in B which is not ideal - managing this programmatically seems to provide a much better user experience. To test the Dojo, use the instruction at the top.

Let me know what you think.

Regards,
Alex Hajigeorgieva
Progress Telerik

[Andrei]

Hey Alex,

Allowing the user to enter both but nulling one after the other is entered had never occurred to me. I've implemented your solution and it works just as expected.

Thank you for all your help!

As a side-note for anyone that reads this, I was able to change the URL in the confirmation dialog with the following CSS and set its content to something else:

<style>
    .k-confirm .k-window-titlebar::before {
        content: 'Confirmation';
    }

    .k-confirm .k-window-titlebar .k-dialog-title {
        display: none;
    }
</style>