Listbox Column (Editor) with MultiSelect

[Holger Boskugel]

Hello,

I'm searching and looking for a solution or idea howto implement a Listbox column with MultiSelect in GridView.

We want cover this aspects:

a) GridViewCell.Value holds an Array of String
b) GridViewCell show a concatenated String of Value
c) Edting cell opens an editor with a RadList control and MultiSelect; MultiSelect handles Shift and Ctrl
d) Editor closes on Popup-Button Click or LostFocus of Popup

First choice was to use GridViewMultiComboBoxColum and depending Editor/Element. But Popup closes on first Click. May be we can overwrite this behavior?

Otherwise in my mind I have to do:

1.) Create new GridViewCellElement, covering Array value and display of it
2.) Create new GridViewColumn with depending Editor/Element

The second part I tried to inherit PopupEditorElement, but got the ListElement not shown in Popup. Popup was always empty. May be I can handle it in the right way?

Please send any hints that let me go on the right track!


Regards from Leipzig

Holger

[Holger Boskugel]

Hello again,

it seems the knowledge base article Create MultiColumnListBox based on RadGridView shows the requestes behavior, but there is no sample code placed. Would be nice to get some.


Regards from Leipzig

Holger

[Jeffrey]

Hi Holger.  

I've been to Leipzig.  Beautiful place.  

Did you find a solution to your problem?  What you say is exactly what we want to do:


a) GridViewCell.Value holds an Array of String
b) GridViewCell show a concatenated String of Value
c) Edting cell opens an editor with a RadList control and MultiSelect; MultiSelect handles Shift and Ctrl
d) Editor closes on Popup-Button Click or LostFocus of Popup 


--------------

But the second link you found describes a different thing - making a grid control look like a list box.

Please let me know if you have a minute.

Thanks!

Jeff

[Holger Boskugel]

Hello Jeff,

we didn't found a solution, especially there was no reply of Telerik for a source code of the solution behind the article I focused in my former reply. Yes it is not exact the answer of my question but it includes a path to answer. Main focus is how to handle the open popup in GridViewCell(Element) for multiple selects how I wrote in c) and d). Handling the values in b) is another focus, but here I was near of a solution with the GridViewCellElement and the inner text area.

We dropped of the development on this administration part of our application depending not only on the missing solution, some other requirements also changed and we realized an other kind of administration at our relating Sharepoint site.

May be Telerik is able to provide the code of the sample Create MultiColumnListBox based on RadGridView. Then with the knowledge of handling behind it should be possible to build an editor handling our problem.


Regards from Leipzig

Holger

[Stefan]

Hi guys,

Thank you for writing.

@Holger - your account is not eligible for support and this is the reason for not receiving a reply to your inquiry. Please refer to threads "Meaning and Handling of Value (ValueMember) and Text (DisplayMember) of GridViewComboBoxColumn?" and "Add Group/Category without Item to PropertyGrid" where this matter is discussed. Once your account is associated with a valid license with support package, the support services for your account will be enabled again.

Attached to my post you can find a solution where the whole scenario is implemented as per Jeffrey's requirement. Feel free to accommodate this approach in your applications. 
 
Kind regards,
Stefan
the Telerik team

[Holger Boskugel]

Hello Stefan,

thanks for reply. I've looked into the code and test the application, seems to be what I expected. Maybe it is an enhancement of your code to display checkboxes in the popup for selection.

But once again I can't understand why your databound controls provide properties DisplayMember and ValueMember, when the result in property Value is always made from DisplayMember not of ValueMember? In your code I would expect an array of int as Value type not array of string if I choose "ID" as ValueMember. Maybe I'm on a bad track expecting that?

@Stefan I know that I'm "out" of support, but it depends on my customer not changing the license assigment everytime of need between me (freelance consultant, having no own license) and the own staff (who is assigned to the license).


Regards from Leipzig

Holger Boskugel

[Jeffrey]

Hi Stefan,

I checked out your example solution.  Works like a charm!  

Looks like there was a lot of code to accomplish that, so I really appreciate your working on it - thank you.

One quick question.. if I now want to get that whole semicolon-delimited string that displays in the cell, how do I do that?

Jeff

[Holger Boskugel]

Hello Jeffrey,

assign to CellValueChanged event and check sender is type of CustomCellElement. If so, then cast sender to CustomCellElement let you access the Text property, which contains the concatenated string and Value contains the array of description strings for each selected element.

private void radGridView1_CellValueChanged(object sender, GridViewCellEventArgs e)
{
    if (sender is CustomCellElement)
    {
        //(sender as CustomCellElement).Text
    }
}

Regards from Leipzig

Holger Boskugel

[Stefan]

Hello guys,

@Holger - the example is made to work only with array of strings. Please investigate the whole code and you will see the implementation. If you need feel free to change it according to your needs.

@Jeffrey - you can get the value as array of strings from the Value of the cell info. Here are two examples:

void radGridView1_CellValueChanged(object sender, GridViewCellEventArgs e)
{
    string[] arr = e.Value as string[];
}

private void radButton1_Click(object sender, EventArgs e)
{
    string[] arr = radGridView1.Rows[0].Cells[0].Value as string[];
}

I hope that you find this information useful.

Regards,
Stefan
the Telerik team

[Philippe]

I am very sorry for hijacking the thread, but I am exactly in Holger's situation. Having a "multi-select-multi-column-checkbox custom editor" would simplify my user's life greatly. (and improve on my interface-designing possibilities). I tried the proposed code, and it works amazingly well, alot better than all the other suggestions I tried up to now to solve this issue. (major kudos to that BTW Stefan. Ask for an extra Chrismas bonus this year!)

To quote Holger :
thanks for reply. I've looked into the code and test the application, seems to be what I expected. Maybe it is an enhancement of your code to display checkboxes in the popup for selection.

But once again I can't understand why your databound controls provide properties DisplayMember and ValueMember, when the result in property Value is always made from DisplayMember not of ValueMember? In your code I would expect an array of int as Value type not array of string if I choose "ID" as ValueMember. Maybe I'm on a bad track expecting that?

Thoses 2 questions would also improve my life greatly.

If I can add a 3rd question:
Is there a way to have the Datasource row-independant instead of column-dependant like it is actually? In my particular scenario, when this column's Editor opens, the full possible choices will not be the same depending on the actual row's data.

So, in short, would it be possible to improve on the code to:
1) Display checkboxes (an make them clikable so the user down,t have to use the keyboard to make multiple selections)
2) Show DisplayMember, but return ValueMember (store the ValueMember in the Tag of the listitems maybe? Use String[,] instead of String []?)
3) Have a way to populate the datasource of the Editor from CellBeginEdit, or another more "on-demand" location instead of the column itself.

[Stefan]

Hello Philippe,

Thank you for writing.

Thank you for your kind words. I forwarded them to my boss.:). Happy Holidays!

To your questions:
1. thanks for reply. I've looked into the code and test the application, seems to be what I expected. Maybe it is an enhancement of your code to display checkboxes in the popup for selection.

It is not an enhancement of the Create MultiColumnListBox based on RadGridView, since the approach there is absolutely different - we use the default grid functionality and slightly change the control appearance by hiding borders, column headers, etc.

2. But once again I can't understand why your databound controls provide properties DisplayMember and ValueMember, when the result in property Value is always made from DisplayMember not of ValueMember? In your code I would expect an array of int as Value type not array of string if I choose "ID" as ValueMember. Maybe I'm on a bad track expecting that?

Our controls have the DisplayMember and ValueMember properties exactly for this reason - to determine what should be displayed and what should be returned as value. However, this is a custom example and this does not apply for it. It is made to work only with strings and this is why when you set the ValueMember it does not change its return type. Please investigate the examples' code carefully and you will find our how it works.

Attached you can find a modified version of the project which displays the strings while as Values it holds the integers.

3. Is there a way to have the Datasource row-independant instead of column-dependant like it is actually? In my particular scenario, when this column's Editor opens, the full possible choices will not be the same depending on the actual row's data.

Please refer to the following article which explains how to do that. Please note that is it important that your column DataSource contains all possible values: http://www.telerik.com/support/kb/winforms/gridview/cascading-comboboxes-in-radgridview.aspx.

Also, the attached solution supports the different row data source and check boxes as well.

I hope this helps.

Kind regards,
Stefan
the Telerik team

[Philippe]

Just added you code to my project. It still needs some tweaking to make it fit perfectly into my scenario, but I can already say that you nailed it! With this code sample, you solved all 3 of the issues I had in an elegant way, and even answered questions as to why some of my previous tests weren't working.

I cannot put up the "Mark as answered" flag, as I am not the thread owner, but this is definitely the shove in the right direction that I needed.

You have my deepest thanks Stefan. Your code will definitely be put to good use. It is great work.

[Stefan]

Hi Philippe,

I am glad that I could help. Thank you for the kind words.

Should you have any other questions, do not hesitate to contact us.

Regards,
Stefan
the Telerik team

[Philippe]

Hello again Stefan

I have put your code in my program, and up to now, it is working nicely. The question have today is a cosmetic one.

At some spots in my code, I am using a basic MultiColumn dropbox as a custom editor. To be able to display an editor larger than it's source column, I use the following code snipplet:

private void radGridView1_CellBeginEdit(object sender, GridViewCellCancelEventArgs e)
{
    if (this.radGridView1.CurrentColumn is GridViewMultiComboBoxColumn)
    {
        RadMultiColumnComboBoxElement editor = (RadMultiColumnComboBoxElement)this.radGridView1.ActiveEditor;
        editor.EditorControl.MasterTemplate.AutoGenerateColumns = true;
        editor.AutoSizeDropDownToBestFit = true;
    }
}

Is there a way for you to show me how to have some kind of "Autofit width" for your custom editor, so the Editor could possibly display larger than the column itself? I am not sure where I should put in that kind of code, nor what it would look like. (old school VB6 programmer here, all thoses objects are still kinda abstract to me sometimes)

In the very same mindset, can I dynamically adjust the height of the Editor somehow? When there are 100 rows to pick from, I would like the Editor to display more than 5.

[Stefan]

Hello Philippe,

Thank you for writing back.

If I understand correctly, you want to size the inner grid of the RadMultiColumnComboBoxElement to fit its columns content. If so, this can be done with the AutoSizeDropDownToBestFit, just like you did in your code snippet. 

As to changing the editors' height, you can do that by changing the whole row height. You can achieve this by increasing it in the CellBeginEdit event and restoring it in the CellEndEdit event.

Here is a code snippet of both:

void radGridView1_CellEndEdit(object sender, GridViewCellEventArgs e)
{
    e.Row.Height = 22;
}

void radGridView1_CellBeginEdit(object sender, GridViewCellCancelEventArgs e)
{
    if (this.radGridView1.CurrentColumn is GridViewMultiComboBoxColumn)
    {
        e.Row.Height = 50;
        RadMultiColumnComboBoxElement editor = (RadMultiColumnComboBoxElement)this.radGridView1.ActiveEditor;
        editor.EditorControl.Columns.Add(new GridViewTextBoxColumn("OrderID"));
        editor.EditorControl.Columns.Add(new GridViewTextBoxColumn("Quantity"));
        editor.EditorControl.Rows.Add("this is some long text", "this is even longer text to fit");
        editor.AutoSizeDropDownToBestFit = true;
    }
}t

You can see the result in the attached image. 

Off topic, your question does not seems to be related to the initial subject of this thread. For this reason I would like to kindly ask you to open a new thread and address your question there. In addition, you can take a look at our forum usage rules: http://www.telerik.com/community/forums/winforms/gridview/important-information-on-using-the-telerik-forums.aspx.
 
Regards,
Stefan
the Telerik team

[Philippe]

Hello Stefan

Apologies if I broke forum rules. It is just that my questions are directly related to the code you provided for me in this thread, on the post of December 19th. It is not the radMultiColumnComboBoxElement that I want to modify, I just provided that code to support my question. It is the width and height of the poped-up CustomDropDownListEditor in this very thread.

The features I have no clue how to implement are Editor.AutoSizeDropDownToBestFit to display an editor larger than it's host column, and Editor.Height to be able to see more than the current 5 lines (not actual bigger lines).

Thanks.

[Stefan]

Hi Philippe,

Thank you for the clarification.

The drop down editor, does not have such a functionality out of the box. You can achieve it by subscribing to the PopupOpening event of the CustomEditorElement in its constructor and handle the event as follows:

void CustomEditorElement_PopupOpening(object sender, System.ComponentModel.CancelEventArgs e)
{
    int maxWidth = 0;
    foreach (RadListDataItem item in this.Items)
    {
        if (maxWidth < TextRenderer.MeasureText(item.Text, item.Font).Width)
        {
            maxWidth = TextRenderer.MeasureText(item.Text, item.Font).Width;
        }
    }

    maxWidth += this.ListElement.VScrollBar.Size.Width;
    maxWidth += 20; //(include check box)
    this.Popup.Size = new Size(Math.Max(maxWidth, this.Popup.Size.Width), this.Popup.Size.Height);
}

I hope that you find this useful.

Kind regards,
Stefan
the Telerik team

[Philippe]

Hello Stefan

Thumbs up! That's exactly what I needed. Thanks alot!

-Philippe