Forum
Log In
Home
Topic RSS
18:54
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.
18:56
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.
03:55
Moderators
30/10/2007
Offline
Hello,
Actually this is the way - creating custom formatter.
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.
19:31
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.
01:35
Moderators
30/10/2007
Offline
Hello,
Do not think that is a jqGrid problem. Check your code again.
Reagrds
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.
19:47
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
03:31
Moderators
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 Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.
22:56
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
04:18
Moderators
30/10/2007
Offline
Hello,
Put the function ajaxSave before jQuery(document).ready(....
and it will work.
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.
23:59
19/08/2009
Offline
It works - thanks!
10:11
06/07/2010
Offline
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
Most Users Ever Online: 715
Currently Online:
57 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.comModerators: tony: 7721, Rumen[Trirand]: 81
Administrators: admin: 66
