This is a migrated thread and some comments may be shown as answers.

unwanted stretching width columns

8 Answers 687 Views

Grid

This is a migrated thread and some comments may be shown as answers.

Mink asked on 15 Jul 2009, 12:25 PM

Hi,

I'm not able to get the following working:
A RadGrid with columns which widths are explicitly set, that is only as wide as it need to be, but when it's columns are in total wider than the element that contains has place for it the grid should be exactely as wide as possible and start scrolling for the columns that won't fit.

I tried to achieve this by setting the widths of each column (except for a column with Visible = false), not setting the width of the grid itself and setting ClientSettings.Resizing.ResizeGridOnColumnResize = true.
The result is that the grid is 100% wide and the columns are stretched to fill it's width, which is not what I want. If the grid doesn't need to be 100% wide than I don't want it to be and I definitely doe not want the columns to be stretched.

Playing around with some settings I did get the columns to stay their intended width but the grid was 100% wide nonetheless, having an ugly sort of empty space to fill up the unoccupied width.

What am I missing? I have tried to find some hints for a solution and found something about style="table-layout:fixed;", but I haven't been able to do something with that to get what I want.

Regards,

Mink

8 Answers, 1 is accepted

answered on 17 Jul 2009, 01:40 PM

Uhm, my requirements have changed a little. I hope this doesn't mean that someone nearly finished has to start over from scratch, but as I haven't had any indication somebody is looking into my post yet I'm guessing it's save to rephrase my wishes.

This is what I would like:
A RadGrid that fills up all available space within the div I place it, preferably without the need of me having to give that div an id, but with respect to any possible present padding. If the size of the container div changes the grid should change it's dimensions accordingly.
However, rows and columns should not stretch their height/width! Is there a possibility that possible excess space is filled by blank space in stead of stretching the row/columns?

answered on 20 Jul 2009, 08:45 AM

Hi Mink,

In order to achieve the desired behavior, you have to do the following:

1) Place RadGrid in some container and set the control's height to 100%. No Width is necessary.

2) Enable RadGrid scrolling (with or without static headers, it doesn't matter). This will prevent the rows from expanding and shrinking

3) Set a pixel width to the RadGrid MasterTableView. This will prevent the columns from expanding and shrinking

4) If the RadGrid parent resizes together with the browser window, then you are ready. If the RadGrid parent is resized with Javascript, then after resizing it, you need to call the repaint() method of the RadGrid client object. Here is an example:

    
            <%@ Page Language="C#" %> 
        
            <%@ Import Namespace="System.Data" %> 
        
            <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
        
            <script runat="server"> 
        
            protected void RadGrid_NeedDataSource(object sender, GridNeedDataSourceEventArgs e) 
        
            { 
        
                DataTable dt = new DataTable(); 
        
                DataRow dr; 
        
                int colsNum = 3; 
        
                int rowsNum = 30; 
        
                string colName = "Column"; 
        
                for (int j = 1; j <= colsNum; j++) 
        
                { 
        
                    dt.Columns.Add(String.Format("{0}{1}", colName, j)); 
        
                } 
        
                for (int i = 1; i <= rowsNum; i++) 
        
                { 
        
                    dr = dt.NewRow(); 
        
                    for (int k = 1; k <= colsNum; k++) 
        
                    { 
        
                        dr[String.Format("{0}{1}", colName, k)] = String.Format("{0}{1} Row{2}", colName, k, i); 
        
                    } 
        
                    dt.Rows.Add(dr); 
        
                } 
        
                (sender as RadGrid).DataSource = dt; 
        
            } 
        
            </script> 
        
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
        
            <html xmlns="http://www.w3.org/1999/xhtml"> 
        
            <head runat="server"> 
        
            <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
        
            <title>RadControls for ASP.NET AJAX</title> 
        
            <style type="text/css"> 
        
            html{overflow:hidden} 
        
            html,body,form{margin:0;padding:0;height:100%} 
        
            </style> 
        
            </head> 
        
            <body> 
        
            <form id="form1" runat="server"> 
        
            <asp:ScriptManager ID="ScriptManager1" runat="server" /> 
        
            <div style="width:50%;height:50%" id="myDiv"> 
        
                <telerik:RadGrid 
        
                    ID="RadGrid1" 
        
                    runat="server" 
        
                    Height="100%" 
        
                    OnNeedDataSource="RadGrid_NeedDataSource"> 
        
                    <ClientSettings> 
        
                        <Scrolling AllowScroll="true" UseStaticHeaders="true" /> 
        
                    </ClientSettings> 
        
                    <MasterTableView Width="500px" /> 
        
                </telerik:RadGrid> 
        
            </div> 
        
            <asp:Button ID="Button1" runat="server" OnClientClick="return resizeDiv();" Text="expand RadGrid parent div programmatically" /> 
        
            <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server"> 
        
            <script type="text/javascript"> 
        
            function resizeDiv() 
        
            { 
        
                //expand the div 
        
                $get("myDiv").style.width = "60%"; 
        
                $get("myDiv").style.height = "60%"; 
        
                //repaint RadGrid 
        
                $find("<%= RadGrid1.ClientID %>").repaint(); 
        
                return false; 
        
            } 
        
            </script> 
        
            </telerik:RadCodeBlock> 
        
            </form> 
        
            </body> 
        
            </html>

Sincerely yours,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

answered on 20 Jul 2009, 11:02 AM

Hi Dimo,

Thanks for your help. But it doesn't work entirely for me yet.
The width part of it does seem to work. (I have actually set the mastertable's view to 1px.)
However, setting the height of the control (I do this programmatically, but that doesn't make any difference I think?) gives me a strange result.
When the control loads I see the data for a split second, but then the height of the data part changes to only a couple of pixels and the rest of height below the header is taken up by the pager item which looks ridiculously expanded and also seems stretched beyond the bottom of the control.
At first I thought this happens because the structure I have the grid placed in is a bit complicated height wise, but I placed an extra div directly around the grid with it's height explicitly set to 400px, but that didn't help either.

answered on 20 Jul 2009, 11:31 AM

Here is something a found out in addition and which might be useful in finding a solution:

As you probably already know, the rendered html for the grid is as follows:
div id="MyGrid1"
    - div -> here goes the height percentage I set programmatically on my grid
            - the header div
            - the data div
            - the pager table
When I inspected the html with the IE developer tool I found that the height of the data div is set to 10px. When I change this to 100% using the IE developer tool things look a lot better. I'm not sure if the height of the pager table being set to 100% is of any consequence. It doesn't seem to make a difference if I turn it of or not.

Correction: If I remove the div with explicit height from around the grid it doesn't make a difference if I leave the height of the pager table to 100% or that I turn it off, but if there is a div around the grid with an explicit height it does matter. In case of a container div with explicit height it will only work properly if the height of the pager table is turned off. And also, with out a container div with explicit height things go wrong when I go to the next page. The height of the data div becomes something like 10px again, even though this is not noticed by the IE developer tool.

answered on 21 Jul 2009, 10:50 AM

Hi Mink,

I think I might have something useful as I encountered almost the same.

In my situation, The Grid resides inside a RadPane. So, I wanted the Grid to always resize whenever browser Window or its parent resizes in terms of both height and width. Although height sounds the challenging part, In my situation it is the width that tackles me. Anyway, here is my approach:

Markup:

    
                <telerik:RadPane id="GridPane" runat="server" Scrolling="None" OnClientResized="GridPaneResized"> 
        
                    <div id="GridBlock"> 
        
                        <telerik:RadGrid id="transGrid" runat="server" AutoGenerateColumns="false"> 
        
                            <MasterTableView AllowSorting="true" AllowPaging="true" PageSize="50" EnableNoRecordsTemplate="true" ShowHeadersWhenNoRecords="true"> 
        
                                <AlternatingItemStyle BackColor="#ebf5ff" /> 
        
                                <PagerStyle AlwaysVisible="true" /> 
        
                                <NoRecordsTemplate> 
        
                                    <div class="noRecords"> 
        
                                        <asp:Literal runat="server" Text="No requested Records to display..."></asp:Literal> 
        
                                    </div> 
        
                                </NoRecordsTemplate> 
        
                            </MasterTableView> 
        
                                <ClientSettings> 
        
                                    <Scrolling AllowScroll="true" UseStaticHeaders="true" /> 
        
                                </ClientSettings> 
        
                        </telerik:RadGrid> 
        
                    </div> 
        
                </telerik:RadPane>

Client-side:

    
            <telerik:RadScriptBlock id="ucRadScriptBlock" runat="server"> 
        
                <script language="javascript" type="text/javascript"> 
        
                    var gridPane, transGrid, masterTable; 
        
                    function pageLoad() { 
        
                        transGrid = $find("<%= transGrid.ClientID %>"); 
        
                        if (transGrid != null) { 
        
                            gridPane = $find("<%= GridPane.ClientID %>"); 
        
                            masterTable = transGrid.get_masterTableView(); 
        
                            SetGridSize(); 
        
                        } 
        
                    } 
        
                    function GridPaneResized(sender, arg) { 
        
                        SetGridSize(); 
        
                    } 
        
                    function SetGridSize() { 
        
                        var paneHeight = gridPane.get_height(); 
        
                        var paneWidth = gridPane.get_width(); 
        
                        var targetWidth = paneWidth - 44 + "px"; 
        
                        transGrid.get_element().style.width = targetWidth; 
        
                        var itemsCount = masterTable.get_dataItems().length; 
        
                        if (itemsCount == 0) { 
        
                            transGrid.GridDataDiv.style.height = 24 + "px"; 
        
                        } 
        
                        else { 
        
                            transGrid.get_element().style.height = paneHeight - 15 + "px"; 
        
                        } 
        
                        transGrid.repaint(); 
        
                    } 
        
                </script> 
        
            </telerik:RadScriptBlock>

Through this, I not only handle Grid resizing but also control Grid dimension when it is first loaded ('NoRecords' state).

Please consult following screenshots to visualise my Grid's behaviour:

On first load (empty-'NoRecords' Template)
Upon population.
After resizing.

As for blank space beyond last column, it only appears in IE7 (OK in FF2). I'm still working on that, but for the time being I created a filler image that resembles row painting styles of my Grid, then used it to populate the background of Grid's div. This explains why in the screenshots you don't see empty space after last column.

Hope this helps.

Regards,
Saed

answered on 23 Jul 2009, 10:10 AM

I finally did it!
The thing was, my grid is placed inside a div that has unclear height. This is because this div divides the available space with another div in a fixed height - the rest of the available height way.
That's why the solution proposed by Dimo doesn't work for me. For any other situation I think it's a good solution.
I already had tried a javascript onresize approach similar to the solution proposed by Sead, but then I had problems with the rows being stretched to fill the entire scroll area. I tackled this problem by setting the height of the data table inside the GridDataDiv to "auto" in stead of "100%" which obviously caused the stretching. (The table is reached through 'sender.get_masterTableView().get_element()', where sender is the grid.)

So thanks for your help and maybe someone else can benefit from my approach.

Cheers,

Mink