Custom Items Re-drawing itself, and location of checkbox?

[Robert LeGood]

Two questions / issues.  Easy one first.

a)  How do I control the alignment of the checkbox that appears in a ListViewDataItem?  It seems stuck in the middle and I'd like to align it with my text.

b) I'm creating custom ListViewDataItems, as I need to add a "legend" to each drop down.  Here's the sample code I'm using...

First, the code in _VisualItemCreating

private void rlvLegend_VisualItemCreating(object sender, ListViewVisualItemCreatingEventArgs e)
{
    e.VisualItem = new LegendCustomVisualItem();
}

Second, the override of CreateChildElements

protected override void CreateChildElements()
{
    base.CreateChildElements();
    this.stackLayout = new StackLayoutPanel();
    this.stackLayout.Orientation = Orientation.Vertical;
    this.stackLayout.EqualChildrenWidth = true;

    //Header space
    this.p1 = new RadPanelElement();
    p1.AutoSize = true;
    p1.MinSize = new Size(200, 20);
    p1.NotifyParentOnMouseInput = true;
    p1.ShouldHandleMouseInput = false;
    p1.PanelBorder.Visibility = ElementVisibility.Hidden;
    this.stackLayout.Children.Add(p1);

    this.stackLayout.Children.Add(new LegendCustomStack("Test 1", Color.Red, Color.Red));
    this.stackLayout.Children.Add(new LegendCustomStack("Test 2", Color.Blue, Color.Red));
    this.stackLayout.Children.Add(new LegendCustomStack("Test 3", Color.Aquamarine, Color.Red));
    this.stackLayout.Children.Add(new LegendCustomStack("Test 4", Color.DimGray, Color.Red));

    this.Children.Add(this.stackLayout);

}

Lastly, the other items I've created in the last couple lines..

public class LegendCustomStack : StackLayoutPanel
{
    private int _height = 15;

    public LegendCustomStack(string labelText, Color fillColor, Color outlineColor)
    {
        //spacer panel
        RadPanelElement p2;
        p2 = new RadPanelElement();
        p2.AutoSize = true;
        p2.MinSize = new Size(25, _height);
        p2.NotifyParentOnMouseInput = true;
        p2.ShouldHandleMouseInput = false;
        p2.PanelBorder.Visibility = ElementVisibility.Hidden;
        this.Children.Add(p2);

        RadPanelElement p3 = new RadPanelElement();
        p3.AutoSize = false;
        p3.Size = new Size(_height, _height);
        p3.PanelFill.NumberOfColors = 1;
        p3.PanelFill.BackColor = fillColor;
        p3.PanelBorder.ForeColor = outlineColor;
        p3.NotifyParentOnMouseInput = true;
        p3.ShouldHandleMouseInput = false;
        //p3.Alignment = ContentAlignment.MiddleLeft;
        this.Children.Add(p3);

        RadLabelElement l1 = new RadLabelElement();
        l1.Text = labelText;
        l1.NotifyParentOnMouseInput = true;
        l1.ShouldHandleMouseInput = false;
        l1.TextAlignment = ContentAlignment.TopLeft;
        this.Children.Add(l1);
    }
}

When I load up my items, it looks fine, until I have too many that the scroll bars appear.   If I scroll down, everything is fine.  If I scroll up, the LegendCustomStack items seem to jump around randomly from ListDataItem to ListDataItem (sometimes completely disappearing)

(I created a version where, the colours were random to better demonstrate the behavior, but I think I backout out those changes)

Any ideas what I'm doing wrong?

Thanks!!!

Rob.

[Robert LeGood]

Here... this should demonstrate the issue a little better.  Note that it only happens for me when I scroll up, scrolling down doesn't seem to be an issue..

protected override void CreateChildElements()
{
    base.CreateChildElements();
    this.stackLayout = new StackLayoutPanel();
    this.stackLayout.Orientation = Orientation.Vertical;
    this.stackLayout.EqualChildrenWidth = true;

    //Header space
    this.p1 = new RadPanelElement();
    p1.AutoSize = true;
    p1.MinSize = new Size(200, 20);
    p1.NotifyParentOnMouseInput = true;
    p1.ShouldHandleMouseInput = false;
    p1.PanelBorder.Visibility = ElementVisibility.Hidden;
    this.stackLayout.Children.Add(p1);

    Random randonGen = new Random();
    Color rC1 = Color.FromArgb(randonGen.Next(255), randonGen.Next(255),
    randonGen.Next(255));
    Color rC2 = Color.FromArgb(randonGen.Next(255), randonGen.Next(255),
    randonGen.Next(255));
    Color rC3 = Color.FromArgb(randonGen.Next(255), randonGen.Next(255),
    randonGen.Next(255));
    Color rC4 = Color.FromArgb(randonGen.Next(255), randonGen.Next(255),
    randonGen.Next(255));

    this.stackLayout.Children.Add(new LegendCustomStack("Test 1", rC1, rC2));
    this.stackLayout.Children.Add(new LegendCustomStack("Test 2", rC3, rC4));

    this.Children.Add(this.stackLayout);
}

[Ivan Todorov]

Hi Robert,

Thank you for contacting us.

You can change the location of the check box by overriding the ArrangeContentCore method. Please refer to the attached project for additional details.

As to the second issue, RadListView uses a virtualization mechanism to display its items. This means that it only creates the least number of visual items to fit in the visible part of the control. When you scroll up and down, the visual items are being reused to display different data items - they are detached from an item that is not visible anymore and then attached to some other data item.

This means that you should not store any states or data in the visual items as they are used to only display information. There is a special method which you should override - SynchronizeProperties. This method is called when the visual item has been attached to a different data item or when the data item has changed its properties. You should use this method to update the information that the visual item displays. This is also demonstrated in the attached project. Please refer to it for further details.

I hope you find this useful. Do not hesitate to write back if you have any additional questions.

All the best,
Ivan Todorov
the Telerik team

[Robert LeGood]

Thanks, Ivan!

I made some modifications and it's working wonderfully..

..that is, until I attempted to add custom groups to the RadListView.   The behavior I'm getting is that it's treating the Group as just another group item, so it's drawing the checkbox, and I'm unable to twist open and closed the groups.  (It does appear to be adding the members I want to the correct "groups", but it a mess otherwise.

Any ideas on how I can use custom groups in the solution you've provided?

Thanks again,

Rob.

[Robert LeGood]

Whoops!  Nevermind,  I found the answer in this previous post..

http://www.telerik.com/community/forums/winforms/listview/custom-items-and-grouping.aspx 

Once I implemented that, it worked perfect.

So, my last (maybe) question..   is there a way to assign some items to groups, and other item to no group, so that it appears outside of the groups...

ie.

> Group A
- Item 1
- Item 2
> Group B
- Item 3
- Item 4
- Item 5
> Group C
- Item 6

[Ivan Todorov]

Hello Robert,

Currently RadListView does not support such mode. When grouping is enabled, only items within groups are displayed. It is possible to have some of the items without an assigned group, but they will only be displayed when grouping is disabled. Currently, we do not have plans for adding such functionality. If more people as for it, we will consider scheduling it for a future release.

Feel free to ask if you have any further questions.

All the best,
Ivan Todorov
the Telerik team