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 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)
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,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.
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,
revbones said:My issue isn't really validation but in trying to cancel the event and keep the focus in that cell.
revbones said: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,After discussing development issue #117141 with our developers it turned out that I was wrong - the column index is correct in the editCell* events - so I admit that I got a bit hasty in submitting that.About the sample I promised you - it's doable with in row editing mode, because the rowEditEnding event has an input param called ui.keepEditing - it allows the editor of the cell to remain instead of jumping to the next cell. Our developers will add this param to the editCellEnding event for the next Service Release so hopefully then (about a month from now) we'll have have a better out-of-the-box solution for you.All the best,Borislav
Hello Chris,
Thank you for your reply and feedback. We appreciate that you took the time to convey your comments and I assure you that we consider our customer community comments very important to steering improvement at Infragistics.
Should you still decide to try the igGrid, please do not hesitate to contact us for support.
I appreciate that. Unfortunately I didn't have the time to wait, and it seemed like everyday I was bumping my head against at least one shortcoming or issue of the igGrid for a couple of weeks, multiple ones of which got entered as bugs for the next service release. I was able to take jsViews, build my table template dynamically for it, apply the Editable library, jQuery Sorting & Pagination, add new rows and complete the task in under 3 days. I was even able to add my own custom keyboard navigation in that timeframe (tab at end of row goes down to next row first editable cell, down arrow/enter move down and start next column at end, etc... )
Maybe I'll try igGrid again sometime, but I can't waste any more time on it currently and not again until it's a bit more robust (and more fully documented). Thanks again though.
~Chris