This is a migrated thread and some comments may be shown as answers.
Behaviour of Manual validation of In-Cell Edit Grid
4 Answers 139 Views
This is a migrated thread and some comments may be shown as answers.
Andrei
Top achievements
Rank 1
Andrei asked on 13 Jan 2020, 04:54 PM

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?

4 Answers, 1 is accepted

Sort by
0
Alex Hajigeorgieva
Telerik team
answered on 15 Jan 2020, 04:18 PM

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

Get quickly onboarded and successful with your Telerik UI for ASP.NET MVC with the dedicated Virtual Classroom technical training, available to all active customers.
0
Andrei
Top achievements
Rank 1
answered on 15 Jan 2020, 04:52 PM

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.

0
Alex Hajigeorgieva
Telerik team
answered on 17 Jan 2020, 04:11 PM

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

Get quickly onboarded and successful with your Telerik UI for ASP.NET MVC with the dedicated Virtual Classroom technical training, available to all active customers.
0
Andrei
Top achievements
Rank 1
answered on 17 Jan 2020, 06:48 PM

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>
Tags
Grid
Asked by
Andrei
Top achievements
Rank 1
Answers by
Alex Hajigeorgieva
Telerik team
Andrei
Top achievements
Rank 1
Share this question
or