New to Telerik UI for WinFormsStart a free 30-day trial

Binding to Data

Updated over 6 months ago

Data binding provides a way to bind the display of data in a RadCardView to a data source. Three properties control the data binding:

  • DataSource: Specifies the source of the data to be bound

  • DisplayMember: Specifies the particular data to be displayed in a RadCardView

  • ValueMember: Specifies the particular data to be returned as the value of a RadCardView

Design Time Data Binding

A complete tutorial for connecting to the Northwind database from the Visual Studio designer in available in the Getting Started article.

Data Binding Programatically

The example below will demonstrate how to bind RadCardView to a collection of models. As a result the control will automatically create CardViewItem objects for all public properties of the model.

Figure 1: RadCardView Bound at Run-Time

WinForms RadCardView Bound at Run-Time

Bind RadCardView

C#
BindingList<CardViewModel> dataSource = new BindingList<CardViewModel>()
{
    new CardViewModel("1", "Nancy Davolio","507 - 20th Ave. E.Apt. 2A", DateTime.Parse("12/8/1948", CultureInfo.InvariantCulture)),
    new CardViewModel("2", "Andrew Fuller","908 W. Capital Way", DateTime.Parse("2/19/1952", CultureInfo.InvariantCulture)),
    new CardViewModel("3", "Janet Leverling","722 Moss Bay Blvd.", DateTime.Parse("8/30/1963", CultureInfo.InvariantCulture)),
    new CardViewModel("4", "Margaret Peacock","110 Old Redmond Rd.", DateTime.Parse("9/19/1937", CultureInfo.InvariantCulture))
};
this.radCardView1.DataSource = dataSource;

Sample Data Object

C#
public class CardViewModel : INotifyPropertyChanged
{
    private string id;
    private string name;
    private string address;
    private DateTime dateOfBirth;
    public event PropertyChangedEventHandler PropertyChanged;
    public CardViewModel(string id, string name, string address, DateTime dateOfBirth)
    {
        this.id = id;
        this.name = name;
        this.address = address;
        this.dateOfBirth = dateOfBirth;
    }
    public string Id
    {
        get
        {
            return this.id;
        }
        set
        {
            if (this.id != value)
            {
                this.id = value;
                OnPropertyChanged("Id");
            }
        }
    }
    public string Name
    {
        get
        {
            return this.name;
        }
        set
        {
            if (this.name != value)
            {
                this.name = value;
                OnPropertyChanged("Name");
            }
        }
    }
    public string Address
    {
        get
        {
            return this.address;
        }
        set
        {
            if (this.address != value)
            {
                this.address = value;
                OnPropertyChanged("Address");
            }
        }
    }
    public DateTime DateOfBirth
    {
        get
        {
            return this.dateOfBirth;
        }
        set
        {
            if (this.dateOfBirth != value)
            {
                this.dateOfBirth = value;
                OnPropertyChanged("DateOfBirth");
            }
        }
    }
    protected virtual void OnPropertyChanged(string propertyName)
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

See Also