InputPanel supports integration with FlexGrid to display data in details part of a row in a compact layout. The control can be embedded with ComponentOne's FlexGrid control to display the data by means of row details template. Using this template, InputPanel can be embedded with each row of the FlexGrid control, in a collapsible section.

To integrate InputPanel with FlexGrid, you need to define the template where you add the InputPanel control in the RowDetailsTemplate property of the FlexGrid control.

The following image shows an InputPanel integrated with a FlexGrid through RowDetailsTemplate.

To integrate InputPanel with FlexGrid

• Step 1: Set up the application
• Step 2: Create a data source
• Step 3: Bind FlexGrid to the data source

Step 1: Set up the application

1. Create a UWP application and add a FlexGrid control.
2. Create a data template in the RowDetailsTemplate property of FlexGrid to display the InputPanel control in the details part of the row.

   XAML	Copy Code
   <FlexGrid:C1FlexGrid x:Name="FlexGrid" Margin="20,50,0,10" HorizontalAlignment="Left" AlternatingRowBackground="{Binding GroupRowBackground, ElementName=FlexGrid}" > <FlexGrid:C1FlexGrid.RowDetailsTemplate> <DataTemplate> <InputPanel:C1InputPanel x:Name="InPanel" CurrentItem="{Binding}" HorizontalAlignment="Left"/> </DataTemplate> </FlexGrid:C1FlexGrid.RowDetailsTemplate> </FlexGrid:C1FlexGrid>

Step 2: Create a data source

1. Switch to the code view and create a Customer class to add records to the InputPanel containing id, name, country, age, weight, and contact number of the customers, 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
               m_ID = Value
           End Set
       End Property
       Private m_ID As String
       Public Property Country() As String
           Get
               Return m_Country
           End Get
           Set
               m_Country = Value
           End Set
       End Property
       Private m_Country As String
       Public Property Name() As String
           Get
               Return m_Name
           End Get
           Set
               m_Name = Value
           End Set
       End Property
       Private m_Name As String
       Public Property Age() As Integer
           Get
               Return m_Age
           End Get
           Set
               m_Age = Value
           End Set
       End Property
       Private m_Age As Integer
       Public Property Weight() As Double
           Get
               Return m_Weight
           End Get
           Set
               m_Weight = Value
           End Set
       End Property
       Private m_Weight As Double
       Public Property Occupation() As Occupation
           Get
               Return m_Occupation
           End Get
           Set
               m_Occupation = Value
           End Set
       End Property
       Private m_Occupation As Occupation
       Public Property Phone() As String
           Get
               Return m_Phone
           End Get
           Set
               m_Phone = Value
           End Set
       End Property
       Private m_Phone As String
   
       Public Sub New(id As String, country As String, name As String, age As Integer, weight As Double, occupation As Occupation,
       phone As String)
           Me.ID = id
           Me.Country = country
           Me.Name = name
           Me.Age = age
           Me.Weight = weight
           Me.Occupation = occupation
           Me.Phone = phone
       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 Customer(string id, string country, string name, int age,
                       double weight, Occupation occupation, string phone)
       {
           this.ID = id;
           this.Country = country;
           this.Name = name;
           this.Age = age;
           this.Weight = weight;
           this.Occupation = occupation;
           this.Phone = phone;
       }
   }
   
   public enum Occupation
   {
       Doctor,
       Artist,
       Educator,
       Engineer,
       Executive,
       Other
   }
   

2. Create a private method, InitializeFlexGrid, in the class constructor and add the following code to create a collection of records.
   • 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"))
   data.Add(New Customer("100002", "China", "Tony Tian",
   32, 82.2, Occupation.Engineer, "1768423846"))
   data.Add(New Customer("100003", "Iran", "Larry Frommer",
            15, 40.432, Occupation.Artist, "8473637486"))
   data.Add(New Customer("100004", "Germany", "Charlie Krause",
            26, 69.32, Occupation.Doctor, "675245438"))
   data.Add(New Customer("100005", "India", "Mark Ambers",
            51, 75.45, Occupation.Other, "1673643842"))
   

   • C#

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

3. Call the InitializeFlexGrid method in the MainPage class constructor.

Step 3: Bind FlexGrid to the data source

1. Bind the FlexGrid control to Customer class (refer Quick Start) in code view.
   • Visual Basic
   • C#

   • Visual Basic

   'Bind FlexGrid to Customer and allow cell merging
   FlexGrid.ItemsSource = data
   

   • C#

   //Bind FlexGrid to Customer and allow cell merging
   FlexGrid.ItemsSource = data.ToList<Customer>();
   

2. Debug the application to see if any error exist.
3. Press F5 to run your application and see the output.