Inline editing - client validation when tabbing to next column

Unicom

I am looking for way to validate a field client side and prevent tabbing to the next column when in error. The preSubmit event works great when you press the enter key when editing, but I cannot find any event that works for the tab key. I tried with preEdit, preBlur and preClose and altho the error is set, I can never prevent the editor from moving on to the next column, which resets the field and hides the error message.

My code so far:

editor.on('preSubmit', function(e) {
    var distance = this.field('totalDistance');
    if (isNaN(distance.val())) {
        distance.error('Must be a number');
    }
    if ( this.inError() ) {
        return false;
    }
});

Is this doable?

colin

It depends how you're tabbing. In this example here, tabbing initialises an inline edit in the next cell. Here, your preSubmit approach should work fine.

If not, I don't think that's possible as standard - as tabbing out of an inline edit wouldn't abort the edit, it just changes the focus to the next element based on the tabindex. One thing you could do perhaps, is at the start of editing (initEdit), create a one-off focus event handler on the next element in the tabindex (by default that would be paging controls - see here) - and add some logic to do something when that element gets focus to validate the cell being edited and push the focus back if needed.

Colin

Unicom

Thanks Colin, looking at the example of tabbing between columns, I realized I was missing a bit of config that prevented preSubmit from working properly. This is the bit I was missing:

formOptions: {
    inline: {
        onBlur: 'submit'
    }
}

Works perfectly now!