[CLOSED] Group header align text bottom [Archive]

rthiney

Dec 20, 2013, 6:36 PM

I have some columns grouped, others not in a GridPanel..
See image.
How can I get the text in the headers vertical-align bottom for the columns that aren't grouped?

I achieved this with the unit column, by wrapping a header around that single column, with no text:

<ext:Column runat="server" Border="false">
<Columns>
<ext:Column runat="server" DataIndex="UnitOfMeasurement" Header="Unit" ColumnID="UnitOfMeasurement" Width="75" Align="Left" Hideable="false" Border="false">
<Editor>
<ext:TextField runat="server" SelectOnFocus="true" />
</Editor>
</ext:Column>
</Columns>
</ext:Column>

But when I tried that with the Metric column, the Flex wasn't being honored...

<ext:Column runat="server" Border="false">
<Columns>
<ext:Column runat="server" DataIndex="Title" Header="Metric" ColumnID="Title" Flex="1" Align="Left" Hideable="false" Border="false" StyleSpec="vertical-align:bottom;" >
<Renderer Fn="PerformanceMetrics.fixTitle" />
<Editor>
<ext:TextField runat="server" SelectOnFocus="true" />
</Editor>
</ext:Column>
</Columns>
</ext:Column>

7389

Baidaly

Dec 20, 2013, 10:47 PM

Hello!

Try to add the following handler of AfterRender event:

<ext:Column runat="server" DataIndex="Title" Header="Metric" ColumnID="Title" Flex="1" Align="Left" Hideable="false" Border="false" StyleSpec="vertical-align:bottom;" >
<Renderer Fn="PerformanceMetrics.fixTitle" />
<Editor>
<ext:TextField runat="server" SelectOnFocus="true" />
</Editor>
<Listeners>
<AfterRender Delay="10" Handler="item.titleEl.setStyle('padding', '26px 6px 0px');" />
</Listeners>
</ext:Column>

rthiney

Dec 20, 2013, 11:11 PM

Hello!

Try to add the following handler of AfterRender event:

<ext:Column runat="server" DataIndex="Title" Header="Metric" ColumnID="Title" Flex="1" Align="Left" Hideable="false" Border="false" StyleSpec="vertical-align:bottom;" >
<Renderer Fn="PerformanceMetrics.fixTitle" />
<Editor>
<ext:TextField runat="server" SelectOnFocus="true" />
</Editor>
<Listeners>
<AfterRender Delay="10" Handler="item.titleEl.setStyle('padding', '26px 6px 0px');" />
</Listeners>
</ext:Column>

No love :(..
I increased the delay and the 26 to 36, still nothing...IE 11 and Chrome

Baidaly

Dec 20, 2013, 11:39 PM

Can you provide a sample to reproduce?

rthiney

Dec 20, 2013, 11:52 PM

Can you provide a sample to reproduce?

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Ext.NET Example</title>

</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server">

</ext:ResourceManager>

<ext:GridPanel runat="server" width="800">
<ColumnModel>
<Columns>
<ext:Column runat="server" DataIndex="TMEEnd" Text="Metric" ColumnID="TMEEnd" Width="75" Align="Right">
<Listeners>
<AfterRender Delay="10" Handler="item.titleEl.setStyle('padding', '26px 6px 0px');" />
</Listeners>
</ext:Column>
<ext:Column runat="server" Text="3 Months Ended">
<Columns>
<ext:Column runat="server" DataIndex="TMEStart" Text="9/30/2012" ColumnID="TMEStart" Width="75" Align="Right">

</ext:Column>
<ext:Column runat="server" DataIndex="TMEEnd" Text="9/30/2011" ColumnID="TMEEnd" Width="75" Align="Right">

</ext:Column>
</Columns>
</ext:Column>
<ext:Column runat="server" DataIndex="TMEEnd" Text="Other" ColumnID="TMEEnd" Width="75" Align="Right">
</ext:Column>
</Columns>
</ColumnModel>
</ext:GridPanel>

</form>
</body>
</html>

Resize the column to simulate Flex...and the title moves back up.

Baidaly

Dec 21, 2013, 2:29 PM

Try to set Delay to 100. In what browser do you test?

rthiney

Dec 21, 2013, 2:31 PM

IE 11 and latest autoupdated chrome. I set delay to 500, still happens.

Baidaly

Dec 21, 2013, 3:08 PM

Try the following trick:

<ext:Column ID="Column1" runat="server" DataIndex="TMEEnd" ColumnID="TMEEnd" Width="75" Align="Right">
<HeaderItems>
<ext:Label runat="server" Html="Metric" />
</HeaderItems>
<Listeners>
</Listeners>
</ext:Column>

rthiney

Dec 21, 2013, 3:33 PM

Try the following trick:

<ext:Column ID="Column1" runat="server" DataIndex="TMEEnd" ColumnID="TMEEnd" Width="75" Align="Right">
<HeaderItems>
<ext:Label runat="server" Html="Metric" />
</HeaderItems>
<Listeners>
</Listeners>
</ext:Column>

That worked, but how to I center just the header, not the column? Code below did not work...

<HeaderItems>
<ext:Label runat="server" Html="Metric" StyleSpec="text-align:center;" />
</HeaderItems>

Baidaly

Dec 21, 2013, 6:03 PM

Try to set Column's Align to Center:

<ext:Column ID="Column1" runat="server" DataIndex="TMEEnd" ColumnID="TMEEnd" Width="75" Align="Center">
<HeaderItems>
<ext:Label runat="server" Html="Metric" />
</HeaderItems>
<Listeners>
</Listeners>
</ext:Column>

rthiney

Dec 21, 2013, 6:19 PM

Try to set Column's Align to Center:

<ext:Column ID="Column1" runat="server" DataIndex="TMEEnd" ColumnID="TMEEnd" Width="75" Align="Center">
<HeaderItems>
<ext:Label runat="server" Html="Metric" />
</HeaderItems>
<Listeners>
</Listeners>
</ext:Column>

Yes, but then all of the columns data is centered, I want it right aligned...header centered.

Baidaly

Dec 21, 2013, 8:09 PM

Add the following CtCls to the Label:

<ext:Column ID="Column1" runat="server" DataIndex="company" Flex="1" Sortable="false" Align="Right">
<HeaderItems>
<ext:Label runat="server" Text="Company" CtCls="ux-header-label" />
</HeaderItems>
</ext:Column>

and define this CSS:

.ux-header-label {
text-align: center;
}

rthiney

Dec 21, 2013, 9:39 PM

Add the following CtCls to the Label:

<ext:Column ID="Column1" runat="server" DataIndex="company" Flex="1" Sortable="false" Align="Right">
<HeaderItems>
<ext:Label runat="server" Text="Company" CtCls="ux-header-label" />
</HeaderItems>
</ext:Column>

and define this CSS:

.ux-header-label {
text-align: center;
}

We have a winner! thanks for all you help on this one!