08
Jun
08

Setting a custom stretch cursor on a DataGrid in Flex

The following example shows how you can set a custom stretch cursor for a Flex DataGrid with resizable columns by setting the stretchCursor style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/06/08/setting-a-custom-stretch-cursor-on-a-datagrid-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            [Bindable]
            [Embed("assets/arrow_refresh_small.png")]
            private var stretchIcon:Class;
        ]]>
    </mx:Script>

    <mx:ArrayCollection id="arrColl">
        <mx:source>
            <mx:Array>
                <mx:Object label="Student A" score="85" />
                <mx:Object label="Student B" score="48" />
                <mx:Object label="Student C" score="71" />
                <mx:Object label="Student D" score="88" />
                <mx:Object label="Student E" score="24" />
                <mx:Object label="Student F" score="64" />
                <mx:Object label="Student G" score="76" />
                <mx:Object label="Student H" score="76" />
                <mx:Object label="Student I" score="93" />
                <mx:Object label="Student J" score="88" />
                <mx:Object label="Student K" score="48" />
                <mx:Object label="Student L" score="76" />
            </mx:Array>
        </mx:source>
    </mx:ArrayCollection>

    <mx:DataGrid id="dataGrid"
            dataProvider="{arrColl}"
            stretchCursor="{stretchIcon}">
        <mx:columns>
            <mx:DataGridColumn dataField="label" />
            <mx:DataGridColumn dataField="score" />
        </mx:columns>
    </mx:DataGrid>

</mx:Application>

View source is enabled in the following example.

Alternately, you could embed the cursor directly in the MXML code using the stretchCursor style and @Embed(), as seen in the following snippet:

<mx:DataGrid id="dataGrid"
        dataProvider="{arrColl}"
        stretchCursor="@Embed(’assets/arrow_refresh_small.png’)">
    <mx:columns>
        <mx:DataGridColumn dataField="label" />
        <mx:DataGridColumn dataField="score" />
    </mx:columns>
</mx:DataGrid>

You can also set the stretchCursor style using an external .CSS file or <mx:Style /> block, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/06/08/setting-a-custom-stretch-cursor-on-a-datagrid-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        DataGrid {
            stretchCursor: Embed("assets/arrow_refresh_small.png");
        }
    </mx:Style>

    <mx:ArrayCollection id="arrColl">
        <mx:source>
            <mx:Array>
                <mx:Object label="Student A" score="85" />
                <mx:Object label="Student B" score="48" />
                <mx:Object label="Student C" score="71" />
                <mx:Object label="Student D" score="88" />
                <mx:Object label="Student E" score="24" />
                <mx:Object label="Student F" score="64" />
                <mx:Object label="Student G" score="76" />
                <mx:Object label="Student H" score="76" />
                <mx:Object label="Student I" score="93" />
                <mx:Object label="Student J" score="88" />
                <mx:Object label="Student K" score="48" />
                <mx:Object label="Student L" score="76" />
            </mx:Array>
        </mx:source>
    </mx:ArrayCollection>

    <mx:DataGrid id="dataGrid"
            dataProvider="{arrColl}">
        <mx:columns>
            <mx:DataGridColumn dataField="label" />
            <mx:DataGridColumn dataField="score" />
        </mx:columns>
    </mx:DataGrid>

</mx:Application>

Or, you could set the stretchCursor style using ActionScript, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/06/08/setting-a-custom-stretch-cursor-on-a-datagrid-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            [Embed("assets/arrow_refresh_small.png")]
            private var stretchIcon:Class;

            private function init():void {
                dataGrid.setStyle("stretchCursor", stretchIcon);
            }
        ]]>
    </mx:Script>

    <mx:ArrayCollection id="arrColl">
        <mx:source>
            <mx:Array>
                <mx:Object label="Student A" score="85" />
                <mx:Object label="Student B" score="48" />
                <mx:Object label="Student C" score="71" />
                <mx:Object label="Student D" score="88" />
                <mx:Object label="Student E" score="24" />
                <mx:Object label="Student F" score="64" />
                <mx:Object label="Student G" score="76" />
                <mx:Object label="Student H" score="76" />
                <mx:Object label="Student I" score="93" />
                <mx:Object label="Student J" score="88" />
                <mx:Object label="Student K" score="48" />
                <mx:Object label="Student L" score="76" />
            </mx:Array>
        </mx:source>
    </mx:ArrayCollection>

    <mx:DataGrid id="dataGrid"
            dataProvider="{arrColl}"
            initialize="init();">
        <mx:columns>
            <mx:DataGridColumn dataField="label" />
            <mx:DataGridColumn dataField="score" />
        </mx:columns>
    </mx:DataGrid>

</mx:Application>

Icons are from the famfamfam.com “Silk” collection: http://www.famfamfam.com/lab/icons/silk/.


3 Responses to “Setting a custom stretch cursor on a DataGrid in Flex”


  1. 1 Rob McKeown Jun 12th, 2008 at 7:18 am

    How would you make it line up so the center, rather than the left edge, of the icon is positioned over the divider line?

  2. 2 Claudiu Jan 17th, 2009 at 6:27 am

    Peter,

    is it somehow possible for the user to resize the datagrid columns if there are no headers?
    Can you please point me in the right direction to do this type of behavior.

    Thank you.

  3. 3 Claudiu Jan 27th, 2009 at 5:09 pm

Leave a Reply

This blog is terrible at eating HTML tags. If you plan on posting code/XML, please escape your "<" characters as "&lt;" and your ">" characters as "&gt;".




Badge Farm

  • Powered by Redoable 1.2
  • Cornify
  • Feeds burnt by Feedburner
  • Feed