Dynamically add remove columns in a datagrid

I had a hard time figuring out how to add remove columns  dynamically from a datagrid and after lots of code iterations I have reached a workable scenario. Right now the code is fairly easy to understand and can be enhanced to a gr8 deal,

I still need to add other important functionalities.

  • Close headerrenderer for each column
  • delete entire row functionality
  • user defined default state
  • and much more…

Dint get the time to complete this post but someday i will surely post a complete working APP
by that time check out the code  USE AND MODIFY AS PLEASED!!!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
< ?xml version="1.0" encoding="utf-8"?>
<mx:application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" width="100%" height="100%" >
   
    <mx:hdividedbox height="100%" width="100%" dividerRelease="handleDivderRelease()">
    <mx:script>
        < ![CDATA[
            import mx.controls.CheckBox;
            import mx.controls.ComboBox;
            import mx.controls.dataGridClasses.DataGridColumn;
           
            public var counter : int = 0;
            public var conDataProvider : Array =[{label : "col1", data : "c1"},
                {label : "col2", data : "c2"},
                {label : "col3", data : "c3"},
                {label : "col4", data : "c4"},
                {label : "col5", data : "c5"},
                {label : "col6", data : "c6"}];
           
           
            private function hideShowColumns():void{
                var actualColumns:Array = ResultGrid.columns;
                var actualSelectedColumns:Array =  lstColumns.selectedItems;
                var dataGridColumn:DataGridColumn;
                var sDataField:String;
                var sDataFieldCur:String;
                var columnVisible:Boolean
                for (var i:int=0;i<actualColumns.length;i++)  {
                    columnVisible = false
                    dataGridColumn = actualColumns[i];
                    sDataField = dataGridColumn.dataField;
                    for (var j : int = 0; j < actualSelectedColumns.length; j++)  {
                        if(actualSelectedColumns[j] == null) continue;
                        sDataFieldCur = actualSelectedColumns[j].data;
                        if (sDataFieldCur == sDataField)  {
                            columnVisible = true;
                            break;
                        }
                    }      
                    if (columnVisible) {
                        dataGridColumn.visible = true;
                    }else  {
                        dataGridColumn.visible = false;
                    }
                }
            }
           
            private function selectAll():void{
                lstColumns.selectedIndices=[0,1,2,3,4,5];
                hideShowColumns();
            }
           
            private function clearAll():void{
                lstColumns.selectedIndices=[];
                hideShowColumns();
            }
           
            private function setDefault():void{
                lstColumns.selectedIndices=[0,1,2,3];
                hideShowColumns();
            }
           
            private function handleDivderRelease():void{
                if(counter == 0){
                    controlBox.width =0
                }else if(counter == 1){
                    controlBox.width =120
                }
                counter = (counter +1)%2;
            }
           
        ]]>
    </mx:script>
   
    <mx:vbox id="controlBox" height="100%" width="120" maxWidth="120"  verticalGap="0" horizontalScrollPolicy="off">
        <mx:label text="Selected columns" fontWeight="bold" />
        <mx:list height="100%" width="120" id="lstColumns" dataProvider="{conDataProvider}"
                 labelField="label" borderColor="#000000"
                 allowMultipleSelection="true" click="hideShowColumns()"
                 selectedIndices="[0,1,2,3]"/>
        <mx:textarea wordWrap="true" selectable="false" editable="false" borderStyle="none"
                     text="For multiple selection use ctrl/shift keys" width="120" />
        <mx:spacer height="5" />
        <mx:button label="Select All"  width="100%" click="selectAll()"/>
        <mx:button label="Default"  width="100%" click="setDefault()"/>
        <mx:button label="Clear All" width="100%" click="clearAll()"/>
    </mx:vbox>
    <mx:vbox height="100%" width="100%">
        <mx:datagrid height="100%" id="ResultGrid" selectedIndex="0" enabled="true" selectable="true" creationComplete="init()">
            <mx:columns>
                <mx:datagridcolumn headerText="col1" dataField="c1" visible="true" />
                <mx:datagridcolumn headerText="col2" dataField="c2" visible="true" />
                <mx:datagridcolumn headerText="col3" dataField="c3" visible="true" />
                <mx:datagridcolumn headerText="col4" dataField="c4" visible="true" />
                <mx:datagridcolumn headerText="col5" dataField="c5" visible="false" />
                <mx:datagridcolumn headerText="col6" dataField="c6" visible="false" />
            </mx:columns>
        </mx:datagrid>
    </mx:vbox>
</mx:hdividedbox>
</mx:application>

Related posts:

  1. Copy functionality in DataGrid
  2. Flex dataGrid default column sort
  3. Printing dataGrid in Flex
  4. Filter datagrid using a hslider
  5. Remove “Flex Data Visualization Trial” using actionscript

Tags: , , ,

This entry was posted on Friday, July 10th, 2009 at 7:46 am and is filed under flex, innovation, random, Usability. You can follow any comments to this entry through the RSS 2.0 feed. You can leave a comment, or trackback from your own site.

Leave a comment