Magento select field disables row in related products

Question

I have added a tab with functionality similar to related products, I have added a column with a dropdown like this:

$this->addColumn('mycolumn', array(
        'name' => 'mycolumn',
        'header' => Mage::helper('catalog')->__('Display on current child page'),
        'index' => 'mycolumn',
        'type' => 'select',
        'width' => '1',
        'align' => 'center',
        'options' => array(
        1 => Mage::helper('catalog')->__('Yes'),
        0 => Mage::helper('catalog')->__('No'),
    ),
        'editable' => true
    ));

Everytime i change the selection my product gets unchecked and the row is disabled.

I found that this line was commented in magento:

     bindFieldsChange : function(){
        if (!$(this.containerId)) {
            return;
        }
 --->  //     var dataElements = $(this.containerId+this.tableSufix).down('.data tbody').select('input', 'select');
        var dataElements = $(this.containerId+this.tableSufix).down('tbody').select('input', 'select');
        for(var i=0; i<dataElements.length;i++){
            Event.observe(dataElements[i], 'change', dataElements[i].setHasChanges.bind(dataElements[i]));
        }
    }

I found this code in js/mage/adminhtml/grid.js. When I uncommented this line my dropdown worked like a charm...

I have 2 questions regarding this matter, the first one would be if it's safe to uncomment this (Magento must've had a reason to change this).

My second question is how I could avoid this behaviour without adjusting the grid.js file. I dislike editing corefiles in any way but am unable to figure out how to rewrite this functionality or how to add my column in a manner that the behaviour does not apply itself.

Answer 1

The row click event uses a function called 'openGridRow'

Include some javascript with your grid, and add this function with some custom code to cancel the event if certain conditions are met. Also then set the checkbox back to checked.

Example will be

function openGridRow(grid, event){
                var element = Event.findElement(event, 'tr');
                //alert(Event.element(event).tagName.toLowerCase());
                if(Event.element(event).type != 'checkbox'){
                  if(['img', 'a', 'input', 'select', 'option', 'img'].indexOf(Event.element(event).tagName.toLowerCase())!=-1) {
                      // re-enable the checkbox
                      var checkbox = Element.select(element, 'input');
                      if(checkbox[0] && !checkbox[0].disabled){
                          grid.setCheckboxChecked(checkbox[0], true);
                      }
                      return;
                  }
                }
                if(element.title){
                    setLocation(element.title);
                }
    }    

The above example will do nothing, if the element type clicked is a, input, select or option Anything else will continue as per normal.