Using XML in a datagrid

PMembrey
PMembrey used Ask the Experts™
on
Hi,

Following on from my question here : http://www.experts-exchange.com/OS/Linux/Q_25086060.html#a26413885

I now want to expand on the solution so that content is displayed in an Advanced Datagrid.

I would be quite happy for an expansion on the previous example...
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®

Commented:
Hi,

I think this link will help you for that.

http://livedocs.adobe.com/flex/3/html/help.html?content=advdatagrid_07.html

Thanks,
Vindys

Author

Commented:
Hi,

I did play with that example once before and didn't have much luck. I seem to be having one of those weeks :-)

Really though, for the 500, I'm looking for a dinky example like the last one you wrote :-)

Commented:
Using Dataset to binding xml to Datagrid control
DataSet ds = new DataSet();
ds.ReadXml(Server.MapPath("books.xml"),XmlReadMode.InferSchema);
this.DataGrid1.DataSource = ds;
this.DataGrid1.DataBind();
Success in ‘20 With a Profitable Pricing Strategy

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Commented:
Hi,

I don't think you need advancedDatagrid for this data anyway. Datagrid will be good enough.

Thanks,
Vindys
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical" 
        backgroundColor="white" creationComplete="init()">
                <mx:Script>
                        <![CDATA[
                    private var userList:XMLList;
                    private function init():void{
						var loader:URLLoader = new URLLoader(new URLRequest("../assets/xml/forms.xml"));
                        loader.addEventListener(Event.COMPLETE, callbackGetXMLRequest);  
                                }
					private function callbackGetXMLRequest(event:Event):void {
                        var response:XML = new XML(event.target.data);
                        userList = response.User;
                        tree.dataProvider = userList;
                        myDataGrid.dataProvider = userList;
                        
                    }
                    private function treeLabel(item:Object):String
                    {
        
                        var node:XML = XML(item);
                        switch (node.localName())
                        {
                                case "User":
                                case "Name":
                                case "UserName":
                                case "Password":
                                {
                                        return node.localName();
                                }
                        }
                        return node.toString();
                    }
                                
                        ]]>
                </mx:Script>
                <mx:Tree id="tree" top="72" left="50"
        labelFunction="treeLabel"
         height="224" width="179"/>
         
         <mx:DataGrid id="myDataGrid">
            <mx:columns>
                <mx:DataGridColumn dataField="Name" headerText="Name"/>
                <mx:DataGridColumn dataField="UserName" headerText="UserName"/>
                <mx:DataGridColumn dataField="Password" headerText="Password"/>
            </mx:columns>
        </mx:DataGrid>
               

</mx:Application>

Open in new window

Author

Commented:
Hi Vindys80,

I want to end up with something like this:

http://livedocs.adobe.com/flex/3/html/help.html?content=advdatagrid_10.html

For example, if I add Groups to the XML file, I want to have a Users icon at the top, which when clicked would show the groups, then I can drill down to the users.

Hopefully I'm making sense :-)

Commented:
I made some change for your xml.

<TestData>
      <Users>
            <Group Group="Management">
                  <User Group="User" Name="Peter Membrey" UserName="pmembrey" Password="flex"/>
                  <User Group="User" Name="Peter Membrey1" UserName="pmembrey1" Password="flex1"/>
                  <User Group="User" Name="Peter Membrey2" UserName="pmembrey2" Password="flex2"/>
            </Group>
            <Group Group="Programmers">
                  <User Group="User" Name="Peter Membrey" UserName="pmembrey" Password="flex"/>
                  <User Group="User" Name="Peter Membrey1" UserName="pmembrey1" Password="flex1"/>
                  <User Group="User" Name="Peter Membrey2" UserName="pmembrey2" Password="flex2"/>
            </Group>
            <Group Group="Human Resource">
                  <User Group="User" Name="Peter Membrey" UserName="pmembrey" Password="flex"/>
                  <User Group="User" Name="Peter Membrey1" UserName="pmembrey1" Password="flex1"/>
                  <User Group="User" Name="Peter Membrey2" UserName="pmembrey2" Password="flex2"/>
            </Group>
      </Users>
</TestData>


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical" 
        backgroundColor="white" creationComplete="init()">
                <mx:Script>
                        <![CDATA[
                        	import mx.collections.HierarchicalData;
                                private var userList:XMLList;
                                private function init():void{
                                        var loader:URLLoader = new URLLoader(new URLRequest("../assets/xml/forms.xml"));
                        loader.addEventListener(Event.COMPLETE, callbackGetXMLRequest);  
                                }
                                private function callbackGetXMLRequest(event:Event):void {
                        var response:XML = new XML(event.target.data);
                        userList = response.Users;
                        adg.dataProvider=new HierarchicalData(userList);
                    }
                        ]]>
                </mx:Script>
               <mx:AdvancedDataGrid width="100%" height="100%" 
        id="adg">
        <mx:columns>
            <mx:AdvancedDataGridColumn dataField="@Group" 
                headerText="Group"/>
            <mx:AdvancedDataGridColumn dataField="@Name"
                headerText="Name"/>
            <mx:AdvancedDataGridColumn dataField="@UserName" 
                headerText="UserName"/>
            <mx:AdvancedDataGridColumn dataField="@Password" 
                headerText="Password"/>
        </mx:columns>
    </mx:AdvancedDataGrid>  

</mx:Application>

Open in new window

Author

Commented:
Hi,

Does everything in the XML file have to be displayed in the grid?

If you have more than two "layers", does it have to display data?  For example, the name set on the second level, is also displayed in the second column of the data grid...

How do you determine what's displayed, what isn't and where it goes?

Commented:
It depends on dataField which is set. So Name is displayed in second level as we have given @Name as dataField for that column.

Author

Commented:
Yeah, I get that, but I can't see how to make more flexible changes

For example with the following::

Country -> Brand -> Store -> Line

I wouldn't want Brand to show up in any column although I would want it to show up in the tree...

I guess I'm missing something obvious here :)

Commented:
"I wouldn't want Brand to show up in any column although I would want it to show up in the tree..." I am not so clear what you mean. I think you want one more layer in the tree which doesnt have the name.


<TestData>
      <Users>
            <Group Group="Management">
            	<AnotherGroup>
                  <User Group="User" Name="Peter Membrey" UserName="pmembrey" Password="flex"/>
                  <User Group="User" Name="Peter Membrey1" UserName="pmembrey1" Password="flex1"/>
                  <User Group="User" Name="Peter Membrey2" UserName="pmembrey2" Password="flex2"/>
               </AnotherGroup>
            </Group>
            <Group Group="Programmers">
            	<AnotherGroup>
                  <User Group="User" Name="Peter Membrey" UserName="pmembrey" Password="flex"/>
                  <User Group="User" Name="Peter Membrey1" UserName="pmembrey1" Password="flex1"/>
                  <User Group="User" Name="Peter Membrey2" UserName="pmembrey2" Password="flex2"/>
                </AnotherGroup>
            </Group>
            <Group Group="Human Resource">
            	<AnotherGroup>
                  <User Group="User" Name="Peter Membrey" UserName="pmembrey" Password="flex"/>
                  <User Group="User" Name="Peter Membrey1" UserName="pmembrey1" Password="flex1"/>
                  <User Group="User" Name="Peter Membrey2" UserName="pmembrey2" Password="flex2"/>
               </AnotherGroup>
            </Group>
      </Users>
</TestData>

Open in new window

Author

Commented:
Hi,

That's close, but I want the tree item to be labelled :-)

So in this example when you click "Management" there is now an empty folder on the next line, which you click and then it shows you the rest of the data. What I want though is for that folder to be named but I don't want it as a column.

Specifically, I guess what I'm saying is that I want the structure of the tree, but I'd like more flexibility in what data is displayed next to it. At present, it seems like the structure is tied very closely to the columns in the grid...

Commented:
First column will have the name from dataField Group. So if you add that attribute for any node, it will show that data in group field. So you may change your xml to


<TestData>
      <Users>
            <Group Group="Management">
            	<AnotherGroup Group="MyNewGroup1">
                  <User Group="User" Name="Peter Membrey" UserName="pmembrey" Password="flex"/>
                  <User Group="User" Name="Peter Membrey1" UserName="pmembrey1" Password="flex1"/>
                  <User Group="User" Name="Peter Membrey2" UserName="pmembrey2" Password="flex2"/>
               </AnotherGroup>
            </Group>
            <Group Group="Programmers">
            	<AnotherGroup Group="MyNewGroup2">
                  <User Group="User" Name="Peter Membrey" UserName="pmembrey" Password="flex"/>
                  <User Group="User" Name="Peter Membrey1" UserName="pmembrey1" Password="flex1"/>
                  <User Group="User" Name="Peter Membrey2" UserName="pmembrey2" Password="flex2"/>
                </AnotherGroup>
            </Group>
            <Group Group="Human Resource">
            	<AnotherGroup Group="MyNewGroup3">
                  <User Group="User" Name="Peter Membrey" UserName="pmembrey" Password="flex"/>
                  <User Group="User" Name="Peter Membrey1" UserName="pmembrey1" Password="flex1"/>
                  <User Group="User" Name="Peter Membrey2" UserName="pmembrey2" Password="flex2"/>
               </AnotherGroup>
            </Group>
      </Users>
</TestData>

Open in new window

Author

Commented:
Hmmm, okay I can see how that would work. Fortunately I'm the one generating the XML, but I'm trying to keep it as clean and non specific as possible :-)

Author

Commented:
Now if only there was a better default icon that a blank page (that looks like the image is missing) ;-)

Commented:
Thanks for accepting

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial