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