Customizing Datagrid's HeaderColumn

I created a custom HeaderRenderer for a DataGrid. Looking at the attached image in the "Station" column, how can have the sort Arrow and it's background change to the same color(blue) as the the custom HeaderRenderer's? Also, is there anyway to edit/alter the location of that arrow?
Thanks, in advance.

.....bump
Thanks!

Similar Messages

Sort Arrow for custom datagrid

Hi,
I have a custom datagrid where i am handling the DataGridEvent.HEADER_RELEASE event . Also i have created custom data grid header which is assigned to the header class of custom datagrid.
But i am facing problem while showing sortArrow. sortArrow is not visible for datagrid headers. How to show sortArrow??

Thanks Alex.
I managed to get the function to work when I applied it to a button, but it only works when the datagrid has a dataprovider already set for it.
My issue is that I will have several buttons, each button will supply the datagrid with a new dataprovider. The sort function will need to sort the first row of each column, and display the arrow each time the dataprovider is changed.
I have added this code to one of the buttons for testing:
private function grid_sort():void
            array1.sort = new Sort();
            array1.fields = [new SortField("column1", false, false)];
            array1.refresh();
private function buttonClick(event:MouseEvent):void
                grid1.dataProvider = array1;
                grid_sort();
Specifically, the buttonClick function is what I added to the button's Click event.
The code populated the datagrid when the button is clicked, however, the grid_sort() function does not execute and the arrow does not appear.
How can I make this function work, while dynamically changing the dataprovider?

Custom DataGrid problems with Comboboxes

I am using a custom datagrid with comboboxes and
colorpickers. I found this code on the web and adapted it to work
with my code. The only problem is that if you pull down a combobox
and then click somewhere outside without selecting anything, it
seems to erase the data in the dataprovider arraycollection and so
'value' in the set data method becomes null.

This is not a bug if I understand you properly. I believe most people would wish anything which is obtained via the tv to be backed up, which is why the content is transferred. If you want it to remain available on the tv you will need to sync it back to it.

Mouse focus in custom DataGrid ItemRenderer (re-post*)

* I already posted this question in the "Flex" forum, but didn't get any replies. I'm not sure if this will yield any different results, but I figure it's worth a try...
I have a custom MXDataGridItemRenderer with a custom nested Spark CheckBox component that I'm trying to use within an MXDataGrid component. The renderer works fine, as does the nested checkbox, however I'm unable to decouple the mouse events for the checkbox from the DataGrid row. I intend to use the DataGrid as a playlist for the VideoPlayer component with an FX Model-based DataProvider and the purpose of the checkbox is to allow the user to automatically play the next selected checkbox item in the list; similar to the checkboxes in iTunes. Placing an instance of the checkbox on top of DataGrid achieves the desired decoupling, but this is obviously an impractical solution, which I include only to illustrate what I'm trying to do. Any recommendations would be greatly appreciated.
Thanks,
~Benny

Work around posted here: http://forums.adobe.com/message/3160303#3160303

Custom datagrid headerRenderer keeps redrawing

I have two DataGrids. One that uses default headerRenderers, and one that uses custom 'filterable' headerRenders for 5 of the column headers.
Basically, the custom filterable headerRenderer is a VBox that holds a Label and a TextInput. Typing in the textInput will hide items in that column that don't match the filter value entered.
This issue is that each time I update these DataGrids' dataProvider, the DataGrid that employs the custom headerRenders flashes multiple times (redraws) which is very noticable -- it makes the page a little laggy. If I override the 'data' setter and place a breakpoint in the custom headerRenderer, I see it is getting hit a ton of times! (even if there is only like 1 item in the data grid!) why is that?
How can I stop this redraw from occuring? Can I stop the custom headerRenderer from calling the data setter? I tried overriding the data setter, placing only a return in the method --- that didn't seem to help.
Any suggestions?
thanks,
Muad'Dib

sorry for the late response pml...
Yes, I did get this fixed. I wish I could say it was an easy fix to find! but it wasn't!
Basically, I had to keep the 'state' (data members I wanted displayed by the headerRenderer) of the renderer within the parent DataGrid component. I did this by:
1) Creating necessary headerRenderers using the ClassFactory (instead of inline MXML -- you can make the call to create the headers on the DataGrid's creationComplete event).
2) setting ClassFactory 'property' to an array of objects that map the headerRenderer to the Object that hold's it's 'State'.
3) overrode initializationComplete() method of headerRender and placed any initialization code here (in lieu of the 'data' setter). This was where the implementation that actually does the mapping to the Object that holds this render's 'State' is done, based on the data that was placed into the 'properties' field from step 2.
here's a brief example:
DataGrid
========
<mx:Box styleName="BoxContent" width="100%" height="100%">
    <mx:Script>
        <![CDATA[
                public var greeting:String = "hello";
               public function createCustomHeaders():void {
                     // create a factory that can produce your custom header
                     var customRendererFactory:ClassFactory = new ClassFactory(MyCustomRendererClass);
                     // set the properties of the factory to hold a reference to data
                     // in THIS class (Box)
                     customRendererFactory.properties = {stateHost: this, stateProperty: "greeting"};
                     // set the data grid columns renderer now...
                     dgc1.headerRenderer = customRendererFactory;
            }]]>
     </mx:Script>
     <mx:DataGrid id="dg" dataProvider="{_myData}" creationComplete="createCustomHeaders()">
        <mx:columns>
                <mx:DataGridColumn id="dgc1"
                    textAlign="center"/>
        </mx:columns>
     </mx:DataGrid>
</mx:Box>
Renderer
========
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="100%">
<mx:Script>
<![CDATA[
    // reference to object that will hold any necessary state information
    public var stateHost:Object;
    public var stateProperty:String;
            private var _greeting:String;
            private var _greetingUpdated:Boolean;
override protected function initializationComplete():void {
if(_greeting != stateHost[stateProperty]){
                    _greeting == stateHost[stateProperty]);
                    _greetingUpdated = true;
                    invalidateProperties();
override protected function commitProperties():void {
                super.commitProperties();
if(_greetingUpdated){
myLabel.text = (null != _greeting) ? _greeting : "";
]]>
</mx:Script>
    <mx:Label id="myLabel" width="100%"/>
</mx:VBox>

Customizing DataGrid component in Flash CS3 using AS3

Can anyone please explain how to customize the DataGrid
component in Flash CS3 using AS3???
How do you remove/change the grid lines for the rows and
colums?
How do you remove/change the border?
My day has been lost searching for this answer. Flash
Documentation is worthless and Google finds nothing with regards to
AS3. ASDGRH.
Thanks in advance,
TedWeb

I hope you've found a resolution to this by now, but I just noticed the discussion title when posting a captioning issue.
In a nutshell, create a listener on your FLVPlayback module with a VideoEvent.SKIN_LOADED event. You'll also need to set the showCaptions in your FLVPlaybackCaptioning object to true. Apparently, if the captions are set to false when the player object loads the skin, the captions aren't recognized and your captions toggle will require an extra click to activate the captions.
Here's the link to another discussion on the same topic with all of the details:
http://kb2.adobe.com/cps/402/kb402452.html
Also, have you had any issues with the caption button in the FLVPlayback skin not showing up? That's my current issue. Here's the discussion for it:
http://forums.adobe.com/thread/796423?tstart=0

Changing dataProvider of custom dataGrid to XCelsius Cells

Hi everybody,
I have quite a simple question, however, I do not really get a solution for that on my own.
Actually, all I want to do is extend a usual Datagrid to display my data from XCelsius using the standard propertysheet. The way I tried to do this was to make the dataProvider inspectable.
My actionscript file:
package myPackage
     import mx.controls.DataGrid;
     [CxInspectableList("dataProvider")]
     public class MyDG extends DataGrid
          public function MyDG()
               super();
          [Inspectable(defaultValue="undefined", type="Array2D")]
        [ArrayElementType("Number")]
          override public function get dataProvider():Object
               return super.dataProvider;
          override public function set dataProvider(value:Object):void
               super.dataProvider(value);
When I pack this into an .xlx, I can view it and preview it as long as I do not try to change the dataProvider. When changing it, the preview window stops to load at some point.
Thanks for your help in advance!

Hi Sreelekha,
This is how Flex creates 2d arrays so Xcelsius does the same when it passes a 2d array.
var cells:Array =
   /* row 1 */   [ column 1, column 2, column 3],
   /* row 2 */   [ column 1, column 2, column 3],
   /* row 3 */   [ column 1, column 2, column 3]
So in your case:
var cells:Array =
    [P1, C1],
    [P2, C2]
So cells.length tells you how many rows are in the 2d array.
And cells[0].length tells you how many columns are in the first row of the array (assuming there is at least one row).
So as in Flex if you want to process a Flex 2d array you do something like this:
for (var i:int = 0; i < cells.length; i++)
    var row:Array = cells<i> as Array;
    for (var j:int = 0; j < row.length; j++)
       var rowColCell:* = row[j];
       // rowColCell has the value for this row/column cell.
Regards
Matt

Custom datagrid sort

Hello,
I have a datagrid that has a row that contains information
similar to this: 1,2,3,4,T4,T4,5,6,..17,29,..43,T44,T44,45.. and so
on.. I hope you get the idea.. if an element appears more than one
time, it has a "T" at the beginning (this data is from a database
and I have to display it in this way). I have to be able to sort
this numerically (making the sort function somehow ignore that
"T")... i know datagrid only sorts strings, but using a Listener
and some other things ( check this out
http://www.flash-creations.com/notes/servercomm_database.php
) I managed to make it sort numbers.
However, the function doesn't work properly it some elements
have that "T" at the beginning. Is there an elegant way to do this?
(other than writing my own sorting function - maybe bubble sort -
sorting the dataprovider and then repopulating the datalist with
the sorted dataprovider)

Could you put the "T" in a different column or does it have
to be in the same column as the number?

Can I create a custom scrollbar for my spark datagrid

Basically I'm trying to customize the look of my spark datagrid.
I'd like to change the header appearance and I'd also like to create a custom scrollbar.
If only Catalyst would implement a custom datagrid component. I mean the datagrid is a very popular component, isn't it?
Thanks
kristin

You need the password for free apps as well as for paid apps. The only ways that you can control what your child downloads is for you to supervise while the downloading is taking place or by totally restricting download apps with restrictions.
When you enter your password and download content, you have 15 more minutes to continue downloading before you have to enter the password again. So if you download and app - then give the iPad to your child - he or she can continue downloading apps or music or any content for the next 15 minutes without any restrictions. IF you sign out of your account, then the child can no longer download. IMHO - You should NOT give your password to your child. That really is not a good practice.
You can set restrictions on the iPad so that the child cannot download any apps at all. Go to Settings>General>Restrictions>On. Then you will have to enter a passcode for the device which you do not want to forget (if you do, you have to restore the device) so if you do this remember your passcode. You can then go to the apps settings within the restrictions and Enable Restrictions and turn off Installing Apps.
This article will provide more information for you.
http://netsecurity.about.com/od/frequentlyaskedquestions/a/How-To-Setup-Parental -Controls-On-An-Ipad-Ipod-Touch-Or-Iphone.htm

When I change a property name in a custom component, the flash compiler throws a ReferenceError.

I'm building a custom Datagrid component, and I had three parameter properties: _columns [Collection], _headerHeight [Inspectable], and _rowHeight [Inspectable]. This all compiled fine, but I needed to change things about the _columns variable, and it made sense to instead create _columnData to store data from a DataProvider. Now it throws a ReferenceError every time I try to Test Movie, saying that the property columnData can't be created, despite listing it in the parameter list in the Flash Professional IDE.
The only thing I can imagine is that Flash is somehow caching an earlier version of my class, but that the Flash IDE is correctly updating itself according to my metadata when I rebuild the component. I've cleared out all the stuff from ~/Library/Application Support/Adobe/Flash CS5/CodeModel, restarted Flash, even built the component from scratch (using the same class) in a new FLA - nothing has worked.
The code causing errors is copied below:
private var _columnData:Object;
private var _headerHeight:Number = 40;
private var _rowHeight:Number = 40;
[Collection(collectionClass="musicone.components.data.DataCollection", collectionItem="musicone.components.controls.datagrid.DatagridColumn", identifier="item")]
public function get columnData():Object {
     return _columnData;
public function set columnData(value:Object):void {
     _columnData = value;
     var _forceClass:DataCollection = value as DataCollection;
     //updateColumns();
     draw();
[Inspectable(type="Number", defaultValue=40)]
public function get headerHeight():Number {
     return _headerHeight;
public function set headerHeight(value:Number):void {
     _headerHeight = value;
     draw();
[Inspectable(type="Number", defaultValue=40)]
public function get rowHeight():Number {
     return _rowHeight;
public function set rowHeight(value:Number):void {
     _rowHeight = value;
     draw();

I would reccomend that you not use scenes for that purpose, not exactly sure why but scenes are unreliable. Try putting all of your content in one scene, one timeline and just add a few stop() 's at the end of each "scene", then in your code remove scene2 and scene3 three references, and you'll possibly need to change frame anchors/targets also if you have them.
The error indctates that you have called an object that does not exist at the time the code is run, check where you placed your code, should be frame one, scene1, and also check if you have objects entering the stage down the timeline, that do not enter in frame 1, possibly the movieClip? if so add another keyframe on your actions layer on the same frame as the object and enter the call function for it there.

Nest array in a custom component

Hello and thanks in advance,
I am building a custom datagrid component name custDG. It is a canvas containing the DG and some other visuals. So the actual component is based on canvas and has a DataGrid nested.
I have also build a custom class name config based on Array to hold the DG column information
AND a custom object class name col to hold each column information inside the config array class...
My question is how to make it possible for user to nest the array and columns inside the custom component when adds it to an application. For example:
<mike:custDG... >
     <mike:config>
          <mike:col.../>
          <mike:col.../>
          <mike:col.../>
     </mike:config>
</mike:custDG... >
Want to make something similar to the columns-datagridcolumn thingie but with custom classes in a custom component.
Anyone plz?
Thanks

I finally found how to set a default skin to a custom component so that users of my component will not have to set again the skinClass value of my component.
You have to create a defaults.css file at the root of your library and tell the compiler to take it into account.
The remaining problem is about the compiler. There are some steps before success and they are a bit mysterious/unclear....
I found 2 or 3 blog articles explaining those steps but the compiler arguments to use are all differents in each article...
Here are the links I found:
http://www.unitedmindset.com/jonbcampos/2010/05/12/creating-custom-spark-components/
http://www.betadesigns.co.uk/Blog/2010/05/14/default-skin-for-custom-flashbuilder-componen ts/
http://flexdevtips.blogspot.com/2009/06/default-stylesheet-in-swc-flex-library.html
Following the first article guidelines has been successful for me but I'm not marking this topic as Resolved because I'd like some answers about this whole thing...

Custom Components not Visible in the Flex Design

Hi
    I am trying to create a Flex Application to consume a Web service.
     Which DataGrid can i use to get the list of data at runtime.
     The Datagrid component which is available under Controls in the design is displaying 3 columns and 3 rows by default. But if i use this UI element no.rows and coulmns cannot be changed at runtime.
So could anybody advice me which datagrid can be used?
By defalult Flex design has Controls, Layout, Navigators, Charts components
Could anybody tell me whats Custom Component in the design. becoz i cannot see any of the components under Custom folder.
Is it a custom developed one or is it a Default like other components ?
How do I get these components Customer DataGrid, Video Chat, Yahoo Search, Countries By Group etc.
Please guide me...
Thanks & Regards
Sireesha.
Edited by: sireesha esukapalli on Dec 1, 2008 1:06 PM
Edited by: sireesha esukapalli on Dec 1, 2008 1:17 PM

Hi Daniel,
    Could you please check the below code in MXML.
    I am getting the error as Unexpected paramater "CustomerNo" not found in input arguments.
   What node should be given under <request> tag ? Is it can be any xml node related to customer no? or anyother thing?
    <mx:WebService id="WSCust"
     wsdl="http://ctsintcosnw4.cts.com:8000/sap/bc/srt/rfc/sap/zws_custinfo?sap-client=812&wsdl=1.1 "
    showBusyCursor="true"
     fault="Alert.show(event.fault.faultString)"
     result="onCustResult(event)"
          >
<mx:operation name="ZBAPI_CUSTOMER_DETAIL2">
     <mx:request>
     <CustomerNo>
          {Cust_no.text}
     </CustomerNo>
     </mx:request>
</mx:operation>
</mx:WebService>
<mx:Script>
     <![CDATA[
private function Getcust_data():void
WSCust.getOperation("ZBAPI_CUSTOMER_DETAIL2").send();
     ]]>
</mx:Script>
<mx:Label text="CustomerNo" id="lblcustno" />
     <mx:TextInput id="Cust_no" />
<mx:Button id="btn_custno" label="Display Customer General Data" click="Getcust_data()" />
Regards
Sireesha.

Strange application behaviour after try to sort datagrid column

Hi all
I have a simple Air desktop application with customized DataGrid (Spark version). Problem that users found is when they trying to sort grid by one of the columns applicaiton closes without any messages. I've repeated this bug on my PC but there is a problem - in debug mode (i mean with ADL) it works OK without any tries to crash on sort. So my questions in priority order:
1. Is that possible to obtain live Air application errors log? I mean after installation. Maybe with 3rd party applicaiton. I'm using MonsterDebugger and added few log messages but looks like application just crashes without firing closing or close event.
2. Which part of DataGrid could crash applicaiton in release mode? Just thought debug mode is more strict.
My dev system:
Flash Builder 4.6
Adobe Air 3.2
Win 7 Ultimate 64bit
Best regards, Roman
P.S. Sorry for my bad english

Based on your idea, i've intercepted the click event and I use stopImmediatePropagation.
THen i added an image to sort the column. So if the image is clicked the sort is ok.

Datagrid checkbox renderer

Hi all,
I have a datagrid with checkbox as item renderers and
checkbox as header renderer in one of its columns.
I created a custom datagrid column extending from datagrid
column.
The visible property of checkbox in a row is based on a
condition.
All works fine if there are only 7 rows in a datagrid,i get
three rows with checkbox and the other without checkbox.
but,if i have more than 7 rows(with vertical scrollbar) i see
all the checkboxes visible which should not happen.
Thanks

thanks for the reply sreenivas
but i have already done that..
here is my set data method
override public function set data(value:Object):void{
if(value != null){
super.data = value;
checkDelPermission(null);
public function checkDelPermission(event:FlexEvent =
null):void{
var checkpermissioninstance:CheckPermission = new
CheckPermission();
checkpermissioninstance.permissions = [8];
if(data.hasOwnProperty("permission")){
checkpermissioninstance.permBit = data.permission;
var delpermission:ArrayCollection =
checkpermissioninstance.getPermissions()
if(delpermission!=null){
if(delpermission[0]==true){
this.visible = true;
else{
this.visible=false
else{
this.visible = false;
MittoApp.logMessage("permission"+data.permission +" and
visible=="+this.visible);
the message is always printed with the correct values but the
display is not.
Thanku

Datagrid with checkbox in its column

In my application I have a datagrid (a custom datagrid -
CheckBoxDatagrid), whose first colum contains checkbox as
itemrenderer. There is another column (Latest Version) - this
column can have two values either "Available" or "Update".
The requirement here is that, when the page is getting loaded
then depending on the value of the column "Latest Version" the
checkboxes will have to be loaded. If the value of the coluem is
"Available", then the checkbox corresponding to that row should get
automatically selected as soon as the page gets loaded.
I am attaching the code snippet below,
<configure:CheckBoxDataGrid id="swDataGrid"
initialize="swDataGrid.dataProvider=MaintenanceViewController.softwareList"
alternatingItemColors="[#ffffff, #ffffff]" paddingLeft="10"
paddingRight="5"
allowMultipleSelection="true" width="95%" height="60%"
paddingBottom="5" selectionColor="#1b77b7"
verticalGridLines="false"
creationComplete="{MaintenanceViewController.checkBoxSelect()};">
<configure:columns>
<mx:DataGridColumn id="checkBox" dataField="softwarename"
textAlign="center" headerText=" " width="20" sortable="false"
itemRenderer="com.pmc.view.tasks.wizard.CheckBoxRenderer"
editable="false">
</mx:DataGridColumn>
<mx:DataGridColumn id="swName" headerText="Software Name"
dataField="softwarename" width="130"/>
<mx:DataGridColumn id="cVersion" headerText="Current
Version" dataField="currentversion" width="80"/>
<mx:DataGridColumn id="updStatus" headerText="Update
Status" dataField="updateStatus" width="80"/>
</configure:columns>
</configure:CheckBoxDataGrid>
where, configure = defined namespace.

"BlueRHBA" <[email protected]> wrote in
message
news:go0hkf$2kt$[email protected]..
> In my application I have a datagrid (a custom datagrid -
> CheckBoxDatagrid),
> whose first colum contains checkbox as itemrenderer.
There is another
> column
> (Latest Version) - this column can have two values
either "Available" or
> "Update".
>
> The requirement here is that, when the page is getting
loaded then
> depending
> on the value of the column "Latest Version" the
checkboxes will have to be
> loaded. If the value of the coluem is "Available", then
the checkbox
> corresponding to that row should get automatically
selected as soon as the
> page
> gets loaded.
>
> I am attaching the code snippet below,
What is your question? Or are you looking to hire someone to
fulfill your
requirement?

Customizing Datagrid's HeaderColumn

Similar Messages

Maybe you are looking for