Remove column separator in UI for WinForms

This is a migrated thread and some comments may be shown as answers.

Remove column separator

2 Answers 26 Views

ListView

This is a migrated thread and some comments may be shown as answers.

Malin asked on 07 Jun 2018, 01:17 PM

imgcolumnseparator.png

Hi,

We want to remove the column separators in the RadListView control (DetailsView) and set the headers to align to the left (see the attached image).

We can do this in design view by going in to the Edit UI Elements-dialog and go to the DetailsListViewColumnContainers Children property and edit our two columns DrawBorder-property to false and TextAlignment-property to MiddleLeft. The problem is when we do that and run our project we get a runtime error, ArgumentOutOfRangeException, on the first row, of the ones down below. Is this not the way to remove the separators? Is there a better way to achieve this?

ArgumentOutOfRangeException on the first of these rows (more specifically the last GetChildAt() fails):

((Telerik.WinControls.UI.DetailListViewHeaderCellElement)(this.radListViewServer.GetChildAt(0).GetChildAt(0).GetChildAt(3).GetChildAt(0))).DrawBorder = false;((Telerik.WinControls.UI.DetailListViewHeaderCellElement)(this.radListViewServer.GetChildAt(0).GetChildAt(0).GetChildAt(3).GetChildAt(0))).TextAlignment = System.Drawing.ContentAlignment.MiddleLeft;((Telerik.WinControls.UI.DetailListViewHeaderCellElement)(this.radListViewServer.GetChildAt(0).GetChildAt(0).GetChildAt(3).GetChildAt(0))).Text = "Server";((Telerik.WinControls.UI.DetailListViewHeaderCellElement)(this.radListViewServer.GetChildAt(0).GetChildAt(0).GetChildAt(3).GetChildAt(1))).DrawBorder = false;((Telerik.WinControls.UI.DetailListViewHeaderCellElement)(this.radListViewServer.GetChildAt(0).GetChildAt(0).GetChildAt(3).GetChildAt(1))).TextAlignment = System.Drawing.ContentAlignment.MiddleLeft;((Telerik.WinControls.UI.DetailListViewHeaderCellElement)(this.radListViewServer.GetChildAt(0).GetChildAt(0).GetChildAt(3).GetChildAt(1))).Text = "Kommentar";

2 Answers, 1 is accepted

answered on 07 Jun 2018, 01:53 PM

Hello, Malin,

The appropriate way to customize cell elements in details view is to handle the CellFormatting event. Here is demonstrated a sample code snippet how to hide the borders and change the text alignment in the header cells:

private void radListView1_CellFormatting(object sender, Telerik.WinControls.UI.ListViewCellFormattingEventArgs e)

{

DetailListViewHeaderCellElement headerCell = e.CellElement as DetailListViewHeaderCellElement;

if (headerCell != null)

{

e.CellElement.DrawBorder = false;

e.CellElement.TextAlignment = ContentAlignment.MiddleLeft;

}

else

{

e.CellElement.ResetValue(LightVisualElement.DrawBorderProperty, Telerik.WinControls.ValueResetFlags.Local);

e.CellElement.ResetValue(LightVisualElement.TextAlignmentProperty, Telerik.WinControls.ValueResetFlags.Local);

}

I hope this information helps. If you have any additional questions, please let me know.

Regards,
Dess
Progress Telerik

Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.