All geek questions in one place

Dynamically change Datagrid column width in FLEX

Is it possible to change the width of a datagrid column dynamically by clicking on the column border to display a full row that is too long to display and needs to be scrolled? If so, how?

In addition, how can we guarantee that the column width changes dynamically depending on the number of characters / line length; as many times the data is too large to display. Is it possible to set the column width to take into account the length of the data before displaying on the datagrid?

+3
source share
4 answers

So I had a similar problem and this is what I found. If you installed:

horizontalScrollPolicy="off"

DataGrid. , "" "", "". , http://junleashed.wordpress.com/2008/07/10/flex-datagridcolumn-width-management/. , , , .

+2

, , :

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"
    creationComplete="onComplete();">

    <mx:Script>
        <![CDATA[
            // imports:
            import mx.events.FlexEvent;
            import mx.core.UIComponent;
            import mx.controls.dataGridClasses.DataGridColumn;
            import mx.controls.Text;
            import mx.utils.ObjectUtil;
            import mx.controls.Label;
            import mx.collections.ArrayCollection;
            // data provider:
            [Bindable] private var dp:ArrayCollection = new ArrayCollection();

            private function onComplete():void {
                // populate data provider here
                // to avoid calcMaxLengths execution when the app is created:
                dp = new ArrayCollection(
                    [
                        { col1: "Short", col2: "Other column 1" },
                        { col1: "Some long string", col2: "Other column 2" },
                        { col1: "Short", col2: "Other column 3" },
                        { col1: "Short", col2: "Other column 4" },
                        { col1: "The longest value in this column", col2: "Other column 5" },
                        { col1: "Short", col2: "Other column 6" },
                        { col1: "Short", col2: "Other column 7" }
                    ]
                );
            }

            // this is going to be executed whenever the data provider changes:
            [Bindable("dataChange")]
            private function calcMaxLengths(input:ArrayCollection):ArrayCollection {
                // if there are items in the DP:
                if ( input.length > 0 ) {
                    // and no SPECIAL child exists:
                    if ( getChildByName("$someTempUICToRemoveAfterFinished") == null ) {
                        // create new SPECIAL child
                        // this is required to call measureText
                        // if you use custom data grid item renderer
                        // then create instance of it instead of UIComponent:
                        var uic:UIComponent = new UIComponent();
                        // do not show and do not mess with the sizes:
                        uic.includeInLayout = false;
                        uic.visible = false;
                        // name it to leverage get getChildByName method:
                        uic.name = "$someTempUICToRemoveAfterFinished";
                        // add event listener:
                        uic.addEventListener(FlexEvent.CREATION_COMPLETE, onTempUICCreated);
                        // add to parent:
                        addChild(uic);
                    }
                }
                // return an input:
                return input;
            }

            // called when SPECIAL child is created:
            private function onTempUICCreated(event:FlexEvent):void {
                // keep the ref to the SPECIAL child:
                var renderer:UIComponent = UIComponent(event.target);
                // output - this will contain max size for each column:
                var maxLengths:Object = {};
                // temp variables:
                var key:String = "";
                var i:int=0;
                // for each item in the DP:
                for ( i=0; i<dp.length; i++ ) {
                    var o:Object = dp.getItemAt(i);
                    // for each key in the DP row:
                    for ( key in o ) {
                        // if the output doesn't have current key yet create it and set to 0:
                        if ( !maxLengths.hasOwnProperty(key) ) {
                            maxLengths[key] = 0;
                        }
                        // check if it simple object (may cause unexpected issues for Boolean):
                        if ( ObjectUtil.isSimple(o[key]) ) {
                            // measure the text:
                            var cellMetrics:TextLineMetrics = renderer.measureText(o[key]+"");
                            // and if the width is greater than longest found up to now:
                            if ( cellMetrics.width > maxLengths[key] ) {
                                // set it as the longest one:
                                maxLengths[key] = cellMetrics.width;
                            }
                        }
                    }
                }

                // apply column sizes:
                for ( key in maxLengths ) {
                    for ( i=0; i<dg.columnCount; i++ ) {
                        // if the column actually exists:
                        if ( DataGridColumn(dg.columns[i]).dataField == key ) {
                            // set size + some constant margin
                            DataGridColumn(dg.columns[i]).width = Number(maxLengths[key]) + 12;
                        }
                    }
                }
                // cleanup:
                removeChild(getChildByName("$someTempUICToRemoveAfterFinished"));
            }

        ]]>
    </mx:Script>

    <mx:DataGrid id="dg" horizontalScrollPolicy="on" dataProvider="{calcMaxLengths(dp)}" width="400">
        <mx:columns>
            <mx:DataGridColumn dataField="col1" width="40" />
            <mx:DataGridColumn dataField="col2" width="100" />
        </mx:columns>
    </mx:DataGrid>

</mx:WindowedApplication>
+1

, , , , DataGrid, 

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import mx.core.UITextField;
import mx.controls.dataGridClasses.DataGridItemRenderer;

public function optimiseGridColumns(dg:DataGrid):void {
                        var dgCol:DataGridColumn;
                        var renderer:UITextField;
                        var tf:TextFormat;
                        var col:int;

                        if (dg.columnCount > 0 && dg.dataProvider != null) {
                        // initialize widths array
                               var widths:Array = new Array (dg.columnCount);
                                for (col = 0; col < widths.length; ++col) {
                                        widths[col] = -1;
                                }

                        // go through each data item in the grid, estimate
                        // the width of the text in pixels
                                for each (var item:Object in dg.dataProvider) {
                                        for (col = 0; col < widths.length; ++col) {
                                                renderer = new DataGridItemRenderer();
                                                // Must add to datagrid as child so that it inherits
                                                // properties essential for text width estimation,
                                                // such as font size
                                                dg.addChild(renderer);

                                                dgCol = dg.columns[col] as DataGridColumn;
                                                renderer.text = dgCol.itemToLabel(item);
                                                widths[col] = Math.max(renderer.measuredWidth + 10,widths[col]);

                                                // remove renderer from datagrid when we're done
                                                dg.removeChild(renderer);
                                        }
                                }

                                // go through headers in the grid, estimate the width of
                                // the text in pixels, assuming the text is bold
                                for (col = 0; col < widths.length; ++col) {
                                        // it ok to reuse renderer, but I chose not
                                        // to for safety reasons. Optimize if needed.
                                        renderer = new DataGridItemRenderer();

                                        // Must add to datagrid as child so that it inherits
                                        // properties essential for text width estimation,
                                        // such as font size
                                        dg.addChild(renderer);

                                        dgCol = dg.columns[col] as DataGridColumn;
                                        renderer.text = dgCol.headerText;

                                        tf = renderer.getTextFormat();
                                        tf.bold = true;
                                        renderer.setTextFormat (tf);

                                        widths[col] = Math.max(renderer.measuredWidth + 25, widths[col]);

                                        // remove renderer from datagrid when we're done
                                        dg.removeChild(renderer);
                                }

                                // set width of columns to determined values
                                for (col = 0; col < widths.length; ++col)
                                {
                                        if (widths[col] != -1)
                                        {
                                                dg.columns[col].width = widths[col];
                                        }
                                }
                        }
                } 

]]>
</mx:Script>
    <mx:XMLList id="employees">
        <employee>
            <name>Christina Coenraets</name>
            <phone>555-219-2270</phone>
            <email>ccoenraets@fictitious.com</email>
            <active>true</active>
        </employee>
        <employee>
            <name>Joanne Wall</name>
            <phone>555-219-2012</phone>
            <email>jwall@fictitious.com</email>
            <active>true</active>
        </employee>
        <employee>
            <name>Maurice Smith</name>
            <phone>555-219-2012</phone>
            <email>maurice@fictitious.com</email>
            <active>false</active>
        </employee>
        <employee>
            <name>Mary Jones</name>
            <phone>555-219-2000</phone>
            <email>mjones@fictitious.com</email>
            <active>true</active>
        </employee>
    </mx:XMLList>
        <mx:DataGrid id="dg1" width="100%" height="100%" rowCount="5" dataProvider="{employees}" creationComplete="optimiseGridColumns(dg1)">
            <mx:columns>
                <mx:DataGridColumn dataField="name" headerText="Name"/>
                <mx:DataGridColumn dataField="phone" headerText="Phone"/>
                <mx:DataGridColumn dataField="email" headerText="Email"/>
            </mx:columns>
        </mx:DataGrid>

</mx:Application>
+1

For a Gridview control, you can collapse the SelectedRowStyle property and set Wrap to True.

0
source

Source: https://habr.com/ru/post/1710601/

More articles:


All Articles