ControlPanelItem with buttons

[Hans]

Hi,

on my data grids I have implemented the functionality to do an save and load the layout, reset the layout to default and to do an export to Excel.  This is done by a ContextMenu defined in a style, which works fine.

        <Setter Property="ContextMenu">
            <Setter.Value>
                <ContextMenu>
                    <MenuItem Header="Export to Excel" Command="{Binding ExportToExcelCmd}" CommandParameter="{Binding Path=PlacementTarget, RelativeSource={RelativeSource Mode=FindAncestor, AncestorLevel=1,  AncestorType={x:Type ContextMenu}}}">
                        <MenuItem.Icon>
                            <Image Source="/Resources/Icons/Excel.png" />
                        </MenuItem.Icon>
                    </MenuItem>
                    <MenuItem Header="Save grid layout" Command="{Binding SaveDataGridLayoutCmd}" CommandParameter="{Binding Path=PlacementTarget, RelativeSource={RelativeSource Mode=FindAncestor, AncestorLevel=1,  AncestorType={x:Type ContextMenu}}}">
                        <MenuItem.Icon>
                            <Image Source="/Resources/Icons/Save.png" />
                        </MenuItem.Icon>
                    </MenuItem>
                    <MenuItem Header="Load grid layout" Command="{Binding LoadDataGridLayoutCmd}" CommandParameter="{Binding Path=PlacementTarget, RelativeSource={RelativeSource Mode=FindAncestor, AncestorLevel=1,  AncestorType={x:Type ContextMenu}}}">
                        <MenuItem.Icon>
                            <Image Source="/Resources/Icons/Refresh.png" />
                        </MenuItem.Icon>
                    </MenuItem>
                    <MenuItem Header="Reset grid layout" Command="{Binding ResetDataGridLayoutCmd}" CommandParameter="{Binding Path=PlacementTarget, RelativeSource={RelativeSource Mode=FindAncestor, AncestorLevel=1,  AncestorType={x:Type ContextMenu}}}">
                        <MenuItem.Icon>
                            <Image Source="/Resources/Icons/Refresh.png" />
                        </MenuItem.Icon>
                    </MenuItem>
                </ContextMenu>
            </Setter.Value>
        </Setter>
Recently I discoverd the ControlPanel control.  I copied/paste the code from the demo to implement the show/hide columns feature.  Now I would like to switch from the above ContextMenu to a ControlPanel with buttons for each action:

                <telerik:ControlPanelItemCollection>
                    <telerik:ControlPanelItem ButtonTooltip="Column chooser" >
                        <telerik:ControlPanelItem.ContentTemplate>
                            <DataTemplate>
                                <ListBox ItemsSource="{Binding Columns}"  BorderThickness="0">
                                    <ListBox.ItemTemplate>
                                        <DataTemplate>
                                            <CheckBox Content="{Binding Header, Mode=OneWay}" IsChecked="{Binding IsVisible, Mode=TwoWay}" />
                                        </DataTemplate>
                                    </ListBox.ItemTemplate>
                                </ListBox>
                            </DataTemplate>
                        </telerik:ControlPanelItem.ContentTemplate>
                    </telerik:ControlPanelItem>
                   
                    <telerik:ControlPanelItem ButtonTooltip="Save/Load layout" >
                        <telerik:ControlPanelItem.Content>
                            <ListBox>
                                    <Button Content="Export to Excel" Command="{Binding ExportToExcelCmd}" CommandParameter="{Binding ?"/>
                                    <Button Content="Save grid layout" Command="{Binding SaveDataGridLayoutCmd}" CommandParameter="{Binding ?}"/>
                                    <Button Content="Load grid layout" Command="{Binding LoadDataGridLayoutCmd}" CommandParameter="{Binding ?}"/>
                                    <Button Content="Reset grid layout" Command="{Binding ResetDataGridLayoutCmd}" CommandParameter="{Binding ?}"/>
                            </ListBox>
                        </telerik:ControlPanelItem.Content>
                    </telerik:ControlPanelItem>

But I'm stuck with the binding of the Command.  As I'm using the MVVM pattern, the Command is bound to a command in my ViewModel.  This works fine for the ContextMenu, but not for the ControlPanel. 

Also, the datagrid itself needs to be send as a parameter with the command and I'm not sure how to do this.

Any help would be much appreciated.

Regards,

Hans

[Stefan]

Hi Hans,

Thank you for the provided code.

In case the ViewModel to which you are trying to bind the commands is the DataContext of RadGridView, you can use it for the binding. Currently, I assume that binding errors are raised on your end that the given ICommand cannot be found on RadGridView. You can observe these errors in the output window of VisualStudio. So, a possible approach to use the DataContext of RadGridView for the data binding would be similar to the one below.

<telerik:ControlPanelItem ButtonTooltip="Save/Load layout" >
                 <telerik:ControlPanelItem.Content>
                     <ListBox>
                         <Button Content="Export to Excel" Command="{Binding DataContext.ExportToExcelCmd}" CommandParameter="{Binding ?}"/>
                         <Button Content="Save grid layout" Command="{Binding DataContext.SaveDataGridLayoutCmd}" CommandParameter="{Binding ?}"/>
                         <Button Content="Load grid layout" Command="{Binding DataContext.LoadDataGridLayoutCmd}" CommandParameter="{Binding ?}"/>
                         <Button Content="Reset grid layout" Command="{Binding DataContext.ResetDataGridLayoutCmd}" CommandParameter="{Binding ?}"/>
                     </ListBox>
                 </telerik:ControlPanelItem.Content>
             </telerik:ControlPanelItem>

As for the CommandParameter, you could use ElementName binding, for example.

Can you please check this out and let me know how it goes?

Regards,
Stefan
Progress Telerik

[Hans]

Hi Stefan,

Binding to the DataContext did the trick !  As far as the CommandParameter, I just had to use {Binding} to get it to work. 
Thanks a lot for the help !

Best Regards,
Hans

[Stefan]

Hi Hans,

Thank you for the update.

I am happy to hear that my suggestion help.

Feel free to contact us again in case any other assistance with our components is needed.

Regards,
Stefan
Progress Telerik