PDA

View Full Version : [CLOSED] Group header align text bottom


rthiney
Dec 20, 2013, 7: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, 11: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 21, 2013, 12:11 AM
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 21, 2013, 12:39 AM
Can you provide a sample to reproduce?
rthiney
Dec 21, 2013, 12:52 AM
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, 3:29 PM
Try to set Delay to 100. In what browser do you test?
rthiney
Dec 21, 2013, 3:31 PM
IE 11 and latest autoupdated chrome. I set delay to 500, still happens.
Baidaly
Dec 21, 2013, 4: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, 4: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, 7: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, 7: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, 9: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, 10: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!