Search code examples
tablesorter

Tablesorter Editable Widget change how to select a row


I'm using TableSorter to display my table with the 'editable' widget - all working fine. Does anyone know how I can change the 'single-click' (default, I think) which will select a cell, to 'double-click'?


Solution

  • Content Editable is a browser rendering, and as such TableSorter has little control on how it functions.

    That being said you could write your own. Don't use the ContentEditable widget at all, just bind each tbody td to a double-click event, then wrap the content in a content editable div and focus it and bind an unfocus event to it. Once unfocused, run your validation, commit the update, update ts rows and unwrap the cell.

    This is not a common UI behaviour and as such I think it would be in the realm of per site rather then the scope of TableSorter, it would be hard to maintain with a small user base and take up lots of the authors time to do so for a small base.

    Of course this is my personal option of it, I know the Author is very busy and I just can't see this being a very used widget.

    EDIT: Mottie just came up with an other option, it's not the best since it'll run validate on each blur, but it might be a little quicker to implement.

        initialized: function (table) {
            $('tbody')
            .on('click', '[contenteditable]', function(){
                this.blur();
                return false;
            })
            .on('dblclick', '[contenteditable]', function(){
                this.focus();
            });
        }
    

    http://jsfiddle.net/abkNM/4683/