jQuery Grid Plugin - jqGrid - Topic: make disabled checkbox of the 'checkbox' formatter clickable http://www.trirand.com/blog/?page_id=393/feature-request/make-disabled-checkbox-of-the-checkbox-formatter-clickable Simple:Press Version 5.7.5.3 OlegK on make disabled checkbox of the 'checkbox' formatter clickable http://www.trirand.com/blog/?page_id=393/feature-request/make-disabled-checkbox-of-the-checkbox-formatter-clickable#p29876 Feature Request http://www.trirand.com/blog/?page_id=393/feature-request/make-disabled-checkbox-of-the-checkbox-formatter-clickable#p29876 jQuery.jqGrid.checkboxFontAwesome4.js, described in the answer, uses Font Awesome icons instead of <input type="checkbox"> used by formatter: "checkbox" or by formatter: "clickableCheckbox". All the tests which I made before shows that formatter: "checkboxFontAwesome4" are rendered quickly by web browsers (inclusive IE8).

Best regards
Oleg 

]]> Sat, 23 Nov 2013 21:12:13 +0200 OlegK on make disabled checkbox of the 'checkbox' formatter clickable http://www.trirand.com/blog/?page_id=393/feature-request/make-disabled-checkbox-of-the-checkbox-formatter-clickable#p28648 Feature Request http://www.trirand.com/blog/?page_id=393/feature-request/make-disabled-checkbox-of-the-checkbox-formatter-clickable#p28648 I think that one need to change $.fmatter.isUndefined(cellValue) to cellValue === undefined. See the commit. The corresponding demo is here.

Regards
Oleg 

]]> Mon, 15 Apr 2013 08:52:09 +0300 kobruleht on make disabled checkbox of the 'checkbox' formatter clickable http://www.trirand.com/blog/?page_id=393/feature-request/make-disabled-checkbox-of-the-checkbox-formatter-clickable#p28647 Feature Request http://www.trirand.com/blog/?page_id=393/feature-request/make-disabled-checkbox-of-the-checkbox-formatter-clickable#p28647 In 4.4.5 this formatter does not work anymore. True and False appears in column instead of checkmark. In inline edit checkbox appears but is always in unchecked state.

How to fix this ?

Posted also as comment in http://stackoverflow.com/quest.....used-in-jq

]]> Sun, 14 Apr 2013 18:02:07 +0300 berus on make disabled checkbox of the 'checkbox' formatter clickable http://www.trirand.com/blog/?page_id=393/feature-request/make-disabled-checkbox-of-the-checkbox-formatter-clickable#p28296 Feature Request http://www.trirand.com/blog/?page_id=393/feature-request/make-disabled-checkbox-of-the-checkbox-formatter-clickable#p28296 Thanks to oleg for this ... 🙂

]]> Fri, 15 Feb 2013 19:17:18 +0200 kobruleht on make disabled checkbox of the 'checkbox' formatter clickable http://www.trirand.com/blog/?page_id=393/feature-request/make-disabled-checkbox-of-the-checkbox-formatter-clickable#p27927 Feature Request http://www.trirand.com/blog/?page_id=393/feature-request/make-disabled-checkbox-of-the-checkbox-formatter-clickable#p27927 If single click inline editing is used ( beforeSelectRow event handler starts inline edit) then this code causes javascript error.

<div title="' + (options.colName || options.colModel.label || options.colModel.name) +

div is active , cell is this div, c in getCellIndex is undefined :

getCellIndex : function (cell) {
  var c = $(cell);
  if (c.is('tr')) { return -1; }
  c = (!c.is('td') && !c.is('th') ? c.closest("td,th") : c)[0];
  if ($.browser.msie) { return $.inArray(c, c.parentNode.cells); }
  return c.cellIndex;
 },

and in IE exception occurs at line

$.inArray(c, c.parentNode.cells)

How to fix this?

http://stackoverflow.com/questions/13920810/how-to-fix-javascript-exception-if-oleg-clickablecheckboxformatter-is-used-in-jq

Posted also in

]]> Mon, 17 Dec 2012 21:13:11 +0200 kobruleht on make disabled checkbox of the 'checkbox' formatter clickable http://www.trirand.com/blog/?page_id=393/feature-request/make-disabled-checkbox-of-the-checkbox-formatter-clickable#p25766 Feature Request http://www.trirand.com/blog/?page_id=393/feature-request/make-disabled-checkbox-of-the-checkbox-formatter-clickable#p25766 Oleg,

Thank you. Very good improvement.

]]> Mon, 23 Jan 2012 21:15:34 +0200 OlegK on make disabled checkbox of the 'checkbox' formatter clickable http://www.trirand.com/blog/?page_id=393/feature-request/make-disabled-checkbox-of-the-checkbox-formatter-clickable#p25668 Feature Request http://www.trirand.com/blog/?page_id=393/feature-request/make-disabled-checkbox-of-the-checkbox-formatter-clickable#p25668 Hallo Tony

I answerd recently the question in the "Help" part of the forum (see here) and suggested how to implement the checkbox formatter so that one will be able to select the row by clicking on the disabled checkbox.

The idea is to place additional full transparent div (opacity:0) over the cell having disabled checkbox. Probably you can find more elegant implementation, but at least this one work very good in all web browsers where I tested.

My suggestion is either to modify the standard 'checkbox' formatter to make it clickable or introduce one more predefined formatter like the 'clickableCheckbox' which code is below:

$.extend($.fn.fmatter, {
    clickableCheckbox: function (cellValue, options) {
        var op = $.extend({}, $.jgrid.formatter.checkbox, options.colModel.formatoptions),
            ds = op.disabled === true ? 'disabled="disabled"' : '';
        if ($.fmatter.isEmpty(cellValue) || $.fmatter.isUndefined(cellValue)) {
            cellValue = $.fn.fmatter.defaultFormat(cellValue, op);
        }
        cellValue = String(cellValue).toLowerCase();
        return '<div style="position:relative"><input type="checkbox"' +
            (cellValue.search(/(false|0|no|off)/i) < 0 ? " checked='checked' " : "") +
            ' value="' + cellValue + '" offval="no" ' + ds +
            '/><div title="' + (options.colName || options.colModel.label || options.colModel.name) +
            '" style="position:absolute;top:0px;left:0px;right:100%;bottom:100%;background:white;' +
            'width:100%;height:100%;zoom:1;filter:alpha(opacity=0);opacity:0;"></div></div>';
    }
});
$.extend($.fn.fmatter.clickableCheckbox, {
    unformat: function (cellValue, options, elem) {
        var cbv = (options.colModel.editoptions) ?
                options.colModel.editoptions.value.split(":") :
                ["Yes", "No"];
        return $('input', elem).is(":checked") ? cbv[0] : cbv[1];
    }
}); 

In the formatter I included one more feature which I find very practical and use myself since a long time. It's tooltip (title attribute) on the cell having chechbox formatter. The problem will be clear if one have many columns with checkbox formatter in one grid. If the number of rows is large and one examine the row contain it's difficult to see in which column one have the checked checkbox. The are no hovering effect for the columns. In the case the tooltip on the chechbox with the column name is very helpful.

One have no access to the colNames inside of the formatter currently. With the small changes one can include colName property in the options.

I think that the changes which I sugest will be helpfull for other users of jqGrid.

Best regards
Oleg

]]> Sun, 15 Jan 2012 14:27:19 +0200