Find me on:
Contact me at:

mikejuly24<at>

ramblingdeveloper.com

Search Ramblings
« Apache Flex to use Git | Main | Styling an Alert in Flex 4 »
Saturday
Oct152011

Removing Grid Lines from Spark DataGrid Skin

Creating a datagrid with no column or row seperator lines is just a matter of creating a new DataGrid skin and applying it to the DataGrid.

The first thing to do is to create a new MXML class (BlankDataGridSkin.mxml) which extends the spark "DataGridSkin" class.  Essentially, we'll be extending the basic DataGridSkin and overriding two components:

1. columnSeparator

2.  rowSeparator

The code to override those two components follows:

<spark:DataGridSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
           xmlns:s="library://ns.adobe.com/flex/spark"
           xmlns:spark="spark.skins.spark.*">
  <fx:Declarations>
    <fx:Component id="columnSeparator">
      <s:Line/>
    </fx:Component>
    <fx:Component id="rowSeparator">
      <s:Line/>
    </fx:Component>
  </fx:Declarations>
</spark:DataGridSkin>

Pretty simple, right?  If we wanted to change the appearance of the seperators all we would need to do is change around what is drawn by the components.  For instance, if we wanted red seperator lines we could write components like this:

<fx:Component id="columnSeparator">
  <s:Line>
    <s:stroke>
      <s:SolidColorStroke color="0xFF0000" weight="1" caps="square" alpha="1"/>
    </s:stroke>
  </s:Line>
</fx:Component>
<fx:Component id="rowSeparator">
  <s:Line>
    <s:stroke>
      <s:SolidColorStroke color="0xFF0000" weight="1" caps="square" alpha="1"/>
    </s:stroke>
  </s:Line>
</fx:Component>

Now, how do we apply our new skin?  Thankfully, that's pretty simple too.  All we need to do is define our new class as the skinClass of a DataGrid.  That code looks like this:

<s:DataGrid skinClass="BlankDataGridSkin">
  <s:columns>
    <s:ArrayCollection>
      <s:GridColumn headerText="Header 1" width="200"/>
      <s:GridColumn headerText="Header 2" width="200"/>
      <s:GridColumn headerText="Header 3" width="200"/>
    </s:ArrayCollection>
  </s:columns>
</s:DataGrid>

That's pretty much everything.  Now you should have a datagrid where you can completely define what the seperators look like.

Below, you can see an example of the DataGrid with no seperator lines with view source right click enabled.

PrintView Printer Friendly Version

EmailEmail Article to Friend

References (42)

References allow you to track sources for this article, as well as articles that were written in response to this article.
  • Response
    Response: News today
    I do agree with all the ideas you've introduced to your post. They are very convincing and can certainly work. Still, the posts are too short for newbies. Could you please extend them a little from next time? Thank you for the post.
  • Response
    Response: Play Roulette
    Good post and right to the point. I don't know if this is truly the best place to ask but do you folks have any ideea where to get some professional writers? Thx :)
  • Response
    Response: News today
    Good – I should certainly pronounce, impressed with your website. I had no trouble navigating through all tabs as well as related info ended up being truly simple to do to access. I recently found what I hoped for before you know it at all. Reasonably unusual. Is likely to appreciate ...
  • Response
    Rambling Developer - Ramblings - Removing Grid Lines from Spark DataGrid Skin
  • Response
    Response: best article
  • Response
    Response: click here
  • Response
    NFL is definitely 1 of the largest sports in America. It has a big following.
  • Response
    Response: this contact form
    Awesome Web site, Maintain the excellent job. Thanks.
  • Response
    Response: sluts
    Rambling Developer - Ramblings - Removing Grid Lines from Spark DataGrid Skin
  • Response
    Response: texas seo
    Rambling Developer - Ramblings - Removing Grid Lines from Spark DataGrid Skin
  • Response
    Rambling Developer - Ramblings - Removing Grid Lines from Spark DataGrid Skin
  • Response
    Response: Garcinia Pure
    Rambling Developer - Ramblings - Removing Grid Lines from Spark DataGrid Skin
  • Response
    Response: more info
    Rambling Developer - Ramblings - Removing Grid Lines from Spark DataGrid Skin
  • Response
    Rambling Developer - Ramblings - Removing Grid Lines from Spark DataGrid Skin
  • Response
    Rambling Developer - Ramblings - Removing Grid Lines from Spark DataGrid Skin
  • Response
    Rambling Developer - Ramblings - Removing Grid Lines from Spark DataGrid Skin
  • Response
  • Response
    DataGrids are .NET influences that empower users to display information in a appendix-uniform style, nevertheless along plenty plus functionality plus options. DataGrids can prop tasks synonymous inserting, editing plus deleting data. They can also be paged, which snides that you can register smaller amounts of information on your censor at a ...
  • Response
  • Response
  • Response
  • Response
  • Response
  • Response
    Response: acai berry blast
    Rambling Developer - Ramblings - Removing Grid Lines from Spark DataGrid Skin
  • Response
    Rambling Developer - Ramblings - Removing Grid Lines from Spark DataGrid Skin
  • Response
    Response: Happy Ramadan 2014
    Ramadan 2014 is coming, wish you all Happy ramadan
  • Response
    Rambling Developer - Ramblings - Removing Grid Lines from Spark DataGrid Skin
  • Response
    Rambling Developer - Ramblings - Removing Grid Lines from Spark DataGrid Skin
  • Response
  • Response
  • Response
  • Response
    Response: Raksha Bandhan sms
  • Response
    Rambling Developer - Ramblings - Removing Grid Lines from Spark DataGrid Skin
  • Response
    Rambling Developer - Ramblings - Removing Grid Lines from Spark DataGrid Skin
  • Response
    Rambling Developer - Ramblings - Removing Grid Lines from Spark DataGrid Skin
  • Response
    Rambling Developer - Ramblings - Removing Grid Lines from Spark DataGrid Skin
  • Response
    Response: cancer survivor
    Rambling Developer - Ramblings - Removing Grid Lines from Spark DataGrid Skin
  • Response
    Rambling Developer - Ramblings - Removing Grid Lines from Spark DataGrid Skin
  • Response
    Response: Warszawa drobne
  • Response
    Rambling Developer - Ramblings - Removing Grid Lines from Spark DataGrid Skin
  • Response
    Rambling Developer - Ramblings - Removing Grid Lines from Spark DataGrid Skin
  • Response

Reader Comments (2)

I have just been searching for this type of info for a while and found out here so far.

October 18, 2013 | Unregistered Commenterskincerity

very nice… i really like your blog…

May 14, 2014 | Unregistered CommenterNiki

PostPost a New Comment

Enter your information below to add a new comment.

My response is on my own website »
Author Email (optional):
Author URL (optional):
Post:
 
Some HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>