Loading Data from XML

In order to bind the RadGridView to a XML you will need to convert the XML to a collection and then to bind that collection using the ItemsSource property of RadGridView. This tutorial will show you how to do this.

The final result should look like the snapshot below:

Telerik Silverlight DataGrid PopulatingWithDataLoadFromXml 010

  • Below is a simple XML declaration, used in this tutorial:

<Items> 
    <XmlNodeItem Team="Barcelona" Country="Spain"/> 
    <XmlNodeItem Team="Juventus" Country="Italy"/> 
    <XmlNodeItem Team="Inter" Country="Italy"/> 
    <XmlNodeItem Team="Ac Milan" Country="Italy"/> 
    <XmlNodeItem Team="Real M" Country="Spain"/> 
    <XmlNodeItem Team="Arsenal" Country="England"/> 
    <XmlNodeItem Team="Manchester U" Country="England"/> 
    <XmlNodeItem Team="Bayern" Country="Germany"/> 
    <XmlNodeItem Team="Porto" Country="Portugal"/> 
    <XmlNodeItem Team="Liverpool" Country="England"/> 
    <XmlNodeItem Team="Ajax" Country="Holland"/> 
    <XmlNodeItem Team="Olimpic M" Country="France"/> 
</Items> 
  • Create a new class named XmlNodeItem. The class is pretty simple and it represents a separate node from the XML document. Its properties are Team and Country. Both of the properties are of type string. Here is the source code:

public class XmlNodeItem 
{ 
    [XmlAttribute(AttributeName = "Team")] 
    public string Team 
    { 
        get; 
        set; 
    } 
    [XmlAttribute(AttributeName = "Country")] 
    public string Country 
    { 
        get; 
        set; 
    } 
} 
Public Class XmlNodeItem 
    Private _Team As String 
    <XmlAttribute(AttributeName := "Team")> 
    Public Property Team() As String 
        Get 
            Return _Team 
        End Get 
        Set(ByVal value As String) 
            _Team = value 
        End Set 
    End Property 
 
    Private _Country As String 
    <XmlAttribute(AttributeName := "Country")> 
    Public Property Country() As String 
        Get 
            Return _Country 
        End Get 
        Set(ByVal value As String) 
            _Country = value 
        End Set 
    End Property 
End Class 
  • Create a new class named XmlNodeItemList, which derives from ObservableCollection of XmlNodeItem. This is a collection that will be created from the XML file. RadGridView will be bound to this collection.

[XmlRoot(ElementName = "Items")] 
public class XmlNodeItemList : ObservableCollection<XmlNodeItem> 
{ 
    public void AddRange(IEnumerable<XmlNodeItem> range) 
    { 
        foreach (XmlNodeItem node in range) 
        { 
            this.Add(node); 
        } 
    } 
} 
<XmlRoot(ElementName := "Items")> 
Public Class XmlNodeItemList 
    Inherits ObservableCollection(Of XmlNodeItem) 
    Public Sub AddRange(ByVal range As IEnumerable(Of XmlNodeItem)) 
        For Each node As XmlNodeItem In range 
            Me.Add(node) 
        Next 
    End Sub 
End Class 
  • Create a new class named RadGridViewXmlDataSource, which derives from XmlNodeItemList. Practically, this will be the data source (the model) for the RadGridView. The class takes a path to the XML file and deserialize the data in the private method RetrieveData.

public class RadGridViewXmlDataSource : XmlNodeItemList 
{ 
    private string source; 
    public string Source 
    { 
        get 
        { 
            return this.source; 
        } 
        set 
        { 
            this.source = value; 
            AddRange(RetrieveData(Application.GetResourceStream(new Uri(value, UriKind.Relative)).Stream)); 
            AddRange(RetrieveData(File.Open(value, FileMode.Open))); 
        } 
    } 
    private XmlNodeItemList RetrieveData(Stream xmlStream) 
    { 
        XmlSerializer serializer = new XmlSerializer(typeof(XmlNodeItemList)); 
        StreamReader reader = new StreamReader(xmlStream); 
        XmlNodeItemList list = (XmlNodeItemList)serializer.Deserialize(reader); 
        return list; 
    } 
} 
Public Class RadGridViewXmlDataSource 
    Inherits XmlNodeItemList 
    Private m_source As String 
 
    Public Property Source() As String 
        Get 
            Return Me.m_source 
        End Get 
        Set(ByVal value As String) 
            Me.m_source = value 
            AddRange(RetrieveData(Application.GetResourceStream(New Uri(value, UriKind.Relative)).Stream)) 
        End Set 
    End Property 
 
    Private Function RetrieveData(ByVal xmlStream As Stream) As XmlNodeItemList 
        Dim serializer As New XmlSerializer(GetType(XmlNodeItemList)) 
        Dim reader As New StreamReader(xmlStream) 
        Dim list As XmlNodeItemList = DirectCast(serializer.Deserialize(reader), XmlNodeItemList) 
        Return list 
    End Function 
End Class 
  • The next step is to declare the RadGridViewXmlDataSource as a resource in your application.

<UserControl.Resources> 
    <local:RadGridViewXmlDataSource x:Key="DataSource" Source="RadGridViewBindingToXml.xml"/> 
    <XmlDataProvider x:Key="loadingDataFromXml"> 
        <x:XData> 
            <!-- #region gridview-loading-data-from-xml_0 --> 
            <Items> 
                <XmlNodeItem Team="Barcelona" Country="Spain"/> 
                <XmlNodeItem Team="Juventus" Country="Italy"/> 
                <XmlNodeItem Team="Inter" Country="Italy"/> 
                <XmlNodeItem Team="Ac Milan" Country="Italy"/> 
                <XmlNodeItem Team="Real M" Country="Spain"/> 
                <XmlNodeItem Team="Arsenal" Country="England"/> 
                <XmlNodeItem Team="Manchester U" Country="England"/> 
                <XmlNodeItem Team="Bayern" Country="Germany"/> 
                <XmlNodeItem Team="Porto" Country="Portugal"/> 
                <XmlNodeItem Team="Liverpool" Country="England"/> 
                <XmlNodeItem Team="Ajax" Country="Holland"/> 
                <XmlNodeItem Team="Olimpic M" Country="France"/> 
            </Items> 
  • Update your RadGridView declaration - set the ItemsSource property.

<telerik:RadGridView x:Name="radGridView" ItemsSource="{Binding Source={StaticResource DataSource}}"/> 
Run your demo, the result can be seen on the next picture:

Telerik Silverlight DataGrid PopulatingWithDataLoadFromXml 020

If you need to define the columns manually read the topic Defining Columns.

See Also

In this article