Column Boundaries getting overlapped in Telerik Grid for Winforms

Question

I am working on Winform application. Using Telerik controls on it.

On 1 form, I need to have composite columns as in image above. These columns have been added dynamically(through C#), I have used HTMlViewDefinition.

The problem is, columns boundaries are getting overlapped as in image above.

I need the column width to be decided at run time, so don't want to give static width to them.

NOTE: Due to confidentiality I have removed column names from snapshot and put dummy column names in code. Hope not an issue.

Any help would be sincerely appreciated. Thanks in advance

Code, I have written for this grid is as below

var htmlView = new HtmlViewDefinition()
                {

                };
                htmlView.RowTemplate.Rows.Add(new RowDefinition());
                htmlView.RowTemplate.Rows.Add(new RowDefinition());

                htmlView.RowTemplate.Rows[0].Cells.Add(new CellDefinition("No"));
                htmlView.RowTemplate.Rows[0].Cells.Add(new CellDefinition("Col1"));
                htmlView.RowTemplate.Rows[0].Cells.Add(new CellDefinition("Col2"));
                htmlView.RowTemplate.Rows[0].Cells.Add(new CellDefinition("Col3"));
                htmlView.RowTemplate.Rows[0].Cells.Add(new CellDefinition("Col4"));
                htmlView.RowTemplate.Rows[0].Cells.Add(new CellDefinition("Col5"));
                htmlView.RowTemplate.Rows[0].Cells.Add(new CellDefinition("Col6"));
                htmlView.RowTemplate.Rows[0].Cells.Add(new CellDefinition("Col7"));
                htmlView.RowTemplate.Rows[0].Cells.Add(new CellDefinition("Col8"));
                htmlView.RowTemplate.Rows[0].Cells.Add(new CellDefinition("Col9"));
                htmlView.RowTemplate.Rows[0].Cells.Add(new CellDefinition("Col10"));
                htmlView.RowTemplate.Rows[0].Cells.Add(new CellDefinition("Col11"));

                htmlView.RowTemplate.Rows[0].Cells.Add(new CellDefinition("Col12"));
                htmlView.RowTemplate.Rows[0].Cells.Add(new CellDefinition("Col13"));


                htmlView.RowTemplate.Rows[0].Cells.Add(new CellDefinition("Col14"));
                htmlView.RowTemplate.Rows[0].Cells.Add(new CellDefinition("Col15"));

  htmlView.RowTemplate.Rows[0].Cells[0].RowSpan = 2;
                htmlView.RowTemplate.Rows[0].Cells[3].RowSpan = 2;
                htmlView.RowTemplate.Rows[0].Cells[4].RowSpan = 2;

                htmlView.RowTemplate.Rows[0].Cells[3].ColSpan = 1;
                htmlView.RowTemplate.Rows[0].Cells[4].ColSpan = 1;

                htmlView.RowTemplate.Rows[0].Cells[5].RowSpan = 2;
                htmlView.RowTemplate.Rows[0].Cells[6].RowSpan = 2;
                htmlView.RowTemplate.Rows[0].Cells[7].RowSpan = 3;


 htmlView.RowTemplate.Rows[0].Cells[9].RowSpan = 2;
                htmlView.RowTemplate.Rows[0].Cells[10].RowSpan = 2;
                htmlView.RowTemplate.Rows[0].Cells[11].RowSpan = 2;
                htmlView.RowTemplate.Rows[0].Cells[12].RowSpan = 2;
                htmlView.RowTemplate.Rows[0].Cells[13].RowSpan = 2;

                htmlView.RowTemplate.Rows[0].Cells[14].RowSpan = 2;
                htmlView.RowTemplate.Rows[0].Cells[15].RowSpan = 2;


 htmlView.RowTemplate.Rows[0].Height = 30;

                htmlView.RowTemplate.Rows[1].Cells.Add(new CellDefinition("Item Description"));
                htmlView.RowTemplate.Rows[1].Cells[0].ColSpan = 2;
                htmlView.RowTemplate.Rows[1].Cells.Add(new CellDefinition("Direction"));
 htmlView.RowTemplate.Rows[1].Height = 30;
 gridDrugList.BestFitColumns();

                gridDrugList.MasterTemplate.AutoSizeColumnsMode = GridViewAutoSizeColumnsMode.Fill;

 gridDrugList.ViewDefinition = htmlView;

Answer 1

This seems to be a known issue with the Html view definition. The proposed workaround is to subscribed to the SizeChanged event of RadGridView and refresh the rows:

  private void RadGridView1_SizeChanged(object sender, EventArgs e)
  {
      radGridView1.TableElement.ViewElement.UpdateRows(true);
  }