jQuery Grid Plugin - jqGridForum

Topic RSS

make disabled checkbox of the 'checkbox' formatter clickable

15/01/2012
14:27

OlegK

Germany

Member

Members

Forum Posts: 1255

Member Since:
10/08/2009

Offline

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

23/01/2012
21:15

kobruleht

Member

Members

Forum Posts: 144

Member Since:
05/05/2011

Offline

Oleg,

Thank you. Very good improvement.

17/12/2012
21:13

kobruleht

Member

Members

Forum Posts: 144

Member Since:
05/05/2011

Offline

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

15/02/2013
19:17

berus

Member

Members

Forum Posts: 15

Member Since:
30/04/2008

Offline

Thanks to oleg for this ... 🙂

14/04/2013
18:02

kobruleht

Member

Members

Forum Posts: 144

Member Since:
05/05/2011

Offline

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

15/04/2013
08:52

OlegK

Germany

Member

Members

Forum Posts: 1255

Member Since:
10/08/2009

Offline

I think that one need to change $.fmatter.isUndefined(cellValue) to cellValue === undefined. See the commit. The corresponding demo is here.

Regards
Oleg

23/11/2013
21:12

OlegK

Germany

Member

Members

Forum Posts: 1255

Member Since:
10/08/2009

Offline

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

All RSS

Forum Timezone: Europe/Sofia

Most Users Ever Online: 715

Currently Online:
42 Guest(s)

Currently Browsing this Page:
2 Guest(s)