jQuery Grid Plugin - jqGridForum

20/05/2010
14:52

Asshiah

Member

Members

Forum Posts: 74

Member Since:
27/04/2010

Offline

1

Hello,

I have a problem regarding the use of checkbox in a jqGrid.

In fact, I have a column in my grid that can only contain the letters 'O' or 'N'. This is what I get from the server when loading the grid.

The letter 'O' means yes and the letter 'N' means no.

I want this column to display checkboxes in the grid instead of these letters.

The checkboxes should be checked if the letter received from the server is 'O' and the other way round.

I also want these boxes to be clickable in order for the user to be able to click the boxes directly in the grid.

I also want the cell where a checkbox was clicked to be saved to the server instantly.

Also, as I have many columns in my grid, I'd like to be able to use form editing of a row where the input for this column is also a checkbox.

I figured out that in order to display a checkbox in the grid I should use a custom formatter as the column contains non standard input for checkboxes.

A custom formatter also helps define a click event for saving the data to the server.

But I can't figure out how to save the data.

I also have another problem:

When I click on a box in the grid, if the box's state is changed, this is not the case for the corresponding box in the associated edit form.

How can I fix that?

Here is the code I use:

$(document).ready(function() {
   function checkboxsave()
   {
          // I still have to find out how to save the content using an AJAX call
   }

   jQuery.extend($.fn.fmatter , {
       checkboxcustom : function(cellvalue, options, rowobject) {
           var checked = cellvalue != 'N' ? " checked='checked' " : "";
           return "<input type=\"checkbox\" " + checked + " value=\""+ cellvalue+ "\" offval=\"N\" onclick=\"checkboxsave()\" />";
       }
   });

   jQuery.extend($.fn.fmatter.checkboxcustom , {
       unformat : function(cellvalue, options, cellobject) {
           var checked = $(cellobject).html().indexOf("checked",0) != -1 ? "O" : "N";
           return checked;
       }
   });

   jQuery("#grid_users").jqGrid({
        datatype: 'local',
        colNames:['Name', 'Firstname', 'Login', 'Password', 'Activ'],
        colModel :[
            {name:'name',
             index:'name',
             editable:true
            },
            {name:'firstname',
             index:'firstname',
             editable:true
            },
            {name:'login',
             index:'login',
             editable:true
            },
            {name:'password',
             index:'password',
             editable:true,
           edittype:'password'
            },
           {name:'activ',
             index:'activ',
             editable:true,
           align:'center',
             formatter:'checkboxcustom',
             edittype:'checkbox',
             editoptions:{value:"O:N"},
        ],
        autowidth: true,
        height: "400",
        gridview: true,
        sortable: false,
        sortname: 'name',
        sortorder: 'asc',
        hidegrid: false,
        caption: "User Information",
        pager: "#pager_users"
   });
   jQuery("#grid_users").jqGrid('navGrid','#pager_users',{edit:true,add:false,del:false,search:false,refresh:false});

The checkboxes are displayed correctly when loading the grid. I can click on the boxes in the grid to change their state.

I can edit a row with the input for this column displayed as a checkbox.

But if I change the status of a box from the grid, then click on the row and try to edit it, the two checkboxes from the grid and the edit form don't match.

And I need to find out how to save the cell when the box is clicked.

20/05/2010
15:53

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

2

Hello,

My first look tell me that you will need to write your custom checkbox element for the form edit and not use the build in one.

It is the same - if your checkbox is not "standart" you will need to do it for the grid display and for the form editing with appropriate custom functions.

Best 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.

20/05/2010
23:31

bkeszler

Member

Members

Forum Posts: 3

Member Since:
14/05/2010

Offline

3

I just went through this myself. You're on the right track with the custom formatter. Your checkboxsave() function needs to parse the input tag to determine the current value and then use the setCell function to change that value.

Here's some working code for you to look at.

<html>
<head>
<title>User Security</title>
<link rel="stylesheet" type="text/css" href="jquery/jquery-ui-1.7.2.custom.css">
<link rel="stylesheet" type="text/css" href="jquery/ui.jqgrid.css">
<script src="jquery/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="jquery/grid.locale-en.js" type="text/javascript"></script>
<script src="jquery/jquery.jqGrid.min.js" type="text/javascript"></script>
</head>

<body>

var mydata2 = [
{UserID:"amotley", Username:"Al Motley", CB1:"0", CB2:"1", CB3:"0"},
{UserID:"bkeszler", Username:"Brian Keszler", CB1:"1", CB2:"0", CB3:"1"},
];

for(var i=0;i < mydata2.length;i++)
jQuery("#myGrid").jqGrid('addRowData',mydata2[i].id,mydata2[i]);

//checkboxFormatter to wire onclick event of checkbox
function checkboxFormatter(cellval, opts, rowObj) {
cellval = cellval + "";
cellval = cellval.toLowerCase();
var bchk = cellval.search(/(false|0|no|off|n)/i) < 0 ? " checked="checked"" : "";
rtn = "<input type='checkbox' onclick="ajaxSave('" + opts.rowId + "','" + opts.colModel.name + "');" " + bchk + " value='" + cellval + "' offval='no' />";
return rtn;
}

function getCellValue(content) {
var k1, val = 0;
k1 = content.indexOf(' value=') + 7;
val = content.substr(k1,3);
val = val.replace(/[^0-1]/g, '');
return val;
}

function ajaxSave(rowid, colid) {
var cbtag = $('#myGrid').getCell(rowid, colid);
var val = getCellValue(cbtag);

newValue = 0;
if (val == 0) newValue = 1;
$("#myGrid").setCell(rowid, colid, newValue);

cbtag = $('#myGrid').getCell(rowid, colid);
val = getCellValue(cbtag);

$.ajax({
    type:"GET",
    url:"gridSave.cfm",
    cache: false,
    data: "rowid=" + rowid + "&colid=" + colid + "&cbval=" + val,
    success: function() {
      //alert('Success');
    },
    error: function() {
      alert('An error occurred.');
    }
})
}

</script>

</body>
</html>

09/06/2010
14:30

Asshiah

Member

Members

Forum Posts: 74

Member Since:
27/04/2010

Offline

4

Thank you a lot bkeszler!

I have made some progress thanks to you.

I have stopped trying to enable the checkboxes in the form editing.

I have set the field as non editable and now I just try to make it editable by clicking on the checkbox directly in the grid and sending an AJAX call.

Apparently, everything works just fine.

The only problem is specific to IE (I have tested this on IE8).

While everything is OK with any other navigator, IE8 have some problem with the checkboxes.

If a checkbox is unchecked, I can click on it in the grid in order to check it.

But IE will signal this box as unchecked when proceeding the AJAX call.

If a checkbox is already checked, in IE8, I can't uncheck it, but IE still signals the box as unchecked when proceeding the AJAX call.

I don't have this behaviour in any other navigator.

Here is the code I use:

$(document).ready(function() {

function ajaxSaveUsers(rowid, colid) {
val = $('#grid_users').getCell(rowid, colid);

    newValue = "N";
    if (val == "N") newValue = "O";
    $("#grid_users").setCell(rowid, colid, newValue);

val = $('#grid_users').getCell(rowid, colid);

    $.ajax({
        type:"POST",
        url:"/handlers/UsersJqGridEdit.ashx",
        data: {"oper": "edit", "activ": val, "id": rowid},
        success: function() {
        },
        error: function() {
            alert('An error has occurred.');
        }
    })
}

   jQuery.extend($.fn.fmatter , {
    checkboxcustomUsers : function(cellvalue, options, rowobject) {
        var checked = cellvalue != 'N' ? "checked='checked' " : "";
        rtn = "<input type='checkbox' onclick="ajaxSaveUsers('" + options.rowId + "','" + options.colModel.name + "');" " + checked + " value='"+ cellvalue+ "' />";
        return rtn;
    }
});

jQuery.extend($.fn.fmatter.checkboxcustomUsers , {
        unformat : function(cellvalue, options, cellobject) {
            var checked = $(cellobject).html().indexOf("checked",0) != -1 ? "O" : "N";
            return checked;
        }
});

   jQuery("#grid_users").jqGrid({
        datatype: 'json',
        mtype: 'POST',
        url: "./handlers/UsersJqGridLoad.ashx",
        editurl: "/handlers/UsersJqGridEdit.ashx",
        colNames:['Name', 'Firstname', 'Login', 'Password', 'Activ'],
        colModel :[
            {name:'name',
             index:'name',
             editable:true
            },
            {name:'firstname',
             index:'firstname',
             editable:true
            },
            {name:'login',
             index:'login',
             editable:true
            },
            {name:'password',
             index:'password',
             editable:true,
           edittype:'password'
            },
           {name:'activ',
             index:'activ',
             editable:false,
           align:'center',
             formatter:'checkboxcustomUsers'
            }
        ],
        autowidth: true,
        height: "400",
        gridview: true,
        sortable: false,
        sortname: 'name',
        sortorder: 'asc',
        hidegrid: false,
        caption: "User Information",
        pager: "#pager_users"
   });

jQuery("#grid_users").jqGrid('navGrid','#pager_users',{edit:true,add:false,del:false,search:false,refresh:false});
});

11/06/2010
16:03

Asshiah

Member

Members

Forum Posts: 74

Member Since:
27/04/2010

Offline

5

I have no idea as how to solve this problem on IE. Everything works just fine in other browsers (Opera, Safari, Google Chrome, firefox).

And I have to make this work on IE 7 and 8 as per order from my client...

11/06/2010
17:39

Asshiah

Member

Members

Forum Posts: 74

Member Since:
27/04/2010

Offline

6

I have made some more test.

It appears than in any navigator except from IE, if a box is checked and I use the getcell method, I will obtain the "O" character.

In IE, I will get the "N" character and using the setcell method to set it to "O" does not seem to work.

11/06/2010
18:35

Asshiah

Member

Members

Forum Posts: 74

Member Since:
27/04/2010

Offline

7

In fact, when we are clicking on a box, the unformat method is called.

On every navigator except IE, if a bos is checked and we click on it, the unformat method will return return "O" when on IE it will return "N".

in IE, $(cellobject).html().indexOf("checked",0) will return -1 when its not on other navigator

11/06/2010
18:49

Asshiah

Member

Members

Forum Posts: 74

Member Since:
27/04/2010

Offline

8

Ok.

I found the solution.

It seems IE doesn't write checked in the html code of the checkbox input but write CHECKED in CAPS.

So I had to use this code for the unformatter in order for it to work on any navigator:

jQuery.extend($.fn.fmatter.checkboxcustom , {
        unformat : function(cellvalue, options, cellobject) {
            var checked = ($(cellobject).html().indexOf("checked",0) != -1 || $(cellobject).html().indexOf("CHECKED",0) != -1) ? "O" : "N";
            return checked;
        }
});

14/06/2010
15:23

Asshiah

Member

Members

Forum Posts: 74

Member Since:
27/04/2010

Offline

9

In fact, this code fixes the problem in IE 8 but not in IE7 because in IE7 the behaviour when clicking a box is not the same.

I also had to use this code in order to work in any current navigator plus IE7:

function ajaxSaveUsers(rowid, colid) {
val = $('#grid_users').getCell(rowid, colid);

    if(typeof(IE7) == "undefined")
    {
        newValue = "N";
        if (val == "N") newValue = "O";
        $("#grid_users").setCell(rowid, colid, newValue);
        val = $('#grid_users').getCell(rowid, colid);
    }

    $.ajax({
        type:"POST",
        url:"./handlers/UsersJqGridEdit.ashx",
        data: {"oper": "edit", "usr_actif": val, "id": rowid},
        success: function() {
        },
        error: function() {
            alert('An error has occured.');
        }
    })
}

So please use the previous code for the unformatter (for IE8) plus this code for the save function (for IE7).

This save function code assumes you specified thid in the header of your current page:

<!–[if IE 7]>
            <script type="text/javascript">
                var IE7 = true;
            </script>
        <![endif]–>

20/06/2010
11:00

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

10

Hello,

If I understand right the problem, here is some code from our support DB

jQuery('#list1').jqGrid({
url:'<?=$base_url.'index.php/

bio/gridServerPart'?>',
//function in Bio controller to render grid
mtype : 'post', //Ajax request type
datatype: "xml", //XML, JSON or Arrray
colNames:['name','sent_flag'], //Grid column headings
colModel:[
{name:'name', width:100, align:'left', search: false},
{name:'sent_flag', width:100, align:'left', sortable:false,

formatter: 'checkbox', formatoptions: {disabled : false}}
}
],

// beforeSelect row raises before selecting a row.
// to this event we pas the id and the event element
beforeSelectRow : function(rowid, elem) {
// lets get the target
var e = elem.target;
// if this is a input element which is check box
if(e.tagName == "INPUT" && e.type == 'checkbox') {
// lets get the value.
// NOTE - the state of checkbox is obtained
with jQuery attr and not val()- this is a common error
var cbvalue = $(e).attr("checked");

if(cbvalue) cbvalue = 'O';

else cbvalue = 'N'

//lets post the value to the controler
$.ajax({
url:'<?=$base_url.'index.php/bio/gridPost'?>',

method:'POST',
// here you can post any other additional data
data : {id:rowid, sent_flag: cbvalue},
success :function(response, status) {
// check here the response
},
error : function(response) {
// alert if errorr
}
});

}
// the event in this case should return in all cases true, if it return false, the row will not be selected
return true;
},

rowNum:1,
width: 650,
height: 240,
rowList:[10,20],
pager: '#pager1',
sortname: 'id',
viewrecords: true,
caption:"jQGrid and Codeigniter"
});

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.