Cellspacing in datagrid using flex3

i want to know how to create a cell spacning between cells in a datagrid using flex3....

I guess you should be able to do it using verticalseparatorskin and horizontalseparatorskin styles.Just see this link
http://blog.flexexamples.com/2007/08/28/styling-the-flex-datagrid-control-using-a-custom-s eparator-skins/#more-141
By giving suitable colors you can give the feeling that the cells are not bounded to each other.Is this the way you want it??

Similar Messages

How to change the background color of a cell in datagrid using flex3

i want to change the background color of a cell.....how can i achieve this.....and also i want to know how a spacing cane be done between cells in a datagrid...plzzz help me???

The only way I can see to do this is to use an item renderer for your cells. This is really scruffy and would need tyding up, and maybe with a little more time could do better or someone else may have an idea but none the less this works.
Define a custom component as below;
This has logic to see what the value of the data is proveided by the dataprovider for the row, and if it matches the conditions in this case is equal to 5 sets the background color.
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="88" height="26" dataChange="doColor()" borderColor="#000000" borderStyle="solid"
    backgroundAlpha="1">
    <mx:Script>
        <![CDATA[
            private function doColor():void {
                if (data.value == 5) {
                    setStyle('backgroundColor', 0xcccccc);
                } else {
                    setStyle('backgroundColor', 0xffffff);
        ]]>
    </mx:Script>
</mx:Canvas>
Now just apply the item renderer in the datagrid and that will do it.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="*">
    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            [Bindable]
            private var ac:ArrayCollection = new ArrayCollection([
                {value : 1},
                {value : 2},
                {value : 3},
                {value : 4},
                {value : 5},
                {value : 6},
                {value : 7},
                {value : 8},
                {value : 9},
                {value : 10}
      ]]>
    </mx:Script>
    <mx:DataGrid x="40" y="36" width="408" height="193" dataProvider="{ac}">
        <mx:columns>
            <mx:DataGridColumn headerText="Column 1" dataField="value" itemRenderer="MyComp"/>
            <mx:DataGridColumn headerText="Column 2" dataField="col2"/>
            <mx:DataGridColumn headerText="Column 3" dataField="col3"/>
        </mx:columns>
    </mx:DataGrid>
</mx:Application>
I hope this helps
Andrew

Reading an xml file in actionscript using flex3

plzz tell me how to read an xml file in actionscript using flex3.......

One possible option to parse an xml-file to a flex XML object:
public function parseConXML(source:String):void
                xmlLoader = new URLLoader();
                xmlLoader.load(new URLRequest(source));
                  // Eventlistener: if URL loaded --> onLoadComplete function
                  xmlLoader.addEventListener(Event.COMPLETE, xmlLoadComplete);
            public function xmlLoadComplete(evt:Event):void{
                var xml:XML = new XML();
                 // ignore comments in XML-File
                XML.ignoreComments = true;
                   //ignore whitespaces in XML-File
                 XML.ignoreWhitespace = true;
                // XML-Objekt erstellen
                xml = new XML(evt.target.data);
               //AFTERWARDS use your xml as your wish

How to filter a spark datagrid using a checkbox?

Hi i want to know how can i filter a spark datagrid using a check. I have a column by the name status on the datagrid, which can be active or inactive. When i check the checkbox i should be able to see all the records and when i uncheck it i should only be able to see all the records with the status ACTIVE...

Then, try to add another attribute in your SELECT VO statement, which truncates the original date_and_time field:
   SELECT.... TRUNC(DATE_AND_TIME) as truncated_dateAfter that, put reference to that attribute in the filter facet, as follows
         <f:facet name="filter">
                  <af:inputDate value="#{vs.filterCriteria.TruncatedDate}" id=.../>
         </facet>Do not forget to add the TruncatedDate attribute in the <tree...> binding in the pageDef, along with others VO attributes. Do that manually.

Filter datagrid using search

hye...can anyone help me...
how to filter a datagrid using search function?
i have been doing some search,but nothing work...can someone
show me??here,i attach my codes
any help would be really appreciated
thanks in advance.

Without looking at your code, here are few pointers:
1) Take a look at filterFunction property of your
ArrayCollection
2) Remember to call ArrayCollection.refresh() everytime you
set or clear the filterFunction property
Here is working code, basically on every keystroke of your
search input box, or whatever event you like to choose, you cann
filterList function that sets the filterFunction property of array
collection, that implements ICollectionView, to the local filter
function that provides the logic for including the rows in the
filtered view:
private function filterList(event:Event) : void {
var view:ICollectionView = this.dataGrid.dataProvider as
ICollectionView;
if (view.filterFunction == null) {
this.totalRows = view.length;
if (!view) return;
if (this.searchTextInput.text.length == 0) {
view.filterFunction = null;
view.refresh();
return;
view.filterFunction = filter;
view.refresh();
private function filter(item:Object) : Boolean {
var s:String = ObjectUtil.toString(item, null,
['mx_internal_uid', 'Pretty Print', '#']);
// trace(s);
return s.indexOf(this.searchTextInput.text) >= 0;

Duplicate rows in DataGrid in Flex3/LCDS2.5

Hi,
My project in Flex2/LCDS2 uses DataGrid very extensively with
streaming data coming in.
After we recompiled it with Flex3 and run with LCDS2.5, we
see a strange behavior:
originally it shows everything right, but all coming data
creates duplicate rows.
As soon as we do sort on any column, duplicates disappear.
But then again new data creates duplicate rows...
We have never seen that happening with Flex2,
in fact it's running fine in production for a few months.
Has anybody seen such behavior ?
How can we cure that ?
(we do not do any special processing on that data, so I
really doubt it's anything in our code)
(using Java 1.5 on the server).
Any help is very appreciated.
Thank you in advance,
Oleg.

Just make sure you are not adding duplicating objects to your array collection.
It happened to me but figured it out.
If you have a loop that checks make sure you do the addIteam(obj); outside the inner loop but within the outer loop
for each (......)
      var match:boolean = false;
     for each(....)
               if(....)
                    match = true;
/** this is out side the inner loop */
          if(!match)
               array.addItem(obj);
     } /** outer loop ends here

PLEASE HELP!! Need some way to read header text in advanced datagrid using QTP

I am writing a function to read column names in advanced data
grid. There is no operation for that and any of the properties that
I can use to read the column names.
Please suggest any way that I can get the names of columns in
the advanced data grid.
Thanks

I hope to hear something from adobe folks...I am providing
more info.....
I am using QTP 9.2 and Flex 3 add-in available from Adobe.
My application has flex Advanced datagrid object and I am
trying to read column names for the datagrid.
I have contacted developers and they told me that column
names for flex advanced datagrid are stored in "Header Text"
I have tried reading "Header Text" using
GetROProperty("HeaderText") but it doesn't return anything.
I have tried the following code:
x =
Browser("app").FlexApplication("flexapp").FlexCanvas("Canvas").FlexAdvancedDatagrid("esti mategridid").GetROProperty("Header
Text")
msgbox x
I have also tried getting value for column names using other
available properties for webtables like outerhtml, outertext, alt
etc. but I don't get any data.
Part of the problem may be because none of the above
mentioned properties are supported by Flex Advanced datagrid.
I have also tried getting child objects but I always get the
data in datagrid as values but not the column names.
My primary reason for getting column names is to write a
function to update cell in datagrid independent of application. So,
I want to pass column name as a parameter to the function and get
the corresponding columnIndex in the function by comparing the
parameter value against column names.
Thanks to all for you help...

Does compiling an advanced datagrid using flex ant task require additional config other than the license property?

Hi,
    I am trying to build my Flex app which uses the Advanced Data Grid in a couple of locations. Originally, when I built the app using the flex ant tasks, I noticed the Visualization Trial watermark show up on the screen. I then added the license tag with the serial number to my flex-config.xml and re-ran my ant build. The watermark goes away, but then when I look at the advanced datagrid, the datagrid shows up with the hierarchy, but the data does not display in the grid (only the group by nodes are visible, not the data for the leaf elements). This works fine when I build the app using my Flex Builder. Is there something I am missing or need to add to my flex ant task to make this work?
Any help or guidance is much appreciated.
The following is the ant task to build the module that uses the ADG:
    <target name="compile-modules" depends="compile-shared">
        
        <echo>Compiling module 1...</echo>
        <mxmlc file="${modulesrc.dir}\ui\modules\mod1\Module1.mxml"
                output="${dist.dir}\modules\mod1\Module1.swf"
                actionscript-file-encoding="UTF-8"
                incremental="true"
                default-background-color="0xFFFFFF"
                use-network="false"
                load-externs="${extern-report-xml}">
            <load-config filename="${FLEX_HOME}/frameworks/flex-config.xml" />
            <source-path path-element="${FLEX_HOME}/frameworks"/>
            
            <compiler.source-path path-element="${modulesrc.dir}"/>
            
            <compiler.library-path dir="${main.dir}" append="true">
                <include name="${lib.dir}"/>
            </compiler.library-path>
            <compiler.library-path dir="${FLEX_HOME}/frameworks" append="true">
                <include name="libs" />
                <include name="locale/{locale}" />
            </compiler.library-path>
            <compiler.debug>true</compiler.debug>
        </mxmlc>
    </target>
And here is the ant task for the main application:
    <target name="compile-ui" depends="compile-modules">
        <mxmlc file="${src.dir}/MainApp.mxml" output="${dist.dir}/MainApp.swf"
                actionscript-file-encoding="UTF-8" keep-generated-actionscript="false"
                fork="true" maxmemory="1024m">
            <jvmarg value="-XX:MaxPermSize=256m"/>
            <load-config filename="${FLEX_HOME}/frameworks/flex-config.xml"/>
            <source-path path-element="${FLEX_HOME}/frameworks"/>
            <source-path path-element="${src.dir}"/>
            <source-path path-element="${main.dir}/locale/{locale}"/>
            
            
            <compiler.library-path dir="${FLEX_HOME}/frameworks" append="true">
                <include name="libs/datavisualization.swc" />
                <include name="libs/flex.swc" />
                <include name="libs/framework.swc" />
                <include name="libs/rpc.swc" />
                <include name="libs/utilities.swc" />
                <include name="locale/{locale}" />
            </compiler.library-path>
            <compiler.library-path dir="${main.dir}" append="true">
                <include name="${lib.dir}"/>
            </compiler.library-path>
            <runtime-shared-library-path path-element="${FLEX_FRAMEWORK}/framework.swc">
                <url rsl-url="framework_3.2.0.3958.swf"/>
                <url rsl-url="framework_3.2.0.3958.swz"/>
            </runtime-shared-library-path>
            <compiler.debug>true</compiler.debug>
        </mxmlc>
    </target>
Regards,
Purush

to remove watermark i have added license key in WEB-INF\flex\license.properties file as key = value

Import CSV/Excel data into Flex Datagrid using Java/JSP

Hi,
Is there any way we can import excel/csv data into flex datagrid component.
I see that is been done using php in this site. http://code.google.com/p/as3xls/
Any help would be appreciated.
Thanks in advance

You can store the list of data from the Excel sheet that you have read already into an ArrayList
Then go through the JDBC tutorial, and learn how to insert a single record into the table.
After you understand how to insert a single record, you can iterate through the ArrayList of data and insert them into the table in the database.
If you know JDBC, see if you can use OR Mapping frameworks like Hibernate or iBatis, they make it very easy to manage database in Java.

DataGrid Using an item renderer that spans an entire row

Anyone know how can I do this using DataGrid?

I dont understand how Can I do it. Below I have a source code that I'm working with this case. I have 2 columns and I would like when i click in combobox my item renderer fill all rows.
Look I have this code (Main Application and Renderer):
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:fx="http://ns.adobe.com/mxml/2009"
     xmlns:s="library://ns.adobe.com/flex/spark"
     xmlns:mx="library://ns.adobe.com/flex/halo">
     <mx:transitions>
          <mx:Transition fromState="*" toState="*">
               <mx:Resize target="{this}"/>
          </mx:Transition>
     </mx:transitions>
     <mx:states>
          <mx:State name="normal"/>
          <mx:State name="expanded"/>
     </mx:states>
     <fx:Script>
     <![CDATA[
          import mx.collections.ArrayCollection;
          [Bindable]
          public var ac:ArrayCollection;
          private function changeState(event:Event) : void {
               if( event.target.selected )
                    currentState = "expanded";
               else
                    currentState = "normal";
          override public function set data(value:Object) : void {
               super.data = value;
               ac = new ArrayCollection(value.models);
     ]]>
     </fx:Script>
     <mx:CheckBox label="{data.title}" click="changeState(event)"/>
     <mx:List dataProvider="{ac}" y="20" width="100%" includeIn="expanded"/>
</mx:Canvas>
<s:Application
     xmlns:fx="http://ns.adobe.com/mxml/2009"
     xmlns:mx="library://ns.adobe.com/flex/halo"
     xmlns:s="library://ns.adobe.com/flex/spark"
     xmlns:ct="*"
     height="100%" width="100%">
     <fx:Script>
     <![CDATA[
          import mx.collections.ArrayCollection;
          [Bindable]
          public var dp:ArrayCollection = new ArrayCollection([
          {title:"Ford", style: 'Modern', models:["Fusion","Taurus","Mustang"]},
               {title:"Volkswagen", style: 'Normal', models:["Passat","Jetta","Beetle", "Golf", "GTI"]},
               {title:"Infiniti", style: 'Modern', models:["FX35","GX35","Q45","M35"]},
               {title:"Audi", style: 'Esport', models:["A3","A4","A6"]}
     ]]>
     </fx:Script>
     <mx:DataGrid dataProvider="{dp}" variableRowHeight="true" height="100%" width="100%">
          <mx:columns>
               <mx:DataGridColumn dataField="title" headerText="title" itemRenderer="DetailItem"/>
               <mx:DataGridColumn dataField="style" headerText="style" />
          </mx:columns>
     </mx:DataGrid>
</s:Application>

Copy/paste full row, full column, a cell on datagrid using MVVM?

What is the best way to implement on datagrid? As I am new on this, I had some researches but I am confused because there are some complicated implementations and easy ones? I try to understand the best way.
Adding simply selection mode and selection Unit doesnt help. Because it only copies the row but I cant paste it simply as a new row.
SelectionMode="Extended" SelectionUnit="FullRow" >
this approach in the article looks old to me. Not sure if there is anything new and much easier with newest framework. I am using MVVM light in my project.
Attached is the sample project similar to my original project. can you please recommend me the best way for the following?
- Full Row(s) copy-paste
-1 or multiple columns copy-paste (optional)
- cell copy-paste
"Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it."

I found the code out my project. I last looked at this back in 2011.
This is a custom control inheriting from datagrid.
I don't recall where I got this code from originally.
public class CustomDataGrid : DataGrid
static CustomDataGrid()
CommandManager.RegisterClassCommandBinding(
typeof(CustomDataGrid),
new CommandBinding(ApplicationCommands.Paste,
new ExecutedRoutedEventHandler(OnExecutedPaste),
new CanExecuteRoutedEventHandler(OnCanExecutePaste)));
#region Clipboard Paste
private static void OnCanExecutePaste(object target, CanExecuteRoutedEventArgs args)
((CustomDataGrid)target).OnCanExecutePaste(args);
/// <summary>
/// This virtual method is called when ApplicationCommands.Paste command query its state.
/// </summary>
/// <param name="args"></param>
protected virtual void OnCanExecutePaste(CanExecuteRoutedEventArgs args)
args.CanExecute = CurrentCell != null;
args.Handled = true;
private static void OnExecutedPaste(object target, ExecutedRoutedEventArgs args)
((CustomDataGrid)target).OnExecutedPaste(args);
/// <summary>
/// This virtual method is called when ApplicationCommands.Paste command is executed.
/// </summary>
/// <param name="args"></param>
protected virtual void OnExecutedPaste(ExecutedRoutedEventArgs args)
// parse the clipboard data
List<string[]> rowData = ClipboardHelper.ParseClipboardData();
bool hasAddedNewRow = false;
// call OnPastingCellClipboardContent for each cell
int minRowIndex = Items.IndexOf(CurrentItem);
int maxRowIndex = Items.Count - 1;
int minColumnDisplayIndex = (SelectionUnit != DataGridSelectionUnit.FullRow) ? Columns.IndexOf(CurrentColumn) : 0;
int maxColumnDisplayIndex = Columns.Count - 1;
int rowDataIndex = 0;
for (int i = minRowIndex; i <= maxRowIndex && rowDataIndex < rowData.Count; i++, rowDataIndex++)
if (CanUserPasteToNewRows && CanUserAddRows && i == maxRowIndex)
// add a new row to be pasted to
ICollectionView cv = CollectionViewSource.GetDefaultView(Items);
IEditableCollectionView iecv = cv as IEditableCollectionView;
if (iecv != null)
hasAddedNewRow = true;
iecv.AddNew();
if (rowDataIndex + 1 < rowData.Count)
// still has more items to paste, update the maxRowIndex
maxRowIndex = Items.Count - 1;
else if (i == maxRowIndex)
continue;
int columnDataIndex = 0;
for (int j = minColumnDisplayIndex; j <= maxColumnDisplayIndex && columnDataIndex < rowData[rowDataIndex].Length; j++, columnDataIndex++)
DataGridColumn column = ColumnFromDisplayIndex(j);
column.OnPastingCellClipboardContent(Items[i], rowData[rowDataIndex][columnDataIndex]);
// update selection
if (hasAddedNewRow)
UnselectAll();
UnselectAllCells();
CurrentItem = Items[minRowIndex];
if (SelectionUnit == DataGridSelectionUnit.FullRow)
SelectedItem = Items[minRowIndex];
else if (SelectionUnit == DataGridSelectionUnit.CellOrRowHeader ||
SelectionUnit == DataGridSelectionUnit.Cell)
SelectedCells.Add(new DataGridCellInfo(Items[minRowIndex], Columns[minColumnDisplayIndex]));
/// <summary>
/// Whether the end-user can add new rows to the ItemsSource.
/// </summary>
public bool CanUserPasteToNewRows
get { return (bool)GetValue(CanUserPasteToNewRowsProperty); }
set { SetValue(CanUserPasteToNewRowsProperty, value); }
/// <summary>
/// DependencyProperty for CanUserAddRows.
/// </summary>
public static readonly DependencyProperty CanUserPasteToNewRowsProperty =
DependencyProperty.Register("CanUserPasteToNewRows",
typeof(bool), typeof(CustomDataGrid),
new FrameworkPropertyMetadata(true, null, null));
#endregion Clipboard Paste
I used to be a points hound.
But I'm alright nooooooooooooooooooooooooooooOOOOOWWWW !

Datagrid using animated gif or flash

I have a datagrid that is using an image control for its item
renderer on one of the columns. That works just fine but I would
like to be able to display an animated image in the datagrid
instead of a static one.
I know flex doesnt support animated gifs but is there any way
I could make it show one in a data grid?
Thanks.

If you are web deployed you can put an animated gif as the image to an iconic button.
Image items cannot display animated gifs.
Anything else you can do through a JavaBean if you need to.

How to made plugin using flex3 application

Hi All,
I am working on transitiom plug-in for premiere pro cs3 ,using premiere pro cs3 SDK.
now i am developing plugins by using adobe flex3 ,application name is transition viewer
in which when click on thumbnail play the transition on the text of preview window.this transition
effect is xml file.
so,How to popup the above flex application when click on the folder in premier pro cs3,using premiere pro cs3 SDK.
please help me
Thanks

Hi there,
You'll want to display any UI during the esSetup call into the transition plug-in. This selector will be sent when the user chooses the Custom setup button for the transition in the Effect Controls Panel. The SDK transition sample already displays a MessageBox() here.
Regards,
Zac

How to get Datagrid using Hebrew rtl

Hi,
I am trying to get Hebrew in the datagrid in the correct (rtl) direction.
I managed get it done with a TLF textfield but not in the datagrid.
Can TLF be used for the datagrid or is there another way to get the direction of the hebrew correct?
Your help is greatly appreciated.

This code may help.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="
http://www.adobe.com/2006/mxml"
width="100%">
<mx:Script>
<![CDATA[
import mx.controls.DataGrid;
import mx.events.ListEvent;
[Bindable]
private var nameStr:String;
public function getName(event:ListEvent):void {
var dg:DataGrid = DataGrid(event.target);
nameStr = dg.selectedItem.cn;
]]>
</mx:Script>
<mx:ArrayCollection id="acEmaillist">
<mx:Object>
<mx:cn>Bob Smith</mx:cn>
<mx:mail>[email protected]</mx:mail>
</mx:Object>
<mx:Object>
<mx:cn>Ted Alan</mx:cn>
<mx:mail>[email protected]</mx:mail>
</mx:Object>
<mx:Object>
<mx:cn>Fred Tobs</mx:cn>
<mx:mail>[email protected]</mx:mail>
</mx:Object>
</mx:ArrayCollection>
<mx:DataGrid dataProvider="{acEmaillist}"
itemClick="getName(event)">
<mx:columns>
<mx:DataGridColumn headerText="Full Name" dataField="cn"
width="150"/>
<mx:DataGridColumn headerText="Email" dataField="mail"
width="150"/>
</mx:columns>
</mx:DataGrid>
<mx:Label text="{nameStr}"/>
</mx:Application>

Update DataGrid using RemoteObject

I am using a RemoteObject method call to populate an ArrayCollection used as a dataProvider in my DataGrid. I use the render() method on the datagrid to make sure the datagrid displays the updated data the RemoteObject method is returning everytime it is displayed. My problem is the datagrid displays the updated information but gets into an infinite call.
What might be the appropriate way to get the updated data from the backend?
-Thanks,
Fauzia

Hi Michael,
Thanks for your reply. The AC I use is bindable, but it doesn't get update with an initialize() method, thats why I had to use render(). This is an outline of my code...
<mx:RemoteObject id="historyService" result="onResultGetList(event)" showBusyCursor="true" fault="onFault(event)" destination="historyService">
     <mx:method name="getLrcFindDetailCltn" result="onResultGetList(event)" makeObjectsBindable="true" fault="onFault(event)"/>
   </mx:RemoteObject>
       [Bindable]
        private var ldsDetails:ArrayCollection;
          public function getList():void
            historyService.getLrcFindDetailCltn();
          public function onResultGetList(event:ResultEvent):void
             ldsDetails = event.result as ArrayCollection;
<mx:DataGrid id="usersDataGrid" dataProvider="{ldsDetails}" render="getList();">
<mx:columns>......
Thanks,
Fauzia

Cellspacing in datagrid using flex3

Similar Messages

Maybe you are looking for