Question

Is there a way in spark datagrid to disable some rows programmatically, in flex 3, it could be done using the function mouseEventToItemRenderer this way:

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

And then I implement the function disabledRow to return true or false depending on some condition, the condition that will specify if the selected item will be renderered or not. Is there a way in spark datagrid to do the same?

Answer 1

Ok, so here’s how I did

First Step

I created the classes SelectionIndicator, HoverIndicator and CaretIndicator like the ones we find as skin parts in the datagrid skin, so the skin part caretIndicator:

<!--- @private -->        
<fx:Component id="caretIndicator">
    <s:Rect implements="spark.components.gridClasses.IGridVisualElement">
        <fx:Script>
            <![CDATA[
                import spark.components.DataGrid;
                import spark.components.Grid;

                /**
                 * @private
                 */
                public function prepareGridVisualElement(grid:Grid, rowIndex:int, columnIndex:int):void
                {
                    const dataGrid:DataGrid = grid.dataGrid;
                    if (!dataGrid)
                        return;

                    const color:uint = dataGrid.getStyle("caretColor");
                    caretIndicatorFill.color = color;
                }
            ]]>
        </fx:Script>

        <s:stroke>
            <!--- @private -->
            <s:SolidColorStroke id="caretIndicatorFill" color="0x0167FF" weight="1"/>
        </s:stroke>
   </s:Rect>
</fx:Component>

becomes

package com.tn.zuro.components
{
    import mx.graphics.SolidColorStroke;

    import spark.components.DataGrid;
    import spark.components.Grid;
    import spark.components.gridClasses.IGridVisualElement;
    import spark.primitives.Rect;

    public class CaretIndicator extends Rect implements IGridVisualElement
    {
        private var caretIndicatorFill:SolidColorStroke ;

        public function CaretIndicator()
        {
            super();
            caretIndicatorFill = new SolidColorStroke();
            this.stroke = caretIndicatorFill;
        }

        public function prepareGridVisualElement(grid:Grid, rowIndex:int, columnIndex:int):void
        {
            const dataGrid:DataGrid = grid.dataGrid;
            if (!dataGrid)
                return;

            const color:uint = dataGrid.getStyle("caretColor");
            caretIndicatorFill.color = color;
        }
    }    
}

The same goes for SelectionIndicator and HoverIndicator, just don’t forget to use SolidColor instead of solidColorStroke and the property fill or Rect instead of the property stroke.

Second Step

In the personalized datagrid, I added event listeners for the events gridClick, gridRollOver and gridMouseDown:

this.addEventListener(GridEvent.GRID_CLICK, gridClickHandler);
this.addEventListener(GridEvent.GRID_ROLL_OVER, gridEventHandler);
this.addEventListener(GridEvent.GRID_MOUSE_DOWN, mouse_down_handler);

And here are the event listeners:

protected function mouse_down_handler(event:GridEvent):void
{
    if (_disableFlag)
    {
        if (event.item)
        {
            if (disabledRow(event.item))
            {
                event.grid.caretIndicator = null;
                event.grid.selectionIndicator = null;
            }
        }
    }
}

protected function gridClickHandler(event:GridEvent):void
{
    if (_disableFlag)
    {
        if (event.item)
        {
            if (!disabledRow(event.item))
            {
                event.grid.selectionIndicator = new ClassFactory(SelectionIndicator);
                event.grid.caretIndicator = new ClassFactory(CaretIndicator);
            }
        }
    }
}

protected function gridEventHandler(event:GridEvent):void
{
    if (_disableFlag)
    {
        if (event.item)
        {
            if(disabledRow(event.item))
            {   
                event.grid.hoverIndicator = null;
            }
            else
            {
                event.grid.hoverIndicator = new ClassFactory(HoverIndicator);
            }
        }
    }
}

You probably already guessed that _disableFlag and disabledRow are respectively a Boolean and a Function. Now the last step is the easiest:

Third Step

When you use the personalized dataGrid, if you want to disable the columns, you set _disableFlag to true and implement the disabledRow which returns true if a condition is met, and false if not

<custom:NinjaGrid id="ninja"
                 _disableFlag=true
                  creationComplete="ninja_trainingCompleteHandler(event)"/>

---

protected function ninja_trainingCompleteHandler(event:FlexEvent):void
{
    ninja.disabledRow = beNinja;
}
private function beNinja(ninja:Object):Boolean
{
    if (ninja.knowHowToWalkOnWater == true)
        return true;
    return false;
}

This solution doesn’t work for the selection mode multiple rows, I found another solution for the multiple rows selection mode.

---

Second Solution

In this solution, I use only the HoverIndicator component, the event listener for the rollover event will remain the same. I don’t use the event listener for the click event anymore, and in the mouse_down_handler function, I have now this code:

protected function mouse_down_handler(event:GridEvent):void
{
    if(_disableFlag)
    {
        if (event.item)
        {
            if (!disabledRow(event.item))
            {
                if (!event.ctrlKey)
                {
                    tempItem = event.item;
                    tempSelecteditems = new Vector.<Object>();
                    tempSelecteditems.push(tempItem);
                }
                else
                {
                    if (tempSelecteditems.indexOf(event.item) < 0)
                    {
                        tempSelecteditems.push(event.item);
                    }
                    else
                    {
                        tempSelecteditems[tempSelecteditems.indexOf(event.item)] = null;
                    }
                }

            } 
            else
            {
                if (!event.ctrlKey)
                {
                    selectedItem = tempItem;
                    tempSelecteditems = new Vector.<Object>();
                } 
                else
                {
                    if (tempSelecteditems.length)
                    {
                        selectedItems = tempSelecteditems;
                    }
                    else
                    {
                        selectedItem = tempItem;
                    }
                }
            }
        }
    }
}