Forum
Log In
Home
Topic RSS
23:19
07/04/2014
Offline
I'm trying to figure out a way to use multi-select and grouping together. The label is displayed in the checkbox column, but the column is only wide enough for the checkbox. The user can only see the first letter of the grouping label.
If I remove the checkbox column via ($myGrid.jqGrid('hideCol','cb') then I can read the label, but the summary shows up in the wrong column (i.e. in my example below Qty totals show up in the Price column instead of Qty).
Html file....
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<link rel="stylesheet" type="text/css" href="jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="jqGrid-4.6.0/css/ui.jqgrid.css" />
<script type="text/javascript" src="jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<script type="text/javascript" src="jqGrid-4.6.0/js/jquery.jqGrid.src.js"></script>
<script type="text/javascript" src="myTest.js"></script>
</head>
<body>
<table id="myGrid"></table>
</body>
</html>
Javascript file...
(function() {
// Get the JSON data from the server.
$(document).ready(function() {
var $myGrid = $("#myGrid");
var data = [
{"myID":"AAA833109","myDesc":"My long description","myQty":"1.00","myPrice":"111.23"},
{"myID":"BAA833109","myDesc":"Ny long description","myQty":"64.00","myPrice":"111.23"},
{"myID":"CAA833109","myDesc":"Yy long description","myQty":"31.00","myPrice":"111.23"},
{"myID":"DAA833109","myDesc":"Zy long description","myQty":"41.00","myPrice":"111.23"},
{"myID":"EAA833109","myDesc":"Ay long description","myQty":"51.00","myPrice":"111.23"},
{"myID":"FAA833109","myDesc":"By long description","myQty":"61.00","myPrice":"111.23"},
{"myID":"GAA833109","myDesc":"Cy long description","myQty":"71.00","myPrice":"111.23"},
{"myID":"HAA833109","myDesc":"Dy long description","myQty":"81.00","myPrice":"111.23"},
{"myID":"AAA833109","myDesc":"My long description","myQty":"91.00","myPrice":"111.23"},
{"myID":"AAA833109","myDesc":"My long description","myQty":"101.00","myPrice":"111.23"}];
$myGrid.jqGrid({
data: data,
datatype: 'local',
colNames: ["ID", "Description","Qty","Price"],
colModel: [{name: "myID", index: "myID", width:150},
{name: "myDesc", index: "myDesc"},
{name:"myQty", index:"myQty",summaryType:'sum'},
{name:"myPrice", index:"myPrice"}],
rowNum: 10,
rowTotal: 10,
height: 300,
width: 800,
multiselect: true,
grouping: true,
groupingView : {
groupField: ["myID"],
groupSummaryPos: ['header'],
groupColumnShow : [true],
groupText : ['<b>{0} ({1})</b>'],
groupSummary : [true]
}
});
// Hide the checkbox columns for the row selection.
//$myGrid.jqGrid('hideCol','cb');
});
}());
12:18
Moderators
30/10/2007
Offline
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.
Most Users Ever Online: 715
Currently Online:
43 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
