Show div when particular column is being inline editted

BonDotts

I would like to have a div containing buttons appear when a column is being inline edited (similar to a date picker). The purpose of this is each button would contain a common phrase used for the field being edited. The table is going to be used on a touchscreen so I'm trying to cut down on the amount of typing via the on screen keyboard.

BonDotts

Looks like I figured it out. This will show a bunch of buttons that will insert a word or phrase into the field being edited:

// Problem field Shorcuts plug-in code
(function ($, DataTable) {

    if ( ! DataTable.ext.editorFields ) {
        DataTable.ext.editorFields = {};
    }

    var Editor = DataTable.Editor;
    var _fieldTypes = DataTable.ext.editorFields;

    _fieldTypes.problemShortcuts = {
        create: function ( conf ) {
            var that = this;
            var problems = ["poss", "vomiting", "diarrhea", "lethargy", "foreign body", "mass", "BDLD", "PTS", "HBV", "Space", ","];

            conf._enabled = true;

            // Create the elements to use for the input
            var container = $('<div/>');
            conf._input = $('<input/>')
                .attr($.extend({
                    id: conf.id,
                    type: 'text'
                    }, conf.attr || {})).appendTo(container);

            var shortBoxDiv =  $('<div />')
                .attr('class', 'shortcutBox');

            var buttons = "";
            console.log(problems);
            $.each(problems, function( i, prob ) {
                var button = $('<button/>')
                    .attr($.extend({
                            'class': 'inputButton',
                            'value': prob == "Space" ? " " : prob                   
                        }, {}))
                button.html(prob);
                button.click(function () {

                    if ( conf._enabled ) {
                        var oldVal = that.get(conf.name)

                        var prob = erEditor.field('problem');
                        var element = prob.input();
                        var text = $(this).attr('value');
                        var caretPos = element[0].selectionStart;


                        that.set(conf.name, oldVal.substring(0, caretPos) + text + oldVal.substring(caretPos));

                    }

                    return false;
                })
                button.appendTo(shortBoxDiv);

            });

            shortBoxDiv.appendTo(container);

            return container[0];
        },

        get: function ( conf ) {
            return conf._input.val();
        },

        set: function ( conf, val ) {
            conf._input.val(val);
        }
    };

})(jQuery, jQuery.fn.dataTable);