GridView with Dynamic ComboBox Column Header

0 Answers 78 Views
ComboBox GridView
Kim
Top achievements
Rank 1
Kim asked on 04 Dec 2023, 12:16 AM

Hello, Telerik

I want to create a feature with the following characteristics:

1. Use of the MVVM pattern.
2. The number of columns in the DataGridView is not fixed but dynamic. (Users can specify the number of columns as an option, allowing for dynamic changes.)
3. Only the first column's text is fixed, while the 2nd to nth columns are ComboBoxes, allowing users to select which columns they want to view.

For example, if a class has (name, age, gender, department, major, student number, average grade, highest grade, lowest grade) as fields,
'Name' is always shown in the first column as fixed data.
'Age' to 'Lowest Grade' are available as ComboBox options for users to select and view as they wish.

If n = 5, it could be displayed as follows:

      1st               | 2nd |    3rd    |     4th |    5th
Name (Fixed) | Age | Gender | Major | Avg Score

or
       1st             | 2nd    |      3rd         | 4th         | 5th
Name (Fixed) | Major | Avg Score | Max Score | Min Score

In this way, users can view data in the columns of their choice.

As mentioned, since the number of columns is dynamic, I don't want to write the column code as below.

<telerik:RadGridView.Columns>
                <telerik:GridViewDataColumn Header="column 1" DataMemberBinding="{Binding data_1}"/>
                <telerik:GridViewDataColumn Header="column 2" DataMemberBinding="{Binding data_2}"/>
                <telerik:GridViewDataColumn Header="column .." DataMemberBinding="{Binding data_1}"/>
                <telerik:GridViewDataColumn Header="column n" DataMemberBinding="{Binding data_n}"/>

</telerik:RadGridView.Columns>

 

I searched all the SDK examples and forums, but I don't know how to write it.

Thank you in advance.

Stenly
Telerik team
commented on 06 Dec 2023, 02:27 PM

Kim
Top achievements
Rank 1
commented on 11 Dec 2023, 01:44 AM

Hello Stenly,

The given examples are slightly different from what I want, including in terms of design. I don't want to use the Column Header's Filter, but rather use a ComboBox as the Column Header. Is there no way to do this?

Stenly
Telerik team
commented on 13 Dec 2023, 12:25 PM

I am not sure that I understand this inquiry. Would it be possible to share a bit more information about it? For example, an image that shows the end result?
Kim
Top achievements
Rank 1
commented on 19 Dec 2023, 12:44 PM

The desired result images are as follows:

Figure 1) This is the Data Grid displayed to the user. The first Name Column Header is a regular text, and the second to the nth Column Headers are composed of ComboBoxes.

Figure 2) This is the appearance when the user selects a ComboBox in the Column Header.

Figure 3) This is the appearance after the user has changed the value in the ComboBox.

As shown in the above images, I want to allow the user to select the data they want to see directly using ComboBoxes in the Column Headers. Additionally, if possible, I would like to allow the user to input the number of columns as well. If the user enters 3, it should display 3 columns, and if they enter 6, it should display 6 columns, and so on.

How can I create this?

Thank you.

Stenly
Telerik team
commented on 22 Dec 2023, 09:59 AM | edited

RadGridView is not intended to work in such a manner, nor does it expose an API to customize the GridViewHeaderCell element, apart from specifying a Style for it.

A possible way of achieving this requirement would be to modify the default ControlTemplate of the GridViewHeaderCell element to include a ComboBox control. Its ItemsSource property can be set to the columns' collection of the RadGridView control. When a selection is performed, the column, that the ComboBox has raised the SelectionChanged event, can have its DataMemberBinding property changed to a new Binding instance for the new property.

Regarding the number of columns that can be generated, since the RadGridView will display dynamic data, the examples from my initial reply can be used. You can retrieve the input by the user and generate the number of columns based on it.

However, we do not have such an example that I could share with you.

No answers yet. Maybe you can help?

Tags
ComboBox GridView
Asked by
Kim
Top achievements
Rank 1
Share this question
or