Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Slickgrid - One-click checkboxes?

Tags:

slickgrid

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?

like image 267
Kevin Avatar asked Aug 03 '11 13:08

Kevin


4 Answers

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.

like image 50
Ako Avatar answered Nov 10 '22 08:11

Ako


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.

like image 44
CodePhobia Avatar answered Nov 10 '22 10:11

CodePhobia


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
});
like image 3
Tin Avatar answered Nov 10 '22 08:11

Tin


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

like image 2
neoswf Avatar answered Nov 10 '22 08:11

neoswf