Flex datagrid borders off by 1px?

Is there a way to extend the datagrid component or any to her way to avoid this?
Flex datagrid column header borders and column borders keep going off by 1px... and they randomly alternate when resized.
I have no idea how to fix this, and it to me looks like a problem with flex, not so much what i coded
http://screencast.com/t/NmI3Zjk0NmU
http://screencast.com/t/YzE0NDk5 - resized
It's like it's going off by 1px because of some rounding error... no idea why this is happening, and I'm using
Code I'm using (a bit sloppy but still)
http://pastebin.ca/1888773

I could use someone's help on this... Every single datagrid i create (at least with a custom header gradient, I think), has borders off by 1px, what can I do to fix this? I've even seen this happening on other sample flex projects. No idea how to fix this

Similar Messages

Flex Datagrid Issue

Hi
I am using a flex datagrid component which has around 48 columns.
There is a option for the user to select which columns he wish to see.
Based on the user's selection the visible columns will be 1-50.
The Datagrid is inside a Vbox container.
The issue is, based on the screen resolution and the number of columns selected extra scroll bars(horizontal and vertical) appears
for the whole Vbox in addition to the Datagrid's scrollbars.
i.e if resolution is high and user selects more than 46 columns extra scroll bar appears.
If resolution is low the extra scroll bars appears as soon as the visible columns is more than 20.
Please help me if there is any resolution in preventing the extra scroll bars from appearing.Ideally, Since datagrid has its own scroll bars making more columns visible should not increase the width of datagrid.
Any help will be appreciated

Have you hard-coded the height and width of both the VBox and the Datagrid? If you set the datagrid height and width 40 pixels or so less than the VBox it should solve that problem, I'd think.
Or, you could set your DataGrid height and width to 90%.
Sorry if you've already tried this. Another option is to set your datagrid's scroll policy to "off" and just leave the VBox's scroll bars available.
-John

Flex datagrid data column / webservice

I use a web service to populate a datagrid and its columns
(on of which is date). The web services sources the data from a sql
server database and thru ASP.net to the Flex application. I've been
seeing strange things. During testing, database records such as
"8/27/2008 8:58:00 PM " correctly shows up as 8/27/2008 in the Flex
application, but records after 9PM such as "8/27/2008 9:01:21 PM"
shows up as 8/28/2008 (the next days) .. seems like after 9 throws
off the data rendering.. please suggest.

Adobe Newsbot hopes that the following resources helps you.
NewsBot is experimental and any feedback (reply to this post) on
its utility will be appreciated:
Flex 3 - Handling service results:
Flex interprets the XML data that a web service or HTTP
service returns to ..... a DataGrid control with DataTable data
returned from a .NET web service.
Link:
http://livedocs.adobe.com/flex/3/html/data_access_6.html
Flex cookbook beta - Building Flex Applications with SOAP Web
Services:
Mar 3, 2008 ... If you are using web services technologies
then it is usually ... The DataGrid tag instanciates an instance of
the DataGrid Flex control.
Link:
http://www.adobe.com/cfusion/communityengine/index.cfm?event=showdetails&productId=2&postI d=7863
Flex 3 - Using WebService components:
The Flex web service API generally supports Simple Object
Access Protocol (SOAP) ... property of a DataGrid control and
displayed in the DataGrid control.
Link:
http://livedocs.adobe.com/flex/3/html/data_access_3.html
Adobe - Flex General Discussion:
Flex datagrid data column / webservice - justneed2know -
08/27/2008 ... I use a web service to populate a datagrid and its
columns (on of which is date).
Link:
http://www.adobe.com/cfusion/webforums/forum/messageview.cfm?forumid=60&catid=585&threadid =1388794&enterthread=y
All Classes (Flex 3):
mx.rpc.soap, AbstractWebService is an abstract base class for
implementations that provide RPC access to SOAP-based web services.
Link:
http://livedocs.adobe.com/flex/3/langref/class-summary.html
Adobe - Developer Center : Using Flex Builder to Create Web:
Using Flex Builder to Create Web ServiceBased Flex
Applications ... The web service result data needs to flow to the
DataGrid. Select the 'Data will flow
Link:
http://www.adobe.com/devnet/flex/articles/flexbuilder_ws_04.html
Disclaimer: This response is generated automatically by the
Adobe NewsBot based on Adobe
Community
Engine.

How to disaply multiple column of a table in a single flex datagrid column

Hi,
I have a table in my database which has say 3 column (Firstname,LastName,Location). I wanted to display these 3 different values in a single column in flex datagrid.
Could you please help me out in this
Thanks,
Pratik

Generally, in such scenarios each column is made corresponding to the column in database only and not single column.
However, we can setStyle of a datagrid to make it appear as if all three columns have been populated in single.
set verticalGridLines="false" for dataGrid. Further cosmetic changes can be made to realise the required look.
In some cases, labelFunction of a datagridColumn also suffices the need.
Tanu

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.

Showing multiple links from inside a flex datagrid button

Hi,
I have a requirement where I need to show a button inside
flex datagrid column.Which I'm doing with custom itemrenderer.When
the User clicks on a particular button inside data grid I need to
show him multiple links with images where user cal click on one of
the links if he choses to do so.How do I achieve this.Any example
is greatly appreciated.
Regards
mflex.

"...show him multiple links with images ..." Where/how does
this need to be displayed?
Tracy

Flex DataGrid with Dynamic Grouping

Does anyone know of any examples of Flex datagrids that have
grouping features comparable to the numerous grid components
available in the ASP.NET world? I’m thinking of .NET
component vendors such as Telerik, Infragistics, Component Art,
DevExpress, etc.
The way these .NET controls generally work is that you drag
the header of a column to a bar above the grid, which causes the
grid to redraw based on the new grouping you just specified.
This is an example of a grid component that I am currently
using:
Telerik
Grid
Thank you,
Mike Chabot

The renderer's data property is the data for the entire row so you can get the column1 data and assign the combobox's dataprovider accordingly.
Alex Harui
Flex SDK Developer
Adobe Systems Inc.
Blog: http://blogs.adobe.com/aharui

Flex datagrid pagination?

Hi. Does the datagrid or AdvancedDataGrid support pagination?
From what I've found, they don't seem to.

"curious_Lee" <[email protected]> wrote in
message
news:g91nfo$nv8$[email protected]..
> Hi. Does the datagrid or AdvancedDataGrid support
pagination? From what
> I've found, they don't seem to.
http://gurufaction.blogspot.com/2007/02/flex-datagrid-paging-example-with.html

Flex datagrid french sorting

Hi,
I am using flex datagrid to develop an application in french,
as french is having special character in it,
i need to sort datagrid column in french. Flex datagrid
unable to sort data in french. i need french sorting,
if somebody has solution of this please help me to get out of
this.
If possible please reply me on
[email protected]

i am using inbuilt flex sorting, i am not using sortcompare()
function.
its just a string sorting but as its in french ,character
"
É" is comig after character "
V" , because flex treated it as a special character
. it should come before "
V". so do we need to change character set for
flex?

Flex DataGrid Component

Can i extend the Flex DataGrid using ActionScript and create as Add-On Component ?

I've been trying to get this to work. But i'm having issues Not sure if it's related to the Array binding limitation mentioned in the release notes. Maybe someone else has some ideas.
I'm trying to bind to the dataProvider property of the DataGrid. That way when the user in Xcelsius selects a range, it will bind the data in the excel sheet to the DataGrid.
Problem is that i'm only getting one value to update (specifically the top value). At this time i'm only trying to bind a single column of data.
I noted that the commitProperties function gets called whenever a cell changes that i'm bound to, but the dataProvider is only receiving the first value of the array. Even odder is that the ArrayCollection that i receive simply looks like this:
commitProp:dataProvider=(mx.collections::ArrayCollection)#0
filterFunction = (null)
length = 1
list = (mx.collections::ArrayList)#1
    length = 1
    source = (Array)#2
      [0] 1
    uid = "A37C62CC-F3DC-E1B1-8159-CE984C2CCE33"
sort = (null)
source = (Array)#2
So i see that i get an array collection of ArrayList objects, the first one of which simple contains the value in the excell sheet "1".
I noted that the proxy.bind function has a parameter called "chain", maybe this is what i need to get multiple value binding? The documentation for the calls are pretty basic, which is understandable as this is new technology.
So anyone have some ideas? Maybe someone from BO who is apart of the SDK group can comment?

Flex datagrid data on datachange

Hi all,
I am using an extended datagrid which takes its height on the basis of measured height of items. Item renderer for datagrid is a canvas. Which holds one more canvas(header for item renderer) and a text area. The problem I am facing is with the header canvas in item renderer. Header canvas has one label which diaplay a name of user. On the basis of data provider for the current item visibility of this label in header canvas is set as true or false. issue is when it set to false it repaints(on data change event) all the previous header canvas label also to visible false. And just the last item has the data. Rather it should set its visiblity false only for the current item and rest items sholud behave as value set for them.
Thanks in advance.

Adobe Newsbot hopes that the following resources helps you.
NewsBot is experimental and any feedback (reply to this post) on
its utility will be appreciated:
Flex 3 - Handling service results:
Flex interprets the XML data that a web service or HTTP
service returns to ..... a DataGrid control with DataTable data
returned from a .NET web service.
Link:
http://livedocs.adobe.com/flex/3/html/data_access_6.html
Flex cookbook beta - Building Flex Applications with SOAP Web
Services:
Mar 3, 2008 ... If you are using web services technologies
then it is usually ... The DataGrid tag instanciates an instance of
the DataGrid Flex control.
Link:
http://www.adobe.com/cfusion/communityengine/index.cfm?event=showdetails&productId=2&postI d=7863
Flex 3 - Using WebService components:
The Flex web service API generally supports Simple Object
Access Protocol (SOAP) ... property of a DataGrid control and
displayed in the DataGrid control.
Link:
http://livedocs.adobe.com/flex/3/html/data_access_3.html
Adobe - Flex General Discussion:
Flex datagrid data column / webservice - justneed2know -
08/27/2008 ... I use a web service to populate a datagrid and its
columns (on of which is date).
Link:
http://www.adobe.com/cfusion/webforums/forum/messageview.cfm?forumid=60&catid=585&threadid =1388794&enterthread=y
All Classes (Flex 3):
mx.rpc.soap, AbstractWebService is an abstract base class for
implementations that provide RPC access to SOAP-based web services.
Link:
http://livedocs.adobe.com/flex/3/langref/class-summary.html
Adobe - Developer Center : Using Flex Builder to Create Web:
Using Flex Builder to Create Web ServiceBased Flex
Applications ... The web service result data needs to flow to the
DataGrid. Select the 'Data will flow
Link:
http://www.adobe.com/devnet/flex/articles/flexbuilder_ws_04.html
Disclaimer: This response is generated automatically by the
Adobe NewsBot based on Adobe
Community
Engine.

Issue with Number sort in flex datagrid

Hi All,
I have implemented Number sorting as mentioned in the below(code).
I have placed the function that i am setting for the column that is to be sorted.
This column contains formatted amount (e.g. $2,000.00), so flex considers it as String and sorts the data as String.
In the function pasted below i am removing the formatting and then converting the unformatted string into a Number.
This function works fine when the amount of data is not large. i.e. < 1000 records in datagrid.
But when the records are > 1000, the sorting takes long time and most of the time the script takes more than 30 secs to run.
The reason here is that when the amount of data is large then the comparisons increase and the method which i am calling in this method gets called twice as many times as the numericSort Function.
This causes the delay and the error is thrown.
IS THERE ANY OTHER WAY TO IMPLEMENT NUMERIC SORTING WHICH IS LESS TIME CONSUMING THAN THIS WAY?
Please help as i need a solution to this urgently.
Thanks.
Here is the method
Code :::
public static function numericSort(obj1 : Object, obj2 : Object):int
        try
                var d1 : Number;
                var d2 : Number;
                var index : int = Util.getColumnIndex("MARGIN");
                d1 = Number(removeStringFormatting(obj1[index]));
                d2 = Number(removeStringFormatting(obj2[index]));
                if (d1 < d2) {
                      return -1;
                } else if (d1 > d2) {
                     return 1;
                } else {
                return 0;
        catch(error : Error)
                Alert.show("Error in numericSort "+error.getStackTrace());

Off topic: Having 1000 results displayed at once in a DataGrid ( heck, even 100-200 at once ) is dumb. Instead, you should break your data down to smaller pieces and use paging or something to traverse the whole collection of data. Displaying an imense bunch at once is just plain dumb.
Regarding your problem: Since the data displayed in the DataGrid is formatted, you won't be having an easy time trying to sort that formated data. Instead, you should convert the data back to Number or integer ( or whatever might suit your needs ) and sort it that way. A custom compare function is good because you can perform the conversion back to the original state there and then sort the values ( or you can store a temporal list of the data that is unformatted, sort it, format it and display it - this is just one possible solution of the quite many ).

Is there a way of merging cells (not columns) in a Flex Datagrid?

Hello everyone!
I'm new to Flex and I have been searching for a solution to this problem for two days now, so any help would be really appreciated!
I have a datagrid of, lets say x columns of fixed size, with the ability to add or remove rows dynamically. When adding a row o popup comes up and lets the user determine the positions(order) and widths of the desired cells of the row. So what I want to do is to be able to merge cells of the new Datagrid row appropriately, to satisfy the user's choices. Thats the general idea.
Is there a way to have a Datagrid (or other similar component) with different cell number and widths for each row in Flex? I need a component similar to the Datagrid because I want to be able to select rows and process their data.
Any idea would be very helpful as I'm pressed for time and I could use someone's experience to search in the right direction and not loose time.
Thanks in advance!

Thank you very much for your response. I finally did what I wanted without using a Datagrid. I used a Table Flex Component (which extends Flex Grid) that I found here:
http://code.google.com/p/flex-table/#Demo
I downloaded the source and changed some things to make it work as I need.

Flex datagrid custom itemRenderer - making column NOT EDITABLE

Hi all,
I am new to flex and having been trying to build custom editors and renderers for datagrid. I ran into this problem trying to fix another one (http://forums.adobe.com/post!reply.jspa?message=3569216)
The problem is :
I have a custom editor and a renderer for a text column. The whole grid is editable (i.e; editable=true). But clicking on the cell does not show me the editor. However, if I change the renderer to mx.controls.label, clicking on it takes me to my custom editor.
Can anyone please tell what I am doing wrong?? I am pasting the relevant code for more details.
DATAGRID : Replacing itemRenderer = "renderers.TextRenderer" with itemRenderer = "mx.controls.Label" makes the column editable
<mx:DataGrid id="dg" editable="true" rowHeight="100" width="861" x="10" y="10" height="498" dataProvider="{this.slideArray}">
     <mx:columns>
                       <mx:DataGridColumn headerText="Text" width="100"
                                                       resizable="true" sortable="false"
                                                       itemRenderer = "renderers.TextRenderer"
                                                       itemEditor="editors.TextEditor"
                                                      dataField="text" editorDataField="myData"/>
            </mx:columns>
</mx:DataGrid>
TEXT EDITOR
<?xml version="1.0" encoding="utf-8"?>
<s:MXDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                                           xmlns:s="library://ns.adobe.com/flex/spark"
                                           xmlns:mx="library://ns.adobe.com/flex/mx"
                                           focusEnabled="true"
                                          initialize="initEditor()">
<mx:TextInput id="edit" width="{this.width}" height="{this.height}"/>
<fx:Script>
<![CDATA[
          import domain.Slide; // contains just one property :::: public var text : String
          override public function set data(value:Object):void{
                    super.data = value;
                    this.edit.text = (value as Slide).text;
          public var myData : String; // editor data field
          import mx.binding.utils.BindingUtils;
          private function initEditor():void{
                    BindingUtils.bindProperty(this,"myData", this.edit, "text");
]]>
</fx:Script>
</s:MXDataGridItemRenderer>
TEXT RENDERER
<?xml version="1.0" encoding="utf-8"?>
<s:MXDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                                          xmlns:s="library://ns.adobe.com/flex/spark"
                                         xmlns:mx="library://ns.adobe.com/flex/mx"
                                         focusEnabled="true">
     <s:Label id="txt" horizontalCenter="0" verticalCenter="0"/>
     <fx:Script>
          <![CDATA[
                         import domain.Slide;
                         override public function set data(value:Object):void{
                                        super.data = text;
                                        this.txt.text = (value as Slide).text;
          ]]>
     </fx:Script>
</s:MXDataGridItemRenderer>
Tricks I have tried and failed :
1. added the following code to the renderer
   override public function get data():Object{
                                   return super.data;
2. remove/change focusEnabled
3. wrote the same renderer in Actionscript - making it extend MXDataGridItemRenderer. I had to add the label component txt using addElement. Clicking on this does show th editor but it doesnt show the label txt at all... i.e; I dont get any text displayed.
I am using Flex 4.0 sdk.

It worked!!!!!!! Thank you!! What you mentioned was indeed the problem!
Here is the custom item renderer's set data function
Before
Now
override public function set data(value : Object):void{
                super.data = text;
                  this.txt.text = (value as Slide).text ; //txt is the Label control
override public function set data(value : Object):void{
                  super.data = value;
                  this.txt.text = (value as Slide).text ; //txt is the Label control
oh man, this is such a stupid mistake. I think I was confused with having three text properties - one inherited from MXDataGridItemRenderer, one in my txt Label control and one on my slide.
I had no idea that sending the value up to the super class was so important. None of the docs I read seemed to give much importance to this statement.
thanks so much and sorry for taking up so much of your time. I guess it is uncessary to post any more code.

DropDownList ItemRenderer within Flex Datagrid Not Refreshing

I have a datagrid which contains a Spark dropdownlist that needs to obtain dynamic data.
The datagrid uses a separate dataProvider.
When I use a static ArrayCollection within my ItemRenderer, it works (please see listing 1).
However, when I use Swiz to mediate a 'list complete' event to load the ArrayCollection, the dropdownlist does not show the new data (please see listing 2).
Using the debugger, I inspected the dropdownlist ItemRenderer and have confirmed the new data is being loaded into the ArrayCollection.
The new data is not shown in the UI control. I have tried invalidateProperties() + validateNow() and dispatching events on both the control and the renderer (this), but nothing seems to make the new data appear in the control on the datagrid.
Please help !!!
Listing 1: Datagrid and static ArrayCollection (this works)
<mx:DataGrid x="10" y="25" width="98%" id="dgInventory" paddingLeft="25" paddingRight="25" paddingTop="25" paddingBottom="25"
                     editable="true"
                     itemClick="dgInventory_itemClickHandler(event)" dataProvider="{acInventory}"
                     creationComplete="dgInventory_creationCompleteHandler(event)"
                     height="580">
            <mx:columns>
                <mx:DataGridColumn headerText="Item" dataField="itemName" itemRenderer="components.ItemRendererItem"
                                   rendererIsEditor="true" editorDataField="selection" editable="true"/>
                <mx:DataGridColumn headerText="Quantity Required" dataField="quantityReq" itemRenderer="components.ItemRendererQuantityRequired"
                                   rendererIsEditor="true" editorDataField="selection" editable="true"/>
            </mx:columns>
</mx:DataGrid>
<fx:Script>
    <![CDATA[
        import mx.collections.ArrayCollection;
        import spark.events.IndexChangeEvent;
        public var selection:int;
        [Bindable]
        protected var acItem:ArrayCollection = new ArrayCollection(
            [   { itemName: "Item1"},
                { itemName: "Item2"},
                { itemName: "Item3"},
        protected function dropdownlist1_changeHandler(e:IndexChangeEvent):void
            selection = e.newIndex;
    ]]>
</fx:Script>
<s:DropDownList id="ddlItem" prompt="Select Item" dataProvider="{acItem}" labelField="itemName"
                selectedIndex="{int(dataGridListData.label)}"
                change="dropdownlist1_changeHandler(event)"
                width="80%" top="5" bottom="5" left="5" right="5"/>
Listing 2: Dynamic ArrayCollection (does not work):
<?xml version="1.0" encoding="utf-8"?>
<s:MXDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                          xmlns:s="library://ns.adobe.com/flex/spark"
                          xmlns:mx="library://ns.adobe.com/flex/mx"
                          focusEnabled="true">
    <fx:Script>
        <![CDATA[
            import event.ItemEvent;
            import mx.collections.ArrayCollection;
            import mx.events.FlexEvent;
            import spark.events.IndexChangeEvent;
            public var selection:int;
            [Bindable]
            protected var acItem:ArrayCollection = new ArrayCollection();
            protected function dropdownlist1_changeHandler(e:IndexChangeEvent):void
                selection = e.newIndex;
            protected function ddlItem_creationCompleteHandler(event:FlexEvent):void
                var eve : ItemEvent = new ItemEvent( ItemEvent.LIST_ITEM_REQUESTED );
                dispatchEvent( eve );
            [Mediate( event="ItemEvent.LIST_ITEM_COMPLETE", properties="acItem" )]
            public function refreshness( _acItem : ArrayCollection ):void
                acItem.removeAll();
                var len:int = _acItem.length;
                if (len > 0)
                    for (var i:int=0; i < len; i++)
                        var newItem:Object = new Object;
                        newItem["itemName"] = _acItem[i].itemName;
                        acItem.addItem(newItem);
                this.invalidateProperties();
                this.validateNow();
                //dispatchEvent(new FlexEvent(FlexEvent.DATA_CHANGE));
        ]]>
    </fx:Script>
    <s:DropDownList id="ddlItem" prompt="Select Item" dataProvider="{acItem}" labelField="itemName"
                    selectedIndex="{int(dataGridListData.label)}"
                    creationComplete="ddlItem_creationCompleteHandler(event)"
                    change="dropdownlist1_changeHandler(event)"
                    width="80%" top="5" bottom="5" left="5" right="5"/>
</s:MXDataGridItemRenderer>

After re-reading Peter Ent's ItemRenderer series, this turned out to be quite simple.
I extended DataGrid to have the ArrayCollection property I needed, then added this to my renderer:
[Bindable]
            protected var acItem:ArrayCollection = new ArrayCollection();
            override public function set data( value:Object ) : void
                super.data = value;
                acItem = (listData.owner as MyDataGrid).itemList; // get the data from the renderer's container (by extending it to add a property, if necessary)

Flex datagrid borders off by 1px?

Similar Messages

Maybe you are looking for