Validation for new record in batch edit grid

[Brian Roth]

With the batch edit grid, what is the best way to handle validation for a new record?  The problem I am running into is that I have multiple required fields, but validation only fires in the cells that the user clicks on.  Is there a way to force validation for all the cells for any new record or is there some different way to handle this?  To reproduce this situation, you can just make the ProductName field the second field in the grid instead of the first in the batch editing demo.

Related to this, what would be the best way to display a message to a user after a save operation fails?  I'm using MVC, so I was going to pass a message back in the Json, but is there an opportunity to then do something with the message on the client side?

As always, thanks for your help.

Regards,
Brian

[Iliana Dyankova]

Hi Brian,

Straight to your questions:

• In batch editing mode only one of the cells could be in edit mode at a time - hence there could not be more than one input elements in the Kendo UI Grid. The validation will not be triggered for the other cells since their input elements do not exist and they can not be validated. I would suggest to use different edit mode, like inline - it supports multiple fields to be edited at a time. Also you could set default values through field declaration defaultValue option. For example:

  schema: {
      model: {
          id: "ID",
          fields: {
              ProductName: {
                 defaultValue: "DefaultProductName"
              }
          }
      }
  }

• If the update on the server fails, you can throw an exception and handle it on the client via the error event of the dataSource.

Regards,
Iliana Nikolova
the Telerik team

[Brian Roth]

Hi Iliana,

Thanks for the ideas!  I gave a demo of the batch edit mode to the product development team last week and they're pretty excited about it, so I think I'm going to try to make that work somehow.  The error method was just what I was looking for as far as being able to show a message to the end user.  I'm using that for now to return any validation errors for new rows and that should be fine.

One thought I did have was that in the saveChanges event I could try to find any rows that are insert rows and loop through all the columns in the row and make a call to editCell and then closeCell to see if I could get the validation to fire that way.  I'll give that a shot and let you know how it goes.

Thanks,
Brian

[Brian Roth]

Ok, I think I've got it working.  I thought I'd post my code in case anyone else might find it useful.

Here's the saveChanges method:

saveChanges: function (e) {

   handleSaveChanges(e, this);

}

And here's my function that handles the validation.  The only part that's really specific to our project is the check to see if a row is an insert row.  All of our models have an Id property that is an integer, so my logic is based on that:

handleSaveChanges = function (e, grid) {

        var valid = true;

        // See if there are any insert rows

        var rows = grid.tbody.find("tr");

        for (var i = 0; i < rows.length; i++) {

 

            // Get the model

            var model = grid.dataItem(rows[i]);

            // Check the id property - this will indicate an insert row

            if (model && model.Id <= 0 && valid) {

 

                // Loop through the columns and validate them

                var cols = $(rows[i]).find("td");

                for (var j = 0; j < cols.length; j++) {

                    // Put cell into edit mode

                    grid.editCell($(cols[j]));

 

                    // By calling editable end we will make validation fire

                    if (!grid.editable.end()) {

                        valid = false;

                        break;

                    }

                    else {

                        // Take cell out of edit mode

                        grid.closeCell();

                    }

                }

            }

            else {

                // We're now to existing rows or have a validation error so we can stop

                break;

            }

        }

 

        if (!valid) {

            // Abort the save operation

            e.preventDefault(true);

        }

    };

Regards,
Brian

[Jason]

Hey Brian,

I ran into the same situation, and used your code to solve my issue.  The only thing I added was:
           

grid.closeCell();

at the top of the handleSaveChanges function.  This will close any cells already in edit mode, and if validation fails, prevent 2 cells from being in edit mode at the same time.

Thanks again,
Jason

[Craig]

I've implemented the above solution mentioned by Brian. I was wondering if this is the only solution when doing a batch edit for a grid. It is kind of slow since it has to go into edit mode for each cell. Is there something that has addressed this or another more effective solution? Thanks.

[Petur Subev]

Hello Brian,

The approach suggested by Iliana is still the one that we would suggest. InCell edit mode still behaves the same and there is only one input element at a time which could be validated.

Regards,
Petur Subev
Telerik

 

 

[Gaurav]

In the below condition why are we using "model.Id <= 0" ??

Condition : if (model && model.Id <= 0 && valid) {

I think we should be using "model.Id > 0". Earlier it was not validating, but after changing the condition its running smoothly.

Thanks,

[Remco]

I've had to change the line that said

var cols = $(rows[i]).find("td");

to

var cols = $(rows[i]).find("td[role=gridcell]");