Remove column separator

3 posts, 0 answers
  1. Malin
    Malin avatar
    2 posts
    Member since:
    Jan 2016

    Posted 07 Jun 2018 Link to this post

    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.
  3. Malin
    Malin avatar
    2 posts
    Member since:
    Jan 2016

    Posted 07 Jun 2018 in reply to Malin Link to this post

    We are using version 2017.1.117.40
  5. Dess | Tech Support Engineer, Sr.
    Admin
    Dess | Tech Support Engineer, Sr. avatar
    3626 posts

    Posted 07 Jun 2018 Link to this post

    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.
Back to Top