Programmatically resize all Columns

19 posts, 0 answers
  1. Thomas
    Thomas avatar
    11 posts
    Member since:
    Sep 2010

    Posted 10 Mar 2011 Link to this post

    Hello,

    how can i programmatically resize all Columns of a RadGrid to fit?

    Best Regards

    Thomas
  2. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 15 Mar 2011 Link to this post

    Hi Thomas,

    The required functionality could be achieved only if you are manually calculating the column size for each separate column by using the resize column method. However from the latest official release we support the 'resize to fit' functionality. Double-clicking the resize handle or choosing 'Best Fit' from the grid header context menu will automatically resize the target column to fit the widest cell's content without wrapping. Please review the following help topic for more information on this feature. 
    I hope this helps.

    Regards,
    Maria Ilieva
    the Telerik team

    Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. ITDpt
    ITDpt avatar
    5 posts
    Member since:
    Sep 2008

    Posted 24 Mar 2011 Link to this post

    Is it possible to programmatically call the "bet fit" function for a column?

    I'd like to be able to automatically "best fit" all columns whenever the grid loads.  I don't see anything in the server or client side API to do this.  Or is there some other way to accomplish this that doesn't require the user to manually "best fit" each column?
  5. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 30 Mar 2011 Link to this post

    Hi Joseph,

    You could achieve the required functionality by calling the following function in the client PageLoad event:
    function pageLoad() { 
    var grid = $find("RadGrid1"); 
    var columns = grid.get_masterTableView().get_columns(); 
    for (var i = 0; i < columns.length; i++) { 
    columns[i].resizeToFit(); 
    }


    I hope this help.


    All the best,
    Maria Ilieva
    the Telerik team
  6. Thomas
    Thomas avatar
    11 posts
    Member since:
    Sep 2010

    Posted 01 Apr 2011 Link to this post

    Hi Maria,

    thank you for you post. It works, but i have an performance Problem, when i have more than 1000 items in Grid (with Paging enabled). Then it takes some seconds to resize all Columns.

    Is there possibilty to do this programmatically in the Code Behind Class?

    Best Regards

    Thomas
  7. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 06 Apr 2011 Link to this post

    Hi Thomas,

    Unfortunately what you suggest cannot be done automatically in code behind. On the server it is not possible to get the items size in order to correctly calculate the column size.

    Other useful tips how to optimize the performance of the control can be found in these resources:
    http://www.telerik.com/help/aspnet-ajax/gridoverview.html (chapter "Performance tips and tricks")
    http://www.telerik.com/products/aspnet-ajax/resources/top-performance.aspx
    http://www.telerik.com/help/aspnet-ajax/radcompression.html


    Kind regards,
    Maria Ilieva
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  8. FISCAL
    FISCAL avatar
    91 posts
    Member since:
    May 2010

    Posted 14 May 2011 Link to this post

    Hi Maria,

    The script works fine. Just wanting to know how we have reset to previous column settings though..

    Many thanks.
    Milan G
  9. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 18 May 2011 Link to this post

    Hi Milan,

    Could you please elaborate a bit more eon the required functionality as I'm no sure what exactly you need to achieve?

    Greetings,
    Maria Ilieva
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  10. FISCAL
    FISCAL avatar
    91 posts
    Member since:
    May 2010

    Posted 18 May 2011 Link to this post

    Hi Maria,

    My Point is following  code resizes all columns in the grid to resize. That's fine but how can I revert the process to initial column width?

    function pageLoad() {
    var grid = $find("RadGrid1");
    var columns = grid.get_masterTableView().get_columns();
    for (var i = 0; i < columns.length; i++) {
    columns[i].resizeToFit();
    }
    }

    Many thanks.

    M G

  11. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 20 May 2011 Link to this post

    Hello Milan,

    The required functionality could not be achieved out of the box using the RadGrid client-side API. Possible solution in this case could be to manually pass through all the headers, take their width and keep them in hidden field for example. After that you could access this values and apply them back to the headers.

    Kind regards,
    Maria Ilieva
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  12. DaveBarkshire
    DaveBarkshire avatar
    9 posts
    Member since:
    May 2012

    Posted 04 May 2012 Link to this post

    I have tried running the javascript as suggested from the thread below. The event is being fired but the columns are all exactly the same witdh regardless of content. I have also tried it in pageLoad. Any idea why this might be?

    <ClientSettings AllowColumnsReorder="true" ReorderColumnsOnClient="true">

    <Resizing AllowRowResize="True" EnableRealTimeResize="True" ResizeGridOnColumnResize="True"

    AllowColumnResize="True"></Resizing>

    <ClientEvents OnGridCreated="onGridCreated" />

    </ClientSettings>

    function onGridCreated()

    {

    var grid = $find("<%= rgdGrid.ClientID %>");

     

    var columns = grid.get_masterTableView().get_columns();

    for (var i = 0; i < columns.length; i++) {

    columns[i].resizeToFit();

    }

    }

  13. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 04 May 2012 Link to this post

    Hi,

    I tried the same in client PageLoad event and its working fine at my end. Here is the code snippet I tried.

    ASPX:
    <telerik:RadGrid id="RadGrid1" runat="server">
        <ClientSettings>
            <Resizing AllowColumnResize="true" ResizeGridOnColumnResize="true" AllowResizeToFit="true" />
        </ClientSettings>
    </telerik:RadGrid>

    Javascript:
    <script type="text/javascript">
        function pageLoad() {
            var grid = $find("<%= RadGrid1.ClientID %>");
            var columns = grid.get_masterTableView().get_columns();
            for (var i = 0; i < columns.length; i++) {
                columns[i].resizeToFit();
            }
        }
     </script>

    Please take a look into the following help documentation i referred.

    Thanks,
    Shinu.
  14. Bala
    Bala avatar
    11 posts
    Member since:
    Aug 2012

    Posted 24 Dec 2013 Link to this post

    I have a dynamic grid where in i'll populate columns and data dynamically. I used the below code to best fit all the columns according to the items in respictive columns. My requirement is if all the column width are correctly aligned and if there is space in the mastertable then the last column should occupy the entire mastertable width. I skipped the last column resizeToFit() and still the last column is not occupying the entire space. I attached the grid header pic. please find the attachment and let me know.

    if

     (grid != null) {

     var actualMasterWidth = grid.get_masterTableView().get_element().clientWidth;

     var assignedColumnWidth = 0;

     var columns = grid.get_masterTableView().get_columns();

     for (var i = 0; i < columns.length-2; i++) {

     columns[i].resizeToFit();

    assignedColumnWidth += columns[i]._element.clientWidth

     }

     

    if (actualMasterWidth > assignedColumnWidth) {

     var MasterTable = grid.get_masterTableView();

     //MasterTable.getColumnByUniqueName(columns[columns.length - 1]._data.UniqueName).get_element().offsetWidth = (actualMasterWidth - assignedColumnWidth) + 100;

     MasterTable.getColumnByUniqueName(columns[columns.length - 1]._data.UniqueName).get_element().width = ((actualMasterWidth - assignedColumnWidth) + 100).toString() + "px";

     //columns[columns.length-1]._element.width = actualMasterWidth - assignedColumnWidth;

     }

     else {

     columns[columns.length-1].resizeToFit();

    }

    }

  15. Eyup
    Admin
    Eyup avatar
    3009 posts

    Posted 25 Dec 2013 Link to this post

    Hi Bala,

    Can you please verify that you have closely followed the instructions provided in the following article when creating a RadGrid programmatically?
    http://www.telerik.com/help/aspnet-ajax/grid-programmatic-creation.html#Section22

    Additionally, can you elaborate some more on your specific scenario? You noted that you need the last column to take over all of the grid's width? Does this mean that the rest of the columns should be hidden?
    Also, it would be great if you send us sample screenshots or video demonstrating the desired behavior before and after the resizeToFit logic.

    Regards,
    Eyup
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  16. Bala
    Bala avatar
    11 posts
    Member since:
    Aug 2012

    Posted 12 Feb 2014 Link to this post

    The reSizetoFit() method sets the maximum width for all the grid columns dynamically but, i do have a problem in it.
    When i call the resizetofit() method for each and every column then the filter textbox for all the columns doesn't resize automatically.
    The filter textbox length is not resized automatically. Please suggest me any other to make the filter textbox to fit inside the columns automatically.
  17. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 12 Feb 2014 in reply to Bala Link to this post

    Hi Bala,

    Please try setting the following CSS:

    CSS:
    <style type="text/css">
      div.RadGrid .rgFilterRow td
      {
        padding-right: 30px;
      }
    </style>

    Thanks,
    Shinu
  18. Eyup
    Admin
    Eyup avatar
    3009 posts

    Posted 17 Feb 2014 Link to this post

    Hi Bala,

    You can also try using the following property:
    <telerik:GridBoundColumn ... FilterControlWidth="80%">

    Hope this helps.

    Regards,
    Eyup
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the UI for ASP.NET AJAX, subscribe to the blog feed now.
  19. RIZAL
    RIZAL avatar
    11 posts
    Member since:
    Jun 2015

    Posted 10 Mar Link to this post

    Hi, I tried below code and it works fine.

    ASP

    <telerik:RadGrid id="RadGrid1" runat="server">

        <ClientSettings>
            <Resizing AllowColumnResize="true" ResizeGridOnColumnResize="true" AllowResizeToFit="true" />
        </ClientSettings>
    </telerik:RadGrid>

    Javascript:
    <script type="text/javascript">
        function pageLoad() {
            var grid = $find("<%= RadGrid1.ClientID %>");
            var columns = grid.get_masterTableView().get_columns();
            for (var i = 0; i < columns.length; i++) {
                columns[i].resizeToFit();
            }
        }
     </script>

     

    The problem is, when you have multiple RadGrid in RadTabStrip, it only works on the RadGrid in the first selected tab/pageview.

    Hoy to autofit the RadGrid that sits in the other tab/page view?

    Anyone can help?

  20. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 15 Mar Link to this post

    Hi,

    Try setting the RenderSelectedPageOnly property f the RadMultiPage to "false" and see how it goes.

    Regards,
    Maria Ilieva
    Telerik
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017