Slickgrid - One-click checkboxes?

Question

When I create a checkbox column (through use of formatters/editors) in Slickgrid, I've noticed that it takes two clicks to interact with it (one to focus the cell, and one to interact with the checkbox). (Which makes perfect sense)

However, I've noticed that I am able to interact with the checkbox selectors plugin (for selecting multiple rows) with one click. Is there any way I can make ALL of my checkboxes behave this way?

Answer 1

For futher readers I solved this problem by modifing the grid data itself on click event. Setting boolean value to opposite and then the formatter will display clicked or unclicked checkbox.

grid.onClick.subscribe (function (e, args)
{
    if ($(e.target).is(':checkbox') && options['editable'])
    {
        var column = args.grid.getColumns()[args.cell];

        if (column['editable'] == false || column['autoEdit'] == false)
            return;

        data[args.row][column.field] = !data[args.row][column.field];
    }  
});

function CheckboxFormatter (row, cell, value, columnDef, dataContext)
{
    if (value)
        return '<input type="checkbox" name="" value="'+ value +'" checked />';
    else
        return '<input type="checkbox" name="" value="' + value + '" />';
}

Hope it helps.

Answer 2

The way I have done it is pretty straight forward.

1. First step is you have to disable the editor handler for your checkbox. In my project it looks something like this. I have a slickgridhelper.js to register plugins and work with them.

   function attachPluginsToColumns(columns) {
       $.each(columns, function (index, column) {
           if (column.mandatory) {
               column.validator = requiredFieldValidator;
           }
           if (column.editable) {
               if (column.type == "text" && column.autocomplete) {
                   column.editor = Slick.Editors.Auto;
               }
               else if (column.type == "checkbox") {
                   //Editor has been diasbled.   
                   //column.editor = Slick.Editors.Checkbox;
                   column.formatter = Slick.Formatters.Checkmark;
               }
           }
       });    
   

2. Next step is to register an onClick event handler in your custom js page which you are developing.

grid.onClick.subscribe(function (e, args) {

        var row = args.grid.getData().getItems()[args.row];
        var column = args.grid.getColumns()[args.cell];

        if (column.editable && column.type == "checkbox") {
            row[column.field] = !row[column.field];
            refreshGrid(grid);
        }
    });

Now a single click is suffice to change the value of your checkbox and persist it.

Answer 3

Register a handler for the "onClick" event and make the changes to the data there. See http://mleibman.github.com/SlickGrid/examples/example7-events.html

grid.onClick.subscribe(function(e, args) {
    var checkbox = $(e.target);
    // do stuff
});

Answer 4

The only way I found solving it is by editing the slick.checkboxselectcolumn.js plugin. I liked the subscribe method, but it haven't attached to me any listener to the radio buttons.

So what I did is to edit the functions handleClick(e, args) & handleHeaderClick(e, args). I added function calls, and in my js file I just did what I wanted with it.

function handleClick(e, args) {
    if (_grid.getColumns()[args.cell].id === _options.columnId && $(e.target).is(":checkbox")) {
        ......
        //my custom line
        callCustonCheckboxListener();
        ......
    }
}

---

function handleHeaderClick(e, args) {
    if (args.column.id == _options.columnId && $(e.target).is(":checkbox")) {
        ...
        var isETargetChecked = $(e.target).is(":checked");
        if (isETargetChecked) {
            ...
            callCustonHeaderToggler(isETargetChecked);
        } else {
            ...
            callCustonHeaderToggler(isETargetChecked);
        }
        ...
    }
}

Code

pastebin.com/22snHdrw

Search for my username in the comments

Answer 5

I used the onBeforeEditCell event to achieve this for my boolean field 'can_transmit'

Basically capture an edit cell click on the column you want, make the change yourself, then return false to stop the cell edit event.

grid.onBeforeEditCell.subscribe(function(row, cell) {                
            if (grid.getColumns()[cell.cell].id == 'can_transmit') {
                if (data[cell.row].can_transmit) {
                   data[cell.row].can_transmit = false;
                }
                else {
                    data[cell.row].can_transmit = true;
                }
                grid.updateRow(cell.row);
                grid.invalidate();
                return false;
            }

This works for me. However, if you're using the DataView feature (e.g. filtering), there's additional work to update the dataview with this change. I haven't figured out how to do that yet...

Answer 6

I managed to get a single click editor working rather hackishly with DataView by calling

setTimeout(function(){ $("theCheckBox").click(); },0);

in my CheckBoxCellEditor function, and calling Slick.GlobalEditorLock.commitCurrentEdit(); when the CheckBoxCellEditor created checkbox is clicked (by that setTimeout).

The problem is that the CheckBoxCellFormatter checkbox is clicked, then that event spawns the CheckBoxCellEditor code, which replaces the checkbox with a new one. If you simply call jquery's .click() on that selector, you'll fire the CheckBoxCellEditor event again due because slickgrid hasn't unbound the handler that got you there in the first place. The setTimeout fires the click after that handler is removed (I was worried about timing issues, but I was unable to produce any in any browser).

Sorry I couldn't provide any example code, the code I have is to implementation specific to be useful as a general solution.