Flex DataGrid with Checkbox Itemrenderer for Datagrid Multiple columns

Here We will see How to use Check box as Itemrenderer for flex Datagrid Multiple columns.Find the below sample code.And Let me know if you have any questions regarding below code.

<mx:DataGrid id=”functionalDomains” width=”500″ height=”250″
allowMultipleSelection=”true”
creationComplete=”functionalDomains_creationCompleteHandler(event)”
dataProvider=”{functionalDomainsDP}” editable=”true”
variableRowHeight=”true”>
<mx:columns>
<mx:DataGridColumn dataField=”domainName” editable=”false”
headerText=”Functional Domains”
textAlign=”center”/>
<mx:DataGridColumn dataField=”fullControl” editable=”false”
editorDataField=”selected”
headerText=”Full Control”
itemRenderer=”pack.FunctionalDomainItemRenderer”
rendererIsEditor=”true” textAlign=”center”/>
<mx:DataGridColumn dataField=”view_domain” editable=”false”
editorDataField=”selected” headerText=”View”
itemRenderer=”pack.FunctionalDomainItemRenderer”
rendererIsEditor=”true” textAlign=”center”/>
<mx:DataGridColumn dataField=”create_domain” editable=”false”
editorDataField=”selected”
headerText=”Create”
itemRenderer=”pack.FunctionalDomainItemRenderer”
rendererIsEditor=”true” textAlign=”center”/>
<mx:DataGridColumn dataField=”update_domain” editable=”false”
editorDataField=”selected”
headerText=”Update”
itemRenderer=”pack.FunctionalDomainItemRenderer”
rendererIsEditor=”true” textAlign=”center”/>
<mx:DataGridColumn dataField=”remove_domain” editable=”false”
editorDataField=”selected”
headerText=”Delete”
itemRenderer=”pack.FunctionalDomainItemRenderer”
rendererIsEditor=”true” textAlign=”center”/>
</mx:columns>
</mx:DataGrid>

FunctionalDomainItemRenderer Code

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:HBox xmlns:fx=”http://ns.adobe.com/mxml/2009″
xmlns:s=”library://ns.adobe.com/flex/spark”
xmlns:mx=”library://ns.adobe.com/flex/mx” implements=”mx.controls.listClasses.IDropInListItemRenderer”
focusEnabled=”true” textAlign=”center” horizontalAlign=”center” verticalAlign=”middle”>

<mx:CheckBox id=”functionalDomain” selected=”{data.dataField}” top=”0″ left=”0″ right=”0″ bottom=”0″ click=”functionalDomain_changeHandler(event)” />

<fx:Script>
<![CDATA[
import mx.controls.DataGrid;
import mx.controls.dataGridClasses.DataGridListData;
import mx.controls.listClasses.BaseListData;
import mx.controls.listClasses.ListBase;
protected var _listData:DataGridListData;

[Bindable]
public var selected:Boolean;

override public function set data(selected:Object):void
{
super.data = selected;
setIt(selected);
}
public function get listData():BaseListData
{
return _listData;
}

public function set listData(selected:BaseListData):void
{
_listData = DataGridListData(selected);

invalidateProperties();
}
private function setIt(selected:Object):void
{
trace(_listData.columnIndex);
if(selected != null && _listData != null)
{
if(_listData.columnIndex == 1)
{
functionalDomain.selected = selected.fullControl;

}
else if(_listData.columnIndex == 2)
{
functionalDomain.selected = selected.view_domain;

}
else if(_listData.columnIndex == 3)
{
functionalDomain.selected = selected.create_domain;
}
else if(_listData.columnIndex == 4)
{
functionalDomain.selected = selected.update_domain;
}
else if(_listData.columnIndex == 5)
{
functionalDomain.selected = selected.remove_domain;
}
}
}
override public function get data():Object {
return super.data;
}

protected function functionalDomain_changeHandler(event:MouseEvent):void
{
if(data!=null)
{
if(ListBase(owner).isItemSelectable(data))
super.data[_listData.dataField] = functionalDomain.selected;
}

}

]]>
</fx:Script>

</mx:HBox>

About mohan

This is Mohan Jayapalan author of TechPages Blog.I am a part time blogger and Currently working for private Software Concern.

© Copyright 2010-2016 www.techpages.org · All Rights Reserved · Powered by WordPress ·