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:

1. Set up the application
2. Create a data source
3. Integrate InputPanel with DataGrid

Back to Top

Set up the application

1. Create a WPF application and add the InputPanel control onto the designer.
2. Add C1.WPF.DataGrid dll in the References folder of your application.
3. 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

1. 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
   

   • C#

   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
   }
   

2. 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))
   

   • C#

   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));
   

Back to Top

Integrate InputPanel with DataGrid

1. 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>();
   

Back to Top