I want to validate user input upon pressing tab key. It works well. But when user entered wrong data I want to force them to update. Meaning I want to get focus to the cell that was just edited.
I tried
But nothing worked.
Is the possible to simulate hitting Shift + Tab via javascript?
One more question why
How to test with jsFiddle ? Type for example 10+14 in c1 column and hit Tab key. You get message that minutes "14" are not ok. Only 0, 15, 30, 45 are allowed.
table.on('cellEdited', (cell) => {
var fieldName = cell.getField()
var fieldValue = cell.getValue()
var fieldLength = fieldValue.length
var row = cell.getRow()
var acceptedMinutes = [0, 15, 30, 45]
switch (fieldName) {
case "c1":
fieldValue = fieldValue.replace(",", "").replace("+", "").replace(".", "").replace(" ", "")
switch (fieldLength) {
case 1:
case 2:
fieldValue = fieldValue + ":00"
break
case 3:
case 4:
var position = fieldLength - 2
fieldValue = fieldValue.substring(0, position) + ":" + fieldValue.substring(position);
break
}
var tmpArray = fieldValue.split(":")
if (tmpArray[1]) {
if (!acceptedMinutes.includes(Number(tmpArray[1]))) {
console.log("minutes NOT ok")
cell.getElement().focus()
//cell.getElement().click()
} else {
console.log("minutes ok")
}
}
var hour = Number(tmpArray[0])
if (hour > -0 && hour < 24) {
console.log("hours ok")
} else {
cell.getElement().click()
cell.getElement().focus()
console.log(cell.navigateLeft())
console.log(cell.navigatePrev())
console.log(cell.navigateRight())
console.log("hours NOT ok")
}
row.update({ "c1": fieldValue })
// row.update({fieldName: fieldValue})
break
}
})
You cannot focus() the cell because the cell element is a div, and it does not have the input element rendered in it. You can use cell.edit() to focus the input element, but because the input element needs time to render, you can wrap the edit() call inside a setTimeout(). So it would look like this:
setTimeout(function() {
cell.edit();
}, 100);
Another way you can look into is to customize your own key bindings and disable the default action for the tab key. You can then perform your validation first, and then use navigateNext() or navigateRight() to move onto the next cell.