Batch Editing - Row Validation

[Geoff]

Hi,
    I am looking for help with RadGrid Batch Editing. I have developed a solution that works fine as far as inputting data and saving to the DB goes but doesn't handle validation very well at all. I'm sure there are likely to be some good examples of what I would like to do but my searches fail to turn up anything, mainly because of the multitude of related articles.

Currently, I have cell validation for those cells that need it but not row validation. There are some cells that are either mutually exclusive or inclusive, so I would like to do a validation check on these. At the moment I just discard invalid rows, which isn't very helpful to the poor user. My two problems are:

1) I cannot see a way to preserve invalid rows on the grid after postback.

2) I can create a list of validation errors but cannot figure out how to display these to the user. Everything I have tried executes OK but doesn't show up in either a label or popup message after postback.

Below is a list of options, a solution for any one of these would be sufficient for me. My favourite solution is at the top but any one is acceptable.

1) When the user presses the "Save Changes" button, check all rows and flag up the ones with validation problems. The whole grid remains as it was when the user pressed the "Save Changes" button (i.e. with all the edits stall flagged and outstanding).

2) When the user presses the "Save Changes" button, each row is checked and saved if OK. The remainder are flagged up as having validation problems, which the user can then address and re-save once sorted.

3) Discard the invalid rows as I am currently doing but notify the user via a popup message once the postback has completed.I would be grateful for any help
with this problem.

Regards

Geoff

[Konstantin Dikov]

Hi Geoff,

Since there is no easy way for preserving the changes for rows with failed validation after postback, what I could suggest is that you handle the row validation entirely on client-side and allow the user to save only when the validation for all rows passes.

For your convenience I am attaching a simple example demonstrating such client-side validation, where you could go through each row, get reference to any of the cells of that row and validate each value. This should be achieved in the client-side OnCommand event of the grid. If the validation fails for any row you could cancel the command, which will prevent the postback.

Please give a try to the attached sample page and see if the same approach could be used for your requirement.


Regards,
Konstantin Dikov
Telerik

 

 

[Geoff]

Konstantin,
    Many thanks for your reply, it looks as though your solution will do just what I need. It'll take me a couple of days to give it a try because I have some other things to sort out first.

Thanks again.

Geoff

[Geoff]

Konstantin,
    I managed to find time have a go with the example you sent me. I had to make one small change that is likely to be caused by us using an earlier version of Telerik's Dev Tools (Qtr 3 2013). I had to change "batchManager.getCellValue" to "batchManager._getSetCellValue" because the getCellValue method doesn't exist in our version.

Apart from that the example worked great and I found it easy to integrate with my project. Now I can display errors/warnings and give the user the opportunity to sort things out before the Save Postback occurs.

Thank you very much for making this easy for me.

Regards

Geoff

[Geoff]

Konstantin,
    I do have a question for you about the solution you provided. I understand that the following line will prevent the postback for the save operation. 

args.set_cancel(true);

but what does this line do?

dataItems[i].get_element().className += " failedValidation";

Regards

Geoff

[Konstantin Dikov]

Hello Geoff,

The second line demonstrates how you could add custom CSS class to the rows where the validation fails and apply some informative styles to those rows. As you could notice in the attached sample page, the CSS class failedValidation is changing the background of the row:

<style type="text/css">
    .failedValidation {
        background: #ff6a00!important;
    }
</style>

If in your scenario you do not need to change the style of rows with failed validation you could remove those lines from the logic.


Best Regards,
Konstantin Dikov
Telerik

 

 

[Geoff]

Konstantin,
    Ah yes, I did not spot the style tags at the top of the page, I was too eager to get the rest of the code going. I have now included this in my project too. Looks good, thank you once again for your excellent support.

Regards

Geoff

[Brad]

Hi, I implemented this same solution and for the most part it works great.  However it seems to validate all of the rows and not just the rows that have been edited. I only want to validate the rows that were just typed, how would I go about doing this?  I tried changing masterTable.get_dataItems() to masterTable.get_editItems() but it always returns nothing.

I also tried using the _extractChangesString but that doesn't appear to help me at all as it's for the whole table not just that row.

 

Thank you

[Konstantin Dikov]

Hello Brad,

In a real scenario, if you have validation for the edited rows, that validation should pass on the already existing rows, so I am not exactly sure why you need to validate only the updated items.

Nevertheless, you can use the following modification that will validate only the edited rows:

....

if (id > 3 && $telerik.$(dataItems[i].get_element()).find(".rgBatchChanged").length > 0) {
    dataItems[i].get_element().className += " failedValidation";
    validationFails = true;
}

...

Hope this helps.


Regards,
Konstantin Dikov
Telerik

[Brad]

Thanks Konstantin. I implemented this and it has been in use for some time however we just discovered an issue with it, it only works the first time they hit save.  So if you have it flag a row as being required and abort the save the user can just hit save a second time and ​it will bypass the validation. It no longer sees this as a "new" row and does not validate it as it should.  Is there any way to do this while having it remember that this is an unsaved row?

I have tried disabling the save button and then re-enabling it when a change is made.  However as I mentioned above there seems to be no way to compare the old value to the new value so I can't actually check that the proper field was updated before enabling the save button.  Currently the user can change another unrelated field and that will re-enable the save button.

Also I'm not sure why you think this isn't a "real" scenario as it very much is. We have lines being prefilled for the user on a Timesheet grid but they do not have to be filled in, however if you do fill them in you are required to meet a certain criteria.  The prefilled rows almost never have all the required values but if you are not adding time against them it does not matter, it's only when you enter time against them that you have to ensure that the time code, job code, etc are all entered.

 

Thank you

[Konstantin Dikov]

Hi Brad,

I have tested the example that I have attached in one of my previous posts with the modification from the last one and I am not able to observe such issue and the validation works on each "Save Changes" click, because each click will fire the client-side OnCommand event of the grid, where the validation is performed. 

Can you please try to modify the example in question, so it could replicate the issue that you are facing?

I am looking forward to your reply.


Regards,
Konstantin Dikov
Telerik

[Jeremy Yoder]

 

I really like the code solution given in the 2nd post here, by highlighting problematic rows. But as you can see from my screenshot, when I select a row that was flagged as an error, the highlight color is in the bottom part of the row, whereas the error color (from the failedValidation class) is the top part of the row. This is because I have <Selecting AllowRowSelect="True" />

How can I get around this?

Btw, the Skin on my grid, for this screenshot, is Office2010Blue.

 

[Konstantin Dikov]

Hi Jeremy,

For applying the custom background of the problematic rows over a selected item you could include the following in the CSS, which will add the same background color to the TD elements as well:

<style type="text/css">
    .failedValidation, .failedValidation td {
        background: #ff6a00!important;
    }
</style>

Hope this helps.


Regards,
Konstantin Dikov
Telerik

[Jeremy Yoder]

Perfect! Thanks!

[Dan]

Hi,  The code provided by @Konstantin may be the beginning of my solution.
I have a RadGrid (Telerik.web.UI v. 2015.2.623.45) which utilizes Batch Editing.

I validate one of the fields utilizing a Server/Database Query which  I plan to implement with an ajax call imbedded in the JavaScript provided.  

Since this is somewhat costly, Is there a way to identify which rows have been edited (for "Insert" or "Update") as my data size is relatively large and I don't want to validate rows that have not been edited.

[Eyup]

Hello Dan,

Generally, you can use the hasChanges method to determine whether the user has made any changes:
http://demos.telerik.com/aspnet-ajax/grid/examples/data-binding/client-side/client-data-source-binding/defaultcs.aspx

You can use the following approach to achieve this requirement:
1. Use the following event handler:
http://docs.telerik.com/devtools/aspnet-ajax/controls/grid/client-side-programming/events/onbatcheditcellvaluechanging
2. Get a reference to the row using the arguments.
3. Extract the unique record ID:
http://docs.telerik.com/devtools/aspnet-ajax/controls/grid/rows/accessing-cells-and-rows#accessing-cells-and-values-in-client-side-code
4. Execute your custom validation logic.
5. Depending on the result, you can cancel the modification using the args.set_cancel(true) method.

I hope this will prove helpful.

Regards,
Eyup
Telerik by Progress