Dividing Lines

2 posts, 0 answers
  1. Sheldon
    Sheldon avatar
    4 posts
    Member since:
    Oct 2012

    Posted 18 Jan 2013 Link to this post

    Hello,

    I am using RadListView that will display an image for each data record.  There will be 4 records in a row with an undetermined number of rows that will depend on the pager.  To the right of the image I would like to add a dividing line, but I do not want the line to appear for the 4th record in each row.  I would also like a horizontal line between the rows.  In other words I would like it to display

    image | image | image | image
    _________________________

    image | image | image | image 

    Currently I have my item template defined as a table and have set the right border to display, so it displays the "line" for each record including after the 4th image.  Can anyone tell me how I can do this with the RadListView, or do I need to use a different control?

    Thanks.
  2. Jack
    Admin
    Jack avatar
    2335 posts

    Posted 23 Jan 2013 Link to this post

    Hi Sheldon,

    Thank you for writing.

    You can do this by handling the CellFormatting event. You can use HeaderText property to identify whether the processed cell belongs to the last column and the row index to determine whether this is the last row. Consider the sample below:
    void radListView1_CellFormatting(object sender, ListViewCellFormattingEventArgs e)
    {
        if (e.CellElement.VisualState.Contains("DetailListViewHeaderCellElement"))
        {
            e.CellElement.ResetValue(LightVisualElement.DrawBorderProperty, ValueResetFlags.Local);
            e.CellElement.ResetValue(LightVisualElement.BorderBoxStyleProperty, ValueResetFlags.Local);
            e.CellElement.ResetValue(LightVisualElement.BorderLeftWidthProperty, ValueResetFlags.Local);
            e.CellElement.ResetValue(LightVisualElement.BorderRightWidthProperty, ValueResetFlags.Local);
            e.CellElement.ResetValue(LightVisualElement.BorderTopWidthProperty, ValueResetFlags.Local);
            e.CellElement.ResetValue(LightVisualElement.BorderBottomWidthProperty, ValueResetFlags.Local);
            e.CellElement.ResetValue(LightVisualElement.BorderRightColorProperty, ValueResetFlags.Local);
            e.CellElement.ResetValue(LightVisualElement.BorderBottomColorProperty, ValueResetFlags.Local);
        }
        else
        {
            if (e.CellElement.Data.HeaderText == "Column 3")
            {
                e.CellElement.DrawBorder = true;
                e.CellElement.BorderBoxStyle = BorderBoxStyle.FourBorders;
                e.CellElement.BorderLeftWidth = 0;
                e.CellElement.BorderTopWidth = 0;
                e.CellElement.BorderBottomWidth = 1;
                e.CellElement.BorderRightWidth = 0;
                e.CellElement.BorderRightColor = Color.Gray;
            }
            else
            {
                e.CellElement.DrawBorder = true;
                e.CellElement.BorderBoxStyle = BorderBoxStyle.FourBorders;
                e.CellElement.BorderLeftWidth = 0;
                e.CellElement.BorderTopWidth = 0;
                e.CellElement.BorderBottomWidth = 1;
                e.CellElement.BorderRightWidth = 1;
                e.CellElement.BorderBottomColor = Color.Gray;
                e.CellElement.BorderRightColor = Color.Gray;
            }
     
            DetailListViewDataCellElement detailCell = e.CellElement as DetailListViewDataCellElement;
            if (detailCell != null && this.radListView1.Items.IndexOf(detailCell.Row) == this.radListView1.Items.Count - 1)
            {
                e.CellElement.BorderBottomWidth = 0;
            }
        }
    }

    I hope it helps.
     
    Kind regards,
    Jack
    the Telerik team
    Q3'12 SP1 of RadControls for WinForms is out now. See what's new.
  3. UI for WinForms is Visual Studio 2017 Ready
Back to Top