How to add a UserControl to a DataGridView in VB.net, and have the control always showing?

Question

I made a usercontrol that is basically a panel with a bunch of labels, buttons, and Event Handlers on it. I want to be able to populate a DataGridView with these controls.

Answer 1

private void button1_Click(object sender, EventArgs e)
    {
        DataTable dt = new DataTable();

        dt.Columns.Add("Name");
        dt.Columns.Add("Email Id");
        for (int j = 0; j < 10; j++)
        {

            dt.Rows.Add("", "ravindra.m089@gmail.com");

        }

        this.dataGridView1.DataSource = dt;

        this.dataGridView1.Columns[0].Width = 200;



        /*

         * First method : Convert to an existed cell type such ComboBox cell,etc

         */



        DataGridViewComboBoxCell ComboBoxCell = new DataGridViewComboBoxCell();

        ComboBoxCell.Items.AddRange(new string[] { "aaa", "bbb", "ccc" });

        this.dataGridView1[0, 0] = ComboBoxCell;

        this.dataGridView1[0, 0].Value = "bbb";



        DataGridViewTextBoxCell TextBoxCell = new DataGridViewTextBoxCell();

        this.dataGridView1[0, 1] = TextBoxCell;

        this.dataGridView1[0, 1].Value = "some text";



        DataGridViewCheckBoxCell CheckBoxCell = new DataGridViewCheckBoxCell();

        CheckBoxCell.Style.Alignment = DataGridViewContentAlignment.MiddleCenter;

        this.dataGridView1[0, 2] = CheckBoxCell;

        this.dataGridView1[0, 2].Value = true;


        DataGridViewTextBoxCell txt = new DataGridViewTextBoxCell();
        txt.ToolTipText = "Enter Ur Name";
        this.dataGridView1[0, 3] = txt;
        this.dataGridView1[0, 3].Value = "lakshman";


        /*

         * Second method : Add control to the host in the cell

         */

        DateTimePicker dtp = new DateTimePicker();

        dtp.Value = DateTime.Now.AddDays(-10);

        //add DateTimePicker into the control collection of the DataGridView

        this.dataGridView1.Controls.Add(dtp);

        //set its location and size to fit the cell

        dtp.Location = this.dataGridView1.GetCellDisplayRectangle(0, 3, true).Location;

        dtp.Size = this.dataGridView1.GetCellDisplayRectangle(0, 3, true).Size;

        TextBox Text = new TextBox();
        Text.Text = "This my Name";
        Text.BackColor = Color.RosyBrown;
        this.dataGridView1.Controls.Add(Text);
        Text.Location = this.dataGridView1.GetCellDisplayRectangle(0, 4, true).Location;
        Text.Size = this.dataGridView1.GetCellDisplayRectangle(0, 4, true).Size; 
    }

Answer 2

read this article How can you add a custom user control to a datagridview? http://bytes.com/topic/visual-basic-net/answers/444528-how-can-you-add-custom-user-control-datagridview

Answer 3

The main idea:

1. Create a user control
2. In form load event, for each record, create an instance of user control, set values to its properties, add event handlers, set its visiblity to false and then add it to your grid Controls collection, and set the tag of your wanted cell or that row to this control.
3. Handle CellPainting event of your grid and for each row of grid, retrieve tag of your wanted cell and convert it to your control and position it in cell bounds and make it visible. To get the position that control should be shown use GetCellDisplayRectangle method of DataGridView

Screenshot:

My sample control with name of SomeControl, contains a label and a text box and a property SomeProperty and an event SomePropertyChanges. I show cell value in TextBox of my custom control.

You can do anything with your custom control containing any control and any type of properties and events.

Code:

Here is vb-like pseudo code.

'This is not VB, this is vb-like pseudo code 
Private Sub Form_Load(sender as object , e as EventArgs)
    'Get data
    'Show data in grid

    'For each row
    For Each row as DataGridViewRow in this.categoryDataGridView.Rows
        'Create an instance of control
        Dim myControl as New SomeControl()

        'Set properties and register event handlers
        myControl.SomeProperty = row.Cells[2].Value
        myControl.SomePropertyChanged += myControl_SomePropertyChanged

        'Make it invisible
        myControl.Visible = False

        'Set tag of your wanted cell to control
        row.Cells[2].Tag = myControl

        'Add control to Controls collection of grid
        this.categoryDataGridView.Controls.Add(myControl)
    Next
End Sub

Private Sub myControl_SomePropertyChanged(sender as object, e as EventArgs)

    'event handler of SomePropertyChanged for custom control
    'do stuff here
End Sub

Private Sub dataGridView_CellPainting(sender as object, e as DataGridViewCellPaintingEventArgs )
    'for each row
    For i as Integer=0 To dataGridView.RowCount- 1
        'Extract control from tag of your wanted cell
        var myControl= this.dataGridView.Rows[i].Cells[2].Tag as SomeControl

        'Get cell rectangle
        Dim cellRectangle As Rectangle= dataGridView.GetCellDisplayRectangle(2, i, True)

        'Set location
        myControl.Location = New Point(cellRectangle.X, cellRectangle.Y )

        'Set size
        myControl.Size = New Size(cellRectangle.Width - 1, cellRectangle.Height - 1)

        'Make visible
        myControl.Visible = True
    Next
}