CODEWITHSUNDEEP
apache-flexflex3
Lalit
Lalit

Reputation: 4957

DataGrid extra space in last column

Trying to remove the extra space in last column, i tried various approaches nothing works, Whenever scroll bar appears, grid behave in strange way notice the last column width is 70 but somehow grid is adding some extra space.

Last column has extra space even after makeing it not resizable

    <?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:Script>
        <![CDATA[
            import mx.events.ResizeEvent;
            import mx.collections.IViewCursor;
            import mx.collections.ArrayCollection;
            import mx.rpc.events.ResultEvent;
            import mx.controls.dataGridClasses.DataGridColumn;
            import mx.managers.CursorManager;

            [Bindable]
            private var itemAC:Array = [
                {name:"ABC", quantity:5, color:"Red", size:54, hasLogo:true},
                {name:"ABC1", quantity:6, color:"Green", size:46, hasLogo:false}
                ];

        ]]>
    </mx:Script>
    <mx:Canvas width="25%" height="45%"  backgroundColor="red" horizontalCenter="0"
               verticalCenter="0" id="stuff" verticalScrollPolicy="off" horizontalScrollPolicy="off">
        <mx:DataGrid height="100%" width="100%" id="dg" dataProvider="{itemAC}"
                     horizontalScrollPolicy="auto">
            <mx:columns>
                <mx:DataGridColumn width="70" dataField="name"/>
                <mx:DataGridColumn width="70"  dataField="quantity"/>
                <mx:DataGridColumn width="70"  dataField="color"/>
                <mx:DataGridColumn width="70"  dataField="size"/>
                <mx:DataGridColumn width="70"  dataField="hasLogo" resizable="false"/>
            </mx:columns>
        </mx:DataGrid>
    </mx:Canvas>

</mx:Application>

Upvotes: 3

Views: 2813

Answers (6)

user2730125
user2730125

Reputation: 11

I know it is coming a bit too late. But, better late than never.

I had the exact same problem and my solution is to add an empty dumb column on the right hand. It will take up the empty space, and give user a little wiggle room to resize the right most column.

//add an empty column at the right side
col = new AdvancedDataGridColumn("");
col.width = 80;
col.sortable = false;
col.draggable = false;
col.editable = false;

Upvotes: 1

Dev
Dev

Reputation: 1

I had a similar problem here.

Solution :

Extra Space is indeed because you have specified datagrid width = 100%

This was helpful with resizing the application to multiple resolutions.

<mx:Canvas id="datagridCanvas" width="25%" height="45%"  backgroundColor="red" horizontalCenter="0"
       verticalCenter="0" id="stuff" verticalScrollPolicy="off" horizontalScrollPolicy="off">
<mx:DataGrid height="100%" width="100%" id="dg" dataProvider="{itemAC}"
             horizontalScrollPolicy="auto" resizableColumns="false">
    <mx:columns>
        <mx:DataGridColumn minWidth="70" width="{datagridCanvas.width  * 0.2}" dataField="name"/>
        <mx:DataGridColumn minWidth="70" width="{datagridCanvas.width  * 0.2}" dataField="quantity"/>
        <mx:DataGridColumn minWidth="70" width="{datagridCanvas.width  * 0.2}" dataField="color"/>
        <mx:DataGridColumn minWidth="70" width="{datagridCanvas.width  * 0.2}" dataField="size"/>
        <mx:DataGridColumn minWidth="70" width="{datagridCanvas.width  * 0.2}" dataField="hasLogo"/>
    </mx:columns>
</mx:DataGrid>

Upvotes: 0

Nidhi
Nidhi

Reputation: 795

Try this horizontalScrollPolicy="off"

Upvotes: 0

Sagar Rawal
Sagar Rawal

Reputation: 1442

Don't give width to all of that leave the first one and you code will be similar like that.

<mx:Canvas width="25%" height="45%"  backgroundColor="red" horizontalCenter="0"
           verticalCenter="0" id="stuff" verticalScrollPolicy="off" horizontalScrollPolicy="off">
    <mx:DataGrid height="100%" width="100%" id="dg" dataProvider="{itemAC}"
                 horizontalScrollPolicy="auto" resizableColumns="false">
        <mx:columns>
            <mx:DataGridColumn width="70" dataField="name"/>
            <mx:DataGridColumn width="70"  dataField="quantity"/>
            <mx:DataGridColumn width="70"  dataField="color"/>
            <mx:DataGridColumn width="70"  dataField="size"/>
            <mx:DataGridColumn dataField="hasLogo"/>
        </mx:columns>
    </mx:DataGrid>
</mx:Canvas>

Problem is in resizable="false" that is replaced by the resizableColumns="false" in DataGrid.

this will definitely solve your problem.

Have @ Nice DAy.....

Upvotes: 1

Seeker
Seeker

Reputation: 2483

You are specifying the width of the datagrid as 100%. So it will occupy whole space available no matter what is the width of each column. Since you are making use of less space than the allocated one the remaining is simply appended at the end. So try to adjust the width as per your requirement

Here is the MXML which makes the Canvas being scrollable horizontally. and removing the width property of Datagrid

<mx:Canvas width="352" height="45%"  backgroundColor="red" horizontalCenter="0"
               verticalCenter="0" id="stuff" verticalScrollPolicy="off" horizontalScrollPolicy="auto">
        <mx:DataGrid height="100%" id="dg" dataProvider="{itemAC}"
                     horizontalScrollPolicy="auto">
            <mx:columns>
                <mx:DataGridColumn width="70" dataField="name"/>
                <mx:DataGridColumn width="70"  dataField="quantity"/>
                <mx:DataGridColumn width="70"  dataField="color"/>
                <mx:DataGridColumn width="70"  dataField="size"/>
                <mx:DataGridColumn width="70"  dataField="hasLogo" resizable="false"/>
            </mx:columns>
        </mx:DataGrid>
    </mx:Canvas>

Upvotes: 2

flexicious.com
flexicious.com

Reputation: 1671

Set datagrid width=350. If you do not want the horizontal scroll bar, set it to 360

Upvotes: 1

Related Questions