Forum

November 2nd, 2014
A A A
Avatar

Lost password?
Advanced Search

— Forum Scope —




— Match —





— Forum Options —





Minimum search word length is 3 characters - maximum search word length is 84 characters

The forums are currently locked and only available for read only access
sp_Feed Topic RSS sp_TopicIcon
checkbox formatting and editing
20/05/2010
14:52
Avatar
Asshiah
Member
Members
Forum Posts: 74
Member Since:
27/04/2010
sp_UserOfflineSmall Offline

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});

    var lstuser = [
                 {name:"Gram",firstname:"Paul",login:"pgram",password:"pgram",activ:"O"},
                 {name:"Gram",firstname:"Eric",login:"egram",password:"egram",activ:"O"},
                 {name:"Gram",firstname:"Jack",login:"jgram",password:"jgram",activ:"O"},
                 {name:"Gram",firstname:"Sami",login:"sgram",password:"sgram",activ:"N"}
                ];
    for(var i=0;i<=lstuser.length;i++)
        jQuery("#grid_users").jqGrid('addRowData',i+1,lstuser[i]);
});

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
Avatar
tony
Sofia, Bulgaria
Moderator
Members

Moderators
Forum Posts: 7721
Member Since:
30/10/2007
sp_UserOfflineSmall Offline

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
Avatar
bkeszler
Member
Members
Forum Posts: 3
Member Since:
14/05/2010
sp_UserOfflineSmall Offline

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>

<table id="myGrid"></table>

<script>
jQuery("#myGrid").jqGrid({
  datatype: "local",
  height: 250,
  colNames:['User ID', 'Username', 'CB1', 'CB2', 'CB3'],
  colModel:[
    {name:'UserID', index:'UserID', width:90, sorttype:"int", editable:false},
    {name:'Username',index:'Username', width:150, editable:false},
    {name:'CB1',  index:'CB1', width:40, sortable:false, align:"center", formatter:checkboxFormatter, formatoptions:{disabled:false}},
    {name:'CB2',  index:'CB2', width:40, sortable:false, align:"center", formatter:checkboxFormatter, formatoptions:{disabled:false}},
    {name:'CB3',  index:'CB3', width:40, sortable:false, align:"center", formatter:checkboxFormatter, formatoptions:{disabled:false}}
  ],
  caption: "Checkbox Grid"
});

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
Avatar
Asshiah
Member
Members
Forum Posts: 74
Member Since:
27/04/2010
sp_UserOfflineSmall Offline

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
Avatar
Asshiah
Member
Members
Forum Posts: 74
Member Since:
27/04/2010
sp_UserOfflineSmall Offline

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
Avatar
Asshiah
Member
Members
Forum Posts: 74
Member Since:
27/04/2010
sp_UserOfflineSmall Offline

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
Avatar
Asshiah
Member
Members
Forum Posts: 74
Member Since:
27/04/2010
sp_UserOfflineSmall Offline

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
Avatar
Asshiah
Member
Members
Forum Posts: 74
Member Since:
27/04/2010
sp_UserOfflineSmall Offline

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
Avatar
Asshiah
Member
Members
Forum Posts: 74
Member Since:
27/04/2010
sp_UserOfflineSmall Offline

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
Avatar
tony
Sofia, Bulgaria
Moderator
Members

Moderators
Forum Posts: 7721
Member Since:
30/10/2007
sp_UserOfflineSmall Offline

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.

Forum Timezone: Europe/Sofia

Most Users Ever Online: 715

Currently Online:
30 Guest(s)

Currently Browsing this Page:
1 Guest(s)

Top Posters:

OlegK: 1255

markw65: 179

kobruleht: 144

phicarre: 132

YamilBracho: 124

Renso: 118

Member Stats:

Guest Posters: 447

Members: 11373

Moderators: 2

Admins: 1

Forum Stats:

Groups: 1

Forums: 8

Topics: 10592

Posts: 31289

Newest Members:

, razia, Prankie, psky, praveen neelam, greg.valainis@pa-tech.com

Moderators: tony: 7721, Rumen[Trirand]: 81

Administrators: admin: 66

Comments are closed.
Privacy Policy   Terms and Conditions   Contact Information