Dividing Lines

[Sheldon]

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.

[Jack]

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