Resize columns width of MasterTableView and DetailView

10 posts, 0 answers
  1. Daniel
    Daniel avatar
    159 posts
    Member since:
    Feb 2014

    Posted 27 Jul 2014 Link to this post

    Hello,

    I am working on a project with a RadGrid.
    In the RadGrid, each column has a filter.
    The grid has a DetailView.

    The requirements of my project are as follows: 
    • All data in rows should not be word wrapped. 
    • Each column’s width should be equal to that column’s content.

    The same rules should also apply to DetailView.

    Thanks,
    Daniel.
  2.
  3. Jayesh Goyani
    Jayesh Goyani avatar
    2733 posts
    Member since:
    May 2010

    Posted 28 Jul 2014 in reply to Daniel Link to this post

    Hello,

    Please add below property in your column.
    <ItemStyle Wrap="false" />

    Let me know if any concern.

    Thanks,
    Jayesh Goyani
  5. Daniel
    Daniel avatar
    159 posts
    Member since:
    Feb 2014

    Posted 29 Jul 2014 in reply to Jayesh Goyani Link to this post

    Hello Jayesh Goyani,

    Thank you for your response.

    Since my RadGrid’s content is dynamic, I put the code:
    <ItemStyle Wrap="false" />

    into the appropriate event: 
    Private Sub RadGrid1_ColumnCreated(sender As Object, e As GridColumnCreatedEventArgs) Handles RadGrid1.ColumnCreated
            e.Column.ItemStyle.Wrap = False
    End Sub

    Unfortunately it did not help; instead it "cut" the data.

    Besides, it still does not fill the requirement of my project: a column’s width should be equal to the width of its content.

    I have attached a video that showing the problems I have:   [Row content get “Cut”],

    MasterTableView’s columns’ width and DetailView’s columns’ width are both very wide,  regardless of content.

    Video link: [Columns width are very wide].

     
    I’ll be glad to get a solution.

    Thank you,
    Daniel.
  7. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 30 Jul 2014 in reply to Daniel Link to this post

    Hi Daniel,

    You can try the resizeToFit method to resizes the column to fit the widest cell's content without wrapping.
    For the DetailTables to have this effect you can set the hierarchy load mode to client and add this javascript function to your scripts:

    JS:
    function onHierarchyExpanded(sender, eventArgs) {
        var indexOfDetailedTable = eventArgs.get_itemIndexHierarchical();
        var numberOfColumns = sender.get_detailTables()[indexOfDetailedTable].get_columns().length;
        for (var i = 0; i < numberOfColumns-1; i++) {
            sender.get_detailTables()[indexOfDetailedTable].get_columns()[i].resizeToFit();
        }
    }

    Here on hierarchy expanded event we take the index of the detailed table that is being expanded (indexOfDetailedTable) and after that also take the number of columns that are in this detailed table (numberOfColumns variable). Finally, we iterate through all the columns, except the last one and apply the resizeToFitmethod. The reason to not include the last column is that it can only take all the remaining space and can't get any smaller.

    NOTE: This approach works for only one level of hierarchy.

    Thanks,
    Princy
  8.
  9. Daniel
    Daniel avatar
    159 posts
    Member since:
    Feb 2014

    Posted 31 Jul 2014 in reply to Princy Link to this post

    Hi Princy,

    Thank you for your answer!

    Indeed I added the code as you suggested:

    ASPX:
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
                <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();
            }
        }
      
      
      
        function onHierarchyExpanded(sender, eventArgs) {
            var indexOfDetailedTable = eventArgs.get_itemIndexHierarchical();
            var numberOfColumns = sender.get_detailTables()[indexOfDetailedTable].get_columns().length;
            for (var i = 0; i < numberOfColumns - 1; i++) {
                sender.get_detailTables()[indexOfDetailedTable].get_columns()[i].resizeToFit();
            }
        }
                </script>
            </telerik:RadCodeBlock>
      
                        <telerik:RadGrid ID="RadGrid1" runat="server" MasterTableView-EnableHeaderContextMenu="true" Height="700px" Width="1150px" Skin="Web20" MasterTableView-HierarchyLoadMode="Client">
                            <ClientSettings>
                                <Scrolling AllowScroll="True"></Scrolling>
                                <Resizing AllowColumnResize="true" ResizeGridOnColumnResize="true" AllowResizeToFit="true" />
                                <ClientEvents OnHierarchyExpanded="onHierarchyExpanded" />
                            </ClientSettings>
                        </telerik:RadGrid>

    However, it doesn’t work unless I add the following code to my project:
    RadGrid1.ClientSettings.Scrolling.UseStaticHeaders = True

    Then, it works.

    Unfortunately, there is another problem: the filters get “cut”. Please see the problem in the following video:
    [video link]

    I'd love to get a solution for the filters too. That will really be a perfect solution!!

     Thank you very much,
    Daniel.


  11. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 31 Jul 2014 in reply to Daniel Link to this post

    Hi Daniel,

    Please try setting the following CSS for your Grid:

    CSS:
    <style type="text/css">
      div.RadGrid .rgFilterRow td
      {
       <%-- Adjust the padding according to how you need--%>
       padding-right: 30px;
      }
    </style>

    Thanks,
    Princy
  13. Daniel
    Daniel avatar
    159 posts
    Member since:
    Feb 2014

    Posted 03 Aug 2014 in reply to Princy Link to this post

    Hi Princy,

    Thanks for your response.

    I used the CSS code you gave me, but it does not affect the filter fields - see video.

    I would like to have something like this pseudo cod:
    CONST MININUM = 70px;
    CONST MAXINUM = 500px;
    CONST FILTER_BUTTON_SIZE = 20px;
     
    For each column in columns
    Column.resizeToFit();
    if (Column_Width < MININUM)
        {
        Column_Width = MININUM;
        }
        else if (FilterButtonSize>MAXINUM)
        {
        Column_Width = MAXINUM;
        }
        Filter_TextBox.Width = Column_Width - Filter_Button_Size;
    Next

    I’ll be glad to get a solution for this problem.

    Thank you,
    Daniel.
  14.
  15. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 04 Aug 2014 in reply to Daniel Link to this post

    Hi Daniel,

    Please take a look at the following code library which will shows how to make the filtering controls (textboxes, RadNumericTextBoxes, RadDatePickers) resize in real time together with the RadGrid columns.
    How to make RadGrid Filtering Controls Resize Together with the Columns

    Thanks,
    Princy
  17. Daniel
    Daniel avatar
    159 posts
    Member since:
    Feb 2014

    Posted 04 Aug 2014 in reply to Princy Link to this post

    Hi Princy,

    Thanks for your response!

    The link you gave me is a partial solution. When the column’s width is particularly small, it’s very hard to insert data, and certainly not possible to see what the user enters – see video.

    So I have tried to limit the minimum column’s width by the following JS code: 
    function pageLoad() {
       var grid = $find("<%= RadGrid1.ClientID %>");
       var columns = grid.get_masterTableView().get_columns();
       var MAX_WIDTH = 500;
       var MIN_WIDTH = 70;
     
       for (var i = 0; i < columns.length; i++) {
           var element = columns[i].get_element();
           columns[i].resizeToFit();
           if (element.clientWidth < MIN_WIDTH) {
               grid.get_masterTableView().resizeColumn(i, MIN_WIDTH);
           }
           else if (element.clientWidth > MAX_WIDTH)
               grid.get_masterTableView().resizeColumn(i, MAX_WIDTH);
       }

    This solution works!!! The only question I still have is how to write the following code in JS? This code is similar to the code in your code-library project.
    e.Column.FilterControlWidth = Unit.Percentage(60)

    Thank you,
    Daniel.
  19. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 05 Aug 2014 in reply to Daniel Link to this post

    Hi Daniel,

    You can access the filter textbox in clientside and set its width as follows:

    JS:
    <script type="text/javascript">
        function pageLoad() {
            var grid = $find("<%= _RadGrid1.ClientID %>");
            var tableView = grid.get_masterTableView();
            var columns = grid.get_masterTableView().get_columns();
            //access the filter row
            var filterRow = $telerik.$(grid.get_element()).find(".rgFilterRow");
            var MAX_WIDTH = 500;
            var MIN_WIDTH = 70;
            for (var i = 0; i < columns.length; i++) {
                var element = columns[i].get_element();
                columns[i].resizeToFit();
                if (element.clientWidth < MIN_WIDTH) {
                  grid.get_masterTableView().resizeColumn(i, MIN_WIDTH);
                  //access the filter textbox for the columns
                  var txtfilter = $telerik.findElement(filterRow[0], columns[i]._data.UniqueName)
                  if (txtfilter != null) {
                      //set width
                      txtfilter.style.width = MIN_WIDTH;
                    }
                }
                else if (element.clientWidth > MAX_WIDTH) {
                    grid.get_masterTableView().resizeColumn(i, MAX_WIDTH);
                    var txtfilter = $telerik.findElement(filterRow[0], columns[i]._data.UniqueName)
                    if (txtfilter != null) {
                        txtfilter.style.width = MAX_WIDTH;
                    }
                }
            }
        }
    </script>

    Thanks,
    Princy
  20.
Back to Top