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

8 posts, 0 answers
  1. Peter
    Peter avatar
    10 posts
    Member since:
    Feb 2015

    Posted 24 Feb 2015 Link to this post

    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


  2. Dimitrina
    Admin
    Dimitrina avatar
    3769 posts

    Posted 25 Feb 2015 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. Peter
    Peter avatar
    10 posts
    Member since:
    Feb 2015

    Posted 26 Feb 2015 Link to this post

    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
  4. Dimitrina
    Admin
    Dimitrina avatar
    3769 posts

    Posted 26 Feb 2015 Link to this post

    Hi,

    Regards,
    Dimitrina
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  5. Peter
    Peter avatar
    10 posts
    Member since:
    Feb 2015

    Posted 26 Feb 2015 in reply to Dimitrina Link to this post

    Hi Dimitrina,

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

    Regards,
    Peter
  6. Dimitrina
    Admin
    Dimitrina avatar
    3769 posts

    Posted 26 Feb 2015 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  7. Peter
    Peter avatar
    10 posts
    Member since:
    Feb 2015

    Posted 26 Feb 2015 Link to this post

    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

  8. Dimitrina
    Admin
    Dimitrina avatar
    3769 posts

    Posted 02 Mar 2015 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top