jQuery Grid Plugin - jqGrid - Topic: 2 line header and summary in footer http://www.trirand.com/blog/?page_id=393/feature-request/2-line-header-and-summary-in-footer Simple:Press Version 5.7.5.3 Sander on 2 line header and summary in footer http://www.trirand.com/blog/?page_id=393/feature-request/2-line-header-and-summary-in-footer#p4082 Feature Request http://www.trirand.com/blog/?page_id=393/feature-request/2-line-header-and-summary-in-footer#p4082 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!

]]> Thu, 22 Jan 2009 03:24:00 +0200 clintp on 2 line header and summary in footer http://www.trirand.com/blog/?page_id=393/feature-request/2-line-header-and-summary-in-footer#p4065 Feature Request http://www.trirand.com/blog/?page_id=393/feature-request/2-line-header-and-summary-in-footer#p4065

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?

]]> Tue, 20 Jan 2009 10:57:45 +0200 verso on 2 line header and summary in footer http://www.trirand.com/blog/?page_id=393/feature-request/2-line-header-and-summary-in-footer#p4054 Feature Request http://www.trirand.com/blog/?page_id=393/feature-request/2-line-header-and-summary-in-footer#p4054 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>

]]> Tue, 20 Jan 2009 01:30:33 +0200 clintp on 2 line header and summary in footer http://www.trirand.com/blog/?page_id=393/feature-request/2-line-header-and-summary-in-footer#p4038 Feature Request http://www.trirand.com/blog/?page_id=393/feature-request/2-line-header-and-summary-in-footer#p4038

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.

]]> Mon, 19 Jan 2009 10:27:15 +0200 palobo on 2 line header and summary in footer http://www.trirand.com/blog/?page_id=393/feature-request/2-line-header-and-summary-in-footer#p4016 Feature Request http://www.trirand.com/blog/?page_id=393/feature-request/2-line-header-and-summary-in-footer#p4016 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.

]]> Sun, 18 Jan 2009 12:07:30 +0200 clintp on 2 line header and summary in footer http://www.trirand.com/blog/?page_id=393/feature-request/2-line-header-and-summary-in-footer#p4006 Feature Request http://www.trirand.com/blog/?page_id=393/feature-request/2-line-header-and-summary-in-footer#p4006 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.

]]> Fri, 16 Jan 2009 15:16:44 +0200 noeder on 2 line header and summary in footer http://www.trirand.com/blog/?page_id=393/feature-request/2-line-header-and-summary-in-footer#p2610 Feature Request http://www.trirand.com/blog/?page_id=393/feature-request/2-line-header-and-summary-in-footer#p2610 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 ?

Tabel with 2 line headerImage Enlarger

]]> Mon, 20 Oct 2008 08:51:44 +0300