DataGrid mit schrägen Headertexten

[HarpoMarx]

Hallöle,

ich versuche ein DataGrid zu erstellen, deren DataGridColumns einen schrägen Header besitzen, so dass eine unumgebrochene Spaltenüberschrift bei gleichbleibender Spaltenbreite möglich ist. Leider wird der Inhalt des darin enthaltenen Labels immer von der Nachbarzelle überdeckt bzw. vom Header selber maskiert:



Die Eigenschaften des DataGrids und der DataGridColumns sollten eigentlich dazu führen, dass alles soweit transparent ist und somit keine Überdeckung stattfindet

PHP-Code:

<mx:DataGrid id="DATAGRID_sample"
             height="200"
             width="740"
             borderStyle="none"
             textAlign="center"
             resizableColumns="false"
             selectable="false"
             sortableColumns="false"
             headerHeight="45"
             resize="setColumnWidth()"
             creationComplete="setColumnWidth()"
             headerSeparatorSkin="HeaderSeparator"
             headerBackgroundSkin="HeaderSeparator"
             backgroundAlpha="0"
             headerColors="[0xFFFFFF,0xAAAAAA]"
             focusEnabled="false">
    <mx:columns>
        <mx:DataGridColumn id="DATAGRIDCOL_temp"
                           headerText="Blahblubblah"
                           dataField="value"
                           width="42"
                           headerRenderer="CustomHeader"/> 


Von daher gehe ich aus, dass die von mir gecodete Komponente zur Darstellung der Header den Text abschneidet/maskiert:

PHP-Code:

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" 
           width="200" 
           height="100%" 
           verticalScrollPolicy="off" 
           horizontalScrollPolicy="off"
           backgroundAlpha="0">
    <mx:Script>
        <![CDATA[
            import flash.text.engine.FontWeight;
            
            import mx.controls.DataGrid;
            import mx.controls.dataGridClasses.DataGridListData;
            [Embed(systemFont='Arial', fontName='arialEmbedded', mimeType='application/x-font', unicodeRange='U+0020-U+007E')] 
            public var arialEmbedded:Class;
            
            import mx.controls.dataGridClasses.DataGridColumn;
            import mx.managers.SystemManager;
            
            [Bindable]
            private var _text:String;
            
            private var _height:Number;
            
            override public function set data(value:Object):void{
                _height = height;
                var col:DataGridColumn = value as DataGridColumn;
                _text = col.headerText;
                headerLabel.x = 10;
                headerLabel.y = _height - 12;
            }
            
        ]]>
    </mx:Script>
    <mx:Label id="headerLabel" height="14" rotation="-45" fontFamily="arialEmbedded" text="{_text}"/>
</mx:Canvas>

Kann mir da viellicht einer weiterhelfen?!

Dank und Gruß

Klaus

[Rotzlucky]

Ich habs jetzt weder getestet noch je mit sowas gearbeitet aber du drehst dein Label, dein Canvas steht aber weiterhin senkrecht auf deinem DataGrid. Hast mal versucht dem auch eine rotation mitzugeben?

[HarpoMarx]

Nein, aber ich denke auch nicht, dass die Rotation des Canvas das Abschneiden der Labelkomponente verhindern könnte.
Wenn ich die Labelkomponente um -135° drehe, so dass sie nach 'Nord-West' zeigt, wird sie auch dort abgeschnitten, was auch wiederum ein Indiz dafür ist, dass das Label maskiert und nicht überdeckt wird.
Den Ansatz sehe ich demnach darin, dass man dem CustomHeader erlaubt über den Rand des Headers hinauszuragen.

[HarpoMarx]

Ah, Lösung gefunden:

<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" 
		   width="200" 
		   height="100%" 
		   verticalScrollPolicy="off" 
		   horizontalScrollPolicy="off"
		   clipContent="false"
		   backgroundAlpha="0">

mit dem Default auf true wird der Inhalt an den Grenzen abgeschnitten.