Forum
Log In
Home
Topic RSS
08:51
20/10/2008
Offline
I want to realize a 2 row header and a line with summary in the footer.
How can i do this, like example in the picture ?
15:16
09/10/2008
Offline
I'm looking for the same feature.
Basically, a fixed-footer row that can be styled differently and that doesn't participate in sorting. This could be used to hold totals for columns.
Unlike the other poster, I'm not expecting jqgrid to compute the totals (heavens no!) but it'd be nice to have a place to put them.
12:07
13/11/2008
Offline
As far as the two line header goes, I cant really help you guys there but you can have a look at the docs and check Userdata for the footer.
Cheers,
P.
10:27
09/10/2008
Offline
palobo said:
As far as the two line header goes, I cant really help you guys there but you can have a look at the docs and check Userdata for the footer.
Cheers,
P.
You're missing the point. I can insert user data for a footer just fine as a row. But what I can't do in jqgrid is style it differently or keep it from sorting when the column-headers are clicked.
01:30
20/01/2009
Offline
That would be a nice feature to have - I'm sure the need comes up very frequently.
That said - it only takes a few extra lines of code to place a table with the appropriate classes directly underneath the main grid table, and do whatever updating you need manually from the appropriate grid event.
<table id="master" class="scroll"></table>
<table class="scroll" style="width:100%;margin-top:2px;" id="summary">
<tbody><tr class="jqgrow"><td style="text-align:right;" id="summary_data"></td></tr></tbody>
</table>
10:57
09/10/2008
Offline
verso said:
That would be a nice feature to have - I'm sure the need comes up very frequently.
That said - it only takes a few extra lines of code to place a table with the appropriate classes directly underneath the main grid table, and do whatever updating you need manually from the appropriate grid event.
<table id=”master” class=”scroll”></table>
<table class=”scroll” style=”width:100%;margin-top:2px;” id=”summary”>
<tbody><tr class=”jqgrow”><td style=”text-align:right;” id=”summary_data”></td></tr></tbody>
</table>
Forgive my ignorance, but I don't see how this should work. Given a small sample:
<html>
<head>
<link rel="stylesheet" type="text/css" media="screen" href="js/jqGrid/themes/sand/grid.css" />
<script type="text/javascript" src="js/jquery_ui/jquery-1.2.6.js"></script>
<script language="javascript" src="js/jqGrid/jquery.jqGrid.js" type="text/javascript"></script>
</head>
<body>
<script>
$(document).ready(function() {
$("#Grid_13").jqGrid({
datatype: "local",
height: 100%,
width: 600,
shrinkToFit: true,
colNames: ["Group","ID","Name","Count"],
colModel: [{"width":"6","sorttype":"text","name":"seqn157"},
{"width":"6","sorttype":"text","name":"seqn158"},
{"width":"29","sorttype":"text","name":"seqn159"},
{"width":"9","sorttype":"float","name":"seqn160"}],
imgpath: "/js/jqGrid/themes/sand/images",
caption: "Adjustment Detail.",
onSelectRow: function(id) { $("Grid_13").resetSelection(); }
});
});
$(document).ready(function() {
$("#Grid_13").addRowData(1, {"seqn157":"CODE","seqn158":"4861","seqn159":"Bobs Big Boy","seqn160":"46"});
$("#Grid_13").addRowData(2, {"seqn157":"CODE","seqn158":"91021","seqn159":"Petes BBQ Shack","seqn160":"46"});
});
</script>
<table id='Grid_13' class='scroll'></table>
</body>
How do I get a second table where the columns line up appropriately (and snugly) under the first's?
03:24
21/01/2009
Offline
I used a workaround to get an extra header.
I wanted my table to show if a column has an index or not, in a 2nd table header.
I just made a dummy table like this:
<table id="dummy_table">
<tr id="index_rows">
<th>Index<th>
<th><th>
<th><th>
<th>Index<th>
<th><th>
<tr>
</table>
with the same amount of columns as my jqGrid table.
Then I added this function to my jqGrid:
gridComplete: function(){
var lui_jqGridTable = document.getElementById( "lui_jqGridTable" );
var destination = lui_jqGridTable.nextSibling.nextSibling.firstChild.nextSibling.firstChild;
var index = document.getElementById( "index_rows" );
destination.appendChild(index);
},
The loading div, in my case called lui_jqGridTable was the closest element in the jqGrid to the <thead> tag which has an id.
With nextSibliging and firstChild I then walk down the DOM tree to the <thead> and put this location in var destination
Then I append my index rows to that location.
This is the part of the DOM tree I used:
<div id="lui_jqGridTable" class="loadingui"/>
<div class="GridHeader" style="width: 1085px; text-align: center; display: block;">
</div>
<div style="overflow: hidden; width: 1085px;">
<div class="loading" style="display: none;">Loading...</div>
<table class="scroll" cellspacing="0" cellpadding="0" border="0" style="width: 1085px;">
<thead>
The firstChild of the <thead> tag is the <tr> with the jqgrid headers.
The index is appended as a new child <tr> after that.
Thanks to Tony for the best grid editor currently available, keep up the awesome job!
Most Users Ever Online: 715
Currently Online:
80 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
