This is a migrated thread and some comments may be shown as answers.

Filterable/Sortable Column Chooser for GridView

9 Answers 118 Views
New Product Suggestions
This is a migrated thread and some comments may be shown as answers.
erwin
Top achievements
Rank 1
Veteran
Iron
erwin asked on 02 Feb 2016, 01:18 PM

Suggested improvements to the GridView ColumnChooser window: 

Some of my grids offer more than 100 optional columns in the column chooser. Finding a column could be sped up if the column chooser offered a 'Contains' filter.

Sorting the column in the column chooser

Hide the background text on the column chooser if it's covered by column buttons. Currently if you have a full column chooser, some black points show through between the column buttons.

Regards

erwin

9 Answers, 1 is accepted

Sort by
0
Dimitar
Telerik team
answered on 03 Feb 2016, 03:39 PM
Hi Erwin,

Thank you for your feedback.

The sorting is already supported and you can set the sort order once the column chooser is shown. You can hide the text as well (use the ColumnChooserCreated event to subscribe to the Shown event):
private void ColumnChooser_Shown(object sender, EventArgs e)
{
    var columnChooser = sender as GridViewColumnChooser;
    columnChooser.ColumnChooserControl.ColumnChooserElement.SortOrder = RadSortOrder.Descending;
 
    if (columnChooser.Height < columnChooser.Columns.Count * 20)
    {
        columnChooser.ColumnChooserControl.ColumnChooserElement.Text = "";
    }
}

It is possible to add a contains filter. For this, you can add a textbox to the column chooser and filter the items when the text is changed:
RadTextBox textbox = new RadTextBox();
private void RadGridView1_ColumnChooserCreated(object sender, ColumnChooserCreatedEventArgs e)
{
    e.ColumnChooser.Shown += ColumnChooser_Shown;
 
    if (!e.ColumnChooser.ColumnChooserControl.Controls.Contains(textbox))
    {
        textbox.Size = new Size(220, 20);
        textbox.TextChanged -= Textbox_TextChanged;
        textbox.TextChanged += Textbox_TextChanged;
        e.ColumnChooser.ColumnChooserControl.ColumnChooserElement.Margin = new Padding(1, 22, 1, 1);
        e.ColumnChooser.ColumnChooserControl.Controls.Add(textbox);
    }
}
 
private void Textbox_TextChanged(object sender, EventArgs e)
{
    var columnChooser = radGridView1.ColumnChooser.ColumnChooserControl.ColumnChooserElement;
    columnChooser.UpdateView();
    foreach (ColumnChooserItem item in columnChooser.ElementsHolder.Children.ToList())
    {
        if (!item.Text.Contains(textbox.Text))
        {
 
            columnChooser.ElementsHolder.Children.Remove(item);
        }
    }
}

We will consider adding this functionality if we receive more request for it.

I hope this will be useful.

Regards,
Dimitar
Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
erwin
Top achievements
Rank 1
Veteran
Iron
answered on 03 Feb 2016, 04:40 PM

Thanks Dimitar,

RadElementCollection has no ToList() Method, is there an extension method to be included?

Regards

Erwin

0
Dimitar
Telerik team
answered on 04 Feb 2016, 10:36 AM
Hello Erwin,

Thank you for writing back.

ToList is a method of IEnumareble and it is available in .NET 4.0: Enumerable.ToList(TSource) Method (System.Linq)

Instead, you can manually create a list of the items that should be removed:
var itemsToRemove = new  List<ColumnChooserItem>();  
 
foreach (ColumnChooserItem item in columnChooser.ElementsHolder.Children)
{
    if (!item.Text.Contains(textbox.Text))
    {
        itemsToRemove.Add(item);
    }
}
 
foreach (var item in itemsToRemove)
{
    columnChooser.ElementsHolder.Children.Remove(item);
}

Please let me know if there is something else I can help you with. 
 
Regards,
Dimitar
Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
erwin
Top achievements
Rank 1
Veteran
Iron
answered on 04 Feb 2016, 01:18 PM

Thanks, Dimitar.

I have no dependency on Linq in this project , therefore the Extension Method not available.

The example code works well as long as the column visibility is not changed (for example by clicking Hide in context Menu of the Grid).

My users are a little confused how to use the column chooser, what I would like is a column chooser that resembles the one in MS Office products (for example Outlook).

 

 

 

Kind Regards

 

 


 
0
Dimitar
Telerik team
answered on 05 Feb 2016, 09:31 AM
Hello Erwin,

Thank you for writing back.

I am not sure how to reproduce the case where this is not working. This is why I would like to kindly ask you to provide me with the exact steps that I need to take in order to reproduce the issue on my end. 
Once I am able to do that, I will be able to investigate it and provide you with a solution. 

In order to replicate the Field Chooser (see attached image) from Outlook, you can change the text box with a RadDropDownList and when an item is selected show specific columns only (for example use the SelectedIndexChanged event to filter the items according to the selected item). 

I am looking forward to your reply.

Regards,
Dimitar
Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
jay taylor
Top achievements
Rank 1
answered on 13 Jun 2017, 03:06 PM
I too would like to see filtering capability available for the column chooser. I anticipate needing to filter by column datatype and by a grouping written into the column headers, like Accounting, Sales, etc.
0
Dimitar
Telerik team
answered on 14 Jun 2017, 05:55 AM
Hello Henry,

This functionality will be available in the next official release scheduled for later today. 

I hope this will be useful. Let me know if you have additional questions.

Regards,
Dimitar
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Marc
Top achievements
Rank 1
Veteran
answered on 24 Oct 2017, 02:01 PM

Hey Dimitar,

another question to this.
After searching the ColumnChooser, I added the Column via DragDrop or DoubleClick to the Grid.

After that the text I have searche allready shown in the textbox, but all columns where shown.
What's the event I have go to, to delete the string in textbox?

 

Regards

0
Dimitar
Telerik team
answered on 25 Oct 2017, 07:23 AM
Hello Marc,

You can check when a column is made visible and then reset the filter. This can be done by subscribing to the RadPropertyChanged event of each column:
public RadForm1()
{
    InitializeComponent();
    radGridView1.DataSource = GetTable();
 
    radGridView1.ColumnChooserCreated += RadGridView1_ColumnChooserCreated;
    foreach (var item in radGridView1.Columns)
    {
        item.RadPropertyChanged += Item_RadPropertyChanged;
    }
}
 
private void Item_RadPropertyChanged(object sender, Telerik.WinControls.RadPropertyChangedEventArgs e)
{
    if (e.Property.Name == "IsVisible" && radGridView1.ColumnChooser.Visible && (bool)e.NewValue)
    {
        radGridView1.ColumnChooser.ColumnChooserControl.FilterTextBox.Text = "";
    }
}

I hope this will be useful. Let me know if you have additional questions.

Regards,
Dimitar
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
New Product Suggestions
Asked by
erwin
Top achievements
Rank 1
Veteran
Iron
Answers by
Dimitar
Telerik team
erwin
Top achievements
Rank 1
Veteran
Iron
jay taylor
Top achievements
Rank 1
Marc
Top achievements
Rank 1
Veteran
Share this question
or