jQWidgets Forums
jQuery UI Widgets › Forums › Grid › checkall after grouping is not working
This topic contains 3 replies, has 2 voices, and was last updated by Peter Stoev 11 years, 6 months ago.
-
Author
-
Hi Sir,
i am using this code :-
<!DOCTYPE html>
<html lang=”en”>
<head>
<title id=”Description”>Custom Rows Selection</title>
<link rel=”stylesheet” href=”../../jqwidgets2.4.2/jqwidgets/styles/jqx.base.css”
type=”text/css” />
<script type=”text/javascript” src=”../../scripts/jquery-1.8.1.min.js”></script>
<script type=”text/javascript” src=”../../jqwidgets2.4.2/jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”../../jqwidgets2.4.2/jqwidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”../../jqwidgets2.4.2/jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”../../jqwidgets2.4.2/jqwidgets/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”../../jqwidgets2.4.2/jqwidgets/jqxmenu.js”></script>
<script type=”text/javascript” src=”../../jqwidgets2.4.2/jqwidgets/jqxgrid.js”></script>
<script type=”text/javascript” src=”../../jqwidgets2.4.2/jqwidgets/jqxgrid.edit.js”></script>
<script type=”text/javascript” src=”../../jqwidgets2.4.2/jqwidgets/jqxgrid.selection.js”></script>
<script type=”text/javascript” src=”../../jqwidgets2.4.2/jqwidgets/jqxcheckbox.js”></script>
<script type=”text/javascript” src=”../../jqwidgets2.4.2/jqwidgets/jqxgrid.pager.js”></script>
<script type=”text/javascript” src=”../../jqwidgets2.4.2/jqwidgets/jqxgrid.sort.js”></script>
<script type=”text/javascript” src=”../../jqwidgets2.4.2/jqwidgets/jqxlistbox.js”></script>
<script type=”text/javascript” src=”../../jqwidgets2.4.2/jqwidgets/jqxdropdownlist.js”></script>
<script type=”text/javascript” src=”../../scripts/gettheme.js”></script>
<script type=”text/javascript”>
$(document).ready(function () {
var theme = getTheme();
// prepare the data
var data = preparegriddata(30);
var source =
{
localdata: data,
datatype: “array”,
updaterow: function (rowid, rowdata) {
// synchronize with the server – send update command
}
};
var dataAdapter = new $.jqx.dataAdapter(source);
var columnCheckBox = null;
var updatingCheckState = false;
// initialize jqxGrid. Disable the built-in selection.
$(“#jqxgrid”).jqxGrid(
{
source: dataAdapter,
autoheight: true,
editable: true,
theme: theme,
enablehover: false,
selectionmode: ‘none’,
pageable: true,
sortable: true,
columns: [
{ text: ”, datafield: ‘available’, columntype: ‘checkbox’, width: 40,
renderer: function () {
return ‘<div style=”margin-left: 10px; margin-top: 5px;”></div>’;
},
rendered: function (element) {
$(element).jqxCheckBox({ theme: theme, width: 16, height: 16, animationShowDelay: 0, animationHideDelay: 0, hasThreeStates: false });
columnCheckBox = $(element);
var rowscount = $(“#jqxgrid”).jqxGrid(‘getrows’).length;
$(element).bind(‘change’, function (event) {
var IndexesArray = new Array();
for (var i = 0; i < rowscount; i++) {
var visibleIndex = $(“#jqxgrid”).jqxGrid(‘getrowvisibleindex’, i);
IndexesArray.push({ bound: i, visible: visibleIndex });
};
var paginginformation = $(“#jqxgrid”).jqxGrid(‘getpaginginformation’);
var pagenum = paginginformation.pagenum;
var pagesize = paginginformation.pagesize;
var pageArray = new Array();
for (var j = 0; j < rowscount; j++) {
if (IndexesArray[j].visible >= pagenum * pagesize && IndexesArray[j].visible < (pagenum + 1) * pagesize) {
pageArray.push(IndexesArray[j].bound);
$(“#jqxgrid”).jqxGrid(‘setcellvalue’, IndexesArray[j].bound, ‘available’, event.args.checked);
};
};
var checked = event.args.checked;
if (checked == null || updatingCheckState) return;
$(“#jqxgrid”).jqxGrid(‘beginupdate’);
if (checked == true) {
$(“#jqxgrid”).jqxGrid({ selectedrowindexes: pageArray });
} else if (checked == false) {
$(“#jqxgrid”).jqxGrid(‘clearselection’);
};
$(“#jqxgrid”).jqxGrid(‘endupdate’);
});
$(“#jqxgrid”).bind(“pagechanged”, function (event) {
var IndexesArray = new Array();
for (var i = 0; i < rowscount; i++) {
var visibleIndex = $(“#jqxgrid”).jqxGrid(‘getrowvisibleindex’, i);
IndexesArray.push({ bound: i, visible: visibleIndex });
};
var args = event.args;
var pagenum = args.pagenum;
var pagesize = args.pagesize;
var selectedNumber = 0;
for (var k = 0; k < rowscount; k++) {
if (IndexesArray[k].visible >= pagenum * pagesize && IndexesArray[k].visible < (pagenum + 1) * pagesize) {
var value = $(“#jqxgrid”).jqxGrid(‘getcellvalue’, IndexesArray[k].bound, ‘available’);
if (value == true) {
$(“#jqxgrid”).jqxGrid(‘selectrow’, IndexesArray[k].bound);
selectedNumber += 1;
} else {
$(‘#jqxgrid’).jqxGrid(‘unselectrow’, IndexesArray[k].bound);
};
};
};
if (selectedNumber == pagesize) {
$(element).jqxCheckBox(‘check’);
} else if (selectedNumber == 0) {
$(element).jqxCheckBox(‘uncheck’);
};
});
}
},
{ text: ‘First Name’, editable: false, datafield: ‘firstname’, width: 90 },
{ text: ‘Last Name’, editable: false, datafield: ‘lastname’, width: 90 },
{ text: ‘Product’, editable: false, datafield: ‘productname’, width: 200 },
{ text: ‘Quantity’, editable: false, datafield: ‘quantity’ }
]
});
// select or unselect rows when the checkbox is checked or unchecked.
$(“#jqxgrid”).bind(‘cellendedit’, function (event) {
if (event.args.value) {
$(“#jqxgrid”).jqxGrid(‘selectrow’, event.args.rowindex);
}
else {
$(“#jqxgrid”).jqxGrid(‘unselectrow’, event.args.rowindex);
}
});
});
function preparegriddata(rowscount) {
// prepare the data
var data = new Array();
var firstNames =
[
“Andrew”, “Nancy”, “Shelley”, “Regina”, “Yoshi”, “Antoni”, “Mayumi”, “Ian”, “Peter”, “Lars”, “Petra”, “Martin”, “Sven”, “Elio”, “Beate”, “Cheryl”, “Michael”, “Guylene”
];
var lastNames =
[
“Fuller”, “Davolio”, “Burke”, “Murphy”, “Nagase”, “Saavedra”, “Ohno”, “Devling”, “Wilson”, “Peterson”, “Winkler”, “Bein”, “Petersen”, “Rossi”, “Vileid”, “Saylor”, “Bjorn”, “Nodier”
];
var productNames =
[
“Black Tea”, “Green Tea”, “Caffe Espresso”, “Doubleshot Espresso”, “Caffe Latte”, “White Chocolate Mocha”, “Caramel Latte”, “Caffe Americano”, “Cappuccino”, “Espresso Truffle”, “Espresso con Panna”, “Peppermint Mocha Twist”
];
for (var i = 0; i < rowscount; i++) {
var row = {};
var productindex = Math.floor(Math.random() * productNames.length);
var quantity = 1 + Math.round(Math.random() * 10);
row[“available”] = false;
row[“firstname”] = firstNames[Math.floor(Math.random() * firstNames.length)];
row[“lastname”] = lastNames[Math.floor(Math.random() * lastNames.length)];
row[“productname”] = productNames[productindex];
row[“quantity”] = quantity;
data[i] = row;
}
return data;
}
</script>
</head>
<body class=’default’>
<div id=’jqxWidget’>
<div id=”jqxgrid”>
</div>
</div>
</body>
</html>in this code when i am using check all is not working.
please help me
Thanks,
Fearbuster
Hi fearbuster,
If you use: jqwidgets2.4.2 as it is pointed out in your code, then it would probably not work OK with custom code like the posted here. Checkbox selection is already implemented and is built-in the Grid. If you would like, you can upgrade to ver. 3.0.4
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.com/Hi sir,
but if
I am using the check-all functionality in jqxGrid by selectionmode: ‘checkbox’ and my problem is it checked all that is not display in the Grid(means that will be appear in next page).I only want to check only that are appear in the grid that time so please suggest me what should i do and there is also problem that check on single check is too slow.please help me…..
Thanks with Regards,
Fearbuster
Hi Fearbuster,
I am afraid that we cannot provide a workaround for ver. 2.4.2 or to modify the CheckBox selection mode so that it would select only the rows on the current Page.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.