I can't stop event propagation from the editCellEnding event. In the event a user enters something other than a number, I show them an alert and want the focus to remain on the current cell, and it to stay in edit mode. If I try this and enter an invalid value and tab away, then the alert is shown but the focus is moved to the next cell and it enters edit mode. I've tried stopPropagation, stopImmediatePropagation, preventDefault and just returning false but nothing seems to stop it.
editCellEnding: function (evt, ui) { if(ui.value!='' && isNaN(ui.value)){ alert('Not a valid scoring number'); evt.stopPropagation(); evt.stopImmediatePropagation(); evt.preventDefault(); return false; }
Hi Borislav,
Unfortunately, I can't make that field required. Some rows will not have entries for those columns and I need to allow the user to leave the field with an empty string/value.
My issue isn't really validation but in trying to cancel the event and keep the focus in that cell. The code I included doesn't have it, but there are additional dynamic validation rules that would be applied in the editCellEnding such as that the number can't be < 0, can't be more than the number of rows or more than the the max allowed for the master record that those records fall under. It's a competition scoring tally, and using relative placement a competitor in that round can't get a score higher than the number of competitors or the max entries in the next round, or higher than 3 if it's using callbacks and so forth - and some might not even receive a score. When the user is entering data, they may accidentally click into one cell and try to leave (regularly happens or they put the wrong score in one that needs to stay blank) so I need to allow it to not be required (data is submitted via a json object after calculations).
We couldn't use the ASP.NET version of the webdatagrid because we need to add/delete/define columns dynamically on the client based on the number of entries/records (scoring is based on that and requires an additional display column per competitor) and judges columns so we are trying the jQuery one again. Otherwise, we would have gone with the ASP.NET version which seems a bit more robust as far as that stuff is concerned.
I'm not familiar with the column settings object but will have to look.I'm confused regarding the hidden column you mentioned in your PPS statement. While there is a hidden cell in the grid, the cell that I was editting is not hidden.
Hi Chris,The only way I can think of is to rely on editor validation instead of the editCellEnding event. Can you give the the following configuration of the Updating feature a go?
{ name: 'Updating', editMode: 'cell', enableAddRow: false, enableDeleteRow: false, columnSettings: [ { columnKey: "J5", required: true, validatorOptions: { keepFocus: true } } ] }
Please let me know if works for you or not (fingers crossed that it does! :)).PS: It might seem like a stretch to define a column setting for each one of your number-valued columns, but with some clever array manipulation you can iterate through the array of the grid's columns and generate an Updating columnSettings array object. PPS: The fact that the the editCell* events do not honor the presence of hidden cells has been logged as a development issue with ID #117141 which will soon be associated with a CASE bound to this forum thread.
That was just code to try to get the event to stop and focus to remain in the current cell. The values can be an empty string (the default that was coming from the json data or a number the user entered - which is why I was checking and allowing either an empty string (if the user entered edit and left without changing anything) or a false from isNaN. Thanks for the info on the igNumericEditor though.
The code was being executed and going all the way to the return false statement (having tried each of the previous statements by themselves and together as well) but the propagation didn't stop and the focus was moved to the next cell as a result of the tabbing/hitting enter/etc...
How can I stop the event from continuing and keep the focus in the current cell?
Hi Chris,It seems to me that the checks you are performing are not sufficient to capture the fact that if the cell is left empty, its actual value is NULL.Also, if you're editing a number-valued column, our igNumericEditor ensures that the user can enter only numbers (no funny business).Thus, here's the code I can suggest:
editCellEnding: function (evt, ui) { if(ui.value === "" || !ui.value) { alert('Not a valid scoring number'); evt.stopPropagation(); evt.stopImmediatePropagation(); evt.preventDefault(); return false; } return true; },
PS: Check are based on the suggested answers from SO (http://stackoverflow.com/questions/154059/what-is-the-best-way-to-check-for-an-empty-string-in-javascript)