ComponentOne FlexGrid for UWP
FlexGrid for UWP Quick Start / Step 2 of 3: Adding Data to the C1FlexGrid Application
In This Topic
    Step 2 of 3: Adding Data to the C1FlexGrid Application
    In This Topic

    In the previous step you created a new UWP-style project and added a C1FlexGrid control to the application, but the grid currently contains no data – if you run the application now you'll see a blank grid. In this step you'll continue by adding an XML data source to your project and binding the grid to the data source.

    To add a data source and bind the grid in Visual Studio, complete the following steps:

    1. In the Solution Explorer window, right-click the project and select Add | New Item.
    2. In the Add New Item dialog box, select XML File from the list of installed templates, name the file "Products.xml", and click Add to close the dialog box.

    The Products.xml file should now be included in your project, and should have opened automatically.

    1. Replace the existing text in the Products.xml file with the following XML markup and save the file:
    Markup
    Copy Code
    <?xml version="1.0" encoding="utf-8" ?>
    <Products>
      <Product Name="Chai" Category="Beverages" Unit="10 boxes x 20 bags" Price="18" />
      <Product Name="Chang" Category="Beverages" Unit="24 - 12 oz bottles" Price="19" />
      <Product Name="Aniseed Syrup" Category="Condiments" Unit="12 - 550 ml bottles" Price="10" />
      <Product Name="Chef Anton's Cajun Seasoning" Category="Condiments" Unit="48 - 6 oz jars" Price="22" />
      <Product Name="Chef Anton's Gumbo Mix" Category="Condiments" Unit="36 boxes" Price="21.35" />
      <Product Name="Grandma's Boysenberry Spread" Category="Condiments" Unit="12 - 8 oz jars" Price="25" />
      <Product Name="Uncle Bob's Organic Dried Pears" Category="Produce" Unit="12 - 1 lb pkgs." Price="30" />
      <Product Name="Northwoods Cranberry Sauce" Category="Condiments" Unit="12 - 12 oz jars" Price="40" />
      <Product Name="Mishi Kobe Niku" Category="Meat/Poultry" Unit="18 - 500 g pkgs." Price="97" />
      <Product Name="Ikura" Category="Seafood" Unit="12 - 200 ml jars" Price="31" />
      <Product Name="Queso Cabrales" Category="Dairy Products" Unit="1 kg pkg." Price="21" />
      <Product Name="Queso Manchego La Pastora" Category="Dairy Products" Unit="10 - 500 g pkgs." Price="38" />
      <Product Name="Konbu" Category="Seafood" Unit="2 kg box" Price="6" />
      <Product Name="Tofu" Category="Produce" Unit="40 - 100 g pkgs." Price="23.25" />
      <Product Name="Genen Shouyu" Category="Condiments" Unit="24 - 250 ml bottles" Price="15.5" />
      <Product Name="Pavlova" Category="Condiments" Unit="32 - 500 g boxes" Price="17.45" />
      <Product Name="Alice Mutton" Category="Meat/Poultry" Unit="20 - 1 kg tins" Price="39" />
      <Product Name="Carnarvon Tigers" Category="Seafood" Unit="16 kg pkg." Price="62.5" />
      <Product Name="Teatime Chocolate Biscuits" Category="Confections" Unit="10 boxes x 12 pieces" Price="9.2" />
      <Product Name="Sir Rodney's Marmalade" Category="Confections" Unit="30 gift boxes" Price="81" />
      <Product Name="Sir Rodney's Scones" Category="Confections" Unit="24 pkgs. x 4 pieces" Price="10" />
      <Product Name="Gustaf's Knäckebröd" Category="Grains/Cereals" Unit="24 - 500 g pkgs." Price="21" />
      <Product Name="Tunnbröd" Category="Grains/Cereals" Unit="12 - 250 g pkgs." Price="9" />
      <Product Name="Guaraná Fantástica" Category="Beverages" Unit="12 - 355 ml cans" Price="4.5" />
      <Product Name="NuNuCa Nuß-Nougat-Creme" Category="Confections" Unit="20 - 450 g glasses" Price="14" />
    </Products>
    

    This will add data taken from the Products table of the standard Microsoft Northwind database.

    1. Select View | Code to switch to Code view.
    1. Add code to the page's constructor so that it appears like the following:
    Visual Basic
    Copy Code
    Public Sub New()
        Me.InitializeComponent()
        LoadData()
    End Sub
    

    C#
    Copy Code
    public MainPage()
    {
        this.InitializeComponent();
        LoadData();
    }
    
    1. Add the following code just below the page's constructor and within the main class:
    Visual Basic
    Copy Code
     ' Create the Product class.
        Public Class Product
            Private _Name As String
            Public Property Name() As String
                Get
                    Return _Name
                End Get
                Set(ByVal value As String)
                    _Name = value
                End Set
            End Property
            Private _Category As String
            Public Property Category() As String
                Get
                    Return _Category
                End Get
                Set(ByVal value As String)
                    _Category = value
                End Set
            End Property
            Private _Unit As String
            Public Property Unit() As String
                Get
                    Return _Unit
                End Get
                Set(ByVal value As String)
                    _Unit = value
                End Set
            End Property
            Private _Price As String
            Public Property Price() As String
                Get
                    Return _Price
                End Get
                Set(ByVal value As String)
                    _Price = value
                End Set
            End Property
        End Class
        Private Sub LoadData()
            ' Initialize the XML data source.
            Dim ProductsDoc As XDocument = XDocument.Load("Products.xml")
            Dim data As IEnumerable(Of Product) = (From Product In ProductsDoc.Descendants("Product") Select New Product With {.Name = Product.Attribute("Name").Value, .Category = Product.Attribute("Category").Value, .Unit = Product.Attribute("Unit").Value, .Price = Product.Attribute("Price").Value}).ToList
            ' Bind the C1FlexGrid control to the data source.
            flexgrid1.ItemsSource = data
        End Sub
    

    C#
    Copy Code
    // Create the Product class.
    public class Product
    {
        public string Name { get; set; }
        public string Category { get; set; }
        public string Unit { get; set; }
        public string Price { get; set; }
    }
    private void LoadData()
    {
        // Initialize the XML data source.
        XDocument ProductsDoc = XDocument.Load("Products.xml");
        List<Product> data = ( from Product in ProductsDoc.Descendants( "Product" )
            select new Product
            {
                Name = Product.Attribute("Name").Value,
                Category = Product.Attribute("Category").Value,
                Unit = Product.Attribute("Unit").Value,
                Price = Product.Attribute("Price").Value
             }
        ).ToList();
        // Bind the C1FlexGrid control to the data source.
        flexgrid1.ItemsSource = data;
    }
    

    In this step you completed adding data to your application. In the next step you'll run the application and observe run-time interactions.