0

js:dataGrid shows blanks instead of data.

The dataGrid component:

<j:VGroup id="VGroupContainer">
                <j:Button text="Load Data" width="200" height="60" click="OpenData(event)"/>

                <js:DataGrid  rowHeight="40" y="200" visible="true" id="dataGrid"  width="330">

                    <js:columns>
                            <js:DataGridColumn label="Name" dataField="Name" id="nameField" columnWidth="130"/>
                            <js:DataGridColumn label="SO" dataField="SOname" id="soField" columnWidth="100"/>
                            <js:DataGridColumn label="Email" dataField="Email" id="emailField" columnWidth="100"/>
                    </js:columns>

                </js:DataGrid>
</j:VGroup>

The Function to Dynamically Update the data. As context, I will be using HTTPservice calls to retrieve data from the server and update the datagrid accordingly. For testing purposes I am using the following:

protected function OpenData(event:MouseEvent):void
        {


                    var obj:Object=new Object();

                    obj.Name = "record 1"
                    obj.SOname = "SO1"
                    obj.Email = "email 1"
                    var obj2:Object=new Object();

                    obj2.Name = "record 2"
                    obj2.SOname = "SO2"
                    obj2.Email = "email 2"
                    var obj3:Object=new Object();

                    obj3.Name = "record 3"
                    obj3.SOname = "SO3"
                    obj3.Email = "email 3"

                    arrData.addItem(obj)
                    arrData.addItem(obj2)
                    arrData.addItem(obj3)

              dataGrid.dataProvider = arrData;

        }

Whenever I set the dataProvider to a value, the dataGrid seems to have the correct rows but no data shows up. You can actually click and select a row but visually none of the cells show up:

After Dataprovider is updated

Has anyone worked with the Datagrids in apache royale lately? I am wondering if I am even using the correct component. I am migrating from s:Datagrids and never had this issue.

Bash
  • 23
  • 2

1 Answers1

0

You're using the basic implementation which is designed to be very lightweight but misses some of the functionalities that came with the flex implementation built-in.

If you're migrating from spark it might be easier to use the spark emulation components [1].

If you want to retain a lightweight implementation and add functionality as you go along, you can just add a change notifier [2].

[1] https://github.com/apache/royale-asjs/blob/develop/examples/mxroyale/tourdeflexmodules/src/spark/controls/DataGridExample.mxml

[2] https://github.com/apache/royale-asjs/blob/9db99c214d6ca9c300a11489d2421cf6920e9de4/examples/royale/ListExample/src/main/royale/MyInitialView.mxml#L178

yishayw
  • 151
  • 2
  • Thanks for the response. To clarify: Yes I am indeed migrating spark. I set "config": "flex" in the asconfig file (Using VSCode). I did try using the mx:Datagrid however. it compiles correctly but shows up blank. I found an error on the browser console though: Uncaught Error: assert" columnContainerClass for DataGrid must be set! . I am not sure whats causing it. Not sure if I have missed anything in setting up the config files/project correctly (to use the spark/mx components) – Bash Sep 26 '19 at 10:17
  • Does the example [1] run for you? Did you try adding a change notifier [2]? If you have a simple test case, the most helpful thing would be to open an issue [3]. [3] https://github.com/apache/royale-asjs/issues – yishayw Sep 27 '19 at 07:51
  • I did try [1] but it was showing up a blank space with the error in console after compilation. I am working on approach [2] today and will share my experience. – Bash Sep 28 '19 at 19:20