How to (auto) resize a GridViewColumn with multiple buttons which visibility is bound to view model?

[Peter]

Hi,

I have a RadGridView containing a GridViewColumn which contains four 'action' buttons.

<telerik:GridViewColumn Header="{x:Static commonResources:CommonResources.ActionColumn}" >
    <telerik:GridViewColumn.CellTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <bc:RadGridViewActionButton NormalImage="../Images/dgy_040_edit_normal.png"
                                            MouseOverImage="../Images/bk_040_edit_normal.png"
                                            Visibility="{Binding Path=DataContext.IsModifySupported, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type telerik:RadGridView}}, Converter={StaticResource BooleanToVisibilityConverter}}"
                                            ToolTip="{Binding Path=DataContext.ModifyCommandToolTip, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type telerik:RadGridView}}}"
                                            Command="{Binding Path=DataContext.ModifyCommand, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type telerik:RadGridView}}}" />
                <bc:RadGridViewActionButton NormalImage="../Images/dgy_200_details_normal.png"
                                            MouseOverImage="../Images/bk_200_details_normal.png"
                                            Visibility="{Binding Path=DataContext.IsViewSupported, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type telerik:RadGridView}}, Converter={StaticResource BooleanToVisibilityConverter}}"
                                            ToolTip="{Binding Path=DataContext.DetailsCommandToolTip, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type telerik:RadGridView}}}"
                                            Command="{Binding Path=DataContext.DetailsCommand, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type telerik:RadGridView}}}" />
                <bc:RadGridViewActionButton NormalImage="../Images/dgy_030_delete_normal.png"
                                            MouseOverImage="../Images/bk_030_delete_normal.png"
                                            Visibility="{Binding Path=DataContext.IsDeleteSupported, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type telerik:RadGridView}}, Converter={StaticResource BooleanToVisibilityConverter}}"
                                            ToolTip="{Binding Path=DataContext.DeleteCommandToolTip, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type telerik:RadGridView}}}"
                                            Command="{Binding Path=DataContext.DeleteCommand, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type telerik:RadGridView}}}" />
                <bc:RadGridViewActionButton NormalImage="../Images/dgy_028_copy_normal.png"
                                            MouseOverImage="../Images/bk_028_copy_normal.png"
                                            Visibility="{Binding Path=DataContext.IsCopySupported, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type telerik:RadGridView}}, Converter={StaticResource BooleanToVisibilityConverter}}"
                                            ToolTip="{Binding Path=DataContext.CopyCommandToolTip, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type telerik:RadGridView}}}"
                                            Command="{Binding Path=DataContext.CopyCommand, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type telerik:RadGridView}}}" />
            </StackPanel>
        </DataTemplate>
    </telerik:GridViewColumn.CellTemplate>
</telerik:GridViewColumn>

In the view model I set the visibility of the 'action' buttons.

This works well in the sense that the buttons are displayed or hidden in the grid.

But the 'Action' column with always takes into account the total width of all four buttons even when some of them are not displayed.

How can I get the GridViewColumn to only take up as much space as the actual displayed buttons?

Thanks,
Peter

[Dimitrina]

Hello Peter,

Hiding or showing part of the content in the column (a Button) will not resize it by default.
I may suggest you configuring the column with a proper Width:

<telerik:GridViewColumn Width="SizeToCells"> 

Then, the user will need to position the mouse on the left border of the column's header and double click on it in order to Auto re-size the size to the content of the cells.

Regards,
Dimitrina
Telerik

 

 

[Peter]

Hi Dimitrina,

Thanks for the help. I have added Width="SizeToCells" but it doesn't do anything?

<telerik:GridViewColumn Header="{x:Static commonResources:CommonResources.ActionColumn}" Width="SizeToCells" >
    <telerik:GridViewColumn.CellTemplate>
        <DataTemplate>
            <bc:DefaultMaintenanceGridViewButtons />
        </DataTemplate>
    </telerik:GridViewColumn.CellTemplate>
</telerik:GridViewColumn>

Also double clicking the column header (left border right border or anything) doesn't do anything.

What am I doing wrong here?

Regards,
Peter

[Dimitrina]

Hi,

Regards,
Dimitrina
Telerik

 

 

[Peter]

Hi Dimitrina,

I can't find an attached testproject in your post?

Regards,
Peter

[Dimitrina]

Hi,

As it turns out there is some temporary problem with the attachments posted in forum threads. Hopefully, it will be resolved soon.

Meanwhile, you can open a new support ticket and attach your demo project there. 

Regards,
Dimitrina
Telerik

 

 

[Peter]

Hi Dimitrina,

I have gotten your solution to work now (we had a double click eventhandler on the gridview which resulted in ignoring the double click in the header).

So manually it does now work. However, we don't want the user to have to do this every time in every gridview.

How can we perform this resize automatically as soon as the grid is displayed (and data is has been loaded)? It does not have to happen after the initial display of the gridview. Only on the initial load.

Regards,
Peter

[Dimitrina]

Hi Peter,

As it turns out, after testing all the possible configurations of the Width, I cannot suggest a solution for this particular scenario.

Regards,
Dimitrina
Telerik