(Advanced)DataGrid with selectable columns

Hello -
I'm trying to make a Flex (Advanced)DataGrid component with some mechanism where the user can toggle the visibility of the columns. I've crudely implemented this by reading in the columns into the right-click menu, and when a column name is selected here, the visibility is toggled. It works, but it's not the most elegant solution.
Specifically, I'm trying to emulate the "datagrid" that Mozilla Thunderbird uses to display emails. Here is an image:
In the upper right, there is an icon over the scroll bar. If there is no scrollbar, the icon remains in the same place. When clicking the icon, it opens up a menu that shows all the possible columns, with the visible ones having a check mark next to them, like this:
Also, the scroll bar always appears under this button, never "pushing" it over into it's own column.
I'd like to re-create this in Flex. I believe the menu part and creating a column with a button headerRendered is easy enough. But I can't figure out how (if at all possible) to do this with the scrollbar, because the scrollbar always seems to be "its own column". Any ideas or help would be appreciated. Thank you.
- Ian

This blog post seems to answer your question:
http://blog.flexgeek.in/2007/06/tips-tricks-adding-a-combobox-to-a-datagrid-header-as-head errenderer/
http://omalraj.com/2009/06/flex-datagrid-header-with-a-combobox-filter/
http://franto.com/custom-header-in-datagrid-part-2/
http://blogs.adobe.com/aharui/2007/03/thinking_about_item_renderers_1.html
If this post answers your question or helps, please mark it as such. Thanks!
http://www.stardustsystems.com
Adobe Flex Development and Support Services

Similar Messages

Advanced datagrid with grouped columns and grouped rows

hello every body, plz need your experience help. 'cause Im so new using FLEX
I have an XML (like an XML data type) something like this
<Table>
<Rows>
    <cAgencia>F0002</cAgencia>
    <cAgNombre>SanBorja</cAgNombre>
    <cTVentanilla>V0002</cTVentanilla>
    <dTVNombre>Plataforma</dTVNombre>
    <TcksEnEspera>20</TcksEnEspera>
    <VentsEnAtencion>50</VentsEnAtencion>
</Rows>
<Rows>
     <cAgencia>F0003</cAgencia>
     <cAgNombre>Miraflores</cAgNombre>
     <cTVentanilla>V0002</cTVentanilla>
     <dTVNombre>Plataforma</dTVNombre>
     <TcksEnEspera>30</TcksEnEspera>
     <VentsEnAtencion>40</VentsEnAtencion>
   </Rows>
<Rows>
     <cAgencia>F0002</cAgencia>
     <cAgNombre>SanBorja</cAgNombre>
     <cTVentanilla>V0003</cTVentanilla>
     <dTVNombre>Caja</dTVNombre>
     <TcksEnEspera>55</TcksEnEspera>
     <VentsEnAtencion>25</VentsEnAtencion>
   </Rows>
   ...... (continue)
</Table>
so, I need to make a table (I guess with advancedDataGrid) something like this
as you can see,   I have to group them by columns and Rows. I have found a "mx:groupedColumns" that maybe could help me , but I couldn't find something like "mx:groupedRows".
The grid may be dynamic,   for example if I have another XML node like:
<Rows>
     <cAgencia>F0004</cAgencia>
     <cAgNombre>SanMiguel</cAgNombre>
     <cTVentanilla>V0002</cTVentanilla>
     <dTVNombre>Plataforma</dTVNombre>
     <TcksEnEspera>15</TcksEnEspera>
     <VentsEnAtencion>52</VentsEnAtencion>
   </Rows>
the grid may add a ROW and in the column of plataforma add the data: 15 and 52, so the grid may be something like this:
as you can see, the grid may add rows and columns in depends of the count of XML data.
plz help.
thanks, regards from Lima, Peru.
JS

any help ????????? I found OLAPDataGrid .....   I was thinking to send all the data into a bidimensional Array , then pass the data of my bidimensionalArray to OLAPDataGrid ... but I'n not sure if Flex is able to do it ....
the really serious problem is the special ROW I must use ...
regards
JS

DataGrid with dynamic columns & renderers

I'm developing using Flash Builder 4 & Flex SDK 4.1.
I need to manage very dynamic DataGrid components and keep their definitions, which are all part of a complex item renderer of an Offers list.
The objects structure is simplified as follows -
Data: Model --> Offers ArrayCollection --> Offer VO --> DataGrid data ArrayCollection & DataGrid columns Array
View: List --> Offer Item Renderer --> DataGrid
1. Since the DataGrid's columns property accepts only an Array (not ArrayCollection), it seems like Data Binding for defining the columns is very problematic.
I tried to bind it to the source property of an ArrayCollection that would keep my columns definitions, but it didn't really work (mainly header display bugs).
What is the recommended way to keep the dynamic columns definition of a DataGrid?
2. Each column can have a set of dynamic properties, so I created a "mutant" - Column VO that extends DataGridColumn and got a dynamic properties ArrayCollection on it.
The columns got a custom header renderer that includes an icon when there are properties.
The header renderers got 4 main states (NotSelectedWithProperties, SelectedWithProperties, NotSelectedWithoutProperties & SelectedWithoutProperties).
However, the header renderer area seems a bit buggy when maintaning dynamic columns.
Any thoughts on the subject?
3. Anyway, I ended up recreating the DataGrid's columns Array very often (copying the columns definition on the offer's item renderer's dataChange event handler).
Note that the dynamic properties can be edited when the column is selected and I copy their values from the view back to the model when entering the state NotSelectedWithProperties.
This feels way too complicated and I really try to keep it simple, inspite of the required complexity.
Does anyone have better ideas?
4. In some cases the column's item renderer should also be modified into another DataGrid (grid-in-grid).
I used the MXDataGridItemRenderer with a DataGrid and included an ArrayCollection for the "newValue" returned by the editor.
(I use RendererIsEditor=true and on updateComplete populate that variable with the DataGrid's dataProvider contents)
When needed, I loop though the data objects of the parent DataGrid and populate the related field with an ArrayCollection of key-value objects that are displayed on the internal DataGrid.
After adding this feature I encounter very strange bugs -
a. After editing the grid-in-grid values and changing the column's state (selecting & deselecting), I get the following exception:
ArgumentError. Error #2025: The supplied DisplayObject must be a child of the caller.
at flash.display::DisplayObjectContainer/setChildIndex()
at mx.core::UIComponent/setChildIndex().......6993....
All I could find about this is that it might be related to some context error or something, but I'm really stuck on this one.
b. Sometimes another column might copy value from one row to another, running over the previous value.
I'm not sure exactly what sequence of actions causes this behavior, but it's related to that itemRenderer for sure.
c. Switching places with a column that uses the grid item renderer (headerShift) causes a stak overflow of StyleManager that tried to get style from the DataGridItemRenderer. This one I just found out, but couldn't reproduce a second time... strange!
I'm pretty sure this caused another problem that I don't remember at the moment.
The bottom line is that there got to be a better way to implement this feature within this already-complicated environment.
Maybe I'm doing something very wrong here...
Please advice and thanks for reading all this.

Update on item 4a -
This was a major issue (the main reason for opening this thread really) and I managed to resolve it!
As part of my application, I override the default DataGrid behavior for column selection (headerRelease event).
Instead of sorting, I change the column's header looks and define it as Selected (for showing its dynamic properties and enable its deletion).
At first I did this by setting styles, but the look didn't refresh unless I created a new instance of the header renderer.
Later I changed thi behavior to work with states, but I left the new header renderer instance creation commands and those lines created all the mess!
Conclusion -
If you define a custom header renderer for your datagrid column and then a custom item renderer, don't create a new instance of your header renderer!
It would still be nice to get some response for the other issues I raised.
Thanks and have a nice week.

Dynamic DataGrid with Preferred columns

Hi all,
I want to populate a dynamic DataGrid with User Preferred
columns (ex : EmpId,First Name and Phone). Each time columns may
change based on User Selection in Preferences Page so columns
should not hard code. I'm able to see data for EmpId, First Name
but I want to see the Inner tag data of "Phone" as a Field.
Sample XML ....
<emp>
<empId>1002</empId>
<firstName>Smith</firstName>
<lastName>John</lastName>
<address>
<city>Ohio>
<phone>433-234-322</phone>
<zip>60003</zip>
</address>
</emp>
Thanks.

To display nested data, you must use a labelFunction. I have
several labelFunction examples on cflex.net.
You can assign a function reference to the column's
labelFunction property in the column generation code.
Tracy

Spark DataGrid with Dynamic Column Width

Lets suppose I have a Spark Datagrid with no explicit typicalItem. When the Datagrid is initialized, the column widths are calcualted correctly based on the contents of the dataprovider. However if I add/remove an item from the dataprovider, or modify the one of the objects in the dataprovider, the column widths never update to reflect the change. Is the the correct behavior for a DataGrid? If so, is there any method I can call to force the DataGrid to recalculate and redraw the column widths?

When Spark DataGrid doesn't have a typicalItem, it uses the first dataProvider item as the typicalItem. If you change that, the DataGrid won't pick it up immediately. You can invalidate the current typicalItem using dataGrid.invalidateTypicalItem().

Materialized view with selected columns on target

Hi,
I want to create a materialized view fast refresh with only selected columns on the target database like for example, i'm having a table ABC with 10 columns on the source database, i've table XYZ with 25 columns on the target database. I want to refresh only 20 columns of XYZ table with 20 columns of the ABC table.
Is this possible?
If yes, could you please share information or any weblinks or metalink notes.
Thanks,

The documentation is located at http://tahiti.oracle.com.
I would give you the answer but, quite frankly, this is such a basic docs question you really need to read this yourself.
If, after reading the docs, you still have a question post the link to the document you read and explain what about the document is causing confusion.
And to be perfectly clear about my feelings ... when I taught Oracle at university ... if one of my students had asked that question my response would have been ... "Did you try it?"
And "No" would not be an acceptable answer.

Advanced table with many columns

I have a advanced table with more or less 60 columns and the table is greater than the header image. How can I align the table with the advanced table?
Thanks.
Edited by: Vieira on 3-giu-2010 1.01

bedabrata wrote:
Hi,
I had a question. Can we fix the size of the lolumns in a table region. I was unable to do so using the property width of the items. So tried the below code:
// Set width for all the columns
OATableBean tableBean = (OATableBean)webBean.findIndexedChildRecursive("HeaderDetailsRN") ;
OAMessageStyledTextBean ColumnStyle;
ColumnStyle = (OAMessageStyledTextBean)tableBean.findIndexedChildRecursive("SblOrderNumber");
CSSStyle cellUpperCase = new CSSStyle();
cellUpperCase.setProperty("width","150px");
if (ColumnStyle != null)
ColumnStyle.setInlineStyle(cellUpperCase);
Now the width is getting set for the cloumn which has values (data) but it is not setting the width for columns which has null value or no data.
Could any of you guide me on how to set the width for every column of a table region.
Thanks
BedabrataOpen an other topic for this. ;-)
Edited by: Vieira on 3-giu-2010 9.27

Flex Advanced DataGrid with dynamic grouping

Can we implement something similiar as in below link, using flex 3.
http://demos.telerik.com/aspnet-ajax/grid/examples/groupby/grouploadmodeclient/defaultcs.a spx
I am not sure if flex 3 allows grouping of columns based on drag - drop component. Plus how to show the pictorial view of grouped columns, same as in the above example.
Any help greatly appreciated.

This blog post seems to answer your question:
http://blog.flexgeek.in/2007/06/tips-tricks-adding-a-combobox-to-a-datagrid-header-as-head errenderer/
http://omalraj.com/2009/06/flex-datagrid-header-with-a-combobox-filter/
http://franto.com/custom-header-in-datagrid-part-2/
http://blogs.adobe.com/aharui/2007/03/thinking_about_item_renderers_1.html
If this post answers your question or helps, please mark it as such. Thanks!
http://www.stardustsystems.com
Adobe Flex Development and Support Services

Advanced query with dynamic columns

Hi All,
I have a table with structure shown below. I need to pull data out of this table and the output should be in a format indicated by the select statement below. I have the following questions and I appreciate if someone could help.
1. I need to extract 3 years(current year + 2 historical years) worth of data out of this table dynamically(I can't hardcode year). How can I modify the code below so that the select statement returns 3 years worth of data dynamically?
2. Should I instead calculate each quarter in the select statement using "CASE"? Would this be a good idea and i wouldn't have to deal with the PIVOT function?
3. The reason I am asking about #2 is because our application requires the out field names to be as CYQ1, CYQ2, CYQ3, CYQ4, LYQ1, LYQ2, LYQ3, LYQ4 etc.(LY = last year). I am not sure if this is possible to do in Pivot table. Could the method outlines
in #2 be the best practice in my situation?
Thanks in advance for your thoughts.
DECLARE @Trans_Summary TABLE(
[Account_ID] [int] NULL,
[End_Date] DATE NULL,
[Amount] [float] NULL,
[Customer_ID] [int] NULL)
INSERT @Trans_Summary VALUES(1, '03/31/2013', 100, 123)
INSERT @Trans_Summary VALUES( 1, '01/31/2013', 200, 123)
INSERT @Trans_Summary VALUES( 1, '06/30/2013', 100, 123)
INSERT @Trans_Summary VALUES( 1, '09/30/2013', 100, 123)
INSERT @Trans_Summary VALUES( 1, '12/31/2013', 100, 123)
SELECT *
FROM @Trans_Summary
PIVOT(SUM([Amount])FOR End_Date IN ([2013-01-31], [2013-03-31], [2013-06-30], [2013-09-30], [2013-12-31])) AS TT

Yes, you should always use CASE for pivots and never use the PIVOT keyword. The latter gives you somewhat shorter query text, for very little gain.
As I understand what you are asking for, you can easily do it with CASE without dynamic SQL:
DECLARE @year char(4) = '2013',
@q1 = char(4) = '0331',
@q2 = char(4) = '0630',
@q3 = char(4) = '0930',
@q4 = char(4) = '1231'
SELECT Account_ID,
   SUM(CASE WHEN End_Date = @year + @q1 THEN Amount END) AS CYQ1,
   SUM(CASE WHEN End_Date = dateadd(YEAR, -1, @year + @q1) THEN Amount END) AS LYQ1,
FROM   tbl
GROUP BY Account_ID
Well, maybe that can be done with PIVOT as well, but I have never learnt how to use the keyword. It just looks difficult to me. And useless.
Erland Sommarskog, SQL Server MVP, [email protected]

DataGrid with Image column rendering problem

Hi,
I'm having trouble in getting images displayed on a datagrid
column. If I scroll down and then scroll up the scrollbar, the
images are rendering fine. The source of the image is Bitmap which
is generated at run time. Any idea how to solve this problem? Any
help is greatly appreciated.
Thanks,
Jeesmon
My component code is pasted below
"Attach Code"
<?xml version="1.0" encoding="utf-8"?>
<mx:DataGrid xmlns:mx="
http://www.adobe.com/2006/mxml"
creationComplete="init()" dataProvider="{cardDataProvider}">
<mx:Script>
<![CDATA[
import mx.core.UIComponent;
import
org.eclipse.higgins.cardselector.filters.CustomDropShadowFilter;
import mx.collections.ArrayCollection;
import mx.controls.Image;
import org.eclipse.higgins.cardselector.icard.Card;
[Bindable]
private var cardDataProvider:ArrayCollection;
private var _cards:Array;
public function get cards():Object {
return this._cards;
public function set cards(value:Object):void {
this._cards = value as Array;
if(this._cards != null && this._cards.length > 0)
buildDataProviderArray();
private function buildDataProviderArray():void {
var dataArray:ArrayCollection = new ArrayCollection();
for(var i:int = 0; i<this._cards.length; i++) {
var card:Card = this._cards
dataArray.addItem(card);
this.cardDataProvider = dataArray;
private function init():void {
this.styleName = "CardsBox";
this.width = 200;
this.rowHeight = 120;
this.headerHeight = 0;
this.liveScrolling = true;
this.filters = [new CustomDropShadowFilter(0x333322, 55,
2).getInstance()];
]]>
</mx:Script>
<mx:columns>
<mx:DataGridColumn sortable="false" editable="false"
resizable="false">
<mx:itemRenderer>
<mx:Component>
<mx:VBox width="100%" height="100%" paddingLeft="5"
paddingRight="5" paddingTop="5" paddingBottom="0"
verticalGap="0">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
private function getBitmap(value:*) : DisplayObject
var result:DisplayObject;
var loader:Loader = Loader(Image(value).getChildAt(0));
if(loader.contentLoaderInfo.childAllowsParent)
if(loader.content is Bitmap)
var bitmap:Bitmap = Bitmap(loader.content);
result = new
Bitmap(bitmap.bitmapData,bitmap.pixelSnapping,bitmap.smoothing);
return result;
]]>
</mx:Script>
<mx:Image source="{getBitmap(data.getImage())}"
height="80" width="120" styleName="CardsBoxImage" />
<mx:Label text="{data.getName()}"
styleName="CardsBoxLabel" width="100%" />
</mx:VBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>

I solved the issue by adding creationComplete event handler
for the image in the datagrid column
<mx:Image source="{data.getImage()}" height="80"
width="120" styleName="CardsBoxImage"
creationComplete="event.target.source =
getBitmap(event.target.source)" />

Datagrid with calculated column

Hi all,
Does anyone know how or where I might learn to create a
calculated field in a DataGrid?
Flex 2

There are several ways, depending on what you want.
Easiest is to use a labelFunction() instead of a dataField.
A custom item renderer is another way.
Yet a third way is to have your dataProvider be a collection
of custom value objects, one of which is the calculated value.
Tracy

Advanced Datagrid with average and sum at bottom

I have an xml file which has the following elements
<element>
     <price>12</price>
     <type>b</type>
     <name>name1</name>
</element>
I'l like to have a tree which is first sorted by name, and then by type. Then it should sum up and average all the prices of each of those elements which have the same type and name.
Any advice on how I can achieve this is highly appreciated.
thanks

Hi,
try this.
data w_cat type lvc_s_fcat,
t_cat type lvc_t_fcat.
w_cat-fieldname = 'CITYFROM'.
w_cat-do_sum = 'X'
APPEND w_cat TO t_cat.
CLEAR w_cat.
CALL METHOD r_alv_grid->set_table_for_first_display
    EXPORTING
   i_buffer_active               =
   i_bypassing_buffer            =
   i_consistency_check           =
      i_structure_name              = 'FS'
   is_variant                    =
   i_save                        =
   i_default                     = 'X'
      is_layout                     = w_lay
   is_print                      =
   it_special_groups             =
   it_toolbar_excluding          =
   it_hyperlink                  =
   it_alv_graphics               =
   it_except_qinfo               =
   ir_salv_adapter               =
    CHANGING
      it_outtab                     = itab
      it_fieldcatalog               = t_cat
EXCEPTIONS
   invalid_parameter_combination = 1
   program_error                 = 2
   too_many_lines                = 3
   others                        = 4

Grouping issue on Advanced DataGrid

Hello,
I've got an advanced datagrid with 5 columns, The number_Group column has data like this...
1-10
1-10
11-20
11-20
11-20
21-30
21-30
21-30
41-50
101-110
When I apply Grouping, it works as expected but the 101-110 group is displayed before the 11-20 group.
I've tried to set groupingField.numeric = true but that screws it up even more... because 11-20 isn't a number I'm guessing.
Does anyone know a way around this? I could change the number_Group column to this...
1
1
11
11
21
41
101
and groupingField.numeric = true should work but I need the Grouping display to show 1-10, 11-20. Perhaps I can intercept this and modify it?
Anyone got any ideas?
Thanks,
Nick

Hi, Nicky
u can solve this problem by grouping function.
u create ur dataprovider like
private var myData:ArrayCollection = new ArrayCollection([{data1:1, data2:10,......},
{data1:1, data2:21, ....}]);
u declare the grouping function in following manner
private function myGroupLabelFunction(item:Object, column:AdvancedDataGridColumn):String
// here u write ur logice to formatting ur dispalying data in advance grid.
//suppose ur labelfield of datagrid are data1,data2, data3 respectively.
return item.data1+"-"+item.data2;
if u do in this way i think it will work.
if u sucess then give me mark.
Thanks
Niranjan

SortcompareFunction is not working properly for more than 1 column in advanced datagrid

Hi Guys,
I am using an advanced datagrid with groupingCollection.
I have more than 1 grouped column. How ever I am using 2 sort compare function to sort date and time.
The problem is when I am trying to sort date its workinf properly then when I jump to time column its not working and sorting few rows only inside the column but not the entire column. samething happen when I sort time first and the date is not sorting.
any help will be really appriciable .
Thanks in advance.

In our application we tend to use views to return appropriate values for a particular user.
For example (we do building inspections) the publication item sql is like
select * from inspection_sites where id in (select site_id from v_pda_bi_sites where bi_id=:bi_id)
The view acts like a dynamic parameter table (in this cases looks at experience level, status of sites, and responsibility allocations). Once the driving views are tuned this works quite efficiently, and as the dependant tables for the publication item automatically includes all of the tables in the driving view, the object gets refreshed if there is any change to any of them, even if the site details themselves have not changed

Mx_internal_uid problem with advanced datagrid

I have a XML structure like this:
<Projekti ...attributes>
<Tehtava ....attributes />
<Tehtava ...attributes />
</Projekti>
<Projekti...>
...etc
And I'm populating advanced datagrid with this hierarchial
data, so I can get a tree view in datagrid where there is Projekti
-nodes and inside them is the Tehtava-nodes.
Problem:
When I bind the XML, and the hierarchialdata (that is created
from the XML) flex automatically adds
<mx_internal_uid>a324235351514......</mx_internal_uid>
-nodes inside of the Projekti-nodes. And this causes empty folders
added in a tree view when user clicks them.
Is there a simple way to:
a) prevent thos uid-nodes being created?
b) filter thos <mx_internal_uid>-nodes out from the
dataprovider of the advanced datagrid?

I know this is way after-the-fact, but I just ran into this problem myself today. I found that it generated the mx_internal_uid if the node I was selecting was an XMLList instead of XML. A simple cast fixed the problem.
P.S. "And this causes empty folders added into a tree view when user clicks on them." makes perfect sense when you're using the XML inside a <mx:Tree>. As soon as you select the item (whether by clicking or programmatically), you get extra nodes in the tree.

(Advanced)DataGrid with selectable columns

Similar Messages

Maybe you are looking for