0

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.

J punto Marcos
  • 437
  • 1
  • 6
  • 24
  • Can you post a jsfiddle? – njr101 Jun 25 '12 at 09:54
  • Here it is: http://jsfiddle.net/9mb4T/10/ I realized it is only happening if I build Slickgrid inside Jquery dialog – J punto Marcos Jun 27 '12 at 09:38
  • Dropbox is blocked where I am, so I can't run the jsfiddle. But looking at the code, if you remove the first 6 lines completely (the `$("#dialog").dialog()` call) does everything work ok? – njr101 Jun 27 '12 at 10:11
  • Yes, everything works ok if you don't build slickgrid inside jquery dialog. So the problem might be some jquery-ui/slickgrid incompatibility... – J punto Marcos Jun 27 '12 at 10:15
  • As I said, I can't test the fiddel from here. But I did notice that you haven't wrapped your code in `$(document).ready()` – njr101 Jun 27 '12 at 10:35

1 Answers1

3

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/

bargar
  • 584
  • 5
  • 5