Infragistics logo
메뉴
.NET and JavaScript UI Controls
Version

Binding Local Data Source in XamDataGrid

This topic is designed to familiarize you with the concept of binding local data source, as it relates to the XamDataGrid control.

In this topic

This topic contains the following sections

Required Background

The following topics are prerequisites to understanding this topic:

Topic Purpose

This topic provides basic steps required for adding the XamDataGrid control to your view and populating it with sample data.

Local Data

This example shows implementation of a local data source that contains a simple collection of Month objects, with each object exposing several properties, including: Number, Name, Days, and Quarter. This class also exposes a single static method that you will use to populate the XamDataGrid with Month objects.

In C#:

using System.Collections.Generic;

namespace Infragistics.Data
{
    public class MonthsList : List<Month>
    {
        public MonthsList()
        {
            var list = Month.GenerateList();
            this.AddRange(list);
        }
    }
    public class Month
    {
        public Month()
        {
        }
        public string Name { get; set; }
        public int Number { get; set; }
        public int Days { get; set; }
        public string Quarter { get; set; }

        public static List<Month> GenerateList()
        {
            string[] names = {
                "January", "February", "March", "April",
                "May", "June", "July", "August", "September",
                "October", "November", "December"
            };
            int[] days = {
                31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31
            };
            var items = new List<Month>();
            for (int i = 0; i < 12; i++)
            {
                Month monthItem = new Month();
                monthItem.Name = names[i];
                monthItem.Days = days[i];
                monthItem.Number = i + 1;
                monthItem.Quarter = "Q" + ((i / 3) + 1);
                items.Add(monthItem);
            }
            return items;
        }
    }
}

Binding Data

  1. Create a new class file in your project and call it Month and paste the above implementation of the Month class into this new class file, replacing its contents.

  1. Create an instance of the XamDataGrid control in main view of your project and use its ItemsSource property to populate it with sample data as demonstrated in the following sample code.

In XAML:

xmlns:grids="clr-namespace:Infragistics.XamarinForms.Controls.Grids;assembly=Infragistics.XF.DataGrid"
xmlns:local="clr-namespace:Infragistics.Data;assembly=YourAppName"
...
<grids:XamDataGrid x:Name="DataGrid" AutoGenerateColumns="False" >
    <grids:XamDataGrid.ItemsSource>
        <local:MonthsList />
    </grids:XamDataGrid.ItemsSource>
</grids:XamDataGrid>

In C#:

using Infragistics.XamarinForms.Controls.Grids;
using Infragistics.Data;
...
var DataGrid = new XamDataGrid();
DataGrid.AutoGenerateColumns = false;
DataGrid.ItemsSource = Month.GenerateList();

  1. Create two instances of the TextColumn for string properties and two instances of NumericColumn for numeric properties of data items.

In XAML:

<grids:XamDataGrid.Columns>
    <grids:TextColumn PropertyPath="Quarter" />
    <grids:TextColumn PropertyPath="Name" />
    <grids:NumericColumn PropertyPath="Number" />
    <grids:NumericColumn PropertyPath="Days" />
</grids:XamDataGrid.Columns>

In C#:

var column1 = new TextColumn();
column1.PropertyPath = "Quarter";
var column2 = new TextColumn();
column2.PropertyPath = "Name";

var column3 = new NumericColumn();
column3.PropertyPath = "Number";
var column4 = new NumericColumn();
column3.PropertyPath = "Days";

DataGrid.Columns.Add(column1);
DataGrid.Columns.Add(column2);
DataGrid.Columns.Add(column3);
DataGrid.Columns.Add(column4);

  1. Save and run your application to verify the result.

Your application will display a XamDataGrid control that contains four Column types: Name, Number, Days and Quarter and will be populated with 12 rows, each representing one Month object.

Getting started with Databinding 1.png

Related Content

The following table lists topics that are related to this topic:

Topic Purpose

This topic provides information on supported column types in the XamDataGrid control.

This topic provides code examples on working with columns in the XamDataGrid control.

This topic provides code examples on binding remote data to the XamDataGrid control.