Removing a specific Row in TableLayoutPanel

Question

I have TableLayoutPanel that I programatically add Rows to. The User basically choses a Property and that is then displayed in the table along with some controls. I think I have a general understanding problem here and I will try to explain it.

One of the Controls in every row is a 'delete'-Button. That button should delete the row it is in. What I did is add an eventhandler to the button and set the current rowcount.

deleteTalent.Click += (sender, e) => buttonClickHandler(numberOfRows);

Code of the handler:

private void buttonClickHandler(int rowCount)
{
    int count = rowCount - 1;
    for (int i = count; i < (count + 5); i++)
    {
        balanceTable.Controls.RemoveAt(count);
    }
    balanceTable.RowStyles.RemoveAt(count);
    balanceTable.RowCount--;

}

I looked at it for hours and played around. But I can't find a working clean solution. I'm also pretty new to C#

Here's the complete Function that creates a new row:

private void addBalanceItems(ToolStripMenuItem item)
{
    int numberOfRows = balanceTable.RowCount;
    if (numberOfRows > 1)
    {
        balanceTable.RowStyles.Add(new System.Windows.Forms.RowStyle(System.Windows.Forms.SizeType.AutoSize));

    }
    balanceTable.Height = numberOfRows * 45;
    Steigerungsrechner rechner = new Steigerungsrechner();
    string tag = item.Tag.ToString();

    //change that asap :(
    if (tag == "A") { rechner.column = 1; }
    if (tag == "B") { rechner.column = 2; }
    if (tag == "C") { rechner.column = 3; }
    if (tag == "D") { rechner.column = 4; }
    if (tag == "E") { rechner.column = 5; }
    if (tag == "F") { rechner.column = 6; }
    if (tag == "G") { rechner.column = 7; }
    if (tag == "H") { rechner.column = 8; }

    Label talentName = new Label();
    talentName.Text = item.Text;
    talentName.Height = standardHeight;
    talentName.TextAlign = ContentAlignment.MiddleLeft;
    talentName.AutoSize = true;
    Label cost = new Label();
    cost.TextChanged += (sender, e) => costChangeHandler(cost);
    cost.Height = standardHeight;
    cost.TextAlign = ContentAlignment.MiddleLeft;
    TextBox startValue = new TextBox();
    startValue.TextChanged += (sender, e) => startValueChangeHandler(rechner, startValue, cost);
    startValue.Height = standardHeight;
    startValue.TextAlign = HorizontalAlignment.Center;
    TextBox endValue = new TextBox();
    endValue.TextChanged += (sender, e) => endValueChangeHandler(rechner, endValue, cost);
    endValue.Height = standardHeight;
    endValue.TextAlign = HorizontalAlignment.Center;
    Button deleteTalent = new Button();
    deleteTalent.Text = "x";
    deleteTalent.Click += (sender, e) => buttonClickHandler(numberOfRows);
    deleteTalent.Height = standardHeight;

    balanceTable.Controls.Add(talentName);
    balanceTable.Controls.Add(startValue);
    balanceTable.Controls.Add(endValue);
    balanceTable.Controls.Add(cost);
    balanceTable.Controls.Add(deleteTalent);
    balanceTable.Visible = true;
    balanceTable.RowCount++;
}

Any help would be greatly appreciated! :)

Answer 1

Yeah, removing an arbitrary row from a TableLayoutPanel is not at all intuitive. They really screwed up the design on this one.

The only way to remove rows is by setting the RowCount property. This alone is strange enough; that property sure seems like it should be read-only and code that does this looks wrong to me every time I see it.

But beyond that, the consequence of this design is that you cannot remove rows from the middle. Resetting the RowCount property will just cause rows to be lopped off of the bottom.

The workaround is a bit unwieldy, with multiple steps to get wrong:

1. Remove the controls from the row you want to delete
2. If applicable, move those controls to to another row.
3. Move all of the controls in the other rows that come after the row you wish to delete up a row.
4. Finally, remove the last row by decrementing the value of the RowCount property.

A quick Google search reveals that someone has written and shared code purporting to do this. It's in VB.NET, but that should be easily translated into your native dialect.

I'll admit that I've been known to just punt and set the RowHeight of the row I wish to "remove" to 0. This way, autosizing does the work for you. You probably still want to remove the controls it contains, though.

Answer 2

Here is a static class that can help you remove any row by it's index:

using System.Windows.Forms;

public static class TableLayoutHelper
{
    public static void RemoveArbitraryRow(TableLayoutPanel panel, int rowIndex)
    {
        if (rowIndex >= panel.RowCount)
        {
            return;
        }

        // delete all controls of row that we want to delete
        for (int i = 0; i < panel.ColumnCount; i++)
        {
            var control = panel.GetControlFromPosition(i, rowIndex);
            panel.Controls.Remove(control);
        }

        // move up row controls that comes after row we want to remove
        for (int i = rowIndex + 1; i < panel.RowCount; i++)
        {
            for (int j = 0; j < panel.ColumnCount; j++)
            {
                var control = panel.GetControlFromPosition(j, i);
                if (control != null)
                {
                    panel.SetRow(control, i - 1);
                }
            }
        }

        var removeStyle = panel.RowCount - 1;

        if (panel.RowStyles.Count > removeStyle)
            panel.RowStyles.RemoveAt(removeStyle);

        panel.RowCount--;
    }
}

One thing to mention: controls that we get via panel.GetControlFromPosition(...) must be visible or it will return null instead of invisible controls.

Answer 3

Remove existing controls of rowCount at first

for(int i = 0; i < panel.ColumnCount; i++){
     Control Control = panel.GetControlFromPosition(i, rowCount);
     panel.Controls.Remove(Control);
  }

Then remove row

panel.RowStyles.RemoveAt(rowCount-1);

Answer 4

Removing complete Table -

tableLayoutPanel1.Controls.Clear();
tableLayoutPanel1.RowStyles.Clear();

Set your Headline of the Table again -

            tableLayoutPanel.RowCount = 1;
            tableLayoutPanel.RowStyles.Add(new RowStyle(SizeType.Absolute, 20F));
            tableLayoutPanel.Controls.Add(new Label() { Text = "MONTH", Font = new Font("Century Gothic", 12, FontStyle.Bold), ForeColor = Color.LightGray }, 0, tableLayoutPanel.RowCount - 1);
            tableLayoutPanel.Controls.Add(new Label() { Text = "YEAR", Font = new Font("Century Gothic", 12, FontStyle.Bold), ForeColor = Color.LightGray }, 1, tableLayoutPanel.RowCount - 1);
            tableLayoutPanel.Controls.Add(new Label() { Text = "MEASURED WAFERS", Font = new Font("Century Gothic", 12, FontStyle.Bold), ForeColor = Color.LightGray }, 2, tableLayoutPanel.RowCount - 1);

3 Columns - 1 Row

Maybe someone can use my codesnipped, works proper good...

Answer 5

You cannot completely delete a row on tablelayoutpanel but there is a workaround:

1. Remove all the controls in the row, easier if you know the names of the controls cause you can call the dispose method.
2. Set the height of the row to maybe 2px using the row style method (e.g. tablelayoutpanel1.Rowstyle(index).height=2)

For me this worked wonders the, row was completely collapsed the row regardless of the row index.