Advanced Datagrid from SharePoint data

Step 1: Create a sharepoint list with the following data in it.

Step 2: Retrieving custom list data as XML in flex. In order to create the
advanced datagrid with grouping (Column grouping lets you collect multiple
columns under a single column heading)

<?xml version=”1.0″ encoding=”utf-8″?><mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”
layout=”absolute” initialize=”initializeHandler();” ><mx:Script>
<![CDATA[
import mx.controls.Alert
import mx.controls.dataGridClasses.DataGridColumn
import mx.collections.*;
private var FinalXML:XMLList
[Bindable]
private var dpFlat:ArrayCollection=new ArrayCollection();
private function initializeHandler():void
{
var XMLLoader:URLLoader=
new URLLoader(new URLRequest(“<sharepointLini>/_vti_bin/owssvr.dll?Cmd=Display&List=%7BA6FFA525%2D0AC1%2D411E%2DA1F4%2D687402312595%7D&XMLDATA=TRUE”))
XMLLoader.addEventListener(Event.COMPLETE,openXMLValues)
function openXMLValues(e:Event):void
{
var XMLL:XML=new XML(e.target.data)
var rsNS:Namespace = XMLL.namespace(“rs”);
var zNS:Namespace = XMLL.namespace(“z”);
var sNS:Namespace = XMLL.namespace(“s”);
FinalXML=new XMLList(XMLL.rsNS::data.zNS::row)
var Obj:Object
for(var i:int=0;i<FinalXML.length();i++)
{
var attNames:XMLList = FinalXML[0].attributes();
Obj=new Object();
for (var i:int=0; i<attNames.length(); i++)
{
Obj[attNames[i].name().toString()]=attNames[i]
}
dpFlat.addItem(Obj)
}
}

}

]]>
</mx:Script>

<mx:Panel title=”AdvancedDataGrid Control Example”
height=”300″ width=”400″ layout=”horizontal”
paddingTop=”10″ paddingBottom=”10″ paddingLeft=”10″ paddingRight=”10″>

<mx:AdvancedDataGrid id=”myADG”>

<mx:dataProvider>
<mx:GroupingCollection2 id=”gc” source=”{dpFlat}”>
<mx:grouping>
<mx:Grouping>
<mx:GroupingField name=”ows_LinkTitle”/>
<mx:GroupingField name=”ows_Category2″/>
</mx:Grouping>
</mx:grouping>
</mx:GroupingCollection2>
</mx:dataProvider>

<mx:columns>
<mx:AdvancedDataGridColumn dataField=”ows_LinkTitle” headerText=”Category1″/>
<mx:AdvancedDataGridColumn dataField=”ows_Category2″ headerText=”Category2″/>
<mx:AdvancedDataGridColumn dataField=”ows_Value” headerText=”Value”/>
</mx:columns>
</mx:AdvancedDataGrid>
</mx:Panel>
</mx:Application>

Notes: XMLList values should be converted to ArrayCollection. ArrayCollection
will hold Objects. Grouping in advanced datagrid cannot be XMLList without
having a hierarchial data.

If XML value is like Below
<item value=”server”>
<citem value=”Integrity” >
<sitem value=”580i” />
<sitem value=”670i” />
</citem>
</item>

It can be treated as Hierarchical data and can be set as datasource to advanced
Datagrid. In this case, Group is very simple.

But Sharepoint gives the XML structure as

<z:row ows_Attachments=”0″ ows_LinkTitle=”Server” ows_Category2=”ProLiant”ows_Value=”580i” />
<z:row ows_Attachments=”0″ ows_LinkTitle=”Server” ows_Category2=”ProLiant”ows_Value=”670i”/>
<z:row ows_Attachments=”0″ ows_LinkTitle=”Server” ows_Category2=”Integrity”ows_Value=”580i”/>
<z:row ows_Attachments=”0″ ows_LinkTitle=”Server” ows_Category2=”Integrity”ows_Value=”780i2″/>

So this needs to be converted to either hierarchical XML structure or Array Collection like below dynamically

DP: var ArrayCollection=new ArrayCollection(
{ows_Attachments:”0″, ows_LinkTitle:”Server”,ows_Category2:”ProLiant”, ows_Value:”580i”}
{ows_Attachments:”0″, ows_LinkTitle:”Server”,ows_Category2:”ProLiant”, ows_Value:”670i”}
{ows_Attachments:”0″, ows_LinkTitle:”Server”,ows_Category2:”Integrity”, ows_Value:”580i”}
{ows_Attachments:”0″, ows_LinkTitle:”Server”,ows_Category2:”Integrity”, ows_Value:”780i”}
)

for(var i:int=0;i<FinalXML.length();i++)
{
var attNames:XMLList = FinalXML[0].attributes(); // It retrieves all attributes from the xml node
Obj=new Object();
for (var i:int=0; i<attNames.length(); i++) // Loop through attributes and create object with identifier name as attribute
{
Obj[attNames[i].name().toString()]=attNames[i] // Creating identifier in object and assign the attribute values from xml.
}
dpFlat.addItem(Obj) // add Object into the ArrayCollection (sample ows_Attachments:”0″, ows_LinkTitle:”Server”, ows_Category2:”ProLiant”, ows_Value:”580i” )

Output

Advanced Datagrid from SharePoint data

One Reply to “Advanced Datagrid from SharePoint data”

Leave a Reply Cancel reply