6 Replies Latest reply on Jan 15, 2012 11:13 AM by GaryRogers87

    Cannot Set Width Of DataGrid Columns

    GaryRogers87

      I am getting very frustrated with the DataGrid and I cannot understand why it won't work. I followed the 'Build An Application In An Hour' tutorial by Adobe and finally managed to retrieve data from a database into a DataGrid, the data displays just fine, but all of the columns are the same width and will not change upon creation. Sure I can drag the column widths once the DataGrid has rendered, but you shouldn't have to do that. The columns aren't even wide enough to fit in the title of each column. The tutorial mentioned resizing the columns, but doesn't elaborate on how. I've manually gone into the <S:GridColumn> tags and entered things like width="800" to see no change. I changed the width of the DataGrid itself, I even tried setting the width to 100%. I also went into the 'Configure Columns' dialogue and then into advanced and set a minWidth, but it still didn't work, I even unchecked 're-size' and still got nothing. I've also tried various combinations of the aforementioned attempts.

       

      How hard can it be to set the width of a column???

       

      I should also mention that i'm using Adobe Flex Builder 4.5 for PHP.

        • 1. Re: Cannot Set Width Of DataGrid Columns
          jfb00 Level 3

          Hi,

          It is working for me. Please create a test sample so we can see the issue.

          Best,

           

          <?xml version="1.0" encoding="utf-8"?>

          <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

                         xmlns:s="library://ns.adobe.com/flex/spark"

                         xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" contentCreationComplete="init()">

              <fx:Declarations>

                  <!-- Place non-visual elements (e.g., services, value objects) here -->

              </fx:Declarations>

              <fx:Script>

                  <![CDATA[

                      private function init():void{

                          dg.width = 600;

                      }

                  ]]>

              </fx:Script>

              <s:DataGrid id="dg" x="10" y="10" requestedRowCount="4" >

                  <s:columns>

                      <s:ArrayList>

                          <s:GridColumn dataField="dataField1" headerText="Column 1" width="200"></s:GridColumn>

                          <s:GridColumn dataField="dataField2" headerText="Column 2" width="50"></s:GridColumn>

                          <s:GridColumn dataField="dataField3" headerText="Column 3" width="200"></s:GridColumn>

                          <s:GridColumn dataField="" headerText=""></s:GridColumn>

                      </s:ArrayList>

                  </s:columns>

                  <s:typicalItem>

                      <fx:Object dataField1="Sample Data" dataField2="Sample Data" dataField3="Sample Data"></fx:Object>

                  </s:typicalItem>

                  <s:ArrayList>

                      <fx:Object dataField1="data1" dataField2="data1" dataField3="data1"></fx:Object>

                      <fx:Object dataField1="data2" dataField2="data2" dataField3="data2"></fx:Object>

                      <fx:Object dataField1="data3" dataField2="data3" dataField3="data3"></fx:Object>

                      <fx:Object dataField1="data4" dataField2="data4" dataField3="data4"></fx:Object>

                  </s:ArrayList>

              </s:DataGrid>

          </s:Application>

          • 2. Re: Cannot Set Width Of DataGrid Columns
            archemedia Level 4

            Be sure to NOT set any width on the dataGrid itself, only on the columns

             

            Dany

            • 3. Re: Cannot Set Width Of DataGrid Columns
              GaryRogers87 Level 1

              Thanks for the replies and i'm very sorry that i'm late with mine.

               

              I see what you've done and it still does not work. Here's the datagrid code from a working application:

               

              <s:DataGrid id="empDg" includeIn="EmployeeDetails,Employees" left="50" top="130"

                                                      creationComplete="empDg_creationCompleteHandler(event)" requestedRowCount="4">

                                  <s:columns>

                                            <s:ArrayList>

                                                      <s:GridColumn dataField="firstname" headerText="First Name"

                                                                                      width.EmployeeDetails="50"></s:GridColumn>

                                                      <s:GridColumn dataField="lastname" headerText="Last Name"

                                                                                      width.EmployeeDetails="50"></s:GridColumn>

                                                      <s:GridColumn dataField="title" headerText="Title"

                                                                                      width.EmployeeDetails="50"></s:GridColumn>

                                                      <s:GridColumn dataField="cellphone" headerText="Cell Phone"

                                                                                      width.EmployeeDetails="50"></s:GridColumn>

                                                      <s:GridColumn dataField="email" headerText="Email"

                                                                                      width.EmployeeDetails="50"></s:GridColumn>

                                            </s:ArrayList>

                                  </s:columns>

                                  <s:typicalItem>

                                            <fx:Object id="id1" cellphone="cellphone1" city="city1" departmentid="departmentid1"

                                                                   email="email1" firstname="firstname1" lastname="lastname1" office="office1"

                                                                   officephone="officephone1" photofile="photofile1" state="state1"

                                                                   street="street1" title="title1" zipcode="zipcode1"></fx:Object>

                                  </s:typicalItem>

                                  <s:AsyncListView list="{getEmployeesResult.lastResult}"/>

                        </s:DataGrid>

               

              I tried your example and it worked, so i've no idea why mine isn't, unless i've missed something embarassingly obvious. Also i've only just added states to the applciation; it didn't work before or after them.

              • 4. Re: Cannot Set Width Of DataGrid Columns
                deepinus

                The correct way of setting width for columns in a datagrid is by using "typicalItem" property and specifying the width using dataItem instance fo all the colums you want to set the width.

                Example:

                <s: typcialItem>

                      <s: dataItem firstName="Christopher"

                                         lastName="Winchester"

                                         title="title"

                                         cellphone="123456789123"

                                         emial="abcabcabcabacbabab@abcabababab" />

                </s:typicalItem>

                 

                You do not need to specify width at column level if you are using typcialItem property.

                • 5. Re: Cannot Set Width Of DataGrid Columns
                  GaryRogers87 Level 1

                  deepinus, I modified the code in my post above yours to include your code and it has made no difference. I've tried that with both <s:dataItem> and <fx:Object> and it's still the same. I even set a function to set the width of the datagrid upon running the application. Still I got nothing.

                   

                  This is driving me insane and I cannot understand why this does not work at all.

                  • 6. Re: Cannot Set Width Of DataGrid Columns
                    GaryRogers87 Level 1

                    Alright, i've solved the problem and i'm very embarassed to say that it was the cache of my browser. It just wasn't showing my new saves, which is slightly worrying considering sometimes I need to change small values and run my application every 10 seconds to view the update.