List View in Cell of GridView

[Saeed]

Hello

I succeeded to put a listview in a cell ​of a grid. But I have some problems with it.

1. Why the first listview item is always highlighted.
2. How can I add the possibility to work with keyboard to select some listview items instead of mouse.

public class CheckListBoxCellElement : GridDataCellElement
{
    public CheckListBoxCellElement(GridViewColumn column, GridRowElement row)
        : base(column, row)
    {
    }

    RadListViewElement radListElement;

    protected override void CreateChildElements()
    {
        base.CreateChildElements();

        radListElement = new RadListViewElement();

        radListElement.ShowCheckBoxes = true;
        radListElement.AllowArbitraryItemHeight = true;
        radListElement.ViewType = ListViewType.IconsView;
        radListElement.VisualItemFormatting += new ListViewVisualItemEventHandler(radListElement_VisualItemFormatting);

        radListElement.ItemCheckedChanged += new ListViewItemEventHandler(radListElement_ItemCheckedChanged);
        this.Children.Add(radListElement);
    }

    void radListElement_VisualItemFormatting(object sender, ListViewVisualItemEventArgs e)
    {
        BaseListViewVisualItem lvi = e.VisualItem as BaseListViewVisualItem;
        lvi.DrawBorder = true;
        lvi.DrawFill = true;
        lvi.CanFocus = true;
    }

    void radListElement_ItemCheckedChanged(object sender, ListViewItemEventArgs e)
    {
        if (e.Item.CheckState == Telerik.WinControls.Enumerations.ToggleState.On)
        {
            PropertyValue val = (PropertyValue)e.Item.DataBoundItem;
            val.Selected = true;
        }
        else
        {
            PropertyValue val = (PropertyValue)e.Item.DataBoundItem;
            val.Selected = false;
        }
    }

    protected override void SetContentCore(object value)
    {
        IList list = (IList)value;

        radListElement.DataSource = list;
        radListElement.DisplayMember = "Name";
        radListElement.ValueMember = "ID";
    }

    protected override Type ThemeEffectiveType
    {
        get
        {
            return typeof(GridDataCellElement);
        }
    }

    public override bool IsCompatible(GridViewColumn data, object context)
    {
        return data is CheckListBoxColumn && context is GridDataRowElement;
    }
}

 

public class CheckListBoxColumn : GridViewDataColumn
{
    public CheckListBoxColumn(string fieldName)
        : base(fieldName)
    {
    }

    public override Type GetCellType(GridViewRowInfo row)
    {
        if (row is GridViewDataRowInfo)
        {
            return typeof(CheckListBoxCellElement);
        }
        return base.GetCellType(row);
    }

}

public class Data
{
    public string Name { get; set; }
    public IList Field { get; set; }
}


public partial class MYForm : Form
{
    public MYForm()
    {
        InitializeComponent();

        Init();
    }

    private void Init()
    {
        GridViewTextBoxColumn column1 = new GridViewTextBoxColumn("Name");
        ksGrid.Columns.Add(column1);

        CheckListBoxColumn column2 = new CheckListBoxColumn("Field");
        ksGrid.Columns.Add(column2);
        column2.Width = 250;

        ksGrid.AutoGenerateColumns = false;

        ArrayList list = new ArrayList();

        IList values1 = new ArrayList();
        values1.Add(new PropertyValue() { ID = 1, Name = "Blue" });
        values1.Add(new PropertyValue() { ID = 2, Name = "Yellow" });
        values1.Add(new PropertyValue() { ID = 3, Name = "Red" });
        Data data1 = new Data { Name = "Color", Field = values1 };
        list.Add(data1);


        IList values2 = new ArrayList();
        values2.Add(new PropertyValue() { ID = 4, Name = "M" });
        values2.Add(new PropertyValue() { ID = 5, Name = "L" });
        values2.Add(new PropertyValue() { ID = 6, Name = "XL" });
        Data data2 = new Data { Name = "Size", Field = values2 };
        list.Add(data2);

        ksGrid.DataSource = list;

        object ob = ksGrid.Rows[1];
    }

[Dess | Tech Support Engineer, Principal]

Hello Saeed,

Thank you for writing.
 
When RadListViewElement is bound, its first item is selected by default. It is normal behavior. In the SetContentCore method of your custom cell, you always set the RadListViewElement.DataSource property to the desired collection. I would recommend you to set this property only if it is not already set. In order to deal with the initial selection of the first item, you can set the SelectedIndex property to -1:

protected override void SetContentCore(object value)
{
    IList list = (IList)value;

    if (radListElement.DataSource == null)
    {
        radListElement.DataSource = list;
        radListElement.DisplayMember = "Name";
        radListElement.ValueMember = "ID";
        radListElement.SelectedIndex = -1;
    }
}

As to the keyboard navigation, note that RadGridView manages user mouse and keyboard input over its rows by GridRowBehavior. Depending on the row type, RadGridView introduces different behaviors. You can override the specific keyboard handling and introduce the desired behavior for navigating through RadListViewElement's items for example. You can refer to the Row behaviors help article which demonstrates how to plug a specific functionality to a specific row behavior. You can follow a similar approach.

I hope this information helps. Should you have further questions I would be glad to help.

 

Regards,
Dess
Telerik

[Saeed]

Thanks Dess

It seems not working again.
The highlighted area of the first listitem was removed but the border around it still remains.
I think there is some problem with rendering, when a first listitem is selected the border around it remains even I select another listitem.

 

 

[Hristo]

Hi Saeed,

Thank you for writing back.

In your custom cell element class, you could subscribe your RadListViewElement object to the VisualItemFormatting event and in the handler set the value of the DrawBorder property to false. Please check my code snippet below: 

private void radListElement_VisualItemFormatting(object sender, ListViewVisualItemEventArgs e)
{
    BaseListViewVisualItem visualItem = e.VisualItem as BaseListViewVisualItem;
    if (visualItem != null)
    {
         visualItem.DrawBorder = false;
    }
}

If you need to you could also perform additional checkings and apply different styling.

I hope this helps. Should you have further questions please do not hesitate to write back.

Regards,
Hristo Merdjanov
Telerik