markInvalid() for cells in an EditorGrid

[AdamDawes]

I'm taking advantage of the very nice QuickTips feature along with the Field.markInvalid() method to provide information to a user about which fields contain invalid data. When the user leaves a field, the field is validated, and marked as invalid if it doesn't meet the requirements of the application.

This all works very nicely indeed.

Now I'm extending my application to support grids. The grids are working fine, but there doesn't appear to be any way to mark individual cells of the grid as invalid. I'd really like to have specific cells highlighted with the "zig-zag underline" indicator and have the QuickTips information pop up on hovering on the cell, just like my non-grid fields.

Is there a way to achieve this?

If I can't make it work, I'm afraid that for consistency I'm going to have to remove all the other markInvalid() and QuickTips functionality so that I can keep the whole UI consistent. :(

Thanks in advance,

[jay@moduscreate.com]

Adam, you can set editor grids to automatically mark invalid. is that not enough?

[AdamDawes]

Hi djliquidice,

I assume you mean using the validateedit event on the grid? If so, I don't think that's going to be sufficient...

I have fairly complex validation rules that query other fields within my form in order to determine whether a value is valid or not, and I also have custom messages that are displayed depending upon the error. In non-grid fields, I call the markInvalid() function if my conditions aren't met, passing in the custom error string.

As I understand it, the validateedit event allows me to perform custom validation on the field, but all I can do if it fails is set the cancel value to true to indicate this. When this happens, the grid cancels the edit, which isn't the behaviour I want (I was the edit to be saved but highlighted). It also doesn't allow me to provide my custom validation text.

Or is there some other way of validating the grid data that I'm overlooking?

Many thanks,

[AdamDawes]

Thanks to the always-enlightening posts on this forum and a bit of a read through the Ext source code, I eventually figured out a solution to this, which I'll post below in case anyone else that might find it useful.

First I set up a renderer for the columns to which I wanted to apply validation.

Within the renderer, I test for my validation condition. If it fails the test (is invalid), I set the cell's css property to contain the 'x-form-invalid' class. I then set the cell's attr property to:

'ext:qtip=""This field is invalid""; ext:qclass=""x-form-invalid-tip""'

The css change causes the standard wiggly-underline to appear within the affected grid cell. The attribute change gets the QuickTips to apply to the grid cell, displaying the error message ("This field is invalid") and also the exclamation mark icon, just as in a non-grid field after a markInvalid() call.

If the validation condition is successful (no error), the renderer removes the 'x-form-invalid' class and sets the qtip message to be an empty string.

Finally the renderer returns the value that was passed in as its first parameter, so that the value within the cell is displayed unaltered.

This does the job fine for me: I can have invalid values present in my grid, all highlighted, and all with QuickTips. Nice.

[marco.braga]

Adam, would you like to share some of your code? Thanks!

[AdamDawes]

Hi Marco,

Certainly. I've set up a renderer for the grid column in question, and have the following function defined for the renderer:

function extGrid_renderer(val, cell, record, row, col, store) {
if (record != undefined) {
// Make sure we have a value
if (val == '') {
// No value so highlight this cell as in an error state
cell.css += ' x-form-invalid';
cell.attr = 'ext:qtip="Please enter a value"; ext:qclass="x-form-invalid-tip"';
} else {
// Value is valid
cell.css = '';
cell.attr = 'ext:qtip=""';
}
}
// Return the value so that it is displayed within the grid
return val;
}This implements the error highlighting and quicktips as I described in my post above.

[marco.braga]

Thank you Adam! Too bad that grid columns don't have an "invalid state" like form fields.. Handling server side validation becomes much more difficult.

[jeremy.hennegrave]

so anyone would have an idea on how get the cell object from the exterior of the grid event to realise the same action that AdamDawes have give ?


thx,
J