Integration with DataGrid

Integrating InputPanel with ComponentOne's DataGrid or MS DataGrid is easy as both these controls come with a baked-in template, RowDetailsTemplate. Using this template, you can easily show the row details in a compact layout. You can interact with the template in the design view, and set binding in XAML view to implement integration.

The following image shows an InputPanel integrated with a data grid (C1DataGrid).

Perform the following steps to integrate InputPanel with ComponentOne DataGrid:

Set up the application
Create a data source
Integrate InputPanel with DataGrid

Set up the application

Create a WPF application and add the InputPanel control onto the designer.
Add C1.WPF.DataGrid dll in the References folder of your application.

Initialize the RowDetailsTemplate of the grid in XAML view and set binding property as illustrated.

XAML	Copy Code
<DataGrid Name="dataGrid"> <DataGrid.RowDetailsTemplate> <DataTemplate> <c1:C1InputPanel CurrentItem="{Binding .}" /> </DataTemplate> </DataGrid.RowDetailsTemplate> </DataGrid>

Create a data source

Create a Customer class to add records into the InputPanel, and an enumeration to accept values for Occupation field.

Visual Basic
C#

Visual Basic

Public Class Customer
    Public Property ID() As String
        Get
            Return m_ID
        End Get
        Set(value As String)
            m_ID = Value
        End Set
    End Property
    Private m_ID As String
    Public Property Country() As String
        Get
            Return m_Country
        End Get
        Set(value As String)
            m_Country = Value
        End Set
    End Property
    Private m_Country As String

    Public Property Name() As String
        Get
            Return m_Name
        End Get
        Set(value As String)
            m_Name = Value
        End Set
    End Property
    Private m_Name As String


    Public Property Age() As Integer
        Get
            Return m_Age
        End Get
        Set(value As Integer)
            m_Age = Value
        End Set
    End Property
    Private m_Age As Integer
    Public Property Weight() As Double
        Get
            Return m_Weight
        End Get
        Set(value As Double)
            m_Weight = Value
        End Set
    End Property
    Private m_Weight As Double
    Public Property Occupation() As Occupation
        Get
            Return m_Occupation
        End Get
        Set(value As Occupation)
            m_Occupation = Value
        End Set
    End Property
    Private m_Occupation As Occupation
    Public Property Phone() As String
        Get
            Return m_Phone
        End Get
        Set(value As String)
            m_Phone = Value
        End Set
    End Property
    Private m_Phone As String
    Public Property Salary() As Integer
        Get
            Return m_Salary
        End Get
        Set(value As Integer)
            m_Salary = Value
        End Set
    End Property
    Private m_Salary As Integer

    Public Sub New(id As String, country As String, _
                   name As String, age As Integer, weight As Double, _
                   occupation As Occupation, _
        phone As String, salary As Integer)
        Me.ID = id
        Me.Country = country
        Me.Name = name
        Me.Age = age
        Me.Weight = weight
        Me.Occupation = occupation
        Me.Phone = phone
        Me.Salary = salary
    End Sub
End Class

Public Enum Occupation
    Doctor
    Artist
    Educator
    Engineer
    Executive
    Other
End Enum

public class Customer
{
    public string ID { get; set; }
    public string Country { get; set; }

    public string Name { get; set; }


    public int Age { get; set; }
    public double Weight { get; set; }
    public Occupation Occupation { get; set; }
    public string Phone { get; set; }
    public int Salary { get; set; }

    public Customer(string id, string country, string name, 
        int age, double weight, Occupation occupation, string phone, int salary)
    {
        this.ID = id;
        this.Country = country;
        this.Name = name;
        this.Age = age;
        this.Weight = weight;
        this.Occupation = occupation;
        this.Phone = phone;
        this.Salary = salary;
    }
}

public enum Occupation
{
    Doctor,
    Artist,
    Educator,
    Engineer,
    Executive,
    Other
}

Switch to the MainWindow.xaml.cs file and add the following code to create a collection of records in the class constructor.

Visual Basic
C#

Visual Basic

Dim data As New List(Of Customer)()
data.Add(New Customer("100001", "United States", "Jack Danson", 40, 102.03, _
                      Occupation.Executive, _
    "1371234567", 400000000))
data.Add(New Customer("100002", "China", "Tony Tian", 32, 82.2, _
                      Occupation.Engineer, _
    "1768423846", 500))
data.Add(New Customer("100003", "Iran", "Larry Frommer", 15, 40.432, _
                      Occupation.Artist, _
    "8473637486", 600))
data.Add(New Customer("100004", "Germany", "Charlie Krause", 26, 69.32, _
                      Occupation.Doctor, _
    "675245438", 700))
data.Add(New Customer("100005", "India", "Mark Ambers", 51, 75.45, _
                      Occupation.Other, _
    "1673643842", 800))

List<Customer> data = new List<Customer>();
data.Add(new Customer("100001", "United States", "Jack Danson",
    40, 102.03, Occupation.Executive, "1371234567", 400000000));
data.Add(new Customer("100002", "China", "Tony Tian", 
    32, 82.2, Occupation.Engineer, "1768423846", 500));
data.Add(new Customer("100003", "Iran", "Larry Frommer", 
    15, 40.432, Occupation.Artist, "8473637486", 600));
data.Add(new Customer("100004", "Germany", "Charlie Krause", 
    26, 69.32, Occupation.Doctor, "675245438", 700));
data.Add(new Customer("100005", "India", "Mark Ambers", 
    51, 75.45, Occupation.Other, "1673643842", 800));

Integrate InputPanel with DataGrid

To integrate the InputPanel with data grid, set the ItemsSource property of data grid to the collection in the class constructor.
- Visual Basic
- C#
- Visual Basic
dataGrid.ItemsSource = data
- C#
dataGrid.ItemsSource = data.ToList<Customer>();

Similarly, you can integrate the InputPanel control with MS DataGrid using its RowDetailTemplate property.