jqgrid double headers

Question

Can we include two headers in jqgrid. One with a colModel and one without a colModel?

Also I have an issue where when I click one row, the entire grid gets highlighted. How can I resolve this issue?

CSS Code:

.cssclass{

            background-color : #EEEEEE;
            font-family: Verdana, Arial, Helvetica, sans-serif;
            font-size: 11px;
            color: #0B0B61;
            border: 0;
            font-weight: bold;
            text-align: center;
            text-indent: 2pt;
            padding-top: 2px;
            padding-right: 2px;
            padding-left: 2px;
            left: expression(parentNode.parentNode.parentNode.parentNode.parentNode.scrollLeft);
            position:relative;
            z-index:10;
            cursor: default;
    }

jqgrid code:

        $.ajax({

            type: "POST",
            url: 'cfcs/index.cfc?method=getCols',
            data: "",
            dataType: "json",
            success: function(result)
            {

                colM = eval("([" + result.COLMODEL + "])");
                colN = result.COLNAMES;


                jQuery("#list").jqGrid({

                    url:'cfcs/index.cfc?method=getDetails',
                    datatype: 'json',
                    mtype: 'POST',

                    colNames:colN,
                    colModel :colM,
                    height: 'auto',
                    hoverrows: true,
                    width: 1260,
                    shrinkToFit: false,
                    pager: jQuery('#pager'),
                    resizable: false,
                    rowNum: 25,
                    rowList: [25, 50, 100],
                    viewrecords: true,
                    jsonReader: {
                        root: "ROWS", //our data
                        page: "PAGE", //current page
                        total: "TOTAL", //total pages
                        records:"RECORDS", //total records
                        cell: "",
                        id: "0"
                    }
                    //loadComplete: function(data){alert('loaded');},
                    //loadError: function(xhr,status,error){alert('error');}
                }) 
                $("#list").setLabel("col1","<br><br>col1","cssclass");
                $("#list").setLabel("col2","<br><br>col1","cssClass");

                $("#list").jqGrid('navGrid','#pager',{
                    edit:false,
                    add:false,
                    del:false, 
                    search:true,
                    refresh: true,
                    searchtext:"Search",
                    refreshtext: "Refresh",
                    'cloneToTop':true
                }); 
            },
            error: function(x, e)
            {
                alert(x.readyState + " "+ x.status +" "+ e.msg);   
            }


        });

Thanks.

Do you mean 2 header rows? Or one header row that is 2 lines tall? — Zac, Jan 07 '11 at 17:39
@Zac. Two header rows.One header has all the required columns. I need to have the second header on top of first header to include a date range for some columns. — DG3, Jan 07 '11 at 17:51

score 1 · Accepted Answer · answered Jan 07 '11 at 17:42

1

About your second problem. I supose that you use the same id for all grid rows. The row id must be unique, then you will not have the descibed problem.

About two headers I don't really understand what you mean. Prabably you can explain what you mean in other words or post a picture.

answered Jan 07 '11 at 17:42

Oleg

220,925
34
403
798

@Oleg. yes I see that all rows have the same id. I thought jqgrid automatically assign a different id. How can I make sure the rows have unique IDs? – DG3 Jan 07 '11 at 17:50
@user508518: It's depend on how yoi fill jqGrid with data. If you post the corresponding code example (just append your question) then I can better explain all on the example. – Oleg Jan 07 '11 at 17:53
@user508518: I am back. In the code which you posted are missed th most interesting information: the definition of `colModel` and `colNames`. By the way if `colModel` defines `label` you can don't use `colNames`. Moreover you should post JSON data of the grid posted from the server. You can use Fiddler (see http://www.fiddler2.com/fiddler2/) or Firebug (see http://getfirebug.com/) to get the pure JSON data. The ids from the JSON data is the place where you have the problem. Corresponds to the jqGrid definition the server should return for the first column the data which must be unique id value – Oleg Jan 07 '11 at 19:39
@Oleg: I am defining colModel and colNames on server side as I am building the columns dynamically. The JSON data is too huge to post it here. But I understood what you are saying, that id value we mention in jsonReader, should be a unique column value? The data I am getting on server side does not have any such columns right now.So right now I had the id value as 0 which assumes the first column, so I made it to empty, and it is working fine. Also Can I change the background color of a click event? – DG3 Jan 07 '11 at 20:01
@user508518: If you use `id: "0"` and `cell: ""` then the data, which corresponds to grid rows posted back from the server, are arrays of strings and the first string (index 0) is the valued used as id. `` elements of the `` which will be build will have the values. Corresponds to HTML or XHTML specification you **can not use duplicates** in `id` attributes. Moreover I strictly recommend you use server side data paging. It makes jqGrid much more quickly and together with toolbar searching or other searching improve the user experience.
– Oleg Jan 07 '11 at 20:11
@Oleg,one final question. As you can see in my jggrid code, I am using setLabel on first two columns, and using a class names 'cssClass'. This I am doing to freeze the first two columns. I am testing this in IE8 so using expression. the headers are freezed but they are very shaky. And other attributes do not get applied to the column, like font-weight and font-size. is there a way to apply proper style to the header? – DG3 Jan 07 '11 at 20:31
@user508518: 1) You can use `classes` and `label` properties in `colModel` of the corresponding columns. Then the grid definition will be really loaded dynamically from the server. 2) I have seen your both questions with the freezing of the first two columns. Respect for your attempts. In my opinion freezing columns should be implemented by changing the jqGrid code `grid.base.js` so that **the scroll bar not exist** on the freezing columns (see http://www.massless.org/_tests/grid1/ as an example). The way which you use in interesting, but I think you can not create the final solution so. – Oleg Jan 07 '11 at 20:56

Zac · Answer 2 · 2011-01-07T19:39:04.953

You may consider putting using separate grids for each date range, and just formatting them to look like they are together.

---------------------------------------------------
|         1/1/2010     |           1/2/2010       |
---------------------------------------------------
|  grid 1 header       | grid 2 header            |
---------------------------------------------------

You could tie the various events for grid1, and grid2 together, so selecting row 10 in grid1 selects it in grid2 as well.

You may also want to look at the subgrid demos here under "Advanced" and see if there is something that will work for your data.

Alternative

After reading over your comments I think this might be closer to what you want, just change out units for date range. alt text

.ui-jqgrid .ui-jqgrid-htable th div 
{ 
   height: auto; 
   padding: 5px 0px;
}

jqgrid double headers

2 Answers2

Linked