Question

I have built an slickgrid with two checkbox columns. I use a slick formatter to built second checkbox column:

(function ($) {
    // register namespace
    $.extend(true, window, {
       "Slick": {
         "Formatters": {
            "Checkbox": Checkbox
         }
       }
    });

    function Checkbox(row, cell, value, columnDef, dataContext) {
       return '<input type="checkbox" >';
    }
})(jQuery);

And this is the jsFiddle example: http://jsfiddle.net/9mb4T/10/

The problem is that if I click on second checkbox, this checkbox does not get marked. Slickgrid may be hiding the event.

Any idea?

Thanks in advance!

Edit: This is only happening when I build Slickgrid inside Jquery dialog.

Answer 1

This is a z-index problem. The cells containing your checkboxes have an explicit z-index of 1 from SlickGrid, while the jQuery UI dialog has a (dynamically calculated) one of 1002. For this reason, your clicks aren’t getting through to the checkboxes.

You can fix by tweaking the SlickGrid style, either in the referenced slick.grid.css or specifically for your example case, shown here:

#grid .slick-cell {

  z-index: auto;
}​

Here’s a forked fiddle demonstrating this approach: http://jsfiddle.net/bargar/JPqpa/