Forum

July 10th, 2011
You must be logged in to post Login Register

Search Forums:


 






jqGrid with an editable checkbox column

No Tags
UserPost

18:54
01/07/2009


jqUser

Member

posts 5

Hello,

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.

18:56
01/07/2009


jqUser

Member

posts 5

I created a custom formatter for checkbox column called
checkboxFormatter().

—————————————————————————————————————————————————————–
<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.

03:55
02/07/2009


tony

Sofia, Bulgaria

Moderator

posts 7375

Hello,

Actually this is the way – creating custom formatter.

Regards

Tony

For professional UI suites for PHP, ASP.NET and ASP.NET MVC visit us at our commercial products site – trirand.net – by the very same guys that created jqGrid.

19:31
15/07/2009


jqUser

Member

posts 5

Thanks.

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.

01:35
16/07/2009


tony

Sofia, Bulgaria

Moderator

posts 7375

Hello,

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

Reagrds

Tony

For professional UI suites for PHP, ASP.NET and ASP.NET MVC visit us at our commercial products site – trirand.net – by the very same guys that created jqGrid.

19:47
19/08/2009


jpalac

Australia

Member

posts 38

Hi,


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

03:31
21/08/2009


tony

Sofia, Bulgaria

Moderator

posts 7375

Hello,

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

For professional UI suites for PHP, ASP.NET and ASP.NET MVC visit us at our commercial products site – trirand.net – by the very same guys that created jqGrid.

22:56
23/08/2009


jpalac

Australia

Member

posts 38

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

04:18
31/08/2009


tony

Sofia, Bulgaria

Moderator

posts 7375

Hello,

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

and it will work.


Regards

Tony

For professional UI suites for PHP, ASP.NET and ASP.NET MVC visit us at our commercial products site – trirand.net – by the very same guys that created jqGrid.

23:59
31/08/2009


jpalac

Australia

Member

posts 38

It works – thanks!

10:11
31/08/2010


Jules74

Member

posts 3

Hi,

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


function ajaxSave(rowid, curCheckbox) {
    alert('Ahoj');
}

$(document).ready(function() {
$('#bGridView').jqGrid({
    datatype: function(pdata) {
        $('.LoaderPanel').show();
        getData_bGridView(pdata);
    },
    height: '100%',
    colNames: ["ActivityNumber","Closed","Date",...],
    colModel: [{ name: 'ActivityNumber', index: 'ActivityNumber', width: 50, sortable: false, hidden: true},
{ name: 'Closed', index: 'CLOSED', width: 45, align: 'center', formatter: checkboxFormatter},

{ name: 'ActionDate', index: 'STARTDATETIME', width: 60, align: 'center', formatter: 'date'} ...],
    sortname: 'STARTDATETIME',
    sortorder: 'Asc',
    rowNum: 20,
    pager: '#pagerbGridView',
    rowList: [10, 20, 30],
    page: 1,
    viewrecords: false,
    caption: 'myGridView',
    cellEdit: false,
    gridview: false,
    shrinkToFit: false,
    width: 781,
    afterEditCell: handleAfterEditCell,
    beforeSubmitCell: handleBeforeSubmitCell,
    serializeCellData: handleSerializeCellData,
    onSelectRow: handleOnSelectRow,
    gridComplete: function() {
        $('.LoaderPanel').hide();
    }
    });
});
function checkboxFormatter(cellvalue, options, rowObject) {
    cellvalue = cellvalue + "";
    cellvalue = cellvalue.toLowerCase();
    var bchk = cellvalue.search(/(false|0|no|off|n)/i) < 0 ? " checked="checked"" : "";
    return "<input type='checkbox' onclick="ajaxSave('" + options.rowId + "', this);" " + bchk + " value='" + cellvalue + "' offval='no' />";
}

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


Thanks,

Jules

No Tags

About the jQuery Grid Plugin – jqGrid forum

Most Users Ever Online:

215


Currently Online:

39 Guests

Forum Stats:

Groups: 1

Forums: 7

Topics: 10274

Posts: 30353

Membership:

There are 11038 Members

There have been 448 Guests

There is 1 Admin

There are 2 Moderators

Top Posters:

OlegK – 1210

markw65 – 179

kobruleht – 144

phicarre – 132

YamilBracho – 124

Renso – 118

Administrators: admin (60 Posts)

Moderators: tony (7375 Posts), Rumen[Trirand] (81 Posts)




Comments are closed.
Privacy Policy   Terms and Conditions   Contact Information