Adding CheckBox to all columns in radgrid Header

Question

How to add checkbox to all the header columns (Like in the image) and get the checked value, here autogeneratecolumns is true. Pls suggest programmatically or Clientside. I tried telerik demos but not much of help from there. enter image description here Correction in Img: For all the columns, Including Article Type.

Not every column seems to have a checkbox, for example Article Type why is that? If the AutoGenerateColumns="True" how can you determine which columns need a checkbox and which ones don't? This really makes a huge difference for finding the best solution. It would seem that in your case you're better off not auto-generating the columns... — Oceans
Thank you for the suggestion, but the requirement is such that all columns should've check boxes, depend upon checked values some other operation need to be done. Anyhow the number of columns will be fixed, can you suggest when AutoGenerateColumns="False"? I will make the changes. — Jay K
It's also possible while auto-generating the columns, but in your screenshot there was a column missing a checkbox which was confusing me. In order for me to help you I'd need to know what exactly you want to do with the result of the checkboxes? Do you need something to happen on each checkbox changed event, or will you create a method that does something with all the checked columns? — Oceans
There was a mistake in Image, I've updated it. Actually all the columns need to have the checkbox. Checkbox changed event not required, on Button click need to take the checked as well as unchecked values for further processing. Thanks. — Jay K
@Oceans Can you please provide the solution, as the requirement is urgent. Any clarification required .? — Jay K

Oceans Oceans · Accepted Answer · 2018-01-23T11:51:21

There are multiple ways to get the desired result but here is the first solution I could come up with. I'd need to know a lot more about the exact requirements in order to find the best solution for your situation.
Based on the current information you've provided, this is the best I could come up with:

First you'll want to implement the OnAutoGeneratingColumn event of your GridView.

<telerik:RadGridView x:Name="MyGridView" AutoGenerateColumns="True" AutoGeneratingColumn="MyGridView_OnAutoGeneratingColumn"  ItemsSource="{Binding MyData}" />

In this event you can customize the columns being generated. You could for example escape the generation of certain columns or customize anything you want really. In your situation you'll want to add a CheckBox to the Header of course.

private void MyGridView_OnAutoGeneratingColumn(object sender, GridViewAutoGeneratingColumnEventArgs e)
{
    //Extra1: Ignore this event for certain columns
    if (e.Column.UniqueName.Contains("extra1"))
    {
        return;
    }
    //Extra2: Disable the generation of a column entirely
    if (e.Column.UniqueName.Equals("extra2"))
    {
        e.Cancel = true;
        return;
    }

    //Place a CheckBox inside the header
    e.Column.Header = new StackPanel()
    {
        Orientation = Orientation.Vertical,
        Children =
        {
            new TextBlock()
            {
                Text = e.Column.UniqueName,
                Margin = new Thickness(2),
                HorizontalAlignment = HorizontalAlignment.Center
            },
            new CheckBox()
            {
                Margin = new Thickness(2),
                HorizontalAlignment = HorizontalAlignment.Center
            }
        }
    };
}

This should now give you the desired result as shown on your screenshot.

The second part is to get the list of checked columns. For this part I don't really know what exactly you're looking for but I'll just give you something to get you started.
Consider the following to be the OnClick event of a button:

private void MyButton_OnClick(object sender, RoutedEventArgs e)
{
    var cols = new List<GridViewColumn>();
    foreach (var col in MyGridView.Columns)
    {
        var hc = MyGridView.ChildrenOfType<GridViewHeaderCell>().FirstOrDefault(q => q.Column != null && q.Column.UniqueName == col.UniqueName && q.Column.DisplayIndex == col.DisplayIndex);
        if (hc == null) continue;
        var cb = hc.FindChildByType<CheckBox>();
        if (cb != null && cb.IsChecked == true)
            cols.Add(col);
    }
    MessageBox.Show(string.Join(", ", cols.Select(q => q.UniqueName)));
}

If you have any more questions or need any more help, just leave a comment.

Update: I was using the WPF version of telerik which is why I used the telerik:RadGridView. I didn't realize you were using the ASP.NET AJAX version which makes yours a telerik:RadGrid.

I believe the equivalent of my OnAutoGeneratingColumn event would be OnColumnCreated in your version, here is the documentation of telerik

I'd also appreciate it if you could mark this as the answer if this solved your problem, or at least give this an up-vote if this helped you in any way.

Adding CheckBox to all columns in radgrid Header

1 Answers