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 i

Answer 1

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.