2 Replies Latest reply on Dec 15, 2010 10:58 AM by Wang4181

    How to disable items (gray out) in DataGrid control?

    Wang4181 Level 1

      Hi,

       

      I need to implement a custom component to have a selectable list with a maximum selected items.

      that is, when the selected items reach the max number, all un-selected items will be gray out.

       

      Now I am able to use DataGrid control to display a selectable "checkbox" (through itemRenderer) at first column, to let user select the item.

      And the list name in second column.

       

      But I can't find a way to gray out (disable) those un-selected item when max is reached.

       

      Can anyone give any advise?

       

      Here is my code snippet:

       

      SelectableListView.mxml

       

      <mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%" visible="true">

      <mx:DataGrid id="list_datagrid" dataProvider="{this.stringList}" showHeaders="false"

      editable="false" selectable="true" verticalGridLines="false" borderStyle="none" alternatingItemColors="[#F8F8F0, #FFFFFF]"

      left="5" rowCount="16" rowHeight="20" height="83" width="100%" top="0" doubleClickEnabled="true" doubleClick="onDoubleClick(event)" >

       

        <mx:columns>

       

          <mx:DataGridColumn id="listCheckBox_col" dataField="selected" editable = "false"

                                          itemRenderer="ListRenderer" width="18" headerText="" resizable="false" draggable="false"/>

       

          <mx:DataGridColumn id="listName_col" dataField="name" />

       

        </mx:columns>

       

      </mx:DataGrid>

       

      </mx:VBox>

       

      ListRenderer.mxml

      <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="60" >

           <mx:Script>

                <![CDATA[

                     private function setInUse() : void

                     {

                          _data.selected = listInUse.selected;

                     }

                ]]>

           </mx:Script>

        <mx:CheckBox id="listInUse" width="18" height="18" click="setInUse()" selected="{_data.selected}"/>

      </mx:Canvas>