I want to add a column to the GridView that will allow me to assign and display multiple values for an item.

For example, imagine you want to track the types (home, office, cell) of telephone numbers for users. Note, this is not my actual requirement.  A user can have multiple telephone number types. I don't want to display two separate rows in the GridView for the same user, though. I want to display one row per user, and have the telephone types column allow the display and assignment of multiple telephone number types (e.g., home, office, cell).

A co-worker came up with the idea of creating a User Control that would contain a combobox control to allow the user to select the telephone number types in the combobox and display the selected values in a listbox below it. I specifically chose types for this example, because there's a limited, known set of them-- that's where the idea of the combobox control came in, that is, I need to choose from a limited set of choices.

I looked at the Forums blog titled, "Possible to Add a User Control a A Grid Column," at the following url:
 http://www.telerik.com/community/forums/winforms/gridview/possible-to-add-a-user-control-to-a-grid-column.aspx 
 . . . and tried to implement the solution therein, but when I tried defining a variable of type GridViewDataColumn I got the following design-time error message:
 'New' cannot be used on a class that is declared 'MustInherit'.

I also tried defining a variable of GridViewColumn, but got the same error message.

Is there a way to add a User Control to a GridView?

As a separate, but related issue, can I add a LinkLabel control to the GridView, and can the GridViewComboBoxColumn display multiple selections?

Hello Hector,

I've provided a solution like this in the past, but you don't really need a new column, you can simply define and use a custom editor for that kind of cells, please take a look at the example I've provided here and also this KB Article on how to add custom elements inside a cell when in design mode.

Hope this helps, if you have any other questions or comments, please let me know,

Best Regards,
Emanuel Varga

Telerik WinForms MVP

Hi Hector,

You can show multiple values in a cell by placing a list element inside. It will add an automatic scrolling when there are more items than the cell can show. Please consider the following sample:

I hope it helps. If you need further assistance with this task, we will be glad to help.
 
Greetings,
Jack
the Telerik team

Firstly, let me thank both Emanuel and Jack. I think I need a combination of the two solutions, though. First, I need the listbox aspect that Jack provided for displaying the values, but then I also need the custom editor aspect that Emanual provided. I'm not sure, however, how to combine the two. I'm going to give it a try.

In essence, though, I want to be able to display multiple values (listbox aspect). When I edit, I want to have a combobox control to choose one of several possible choices, when I choose the item in the combobox, that item gets added to the listbox for display.

I also thought I would need two LinkLabel controls (one that displays Done, another displays Remove), perhaps located under the listbox. Clicking on Done would close editing, and leave the listbox as the display control. Clicking on Remove while editing, removes a selected item from the listbox.

So to recap, a combobox (perhaps located at the top during editing) for adding items, listbox (located just below the combobox) for displaying items, and two link labels (Done and Remove).

Thanks for your prompt reply,

Hector

Jack,

thanks for your prompt reply. I've implemented your example as you instructed to make sure I got the plumbing (or wiring) correct, before changing it to work with my actual data.

I may leave it the way you designed it, but, just in case, can the ListBoxCell be made to expand, showing the RadDropDownListElement and LinkItems only when the cell is clicked?

How can I populate the RadDropDownListElement with the list of possible choices?

Follow-up:

I presented the custom ListBoxCell to a user for review. Following is the user's commments:

The drop-down blends in to the listbox, which appears just below it. How can I provide some spacing (padding) between the drop-down and the listbox?

When the drop-down is selected, the list that drops down blends into the next data row's listbox values. Perhaps setting a different background color to the drop-down list during selection would help. What do you suggest?

Can the Done link be aligned left, while the Remove link be aligned right?

Thanks in advance,

Hector

 

Hello Hector,

Directly to your questions:

Yes, you can "expand" the current row by handling the CurrentRowChanged event. Consider the following code:

In addition, I modified the UpdateInfo method to hide the cell content until the row becomes current:

You can populate the RadDropDownListElement  when handling the CreateChildItems event. Here is an example:

To add spacing, you can use the  ElementSpacing property of StackLayoutElement:

or you can add Margin in RadDropDownListElement:

You can customize almost every aspect of our controls by using the Visual Style Builder tool and modifying any of our existing themes. However, if you prefer to use code, you can customize the background color for the popup by using the following code:

You can align the link buttons by adding a stretchable element between them, as demonstrated below:

I attached the modified code here for your convenience. I hope it helps.

Greetings,
Jack
the Telerik team

Jack,

thanks for your prompt reply. Regarding expanding the row, I only want to expand it when the specific cell column is selected (that is, I'm editing the cell). In our example, it would be the "Phones" column.

By the way, FYI . . . I'm developing in VB.NET, so the code won't exactly help. But don't worry about converting it to VB.NET, I'm doing it while I read you code snippets.

About the Visual Style Builder (VSB) is that a separate tool (I guess I can research this on my own)? Considering we're creating the control programmatically, can I still incorporate the VSB?

Thanks in advance for your reply,

Hector

Jack,

I took a look at the modified code because I wanted to find out where you placed the code that performs the following:


However, I did not find that (nor any of the other new code snippets) in the attached file.

Thnx,

Hector

After reviewing the new updates (spacing, background color, etc.), the user requested that i get rid of the Remove link, replacing it by adding a column to the listbox with an "x" that can be clicked on to remove the item.

I figured the solution would be to use a GridView (instead of adding a column to the listbox), so I tried adding a RadGridViewElement instead of a RadListElement. Unfortunately, I couldn't figure out how to define the columns for the RadGridViewElement. Perhaps I don't understand the relation between the RadGridViewElement and the RadGridView.

Can you help?

I changed my application to use the actual data.

My first issue appeared when I changed the way I populated the dropdownlistelement. Initially, I was populating it by hardcoding the data using Columns.Add. Then I changed it to call a subroutine that calls a stored procedure in the database using a DataReader. I called the subroutine from the CreateChildElements method. Using this approach, I got the following error message: 'Invalid attempt to call FieldCount when reader is closed.'

I'm writing this from home right now so I don't have access to the code.

Any suggestions would be greatly appreciated.

Hello Hector,

Regarding your questions:

If you want to expand the row only when clicking on a specific cell, you have to use the CurrentCellChanged event instead of CurrentRowChanged event. Here is a sample:

Yes, Visual Style Builder is a separate tool used to create or modify new themes. You cannot use it directly from your application, however you can create a theme. Please consider the following help article.

I added the code which checks whether the CurrentRow is Nothing in Form's OnLoad event after setting the data source. This code ensures that the CurrentRow will have the correct size in all cases.

You cannot use RadGridViewElement in the same way you are using RadListElement. The best option in this case is to use custom visual elements in the list box. Here is the code:

You should handle also the CreatingVisualItem event to replace the default visual item:

Regarding the last issue, I am not sure what causes it. Could you please send me your application. This will help me to locate the issue and provide you with accurate support.

Greetings, Jack
the Telerik team

Jack,

I will try your last suggestions shortly. However, for now, here is some information on the exception I'm getting:

InvalidOperationException was unhandled by user code
View Detail:
- InnerException: "Invalid attempt to call FieldCount when reader is closed."
  - StackTrace:
   at System.Data.SqlClient.SqlDataReader.get_FieldCount()
   at System.Data.Common.DbEnumerator.BuildSchemaInfo()
   at System.Data.Common.DbEnumerator.MoveNext()
   at Telerik.WinControls.Data.RadListSource`1.BindToEnumerable()
...

Note: above is an excerpt of the StackTrace. I can provide the full StackTrace if you wish.

...

My HandleException method, showed me that the statement that caused the exception to occur is the following (from PopulateDatabaseDependentControls() method in code, see code block, below):

  Me.dgBidItems.DataSource = bsBidItems

Note, I change the following statement in the CreateChildElements method:
From:
                PopulateDropDownListElement__FromDatabase()
                'PopulateDropDownListElement__UsingHardCodedValues()  ' COMMENTED OUT; NOT CURRENTLY USED
To:
                'PopulateDropDownListElement__FromDatabase()  ' COMMENTED OUT; NOT CURRENTLY USED
                PopulateDropDownListElement__UsingHardCodedValues()

... and it works!

FYI . . . Stored Procedure Returns data as such:

BidItemID   CustomerDesc                               Plants                           DateCreated
14              TestSaveItem201108121517a     PLAA, PLBB                      08/12/2011
19              TestSaveItem201108121517b     PLAA, PLBB, PLCC             08/18/2011

Code Excerpt:

Thanks in advance for your help,

Hector
P.S.  In a way I think you've answered my initial question, and the rest has been detail implementation issues. Should I mark one of the previous responses as an answer, or wait till the final solution?

Jack,

In Emanuel Varga's example, he wired up the Click event handler to the RadButtonElement in the CellBeginEdit event for the GridView.

In your design where would I wire up the event handlers for the dropdownlistElement's SelectedIndexChanged event and the Done and Remove CustomLinkItem(s) Click events?

Thanks in advance for your help,

Hector
Telerik WinControls Newbie, :-)


 

I got rid of the CurrentRowChanged event handler, replacing it with the CurrentCellChanged event handler, and added the code which checks whether the CurrentRow is Nothing in a method called in response to the OnLoad event handler, setting the CurrentRow.Height to my default height as you suggested.

However, when the form initially appears and the data grid displays, the custom cell column displays the dropDownListElement and the listbox (displaying only the first value) for the default selected row. All other rows display just the listElement. When I select a different row, the same thing happens. FYI, I don't know if this affecta anything, but I added the following statement to set the first selection in the dropDownListElement:

 

I want the custom cell element to expand showing all elements only when the user clicks in that specific row and column's cell (i.e., the custom cell element).

How can I limit the height of the drop-down list aspect of the dropDownListElement when the user clicks on the drop-down arrow?

How can I restore the custom cell element to display only the listElement when the user clicks or tabs away from the the custom cell element (e.g., it loses focus). This will allow me to get rid of the Done link altogether.

Hi Hector,

Regarding the exception, it seems to be a generic data binding exception caused by the SqlDataReader used in your application. I found this thread which discusses the issue. 

You have to change the UpdateInfo method in the custom cell element in order to hide the cell contents when the cell is not current:

This code will display the list element only when the cell is current.

To restrict the drop down height, you should set DropDownMinSize and DropDownMaxSize properties:

Feel free to mark this response as an answer when all your questions are answered. If you have any other questions, do not hesitate to open new threads.
 
All the best,
Jack
the Telerik team

Jack,

thanks for the info on the SqlDataReader generic data binding exception. I will investigate that further at a later time.

I've managed to implement a similar fix in UpdateInfo, with the following code:

I added the Boolean, bChangingRowInfoHeight, so I don't set properties to .Visible when I've set RowInfo.Height to default (minimized, only listElement Visible, height) in the the done link event handler (when I click on the Done linkItem). I'm considering whether I even need the Done link anymore.

Thanks for the info on setting the drop-down height.

Regards,

Hector

P.S.   Can I get the e-mail address of your supervisor(s), so I can tell them what a great job you've done.

Hello Hector,

I am glad that I could help. Your code seems OK and will also does the job. I am not allowed to provide you with the e-mail of my supervisor here, because this is public forum thread. However, I made him aware of this thread and your feedback. If you still want to share something about our support services, please find my response in a ticket called "Add User Control to GridView Column Ticket" that you can find in Your Account.

Please do not hesitate to contact me if you have any further questions.
 
Greetings,
Jack
the Telerik team

Dear

I have the following Code, that draw a RadDropDownListElement in second and third row.
But when I execute, and I scrollbar the datagrid,  the RadDropDownListElement is displayed in others rows?
Meanwhile if I make the grid bigger size, it's displayed normal.
Why?  and how to solve it
And how to not allow write or edit in the RadDropDownListElement,  but just select an item.


  Private Sub RadGridView1_CellFormatting(sender As System.Object, e As Telerik.WinControls.UI.CellFormattingEventArgs) Handles RadGridView1.CellFormatting
        If e.RowIndex <> -1 Then
            If e.ColumnIndex = 0 Then
                If e.RowIndex = 2 Then
                    Dim vars As New ArrayList
                    vars.Add("AY@12@" & 2014)
                    vars.Add("Semester@12@" & 1)
                    Dim dt = Programs.ExecuteReturnProcedure(Programs.Company.ID, "GetStudents", vars).Tables(0)
                    Dim cc As New RadDropDownListElement()
                    cc.DataSource = dt
                    cc.DisplayMember = "Number"
                    cc.ValueMember = "Id"
                    e.CellElement.Children.Add(cc)
                ElseIf e.RowIndex = 3 Then
                    Dim dt As New DataTable()
                    dt.Columns.Add("Number")
                    dt.Columns.Add("Id")
                    Dim dr = dt.NewRow()
                    dr("Number") = "One"
                    dr("Id") = "One"
                    dt.Rows.Add(dr)
                    dr = dt.NewRow()
                    dr("Number") = "two"
                    dr("Id") = "two"
                    dt.Rows.Add(dr)
                    dt.AcceptChanges()
                    Dim cc As New RadDropDownListElement()
                    cc.DataSource = dt
                    cc.DisplayMember = "Number"
                    cc.ValueMember = "Id"
                    e.CellElement.Children.Add(cc)
                End If
            End If
        End If
    End Sub

Hello Rawad,

Thank you for writing.

Due to the UI virtualization in RadGridView, cell elements are created only for currently visible cells and are being reused during operations like scrolling, filtering, grouping and so on. That is why you may obtain unexpected behavior like undesired style for some cells. In addition, the CellFormatting event is appropriate for customizing cell's visual design (with the appropriate reset option), not for modifying the internal cell's structure, which may lead to performance issues as well. The recommended approach for achieving the described functionality is creating custom cell. Here is a sample approach:

However, note that our RadDropDownListElement hosts the Microsoft TextBox in its editable part when the DropDownStyle is DropDown. Using controls in grid cells may slow down the scrolling and will cause visual glitches (similar to the one demonstrated in your first screenshot). A better option would be using RadDropDownListEditor for specific cells, which can be specified in the EditorRequired event. 

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

Regards,
Desislava
Telerik