How to auto size column with a resizeable header?

7 posts, 0 answers
  1. Alex
    Alex avatar
    141 posts
    Member since:
    Mar 2010

    Posted 06 Nov 2014 Link to this post

    How do I get my column widths to auto size, when the column header is resizeable?

    e.g. I have a simple grid with a TextBox headers. As the user types into the box, the width increases. If text is removed from the box, the TextBox width decreases but the columns width remains the same. 

    <telerik:RadGridView >
        <telerik:RadGridView.Columns>
            <telerik:GridViewColumn >
                <telerik:GridViewColumn.Header>
                    <TextBox Text="Long texttttttttt" HorizontalAlignment="Left" />
                </telerik:GridViewColumn.Header>
            </telerik:GridViewColumn>
            <telerik:GridViewColumn Header="Star" Width="*" />
        </telerik:RadGridView.Columns>
    </telerik:RadGridView>


    In this example if you delete the long text, the width will not change. 
    I had also tried changing the HeaderCellStyle to change its alignment/content alignment to left. This did not achieve the desired result of wanting the Star column to fill up the remaining space. 

    The overall goal I am trying to achieve is to the standard headers with text boxes to allow for complex (server side) searching; this can not be achieved by filter row, custom filters only control the pop up which does not deliver an optimal user experience, foot search rows is also not optimal. 
  2. Alex
    Alex avatar
    141 posts
    Member since:
    Mar 2010

    Posted 06 Nov 2014 in reply to Alex Link to this post

    I am using Telerik version:
    2014.2.729.1050
  3. DevCraft banner
  4. Yoan
    Admin
    Yoan avatar
    1070 posts

    Posted 11 Nov 2014 Link to this post

    Hello Alex,

    I am afraid that there is no easy way for achieving this functionality. A possible solution would be to invoke GridView's UpdateLayout method when the TextBox is resized. Unfortunately, this will lead to performance degradation.

    Regards,
    Yoan
    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. Alex
    Alex avatar
    141 posts
    Member since:
    Mar 2010

    Posted 11 Nov 2014 in reply to Yoan Link to this post

    Hi Yoan,

    I tried doing as you suggested, however, calling UpdateLayout did not result in the columns shrinking back down (It does not result in any visual change)

    I've also discovered that this scenario can be very easily produced by using the out of the box RadGridView, and by typing into the FilterRow and then removing what you typed
  6. Yoan
    Admin
    Yoan avatar
    1070 posts

    Posted 13 Nov 2014 Link to this post

    Hello Alex,

    You can try another approach - you can calculate the width of the TextBox in its SizeChanged event. Then you can set the Width of the column to be the calculated width. I have attached a sample project which demonstrates this approach.


    Regards,
    Yoan
    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. Alex
    Alex avatar
    141 posts
    Member since:
    Mar 2010

    Posted 13 Nov 2014 in reply to Yoan Link to this post

    I had tried this earlier but it did not achieve the desired result of GridViewLength.Auto ~like behaviour. 

    I had set the GridViewColumn's width to the GridViewHeaderCell.DesiredSize.Width if it was less than the RenderSize.Width then I would revert it back to the previous width (Auto). This would make the column width shrink to the header size, but not to the cells size. 
  8. Yoan
    Admin
    Yoan avatar
    1070 posts

    Posted 14 Nov 2014 Link to this post

    Hi Alex,

    I have already answered your other forum thread.

    Regards,
    Yoan
    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
DevCraft banner