Disabling Certain Rows in Data Grid

Using data grid is great, but sometimes you may need to disable certain rows of data grid. By default Flex SDK doesn’t support disabled rows. But with a few line of cods this functionality can be add easily. First of all we have to create a new Actionscript class and extend to do DataGrid.

For disabling a row we have to override two method first one is mouseEventToItemRenderer() and second one is drawRowBackground() . First method will trigger every time mouse over to data grid row. When method is triggered method will check the incoming data and if data property enabled is false than it will return null, otherwise it will return the item renderer as it comes. Second method is drawing the background of row, this is only visual presentation. In this method when an enabled property is false it will draw background as gray, which can indicate the row is disable. Here are the methods;

override protected function mouseEventToItemRenderer(event:MouseEvent):IListItemRenderer{
        var listItem:IListItemRenderer =
        super.mouseEventToItemRenderer(event);
       
        if (listItem){
                if (!listItem.data.enabled){
                        return null;
                }
        }
        return listItem;
}

override protected function drawRowBackground(sprite:Sprite,
        rowIndex:int, y:Number, height:Number, color:uint, dataIndex:int):void{
        if(!dataProvider[rowIndex].enabled){
                color = 0xdedede;
        }
        super.drawRowBackground(sprite, rowIndex, y, height, color, dataIndex);
}

The rest is simple; all to do is using the class in application you need to use. You can check the sample and download the source code from the link at below;

Sample and Source Code

Take Care
Engin Yöyen!

4 Responses to “Disabling Certain Rows in Data Grid”

  1. devorbitus 12 October 2009 at 18:11 #

    I am unable to get this to work, as soon as I try to load the page I get this error…

    RangeError: Index ‘0′ specified is out of bounds.
    at mx.collections::ListCollectionView/getItemAt()[C:\autobuild\3.4.0\frameworks\projects\framework\src\mx\collections\ListCollectionView.as:422]
    at mx.collections::ListCollectionView/http://www.adobe.com/2006/actionscript/flash/proxy::getProperty()[C:\autobuild\3.4.0\frameworks\projects\framework\src\mx\collections\ListCollectionView.as:727]
    at
    etc…

  2. devorbitus 12 October 2009 at 19:47 #

    Ok, got it to work. Issue was my form did not have the populated array collection. However, I am showing some rows. Your code was being performed on all rows no matter if there was a match in the dataProvider or not. I also added a field to customize the enabled field name.

    public class DisableableDataGrid extends DataGrid
    {
    public var enabledField:String = “rowEnabled”;

    public function DisableableDataGrid()
    {
    super();
    }

    override protected function mouseEventToItemRenderer(event:MouseEvent):IListItemRenderer
    {
    var listItem:IListItemRenderer = super.mouseEventToItemRenderer(event);
    if (listItem)
    {
    if (listItem.data.hasOwnProperty(enabledField) && !listItem.data[enabledField])
    {
    return null;
    }
    }
    return listItem;
    }

    override protected function drawRowBackground(sprite:Sprite, rowIndex:int,
    y:Number, height:Number, color:uint,
    dataIndex:int):void
    {
    if (dataProvider.length > 0 && rowIndex < dataProvider.length)
    {
    if (dataProvider[rowIndex].hasOwnProperty(enabledField) && !dataProvider[rowIndex][enabledField])
    {
    color = 0xdedede;
    }
    }

    super.drawRowBackground(sprite, rowIndex, y, height, color, dataIndex);
    }

  3. Engin Yöyen 12 October 2009 at 20:32 #

    Well that is also a solution…

  4. strangepeer 27 January 2010 at 08:16 #

    Thanks Engin Yöyen
    for the sample code


Leave a Reply