How to start inline editing on single click in checkbox column in free jqgrid

Question

I'm looking for a way to start inline editing in jree jqgrid if clicked in checkbox column.

Currently I'm using ClickableCheckBoxFormatter

http://www.ok-soft-gmbh.com/jqGrid/Checkbox.htm

desribed in

http://www.trirand.com/blog/?page_id=393/feature-request/make-disabled-checkbox-of-the-checkbox-formatter-clickable/

and in

how to fix javascript exception if Oleg clickableCheckboxFormatter is used in jqGrid with single click editing

I tried free jqgrid checkbox formatter.

Issues:

If mouse cursor is placed over checkbox, mouse icon changes to disabled icon. This gives wrong hit to user like click does not work.
Actually double click starts inline editing

How to fix those so that checkbox behaves like ClickableCheckBoxFormatter:

Mouse cursor shape does not change
Single click in check box starts inline edit. First click should only start inline editing. Only click in inline editing mode should change checkbox state.

I can't reproduce any from described problems. Could you provide the demo which can be used to reproduce the problem? Which iconSet you use? Which additional CSS you use? Are the problems exist in specific web browsers only? Do you start inline editing inside of onSelectRow (like in the referenced answers)? All my tests with iconSet: "fontAwesome", iconSet: "jQueryUI" in IE10 and Chrome didn't show any problem. Moreover it's unclear for me why you don't use just template: "booleanCheckboxFa" (if you use Font Awesome of cause)? — Oleg
Problem can repoduced using ok-soft-gmbh.com/jqGrid/OK/dateInput_48_bootstrap.htm in latest Chrome in Windows 7 Clicks exactly in checkbox box are ignored — Andrus

Oleg Oleg · Accepted Answer · 2015-03-30T09:53:51

The demo, which you use as the reference, use disabled checkboxes as formatter:

{ name: "closed", width: 70, align: "center", editable: true, formatter: "checkbox",
    edittype: "checkbox", editoptions: {value: "Yes:No", defaultValue: "Yes"},
    stype: "select",
    searchoptions: { sopt: ["eq", "ne"], value: ":Any;true:Yes;false:No" } }

It's the origin of the problem. I would suggest you to use booleanCheckboxFa instead:

{ name: "closed", width: 70, template: "booleanCheckboxFa" },

like on the demo or at least the old formatter: "clickableCheckbox":

{ name: "closed", width: 70, align: "center", formatter: "clickableCheckbox",
    edittype: "checkbox", editoptions: {value: "true:false", defaultValue: "false"} }

like the demo.

How to start inline editing on single click in checkbox column in free jqgrid

1 Answers