Add button to RadGridView Column Header

[alex]

Hello,

I created the ColumnsVisibility attached property to the RadGridView.

When the user clicks the columns' header, I open a context menu that shows all the columns.

Then the user can show/hide the columns by updating the IsVisible property. I am interested to add a button to the left of the first columns header.

The new button will open the Context Menu instead of clicking the Column Header.

I need this functionality because if the users hides all the colums, then there is no header and he will not able to open the menu at all, which means the columns visibilty can't be restored.

I can't attach the property to the RadGridView itself because I have another menu there.

A better solution may be to add this attached property to another style of a control part in the RadGridView template.

I am wondering if there is another control in your template (under the GridViewColumnHeader).

 

At the end I need to open a context menu in the top of the RadGridView but in parallel to open a different ContextMenu when the user clicks and empty space in the rest of the RadGridView (middle/bottom).

[Martin Ivanov]

Hello Alex,

I would recommend you to check the Control Panel feature of RadGridView. This will allow you to add a button that will open a drop down menu with the columns list. The control panel is positioned on the top right corner of RadGridView, just above the columns. You can find a runnable example showing how to show and hide columns using the control panel here: https://github.com/telerik/xaml-sdk/tree/master/GridView/ControlPanel

I hope that helps.

Regards,
Martin Ivanov
Progress Telerik

[alex]

Thank you  that is exactly what I need!

Currently I have a complex attached behavior that creates the menu with two way binding between the is Checked of the ToggleButton to the IsVisible of the grid.

At the beginning I taught to add dynamically the button to the panel but your xaml code is simple and better.

How do I add to this xaml and addition option: Select/Unselect All ?

 

<telerik:RadGridView.ControlPanelItems> 

    <telerik:ControlPanelItem ButtonTooltip="Column chooser"> 

      <telerik:ControlPanelItem.Content> 

        <ListBox ItemsSource="{Binding Columns}" BorderThickness="0"> 

          <ListBox.ItemTemplate> 

            <DataTemplate> 

              <CheckBox Content="{Binding Header, Mode=OneWay}" IsChecked="{Binding IsVisible, Mode=TwoWay}" /> 

            </DataTemplate> 

          </ListBox.ItemTemplate> 

        </ListBox> 

      </telerik:ControlPanelItem.Content> 

    </telerik:ControlPanelItem> 

  </telerik:RadGridView.ControlPanelItems>

 

 

And please help me with a quick example how can I put a button with another icon (like in your examples) that executes a command with command parameter. 

When I override the template and add a button,  I see the button when I click the ControlPanelItem (I have the panel item and when I click I see a menu with a button inside).

[Martin Ivanov]

Hello Alex,

To add a Select/Deselect All element for the ListBox, you can do that directly in the Content of the ControlPanelItem.

<telerik:ControlPanelItem ButtonTooltip="Column chooser">
	<telerik:ControlPanelItem.Content>
		<Grid>
			<Grid.RowDefinitions>
				<RowDefinition Height="Auto" />
				<RowDefinition />
			</Grid.RowDefinitions>
			<Border Background="Bisque">
				<CheckBox Content="Select All" Click="CheckBox_Click" IsChecked="True" Margin="6" FontWeight="Bold" />
			</Border>
			<ListBox ItemsSource="{Binding Columns}" BorderThickness="0"
					 Grid.Row="1">
				<ListBox.ItemTemplate>
					<DataTemplate>
						<CheckBox Content="{Binding Header, Mode=OneWay}" IsChecked="{Binding IsVisible, Mode=TwoWay}" />
					</DataTemplate>
				</ListBox.ItemTemplate>
			</ListBox>
		</Grid>	  
	</telerik:ControlPanelItem.Content>
</telerik:ControlPanelItem>

private void CheckBox_Click(object sender, RoutedEventArgs e)
{
	var checkBox = (CheckBox)sender;            
	foreach (var column in this.gridView.Columns)
	{
		column.IsVisible = checkBox.IsChecked.Value;
	}
}

About the button and the command, the button in the ControlPanelItem is a RadDropDownButton which means that you cannot directly use a standard button there. What I can suggest is to define it as a settings menu and add buttons in the dropdown. 

<telerik:RadGridView.ControlPanelItems>
<telerik:ControlPanelItem>
	<telerik:ControlPanelItem.ButtonContent>
		<telerik:RadGlyph Glyph="&#xe13a;" />
	</telerik:ControlPanelItem.ButtonContent>
	<telerik:ControlPanelItem.Content>
		<Border Background="Bisque" Padding="8">
			<StackPanel Orientation="Horizontal">
				<telerik:RadButton Content="Option A" Command="{Binding MyCommandA}"/>
				<telerik:RadButton Content="Option B" Command="{Binding MyCommandB}" Margin="5 0 0 0"/>
			</StackPanel>
		</Border>
	</telerik:ControlPanelItem.Content>
</telerik:ControlPanelItem>
<telerik:ControlPanelItem ButtonTooltip="Column chooser">
	<telerik:ControlPanelItem.Content>
		<!-- column chooser xaml here -->
	</telerik:ControlPanelItem.Content>
</telerik:ControlPanelItem>
</telerik:RadGridView.ControlPanelItems>

To add image to the additional buttons, you can use RadGlyph as with the ButtonContent in the previous example, or you can use an Image control with your own icon. To assign the glyph or the image to the buttons, you can use their Content property.

I hope that helps.

Regards,
Martin Ivanov
Progress Telerik

[alex]

Thank you, I put all the code in a user control for reuse.

Now I am facing another issue. I put the content in the RadGridView style. When I open two windows with one grid in each window, the icon dissapears from the first grid (only visible in second grid).

Can you check this please?

x:Shared="False" in the ButtonContent didn't work.

I followed this solution:

https://stackoverflow.com/questions/709228/wpf-disappearing-icons

 

In addition, I put additional buttons in a stack panel, next to the ControlPanelsItems (because you have only the RadDropDownButton). What is the style key that I should use to have the same style of the RadDropDownButton in the regular button?

For example, I can see that the border brush is different. I dont like to put hard coded colors, I use styles for better flexibility in the future (change all styles in one place)

[alex]

I fixed the issue. I added an attached property and I create the content template and the button content for every instance.

You may close this issue.

Thanks!

[Martin Ivanov]

Great to hear that and thank you for sharing it.

[alex]

Hello Martin, 

I have another panel with buttons that are located on top of the grid, left to ControlPanelItem.

How can I configured the same style of those buttons (RadDropDodnButton) into a regular Button.

We implemented common styles for each type without using key, so I would like to have the same style for all the buttons.

[Martin Ivanov]

You can use the ControlPanelItemControl elements outside of the RadGridView's control panel. Or you can just use RadDropDownButton which is the main element of the control panel items. To style the standard dropdown button the same as the one in the ControlPanelItemControl, you can base its Style to the ControlPanelItem_DropDownButtonStyle that you can find in the Telerik's GridView .xaml file.

[alex]

Thank you Martin for your sugguestion.

There is a way to apply the style to a normal button? some of my buttons are not dropdown, but I need the same background, thickness, etc.

[Martin Ivanov]

The "ControlPanelItem_DropDownButtonStyle" can be applied only to buttons of type RadDropDownButton. To customize other buttons, like RadButton or the WPF native Button, you can create separate Styles for these. You can explore the "ControlPanelItem_DropDownButtonStyle" and take ideas for the other button styles from there.

[alex]

Can you share the ControlPanelItem_DropDownButtonStyle please?

[Martin Ivanov]

Here are the steps to get this style:

1. Open your Telerik installation folder and navigate to the Themes.Implicit folder. Usually the path is: C:\Program Files (x86)\Progress\Telerik UI for WPF R1 2023\Themes.Implicit\WPF. The name of the Telerik product folder will vary based on the installed version. You can install the product using the .msi installer  or you can download the .zip file.
2. Open the folder with the corresponding theme. For example: "Windows 11".
3. Open the Telerik.Windows.Controls.GridView.xaml file.
4. In the .xaml file search for the Style with x:Key set to ControlPanelItem_DropDownButtonStyle
5. Copy the Style, Template and all associated resources in your project and modify them as needed.