Question

I want to disable (and look disabled) some rows in a spark datagrid. I found this answer to stop selection which is great
In flex, is there a way to capture and optionally cancel a row selection event in a DataGrid?

But I want in addition to show that the particular row is not selectable. Ideally I want to have some sort of overlay but I am not sure if that is possible. My alternative solution is to change the text color to grey for the unselectable row. Looking at the datagrid renders they all seem to be column based. I looked at skinning potentially (overriding the alternating color property) but this just sets the background property and not the text color. Is this possible?

Thanks

Answer 1

The most basic solution is using the custom renderer and selection preventing logic you’ve mentioned:

DataGridRowDisabling.mxml

<s:Application 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:local="*">

    <fx:Script>
    <![CDATA[
        import spark.events.GridSelectionEvent;

        private function dataGrid_selectionChangingHandler(event:GridSelectionEvent):void
        {
            var index:int = event.selectionChange.rowIndex;
            var product:Product = dataGrid.dataProvider.getItemAt(index) as Product;
            if (product && !product.enabled)
                event.preventDefault();
        }

    ]]>
    </fx:Script>

    <s:DataGrid id="dataGrid" itemRenderer="GridItemRenderer2" selectionChanging="dataGrid_selectionChangingHandler(event)">
        <s:dataProvider>
            <s:ArrayCollection>
                <local:Product name="iPod" price="199.99"/>
                <local:Product name="iPad 3" price="499.99"/>
                <local:Product name="iPad 4" price="599.99" enabled="false"/>
                <local:Product name="iPad 5" price="699.99" enabled="false"/>
            </s:ArrayCollection>
        </s:dataProvider>
    </s:DataGrid>

</s:Application>

GridItemRenderer2.mxml

<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 prepare(hasBeenRecycled:Boolean):void 
        {
            if (data is Product)
                enabled = Product(data).enabled;

            lblData.text = data[column.dataField];
        }

    ]]>
    </fx:Script>

    <s:Label id="lblData" top="9" left="7"/>

</s:GridItemRenderer>

Product.as

package
{
public class Product
{

    public var name:String;

    public var price:Number;

    public var enabled:Boolean = true;

}
}