[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 206
  • Last Modified:

DATAGRID VERTICAL BAR

gys need to implement a vertical bar to avoid having to go to the last column in datagrid to display the first column

I can not utrapassar datagrid width of 341 px

I WANT TO SEE ALL RECORDS OF THE FIRST COLUMN, BUT I HAVE TO GO TO THE LAST COLUMN ONLY BECAUSE THERE IS A BAR TO SCROLL DOWN VERTICAL GRID ROLLING DOWN BUT I CAN NOT SEE THE REGISTRATION OF FIRST COLUMN, THE BAR IS IN PLACE AS CANVAS THE BAR AND THE MOVE IT MOVE RECORDS datagrid?

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="absolute"
        verticalAlign="middle"
        backgroundColor="white" color="#000000" fontWeight="bold">

    <mx:ArrayCollection id="arrColl">
        <mx:source>
            <mx:Array>
                <mx:Object label="Student A" score="85" />
                <mx:Object label="Student B" score="48" />
                <mx:Object label="Student C" score="71" />
                <mx:Object label="Student D" score="88" />
                <mx:Object label="Student E" score="24" />
                <mx:Object label="Student F" score="64" />
                <mx:Object label="Student G" score="76" />
                <mx:Object label="Student H" score="76" />
                <mx:Object label="Student I" score="93" />
                <mx:Object label="Student J" score="88" />
                <mx:Object label="Student K" score="48" />
                <mx:Object label="Student L" score="76" />
            </mx:Array>
        </mx:source>
    </mx:ArrayCollection>
    <mx:Canvas x="163" y="297" width="341" height="189">
        <mx:DataGrid id="dataGrid0" dataProvider="{arrColl}" x="0" y="0" width="1000">
            <mx:columns>
                <mx:DataGridColumn dataField="label"  />
                <mx:DataGridColumn dataField="score" editable="true" />
                <mx:DataGridColumn dataField="label"  />
                <mx:DataGridColumn dataField="score" editable="true" />
                <mx:DataGridColumn dataField="label"  />
                <mx:DataGridColumn dataField="score" editable="true" />
                <mx:DataGridColumn dataField="label"  />
                <mx:DataGridColumn dataField="score" editable="true" />
                <mx:DataGridColumn dataField="label"  />
                <mx:DataGridColumn dataField="score" editable="true" />
            </mx:columns>
        </mx:DataGrid>
    </mx:Canvas>
    <mx:Label x="163" y="80" text="PROBLEM 1"/>
    <mx:Label x="163" y="271" text="SOLUTION PARCIAL"/>
    <mx:DataGrid id="dataGrid" dataProvider="{arrColl}" x="163" y="106" width="341">
        <mx:columns>
            <mx:DataGridColumn dataField="label"  />
            <mx:DataGridColumn dataField="score" editable="true" />
            <mx:DataGridColumn dataField="label"  />
            <mx:DataGridColumn dataField="score" editable="true" />
            <mx:DataGridColumn dataField="label"  />
            <mx:DataGridColumn dataField="score" editable="true" />
            <mx:DataGridColumn dataField="label"  />
            <mx:DataGridColumn dataField="score" editable="true" />
            <mx:DataGridColumn dataField="label"  />
            <mx:DataGridColumn dataField="score" editable="true" />
        </mx:columns>
    </mx:DataGrid>

</mx:Application>

Open in new window

0
eduardo12fox
Asked:
eduardo12fox
  • 2
1 Solution
 
dgofmanCommented:
Your problem solving easily by setting explicite width for DataGrid Columns and enabling horizontalScrollPosition (auto) and removing Canvas wrapper, but I have two questions:
1) Why are you using Canvas (es)?
2) Why you are hardcoding x and y instead using VBox container?

....

	<mx:DataGrid id="dataGrid0" dataProvider="{arrColl}" 
				 x="163" y="297" width="341" height="189" horizontalScrollPolicy="auto">
		<mx:columns>
			<mx:DataGridColumn dataField="label" width="50"/>
			<mx:DataGridColumn dataField="score" editable="true" width="50"/>
			<mx:DataGridColumn dataField="label"  width="50"/>
			<mx:DataGridColumn dataField="score" editable="true" width="50"/>
			<mx:DataGridColumn dataField="label" width="50" />
			<mx:DataGridColumn dataField="score" editable="true" width="50"/>
			<mx:DataGridColumn dataField="label"  width="50"/>
			<mx:DataGridColumn dataField="score" editable="true" width="50"/>
			<mx:DataGridColumn dataField="label" width="50" />
			<mx:DataGridColumn dataField="score" editable="true" width="50"/>
		</mx:columns>
	</mx:DataGrid>
	<mx:Label x="163" y="80" text="PROBLEM 1"/>
	<mx:Label x="163" y="271" text="SOLUTION PARCIAL"/>

....

Open in new window

0
 
dgofmanCommented:
	<mx:DataGrid id="dataGrid0" dataProvider="{arrColl}" 
				 x="163" y="297" width="341" height="189" horizontalScrollPolicy="auto">
		<mx:columns>
			<mx:DataGridColumn dataField="label" width="50"/>
			<mx:DataGridColumn dataField="score" editable="true" width="50"/>
			<mx:DataGridColumn dataField="label"  width="50"/>
			<mx:DataGridColumn dataField="score" editable="true" width="50"/>
			<mx:DataGridColumn dataField="label" width="50" />
			<mx:DataGridColumn dataField="score" editable="true" width="50"/>
			<mx:DataGridColumn dataField="label"  width="50"/>
			<mx:DataGridColumn dataField="score" editable="true" width="50"/>
			<mx:DataGridColumn dataField="label" width="50" />
			<mx:DataGridColumn dataField="score" editable="true" width="50"/>
		</mx:columns>
	</mx:DataGrid>
	<mx:Label x="163" y="80" text="PROBLEM 1"/>
	<mx:Label x="163" y="271" text="SOLUTION PARCIAL"/>
	<mx:DataGrid id="dataGrid" dataProvider="{arrColl}" x="163" y="106" width="341" horizontalScrollPolicy="auto">
		<mx:columns>
			<mx:DataGridColumn dataField="label"  />
			<mx:DataGridColumn dataField="score" editable="true" />
			<mx:DataGridColumn dataField="label"  />
			<mx:DataGridColumn dataField="score" editable="true" />
			<mx:DataGridColumn dataField="label"  />
			<mx:DataGridColumn dataField="score" editable="true" />
			<mx:DataGridColumn dataField="label"  />
			<mx:DataGridColumn dataField="score" editable="true" />
			<mx:DataGridColumn dataField="label"  />
			<mx:DataGridColumn dataField="score" editable="true" />
		</mx:columns>
	</mx:DataGrid>

Open in new window

0
 
eduardo12foxAuthor Commented:
dgofman Thank you very much was what I needed! I can always rely on their solutions Thanks!
0

Featured Post

Put Machine Learning to Work--Protect Your Clients

Machine learning means Smarter Cybersecurity™ Solutions.
As technology continues to advance, managing and analyzing massive data sets just can’t be accomplished by humans alone. It requires huge amounts of memory and storage, as well as high-speed processing of the cloud.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now