Removing a specific Row in TableLayoutPanel

sebsn picture sebsn · Mar 20, 2013 · Viewed 32k times · Source

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

Cody Gray picture Cody Gray · Mar 21, 2013

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.