CODEWITHSUNDEEP
javascriptjqueryjqgridsubgrid
IronicMuffin
IronicMuffin

Reputation: 4192

How do I set the header alignment in a jqGrid subgrid?

Specifically the simple subgrid, not "grid as subgrid".

I've tried a variety of methods, but none seem to work.

If I hook into subGridBeforeExpand, the table isn't ready for me to select the headers and set the css.

If I hook into subGridRowExpanded the subGrid won't even render.

The align property in the subGridModel only affects the cell value.

Here is my model for reference:

subGrid: true,
subGridUrl: myUrl,                    
subGridModel: [{ 
     name: ["Item", "Qty"],
     width: ["200", "100"],
     align: ["right", "right"],
     param: ["Id"]
}]

Upvotes: 3

Views: 1898

Answers (2)

Unbroken
Unbroken

Reputation: 21

I've solved with a CSS selector, for example to center the 7th column header:

#GRIDID .subgrid-data th:first-child + th + th + th + th + th + th
{
    text-align: center;
}

or to center entire column:

#GRIDID .subgrid-data th:first-child + th + th + th + th + th + th,
#GRIDID .subgrid-data td:first-child + td + td + td + td + td + td
{
    text-align: center;
}

Upvotes: 0

Oleg
Oleg

Reputation: 221997

You are right, that there are too few callbacks in Subgrids and Treegrids. Nevertheless because I found your question very interesting challenge (+1 from me) I do found a workaround.

You can do the following:

var $grid = $("#grid"), sid;
$grid.jqGrid({
    //... your other settings
    subGrid: true,
    serializeSubGridData: function(p) {
        sid = p.id; // save id from the last request
        return p;
    },
    ajaxSubgridOptions: {
        complete: function (sxml) {
            var ts = $grid[0], $subgridHeaders;
            if (ts.p.subgridtype === "xml") {
                ts.subGridXml (sxml.responseXML, sid);
            } else {
                ts.subGridJson($.jgrid.parse(sxml.responseText), sid);
            }
            // now the subgrid is completed and we can modify
            // style of subgrid headers
            $subgridHeaders = $('#' + $.jgrid.jqID(ts.id + '_' + sid))
                .find("th.ui-th-subgrid");
            // now we can do some custom actions:
            $($subgridHeaders[0]).css("text-align", "left");
            $($subgridHeaders[1]).css("text-align", "right");
        }
    }
});

You can here the demo which looks like the following after the expanding of subgrids:

enter image description here

Upvotes: 2

Related Questions