Forum

November 2nd, 2014
A A A

Please consider registering
guest

Log In Register

Register | Lost password?
Advanced Search

— Forum Scope —

  

— Match —

   

— Forum Options —

    

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

Topic RSS
jqGrid with an editable checkbox column
01/07/2009
18:54
jqUser
Member
Forum Posts: 5
Member Since:
02/07/2009
Offline

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.

01/07/2009
18:56
jqUser
Member
Forum Posts: 5
Member Since:
02/07/2009
Offline

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.

02/07/2009
03:55
tony
Sofia, Bulgaria
Moderator
Forum Posts: 7720
Member Since:
30/10/2007
Offline

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.
15/07/2009
19:31
jqUser
Member
Forum Posts: 5
Member Since:
02/07/2009
Offline

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.

16/07/2009
01:35
tony
Sofia, Bulgaria
Moderator
Forum Posts: 7720
Member Since:
30/10/2007
Offline

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/08/2009
19:47
jpalac
Australia
Member
Forum Posts: 38
Member Since:
19/08/2009
Offline

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

21/08/2009
03:31
tony
Sofia, Bulgaria
Moderator
Forum Posts: 7720
Member Since:
30/10/2007
Offline

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.
23/08/2009
22:56
jpalac
Australia
Member
Forum Posts: 38
Member Since:
19/08/2009
Offline

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

31/08/2009
04:18
tony
Sofia, Bulgaria
Moderator
Forum Posts: 7720
Member Since:
30/10/2007
Offline

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.
31/08/2009
23:59
jpalac
Australia
Member
Forum Posts: 38
Member Since:
19/08/2009
Offline
10

It works - thanks!

31/08/2010
10:11
Jules74
Member
Forum Posts: 3
Member Since:
06/07/2010
Offline
11

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

Forum Timezone: Europe/Sofia

Most Users Ever Online: 215

Currently Online:
45 Guest(s)

Currently Browsing this Page:
1 Guest(s)

Top Posters:

OlegK: 1245

markw65: 179

kobruleht: 144

phicarre: 132

YamilBracho: 124

Renso: 118

Member Stats:

Guest Posters: 447

Members: 11349

Moderators: 2

Admins: 1

Forum Stats:

Groups: 1

Forums: 8

Topics: 10556

Posts: 31227

Newest Members: geneleung, benhamc, vi6cmevm, htec1, atalabaseen, rboatright

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

Administrators: admin: 61

Comments are closed.
Privacy Policy   Terms and Conditions   Contact Information