Do you have an idea why ajaxSave is not called when clicking on checkbox in the below sample:

The checkbox appears correctly, but nothing happens when I click on it.

Thanks,

Jules

Put the function ajaxSave before jQuery(document).ready(....

and it will work.

Regards

Tony

Sorry about that - did not see those changes when looking through the docs.

I have now changed the formatter to work with version 3.5, however I'm getting an error if I click on the checkbox directly in a cell that is not currently selected for editing (ie the selected row is elsewhere) Here's the code:

jQuery(document).ready(function() {
var gridimgpath = '../jQuery/jqGrid3.5/themes/basic/images/';
jQuery("#grid").jqGrid({
datatype: "local",
mtype: "GET",
height: 200, //{4},
colNames: ["RecordID", "AccountID", "EntityID", "YesNo", "Number1", "Number2", "ImportantDate"],
colModel: [
{ name: "RecID", index: "RecID", key: true, visible: false, width: 90, sorttype: "long", editable: false, resizable: true },
{ name: "AccountID", index: "AccountID", width: 90, editable: true, resizable: true, edittype: "select", formatter: "select" editoptions: { value: "1:Account1;2:Account2;3:Account3;4:Account4"}},
{ name: "EntityID", index: "EntityID", width: 90, editable: true, resizable: true, edittype: "select", formatter: "select", editoptions: { value: "1:Entity1;2:Entity2;3:Entity3;4:Entity4"} },
{ name: 'YesNo', width: 40, align: 'left', editable: true, formatter: checkboxFormatter, edittype: 'checkbox' },
//{ name: 'YesNo', width: 40, align: 'left', formatter: 'checkbox' },
{name: "Number1", index: "Number1", width: 60, align: "right", editable: true, resizable: true, formatter: "currency", editoptions: { size: 10} },
{ name: "Number2", index: "Number2", width: 60, align: "right", editable: true, resizable: true, formatter: "currency", editoptions: { size: 10} },
{ name: "ImportantDate", index: "ImportantDate", width: 130, editable: true, resizable: true, sorttype: "date", editoptions: { size: 12, dataInit: function(elem) { showdate(elem); } } }
],
rowNum: 5,
rowList: [5, 10, 20, 50, 100, 400],
imgpath: gridimgpath,
pager: jQuery("#gridpager"),
sortname: "RecID",
viewrecords: true,
sortorder: "asc",
forceFit: true,
cellEdit: true,
cellsubmit: "clientArray",
viewsortcols: true,
rownumbers: true,
footerrow: true,
caption: "Test"
}).navGrid("#gridpager", { edit: false, add: true, del: true, search: false, view: false })
.navButtonAdd("#gridpager", { caption: "Save", onClickButton: function(id) { SaveChanges(); }, position: "last" });

function showdate(elem) {
$(elem).datepicker({ changeMonth: true, changeYear: true, yearRange: "-20:+20", dateFormat: "dd/mm/yy" });
};

function checkboxFormatter(cellvalue, options, rowObject) {
cellvalue = cellvalue + "";
cellvalue = cellvalue.toLowerCase();
var bchk = cellvalue.search(/(false|0|no|off|n)/i) < 0 ? " checked=\\"checked\\"" : "";
//$(el).html("<input type='checkbox' onclick=\\"ajaxSave('" + cval.rowId + "', this);\\" " + bchk + " value='" + el + "' offval='no' />");
return "<input type='checkbox' onclick=\\"ajaxSave('" + options.rowId + "', this);\\" " + bchk + " value='" + cellvalue + "' offval='no' />"
}

function ajaxSave(rowid, curCheckbox) {
//ajax Save code
}
var mydata3 = [
{ RecID: "12345", AccountID: "1", EntityID: "2", YesNo: "True", Number1: "10.00", Number2: "0.00", ImportantDate: "2007-12-03" },
{ RecID: "23456", AccountID: "1", EntityID: "4", YesNo: "False", Number1: "2.60", Number2: "3.00", ImportantDate: "2007-12-03" },
{ RecID: "34567", AccountID: "2", EntityID: "3", YesNo: "True", Number1: "34.00", Number2: "3.00", ImportantDate: "2007-12-03" },
{ RecID: "45678", AccountID: "3", EntityID: "1", YesNo: "True", Number1: "22.00", Number2: "2.00", ImportantDate: "2007-12-03" },
{ RecID: "56789", AccountID: "1", EntityID: "1", YesNo: "True", Number1: "10.00", Number2: "9.00", ImportantDate: "2007-12-03" },
{ RecID: "67890", AccountID: "4", EntityID: "3", YesNo: "True", Number1: "1.00", Number2: "7.00", ImportantDate: "2007-12-03" },
{ RecID: "76543", AccountID: "3", EntityID: "3", YesNo: "True", Number1: "0.60", Number2: "10.00", ImportantDate: "2007-12-03" },
{ RecID: "87654", AccountID: "1", EntityID: "2", YesNo: "True", Number1: "67.00", Number2: "4.00", ImportantDate: "2007-12-03" },
{ RecID: "98765", AccountID: "1", EntityID: "4", YesNo: "True", Number1: "23.00", Number2: "0.09", ImportantDate: "2007-12-03" }
];
for (var i = 0; i < mydata3.length; i++)
jQuery("#grid").addRowData(mydata3[i].id, mydata3[i]);
});

Thanks,

Jo

If you upgrade from 3.4 to 3.5 version you should first read this:

http://www.trirand.com/jqgridw.....4.x_to_3.5

Regards

Tony

When I try the above checkboxFormatter I don't get a checkbox appearing but I get "undefined".

I've also modified the function to be:

function checkboxFormatter(el, cval, opts) {
el = el + "";
el = el.toLowerCase();
var bchk = el.search(/(false|0|no|off|n)/i) < 0 ? " checked=\\"checked\\"" : "";
$(el).html("<input type='checkbox' onclick=\\"ajaxSave('" + cval.rowId + "', this);\\" " + bchk + " value='" + el + "' offval='no' />");
}

What am I doing wrong?

Regards,

Jo

Do not think that is a jqGrid problem. Check your code again.

Reagrds

Tony

With above code, on moving through pages (via paging bar) the memory consumed by browser (IE 7) keeps increasing, indicating memory leak. How to fix it ?

Do I have to implement 'unformatter' function ?

Thank You.

Actually this is the way - creating custom formatter.

Regards

Tony

-----------------------------------------------------------------------------------------------------------------------------------------------------------------
<html>
<head>
    <title>jqGrid - Custom Formatter</title>
    <link rel="stylesheet" type="text/css" href="/themes/coffee/
grid.css"  title="coffee" media="screen" />
    <script src="/jquery-1.3.2.js" type="text/javascript"></script>
    <script src="/jqgrid/jquery.jqGrid.js" type="text/javascript"></
script>
    <script src="/jqgrid/js/jqModal.js" type="text/javascript"></
script>
    <script src="/jqgrid/js/jqDnR.js" type="text/javascript"></script>

  <script type="text/javascript">
      jQuery(document).ready(function() {
          jQuery("#list1").jqGrid({
              url: '/Data/GridDataNamedColums/',
              datatype: 'json',
              mtype: 'GET',
              jsonReader: {
                  total: "total", //total pages for the query
                  page: "page", //current page of the query
                  records: "records", //total number of records for
the query
                  root: "rows", //an array that contains the actual
data
                  repeatitems: false,
                  id: "other" //the unique id of the row
              },
              colNames: ['someNumber', 'vote', 'Title', 'other'],
              colModel: [
                      { name: 'someNumber', width: 40, align:
'left' },
                      { name: 'vote', width: 40, align: 'left',
formatter: checkboxFormatter },
                      { name: 'Title', width: 400, align: 'left' },
                      { name: 'other', width: 40, align: 'left' }, ],
               onSelectRow: function(rowid) {
                   alert('Selected ... rowid=' + rowid);
               },
              pager: jQuery('#pagerBar'),
              rowNum: 10,
              //rowList: [2, 5, 10, 20, 50],
              viewrecords: true,
              height: 250,
              imgpath: '/themes/coffee/images',
              caption: 'Custom Formatter grid'
          });
      });

      //checkboxFormatter to wire onclick event of checkbox
      function checkboxFormatter(el, cval, opts) {
          cval = cval + ""; cval = cval.toLowerCase();
          var bchk = cval.search(/(false|0|no|off|n)/i) < 0 ? "
checked=\\"checked\\"" : "";
          $(el).html("<input type='checkbox' onclick=\\"ajaxSave('" +
opts.rowId + "', this);\\" " + bchk + " value='" + cval + "'
offval='no' />");
      }

    function ajaxSave(rowid, curCheckbox) {
          //ajax Save code
     }
  </script>
</head>

<body>
        <h2>List - CUSTOM Formatter </h2>
        <table id="list1" class="scroll" cellpadding="0"
cellspacing="0"></table>
        <div id="pagerBar" class="scroll" style="text-align:center;"></
div>
</body>
</html>
-----------------------------------------------------------------------------------------------------------------------------------------------------------------

Predefined formatter function, present in jquery.fmatter.js file, are
called from $.unformat and fireFormatter functions.
But I have simply added 'checkboxFormatter' in web page (as shown
above). I have NOT modified jquery.fmatter.js.

Is this correct ?
Will it create momory leak issues ?

Thank You.

I'm trying to create a grid, using jqGrid-3.4.4, with checkbox in one
of its column.
I have been able to create grid in which first click makes cell
editable checkbox, second click to set checkbox value and third ENTER
press to save value.

Requirements:
1. On clicking checkbox, it should send AJAX post to server. User
should NOT have to press ENTER.

2. When grid is initially displayed, editable checkbox should be
displayed.

So ideally, single click on a checkbox should post value to server via
ajax.

Please advise how to achieve the functionality.

Thank You.