right align column header text | Infragistics Forums

755

right align column header text

Roland posted over 15 years ago

I populate a grid with strings and numerical data. I want the columns containing numerical data to be right aligned.

Therefor I asign the cssclass "ar" to the CssClass property of my BoundDataField object and declare in my css file:

tbody.igg_Item tr td.ar
{
text-align : right;
}

no problem all my numerical data is right aligned.

However how can I right align the corresponding header text?

The Header object does not contain a CssClass property?

Parents

28464

[Infragistics] Rumen Stankov posted over 15 years ago

Hello,
Currently I think there are two options - directly modify .igg_HeaderCaption th for grid header and set text-align to right, but this will affect all headers in the grid
.igg_HeaderCaption {ig_datagrid.css (line 21)
overflow:hidden;
padding-bottom:4px;
padding-left:8px;
padding-top:4px;
text-align:left;
}
The other option I see is by using templates, e.g.
            <ig:TemplateDataField Key="ProductName">
                <HeaderTemplate>
                    <div style="text-align: right !important;">
                        Right
                    </div>
                </HeaderTemplate>
                <ItemTemplate>
                    <%# Eval("ProductName") %>
                </ItemTemplate>
            </ig:TemplateDataField>
CssClass for header is a good idea, maybe we will implement it future versions of the product.
Cancel
Reply

Cancel

Reply

739

Offline John Price posted over 15 years ago in reply to [Infragistics] Rumen Stankov
If it helps anyone, I did this with a hack-y Javascript solution that sounds complicated but is pretty easy once you've got the main script in a shared .js somewhere.

Steps:

Register a client event for the AJAXResponse client event of the grid (see ClientEvents property). Call it "gridCallback".

Add a javascript in your page header, like this:

function gridCallback() {

}

Wire up the body onload= to also call gridCallback.

Put a call to the shared alignWebDataGridHeaders function (see below) in both functions so that the alignment gets set both on page load and on async sorting and filtering operations done by the grid. Like this:

function gridCallback() {
alignWebDataGridHeaders("right", "CashItemId", "PaymentAmount", "Rent", "Difference");
}

The first parameter is the desired alignment, and the other parameters are a variable-length list of column key names. You can call the function more than once for different alignments.

Optionally add a style for all the headers that pads them a bit to avoid headers "overhanging" the column values, which happens in some themes like Appletini. Tweak this as needed:

<style type="text/css">
.divdetail th
{
padding-right: 8px;
}
</style>

How it works

The shared script iterates over all th elements in the page and looks for the id pattern used by Infragistics (Example: id=":1732066971.12:adr:1:idx:1:key:RentAmount"). It parses out the key (e.g. RentAmount) and then matches it against the column key list you've passed in. It sets the alignment if it finds a match.

Shared Source Code

//Gets the column key from an Infragistics th tag's id, usually something like id=":1732066971.12:adr:1:idx:1:key:RentAmount"
function keyFromHeaderId(id) {
var keyIndex = id.indexOf("key:", 0);
if ((keyIndex > -1) && (id.length > keyIndex + 3))
return id.substring(keyIndex + 4, id.length);
}

//aligns a list of WebDataGrid headers. First arg is "left" etc. and then
//just pass a comma list of header keys.
function alignWebDataGridHeaders(alignment, names) {

var i;
var headers = document.getElementsByTagName("th");

for (i = 0; i < headers.length; i++) {
var key = keyFromHeaderId(headers[i].id);
var j;
for (j = 1; j < arguments.length; j++) {
if (key == arguments[j]) {
headers[i].style.textAlign = alignment;
break;
}
}
}
}
Cancel
Reply

Cancel

Children

739

Offline John Price posted over 14 years ago in reply to John Price

I know this is an old post, but I'd like to point out that as of 2009.2, each column's Header and Footer now have an assignable CssClass property. Problem solved - none of the above workarounds are necessary any more.
Cancel
Reply

Cancel

How it works

Shared Source Code