jQuery Grid Plugin - jqGridForum

Topic RSS

Can't click on checkbox in cell edit mode

18/03/2010
19:10

glittle

Member

Members

Forum Posts: 31

Member Since:
23/01/2010

Offline

I have a grid setup in cell edit mode.

Normally, I can click on a cell, and the cell turns to edit mode.

However, I cannot do this if the cell has only a checkbox. I have to click beside it.

Is there any way to make it work so that I can click on the checkbox and have it become editable?

Glen

22/03/2010
11:11

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

Hello,

Do not understand. You have already setup a checkbox using formatter and try to edit a cell or ...

Regards

Tony

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

22/03/2010
13:16

glittle

Member

Members

Forum Posts: 31

Member Since:
23/01/2010

Offline

I'm using Cell Edit mode...

I have a column with: edittype:checkbox, formatter:checkbox

The check box shows up okay. Since I'm in "cell edit" mode, I must click the cell to be able to edit it. I should be able to click anywhere in the cell to start editing.

However, I can not click where the check box is showing. I can only click in the space beside the check box.

In the documentation and samples, there are none that have a checkbox and use cell edit mode, so this problem is not seen in the samples.

Does that make sense?

25/03/2010
16:32

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

Hello,

I see where is the reason for this. Yes - it will only work this way. If we "fix" this we will go to other big problems.

Sorry.

Regards

Tony

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

25/03/2010
16:40

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

Hello again,

Instead of the previous post I think that this can be achieved using beforeSelectRow event.

The idea is to determine that this checkbox is clicked and apply then editCell manually to this grid cell.

Will see how to help you later.

Regards

Tony

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

26/03/2010
12:38

brecht

Member

Members

Forum Posts: 9

Member Since:
11/02/2010

Offline

Reported this as a bug some time ago: http://www.trirand.com/blog/?p.....38;ret=all

Solved it using a custom formatter:

function boolformatter(cellValue, options, rowObject)
        {
            cellValue = cellValue + '';
            cellValue = cellValue.toLowerCase();

            var checked = cellValue.search(/(false|0|no|off|n)/i) < 0 ? ' checked="checked"': '';
            var inputControl = '<input id="'+ options.rowId + options.colModel.name +'" class="view" type="checkbox" ' + checked + ' value="' + cellValue + '" onclick="MakeCellEditable('+options.rowId+',''+options.colModel.name+'')" />'

            return inputControl;
        }

function MakeCellEditable(rowId,colName)
        {
            var rowids = $('#grid').getDataIDs();
            var colModel = $('#grid').getGridParam().colModel;

            for (var i = 0; i < rowids.length; i++)
            {
                if(rowId == rowids[i])
                {
                    for (var j = 0; j < colModel.length; j++)
                    {
                        if (colModel[j].name == colName)
                        {
                            // Put cell in editmode.
                            // If the edit (third param) is set to false the cell is just selected and not edited.
                            // If set to true the cell is selected and edited.
                            jQuery("#grid").editCell(i,j,true);

                            // Let the grid know that the cell has been changed without having to push enter button or click another cell.
                            jQuery("#grid").saveCell(i,j);
                        }
                    }
                }
            }
        }

26/03/2010
18:59

glittle

Member

Members

Forum Posts: 31

Member Since:
23/01/2010

Offline

Thanks brecht

/blog/?page_id=393/bugs/cant-click-on-checkbox-in-cell-edit-mode/#p15980

, this looks promising and I'll have to try it...

17/01/2011
12:20

giorgio79

Member

Members

Forum Posts: 24

Member Since:
14/01/2011

Offline

Thanks for this.

There is a typo in boolformatter, here is corrected

            function boolformatter(cellValue, options, rowObject)
               {
                   cellValue = cellValue + '';
                   cellValue = cellValue.toLowerCase();

                   var checked = cellValue.search(/(false|0|no|off|n)/i) < 0 ? ' checked="checked"': '';
                   var inputControl = '<input id="'+ options.rowId + options.colModel.name +'" class="view" type="checkbox" ' + checked + ' value="' + cellValue + '" onclick="MakeCellEditable('+options.rowId+',"'+options.colModel.name+'")" />';

                   return inputControl;
               }

I have one issue though: In display, it shows as 0 or 1 instead of a checkbox. Only If I click on it, I do get the checkbox. Any tips? Here is how I am using it:

{name:'selected',index:'selected',width:90,editable:true, edittype:'checkbox', editoptions: { value:"1:0"}, formatter: "boolformatter", formatoptions: {disabled : false},sorttype:"text",searchoptions: { sopt: ['eq'], value:":All;1:Yes;0:No" }, stype: 'select',sortable:true},

All RSS

Forum Timezone: Europe/Sofia

Most Users Ever Online: 715

Currently Online:
31 Guest(s)

Currently Browsing this Page:
1 Guest(s)