Datagrid style

In addition to the borderThickness of the datagrid, the header of a datagrid has a thin (1 pixel) border between the header and the body. Is there a way to remove the border?

There is no way to turn it off w/o subclassing DataGridHeader. It should
draw with the "borderColor" so you might be able to make it less noticeable.

Similar Messages

ItemRenderer overides the DataGrid styles

Hi,
I have a CSS file where I have defined the styles for DataGrid like following:
DataGrid
      selection-color: #243E4F;
      text-selected-color: #FFFFFF;
      alternating-item-colors: #DCE3E8, #FFFFFF;
I have a Datagrid in my mxml component page. I use an ItemRenderer for the html text in one of my datagrid column.
<mx:DataGridColumn dataField="AccountName" headerText="Name" width="122">
                <mx:itemRenderer>
                  <mx:Component>
                      <mx:Text selectable="true" htmlText="{data.AccountName}" width="100%"/>
                </mx:Component>
                </mx:itemRenderer>
</mx:DataGridColumn>
But now when I select any of the DataGridColumn 'AccountName', the font color (ie. text-selected-color ) in this cell turns black.
Please help me to resolve this issue?
Thanks in advance,
Micheal

Hi,
Thank you for your quick response.
My DataGrid is inside a HBox.
//my component mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" >
    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.collections.ArrayCollection;
            [Bindable]
            public var cashData:ArrayCollection = new ArrayCollection();
            private function formatBalance(item:Object, column:DataGridColumn):String
                return item.Balance.currencyCode+''+item.Balance.amount;
        ]]>
    </mx:Script>
    
    <mx:DataGrid width="100%" height="100%" id="gridID" dataProvider="{cashData}" showHeaders="false" verticalGridLines="true">
        <mx:columns>
            <mx:DataGridColumn dataField="AccountName" headerText="Name" width="122">
                <mx:itemRenderer>
                  <mx:Component>
                      <mx:Text selectable="true" htmlText="{data.AccountName}" width="100%"/>
                </mx:Component>
                </mx:itemRenderer>
            </mx:DataGridColumn>
            <mx:DataGridColumn dataField="Balance" headerText="Balance" labelFunction="formatBalance" width="122" textAlign="right"/>
        </mx:columns>
    </mx:DataGrid>
</mx:VBox>
Actually I set the dataprovider from PureMVC mediator. You can see that column 'AccountName' is an 'htmltext'. This value will be a link not a editable text.
ie. <span class="xyz"><a href= "someurl.do?x=20106650&y=10232371"><strong>details</strong></a><br/><span class="caption">Intranet Card</span></span>
Thanks,
Michael

Spark datagrid style by row

I'm trying to change the style of spark datagrid rows based on data, I've found examples about itemrenderer and columns, but they doesn't fit in this case.
I'm looking for a method to change font (weight, size, color) and background based on data value: if the data in column X is equal to Y, change all the row style to...

So, are you saying you want to change the font of a particular row when its data object is a certain value?
I would have a custom renderer with an overridden prepare method. In the prepare method, you can check the data and adjust the labelDisplay accordingly.

DataGridCellStyle: Set Background of DataGridCell based on value in a Different DataGrid / DataTable

Hi everyone
I am trying to set the background of a cell in a datagrid based on a value in a different datagrid. Is it possible to specify this in the XAML through binding? I'm using the MVVM pattern and would like to minimise code in the code behind. Please note that
the datagrids are the same dimension, but the dimension is unknown until runtime.
I've copied an image of the two datagrids. Essentially, the second datagrid will contain values of 0 or 1. I would then like to color the cells in the first datagrid a different color based on these values.
CODE:
<DataGrid Style="{StaticResource Style1}" ItemsSource="{Binding Table1, StringFormat=n}" AutoGenerateColumns="True" >
<DataGrid.InputBindings>
<MouseBinding MouseAction="LeftDoubleClick" Command="{Binding CommandWithParameter}" CommandParameter="{Binding .}"/>
</DataGrid.InputBindings>
<DataGrid.CellStyle>
<Style TargetType="DataGridCell">
<Setter Property="Background" Value="{Binding Table2, Converter={StaticResource WeightConverter} }"/>
</Style>
</DataGrid.CellStyle>
</DataGrid>
Thanks!

You could use a DataTrigger that binds to a column of a row of the other DataGrid like this:
<DataGrid x:Name="datagrid"></DataGrid>
<DataGrid x:Name="datagrid2">
<DataGrid.CellStyle>
<Style TargetType="DataGridCell">
<Style.Triggers>
<DataTrigger Binding="{Binding Path=Items[0].num, ElementName=dataGrid}" Value="abc">
<Setter Property="Foreground" Value="Red"/>
</DataTrigger>
</Style.Triggers>
</Style>
</DataGrid.CellStyle>
</DataGrid>
DataTable dt = new DataTable();
dt.Columns.Add(new DataColumn("num") { DataType = typeof(string) });
dt.Rows.Add("abc");
datagrid.ItemsSource = dt.DefaultView;
datagrid2.ItemsSource = new List<string> {"a", "b", "c" };
Hope that helps.
Please also remember to mark all helpful posts as answer to close your threads and please start a new thread if you have a new question.

Styles applied for PrintDataGrid are not getting affected.

Hi, I have used printDataGrid for printing my data. I have applied css style for the print datagrid. style applied for this printDataGrid is given below.
        mx|PrintDataGrid.printing {
            headerColors: #D8DCDD, #F1F2F2;
            color: #000000;
            alternatingItemColors: #D2D3D4, #F1F2F2;
Use of mx:PrintDataGrid in my application:
<mx:PrintDataGrid id="ddDataGrid" width="99%" height="100%" styleName="printing" sizeToPage="true"/>
But in the print document not able get alternatingItemColors for the printed datagrid.

Hi Bernd Alheit,
          Thank you for your reply.
          I have wrongly selected this Form Location and I have realized it after posting it.

WPF: How to make the first column does not show row separator and Left column separator in DataGrid?

Our WPF application uses DataGrid.
One of request is that first column of DataGrid does not show row separator and also does not show Left column separator. So it looks like the first column does not belong to the DataGrid. However, when select a row, the cell of first column still get selected.
How do we make it? Thx!
JaneC

Hi Magnus,
Thanks for replying our question and provide your solution!
Your solution works by setting "HorizontalGridLinesBrush" and "VerticalGridLinesBrush" to {x:Null} in the DataGrid style and modify "CellStyle" in first column as following:
<DataGridTextColumn MinWidth="32"
Binding="{Binding CellName}"
CanUserReorder="False"
CanUserSort="False"
Header="Cell}"
IsReadOnly="true" >
<DataGridTextColumn.CellStyle>
<Style TargetType="DataGridCell">
<Setter Property="IsEnabled" Value="False"></Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridCell}">
<Border BorderThickness="0" BorderBrush="{x:Null}"
Background="{Binding Background, RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}" Margin="-1">
<Grid Background="{TemplateBinding Background}" VerticalAlignment="Center" Height="42">
<ContentPresenter VerticalAlignment="Center"/>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</DataGridTextColumn.CellStyle>
</DataGridTextColumn>
We found another way to achieve it by using DataGridRowHeader. The good way to use DataGridRowHeader is that we do not need to make the first column ReadOnly (click on first column does not select whole row anymore). Select RowHeader in a row will select
whole row. Move scroll bar horizontally, the row header still keep in visible area.
<Style TargetType="{x:Type DataGridRowHeader}" x:Key="dataGridRowHeaderStyle">
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="Height" Value="42" />
<Setter Property="SeparatorBrush" Value="{x:Null}" />
<Setter Property="FontSize" Value="16" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridRowHeader}">
<Grid>
<Border x:Name="rowHeaderBorder"
BorderThickness="0"
Padding="3,0,3,0"
Background="{Binding Background, RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}"
BorderBrush="{x:Null}">
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<DataGrid>
<DataGrid.RowHeaderStyle>
<Style TargetType="DataGridRowHeader" BasedOn="{StaticResource dataGridRowHeaderStyle}">
<Setter Property="Content" Value="{Binding CellName}" />
<Setter Property="Width" Value="35"/>
</Style>
</DataGrid.RowHeaderStyle>
</<DataGrid>
JaneC

How to change header font style in Spark DataGrid?

I'm looking since last week for a way how to change the font style of the header in a Spark DataGrid. It drive me nuts that I can't find a way to do this. Have anyone one an idea how to achieve it? Any help is appreciated.
Thanks,
- Artur

Hi,
Some styles won't work because some text styles got hardcoded into the DefaultGridHeaderRenderer's Label. You'll run into this issue not just with the DataGrid headers but also things like the Panel's title and other places where we have text. One way to get around this issue is to create your own custom headerRenderer based on the default one and then redefine the headerRenderer skin part in the skin.
First, create a subclass of the DefaultGridHeaderRenderer and tweak the "labelDisplay" to your liking (or even just take out all the styles and style it on your own as you had earlier using your custom header renderer's name). Example below (I named it "CustomHeaderRenderer"):
<?xml version="1.0" encoding="utf-8"?>
<skins:DefaultGridHeaderRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                                 xmlns:s="library://ns.adobe.com/flex/spark"
                                 xmlns:mx="library://ns.adobe.com/flex/mx"
                                 xmlns:skins="spark.skins.spark.*"
                                 xmlns:comps="comps.*">
    <fx:Declarations>
        
        <s:Label id="labelDisplay"
                 verticalCenter="1" left="0" right="0" top="0" bottom="0"
                 textAlign="start"
                 verticalAlign="middle"
                 maxDisplayedLines="1"
                 showTruncationTip="true" />
    </fx:Declarations>
</skins:DefaultGridHeaderRenderer>
Next, create a simple DataGrid skin by creating a subclass of the spark.skins.spark.DataGridSkin in MXML and defining a new headerRenderer component in the fx:Declarations section. Example below (I named it "CustomDataGridSkin"):
<?xml version="1.0" encoding="utf-8"?>
<skins:DataGridSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
                xmlns:s="library://ns.adobe.com/flex/spark"
                xmlns:mx="library://ns.adobe.com/flex/mx"
                xmlns:skins="spark.skins.spark.*"
                xmlns:comps="comps.*">
    <fx:Declarations>
        
        <fx:Component id="headerRenderer">
            <comps:CustomHeaderRenderer />
        </fx:Component>
    </fx:Declarations>
</skins:DataGridSkin>
Last, assign your new skin as the skinClass of your DataGrid (either in MXML or as a style):
<s:DataGrid skinClass="comps.CustomDataGridSkin">
I know it's not pretty, but it's the result of trading off between having completely custom skinning vs. having knobs to tweak every style. Hope this helps.
-Kevin

Setting font style on hover for spark datagrid

I'm trying to skin a Spark datagrid. I have most things sorted by creating a custom skin, but one thing I can't find is how to set the colour of the row's font on hover. I can set the background colour fine, but how would I go about changing the font colour when a user hovers over the row?
Thanks

Hi
You don’t actually deal with the text that’s displayed in the a datagrid inside of the skin
Look at item renderers for the grid columns. You can style your text or whatever else you would like to display in the grid, in the renderer
Hope that helps a little
If you are still stuck just let me know and I’ll send you some code
Cheers
g
heres some code
NOTE: I am making this up as I sit here so I may be forgetting something. Don’t be surprised if this doesn’t work, but the basic idea is right I think
So in the spark datagrid when you set your column (if you use mxml) this will replace a glob renderer so you can have a different one for each column if you wish.
<s:GridColumn dataField="Status"
headerText="name"
width="37"
itemRenderer="fooRenderer"
/>
Or set a gloabel renderer in the grid def itself
<s:DataGrid itemRenderer=”fooRenderer” />
Then write a custom renderer: fooRenderer.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:GridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                     xmlns:s="library://ns.adobe.com/flex/spark"
                     xmlns:mx="library://ns.adobe.com/flex/mx"
                     clipAndEnableScrolling="true"
                     >
       <fx:Script>
              <![CDATA[
                     override public function discard(willBeRecycled:Boolean):void
                           labelData.text="";
                           super.discard(willBeRecycled);
                     override public function prepare(hasBeenRecycled:Boolean):void
                           if(data)
                                   // set the colour of the text label to black
                                  labelData.setStyle("color",0x000000)
                                  // put some logic here to dynamic style the label
                           //check for the 'format' function on the column (THIS MAY BE WRONG)
                           if( column.labelFunction != null )
                                  labelData.text = column.labelFunction( data, column );
                           else
                                  labelData.text = data[column.dataField];
                     super.prepare(hasBeenRecycled);
              ]]>
       </fx:Script>
       <s:Label id="labelData" />
</s:GridItemRenderer

Questions about Spark DataGrid (Header Font Styles, Header Gradient)

Just starting out in 4.5 SDK, and just a tad confused on the Spark DataGrid.
1) Trying to set the font style for just the header, but don't see those properties in the designer....as they appear to apply to every part of the DataGrid.
2) Want to set a linear gradient for the header utilizing two specific colors, alphas and ratios. Not sure where to set them now.
I think that is it for now. From what I have done with it so far, I love it....just obviously not as much user documentation as the MX DataGrid.
Thanks in advance!
Bill

You can do per column header renderers by setting the headerRenderer property on the column. But if you want to swap out all the headers, the header renderer has to be specified in the skin. One neat trick you can do is subclass the DataGridSkin and replace the "headerRenderer" declaration. This also works with the other skin parts.
<?xml version="1.0" encoding="utf-8"?>
<skins:DataGridSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
                xmlns:s="library://ns.adobe.com/flex/spark"
                xmlns:mx="library://ns.adobe.com/flex/mx"
                xmlns:skins="spark.skins.spark.*">
    <fx:Declarations>
        
        <fx:Component id="headerRenderer">
            <s:CustomGridHeaderRenderer />
        </fx:Component>
    </fx:Declarations>
</skins:DataGridSkin>
-Kevin

How do I change the style of a subset of rows inside a Datagrid?

How do I change the style of a subset of rows inside a
Datagrid? I have tried dgExample.selectedItem.fontWeight="bold" but
that does not work. What should I do?
Please help.

I see where you mean but I'm not familiar with the 'language'
of CSS. Currently, the background of the body (or probably the div
container) is set to none on this page. So visually, I have a white
background with black letters. I want to place a gradient image in
this container instead of the 'none'. The coding with "none isn't
even the CSS code because I vaguely remember deleted it because I
thought I would never need it. So can you tell the CSS code I need
to place this image in the #container (I think that's where it
should go) and where? Thanks. I've included the little piece of
code where I think it should go in somewhere. Thanks for the help.
<link href="../CSS/twoColFixLtHdr.css" rel="stylesheet"
type="text/css" />
<style type="text/css">

</style>
<link href="../css/global.css" rel="stylesheet"
type="text/css" />
<script src="../SpryAssets/SpryMenuBar.js"
type="text/javascript"></script>
<link href="../SpryAssets/SpryMenuBarHorizontal.css"
rel="stylesheet" type="text/css" />


</head>
Lou
quote:
Originally posted by:
Newsgroup User
Redefine the CSS for ".twoColFixLTHDR #container" in the page
itself,
below the link to the external style sheet.
JMS

How to import style from mx.DataGrid into my DataGridExt (copy-paste from mx.DataGrid)

Ok, I managed to create the DataGridExt (copy-paste from mx.DataGrid). Don't ask me why I did this, it's a long story believe me.
But it is styleless. There's no skin set and that is what I expected.
The thing is, is there a nice/magical way to tell the DataGrid skin to be applied to DataGridExt?
Thanks for attention.

In case the question was not clear:
Is there a way to have all styles of mx.DataGrid applied to my custom control called DataGridExt?

Change the font style in a selected item on a DataGrid

Hi!!
I have a normal DataGrid and i want to set the font to BOLD style the selected row.

try it:
...datagrid id='dg'....
<mx:DataGridColumn
     width="50" sortable="false"
     headerText="My Title"
     textAlign="center">
     <mx:itemRenderer>
          <mx:Component>
               <mx:Text fontWeight="{data == dg.selectedItem?'bold':'normal'}"
                                   text="{data.title}"/>
          </mx:Component>
     </mx:itemRenderer>
</mx:DataGridColumn>

[WPF] DataGrid: apply style to text into cell from codebehin

Hi,
in a dataGrid, can I apply a style to text into cell from code behind?
I know that I can use DataTrigger, but I can't add a new property to model that it is binds with datagrid.
With
DataGridRow tmpRowSelected = dgProperties.ItemContainerGenerator.ContainerFromItem(dgProperties.SelectedItem) as DataGridRow;
I get my selecte row, I would apply TextDecorations.Strikethrough to text into the cells of this row.
Thanks.

You could use a helper method that finds all TextBlock elements within the DataGridRow in the visual tree and set any property (TextDecorations, Style, etc.) of these:
DataGridRow tmpRowSelected = dgSample.ItemContainerGenerator.ContainerFromItem(dgSample.SelectedItem) as DataGridRow;
if (tmpRowSelected != null)
foreach (TextBlock txtBlock in FindVisualChildren<TextBlock>(tmpRowSelected))
txtBlock.TextDecorations = TextDecorations.Strikethrough;
private static IEnumerable<T> FindVisualChildren<T>(DependencyObject depObj) where T : DependencyObject
if (depObj != null)
for (int i = 0; i < VisualTreeHelper.GetChildrenCount(depObj); i++)
DependencyObject child = VisualTreeHelper.GetChild(depObj, i);
if (child != null && child is T)
yield return (T)child;
foreach (T childOfChild in FindVisualChildren<T>(child))
yield return childOfChild;
Hope that helps.
Please remember to close your threads by marking helpful posts as answer and then start a new thread if you have a new question.

Datagrid column text styles

I have a datagrid column that contains strings in this
syntax: ##% (##%)
When the percentages are over 0% I'd like the text to be
green; when the percentages are under 0%, I'd like to change the
text to red. Apart from breaking this into two columns, how can I
change the colors of different strings inside the same datagrid
column?
Thanks,
Tom

Tom,
One way to do this would be to make a custom ItemRenderer
based on a Label for your dataGrid column. Then, just test whether
you have positive or negative values for your dataField. If it is
negative, use a setStyle('color', 0xFF0000) for red. Here is a
basic example:
<?xml version="1.0" encoding="utf-8"?>
<mx:Label xmlns:mx="
http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
override public function set data(value:Object):void {
super.data = value;
if (value != null)
if(value.fieldValue >= 0) //fieldValue will need to match
your dataField value from your dataProvider of your dataGrid. You
might need to convert it to an int to compare.
setStyle("color", 0x00DD00);
} else {
setStyle("color", 0xDD0000);
super.invalidateDisplayList();
]]>
</mx:Script>
</mx:Label>
Then in your main app:
<mx:DataGridColumn headerText="Drill Type"
dataField="fieldVAlue" width="105"
itemRenderer="renderers.RedGreen"/>
This assumes that your mxml component is named
'RedGreen.mxml' and is in the 'renderers' directory. You can adjust
this to fit your project as needed. I hope this helps.
Vygo

Apply style on advanced datagrid

Hello,
I would like to apply bold style on the text inside the red rectangle (see attached)
Thank you for your help

hmmm i though i couldnt be misunderstood.
anyway i´ll give it a new go.
if you are using a form (SAP-SCRIPT/SMARTFORM) to print the include text, the style of that form will get used.
So, if you want to format that include text using paragraph and character formats, you need to use paragraph and character formats which are known in the form.
Or if you used new other formats, you need to add those to the style of the form or the form itself if its SAP-SCRIPT.

Datagrid style

Similar Messages

Maybe you are looking for