5

Today, I decided to test spark datagrid instead of mx:Datatagrid. But a problem appear: I didn't found wordWrap option, do you know how to solve that?

<s:DataGrid id="scrollableDG" borderVisible="true"  editable="true"
                     width="100%" height="{bgSuivi.height-90-90}">

 //Setup columns for scrollable datagrid
    var gridColumn:GridColumn = new GridColumn();
    gridColumn.dataField="scRub2";
    gridColumn.headerText = "Rub1";
    gridColumn.width = 80;
    gridColumn.editable = true;
    columnLst.addItem(gridColumn);

    var gridColumn:GridColumn = new GridColumn();
    gridColumn.dataField="scRub3";
    gridColumn.headerText = "Rub1";
    gridColumn.width = 80;
    gridColumn.editable = true;
    columnLst.addItem(gridColumn);

    var gridColumn:GridColumn = new GridColumn();
    gridColumn.dataField="scRub4";
    gridColumn.headerText = "Rub1";
    gridColumn.width = 80;
    gridColumn.editable = true;
    columnLst.addItem(gridColumn);
    scrollableDG.columns = columnLst;

Thanks

Flex60460
  • 933
  • 2
  • 18
  • 49
  • I think you mean "Spark DataGrid **instead** of MX DataGrid" -- rather than putting a Spark DataGrid *inside* an MX DataGrid. Your code example seems to confirm this, but thought I would clarify for everyone. You may want to edit the question to reflect this :) – Sunil D. May 24 '12 at 17:12

3 Answers3

8

The original poster didn't select an answer I'm going to combine the previous two into one super answr! :P

You can enable word wrapping on all columns on the Spark DataGrid with variableRowHeight:

<s:DataGrid variableRowHeight="true">
</s:DataGrid>

Or you can enable word wrapping on an individual column by using the word wrap property on the default GridColumn item renderer:

<s:GridColumn dataField="fields.description" headerText="Description" >
    <s:itemRenderer>
        <fx:Component>
            <s:DefaultGridItemRenderer wordWrap="true"/>
        </fx:Component>
    </s:itemRenderer>
</s:GridColumn>

Furthermore, in the Grid Column example I'd recommend setting a width if you want to prevent horizontal scroll bars:

<s:GridColumn width="{dataGrid.width-column1.width-column3.width}" dataField="fields.description" headerText="Description" >
    <s:itemRenderer>
        <fx:Component>
            <s:DefaultGridItemRenderer wordWrap="true"/>
        </fx:Component>
    </s:itemRenderer>
</s:GridColumn>

I'm finding I have to set both variable row height to true and set the column width to get the behavior I'm looking for.

1.21 gigawatts
  • 16,517
  • 32
  • 123
  • 231
  • I am looking for somewhat same, thanks for sharing. But my another question is how to set wordWrap property to Column header. In case of long – Anil Chahal Mar 07 '14 at 10:23
0

[Edit]

Oops, my original answer was referring to the MX DataGridColumn component, not the Spark GridColumn. Revised answer...

The default item renderer for the grid is DataGridItemRenderer and it has a word wrap property that you need to set to true. Not sure, but you might also have to set the variableRowHeight property of the grid to true as well...

To do this in MXML, it would look something like this:

<s:DataGrid variableRowHeight="true">
    <s:itemRenderer>
        <fx:Component>
            <s:DataGridItemRenderer wordWrap="true" />
        </fx:Component>
    </s:itemRenderer>
</s:DataGrid>
Sunil D.
  • 17,983
  • 6
  • 53
  • 65
0

Until flex4.6, there is no s:DataGridItemRenderer, but there is mx:DataGridItemRenderer. So, the code would be:

<s:GridColumn headerText="foo" labelFunction="fooLabelFunction">
    <s:itemRenderer>
        <fx:Component>
            <mx:DataGridItemRenderer wordWrap="true" />
        </fx:Component>
    </s:itemRenderer>
</s:GridColumn>
Perception
  • 79,279
  • 19
  • 185
  • 195
allani
  • 1
  • 1
    I tried to use mx DataGridItemRenderer and it gives this error: TypeError: Error #1009: Cannot access a property or method of a null object reference. at spark.components::Group/addElement()[E:\dev\4.y\frameworks\projects\spark\src\spark\components\Group.as:1342] at spark.components.gridClasses::GridLayout/createTypicalItemRenderer()[E:\dev\4.y\frameworks\projects\spark\src\spark\components\gridClasses\GridLayout.as:748] at spark.components.gridClasses::GridLayout/updateTypicalCellSizes() – 1.21 gigawatts Sep 07 '12 at 19:57