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

RadGrid loses 100% width after column resize

16 Answers 673 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Big-Sy
Top achievements
Rank 1
Big-Sy asked on 08 Nov 2011, 06:55 PM

I'm a little green with Web Development, and after many hours of forum searches, reading documentation and trial and error-ing, I’m cooked…

I'm trying to build a UI that pretty much resembles a WinForm type solution. I've pulled out the pertinent pieces to illustrate my problem. The page starts with the VS master page project, but has been modified to “stick” to all sides and bottom and NOT showing any scroll bars when resizing. It contains a RadSplitter with two RadPane controls. Each contains a RadGrid. The RadGrid has paging enabled and uses UseStaticHeaders so that the paging footer stays stuck to the bottom of the RadPane. You can move the RadSplitBar and both RadGrids stay stuck to the RadPane and resize perfectly.
It all works just great, BUT


(1)
Once you resize a column, the right grid side becomes unstuck. Any resizing of the RadSplitBar no longer resizes the affected grid. When expanding the pane, white space shows up.

(2) This behavior is the same on IE9, Chrome and FireFox. BUT, an additional problem shows up on IE9. In my standard state all Wrap properties are set to false. Resizing a column causes the grid to lose this no Wrap ability. Cell text start wrapping. It also causes the paging footer to slip below the bottom pane edge.


I was going to upload my project, but zip file format isn't acceptable????

Thanks for your help.

 

16 Answers, 1 is accepted

Sort by
0
Pavlina
Telerik team
answered on 09 Nov 2011, 10:08 AM
Hi,

Please note that when using resizing with scrolling and static headers only the GridTableView is resized - RadGrid's width remains fixed. Therefore the behavior you have observed (blank space after the last column) is expected. The grid does not support automatic column width recalculations when the sum of the widths of all its columns is less than the sum of the grid width. Please turn off static headers or leave the control as is, with the ability to add a horizontal scrollbar or empty space on the right. Sorry about the inconvenience caused.

Best wishes,
Pavlina
the Telerik team
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 their blog feed now
0
Big-Sy
Top achievements
Rank 1
answered on 09 Nov 2011, 12:51 PM

Thank you for the reply. 

Well… it would seem to be a good feature to add as a property to the RadGrid.  You already have the mechanism/code… your RadSplitter/RadPanes maintains the right pane edge when you move an internal RadSplitBar.  They even have three modes… ResizeMode { AdjacentPane, EndPane, Proportional }.

0
Jayesh Goyani
Top achievements
Rank 2
answered on 09 Nov 2011, 01:46 PM
Hello,

After expanding/collapse the radsplitter try to call Repaint() of Radgrid.

http://www.telerik.com/help/aspnet-ajax/grid-repaint.html

I am not sure it works or not ?

Thanks,
Jayesh Goyani
0
Big-Sy
Top achievements
Rank 1
answered on 09 Nov 2011, 01:49 PM
Also...

Any comment on the IE9 bad behavior?  Chrome and FireFox work as expected.

When ItemStyle-Wrap="false" on IE9 the text wraps and row height changes and footer gets displaced below the pane (after a column is resized).  The demo I sent illustrates this.

Thanks for your time.
0
Pavlina
Telerik team
answered on 09 Nov 2011, 04:04 PM
Hello Big-Sy,

I was not able to replicate the described issue which you are facing in IE9 after a column is resized. Please watch this video and let me know if I am leaving something out while testing.

Looking forward for your reply.

Best wishes,
Pavlina
the Telerik team
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 their blog feed now
0
Big-Sy
Top achievements
Rank 1
answered on 09 Nov 2011, 04:49 PM
I've checked on co-worker's boxes using IE9 and it works fine.

However, on mine box, I get this behavior.  Hey... I'm ok with it not working on my machine.  I just won't let QC see it on mine.  :)

BTW - thanks for the Jing link!  Learned a great new tool today.  Maybe the boss will let me go home early... NOT!
0
Pavlina
Telerik team
answered on 10 Nov 2011, 01:44 PM
Hi Big-Sy,

Please try to attach the ColumnCreated event and set the DataFormatString  property for each column to <nobr>{0}</nobr> as shown below and let me know if this helps:
protected void radGridGroup_ColumnCreated(object sender, GridColumnCreatedEventArgs e)
        {
            //add more column types to the conditional check if needed
            if (e.Column is GridBoundColumn)
            {
                (e.Column as GridBoundColumn).DataFormatString = "<nobr>{0}</nobr>";
            }
        }

You can also refer to the help article below for more information:
http://www.telerik.com/help/aspnet-ajax/grid-no-wrap-for-grid-cell-content.html

All the best,
Pavlina
the Telerik team
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 their blog feed now
0
Big-Sy
Top achievements
Rank 1
answered on 10 Nov 2011, 04:14 PM
Some success...

When used statically (as in your linked article) on each of the GridBoundColumn's it works great on all browsers including mine.

When used dynamically (using the OnColumnCreated) and using your event, it doesn't work.  When stepping into the code at run time, the e.Column is of type GridExpandColumn so the <nobr>{0}</nobr> is never applied.  Unfortunately, we have need of doing some dynamically.
0
Pavlina
Telerik team
answered on 10 Nov 2011, 04:47 PM
Hi Big-Sy,

As pointed in the comment which I left in the previous code snippet if there is more column types you need to add conditional check for them as well - if (e.Column is GridExpandColumn) for example etc.

All the best,
Pavlina
the Telerik team
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 their blog feed now
0
Big-Sy
Top achievements
Rank 1
answered on 10 Nov 2011, 05:44 PM
I did notice your "comment".  But you might notice that GridExpandColumn doesn't have a DataFormatString property and besides... 
I don't have ANY other types besides GridBoundColumn in my definition.   Here is the RadGrid. 

BTW - I ONLY have 5 columns and the OnColumnCreated event gets called 382 times.  Every one is GridExpandColumn and none are GridBoundColumn!

...
<telerik:RadGrid ID="gridList" runat="server" 
     AllowFilteringByColumn="true" 
     AllowMultiRowSelection="true" 
     AllowPaging="true" 
     AllowSorting="true" 
     AlternatingItemStyle-Wrap="false"
     Height="100%"
     ItemStyle-Wrap="false"    
     OnNeedDataSource="radGridGroup_NeedDataSource" 
     OnColumnCreated="grid_ColumnCreated"
     PageSize="40" 
     Skin="Simple"
     >
     <ClientSettings>
         <Resizing AllowColumnResize="true" AllowResizeToFit="true" 
             EnableRealTimeResize="true" ResizeGridOnColumnResize="false"/>
         <Scrolling AllowScroll="true" UseStaticHeaders="true"/> 
     </ClientSettings>
     <PagerStyle Mode="NextPrevAndNumeric" />
     <HeaderStyle Font-Bold="true" Wrap="false" /> 
     <MasterTableView AutoGenerateColumns="false" CommandItemDisplay="Top">
         <CommandItemTemplate>
             <grid:demoToolbar ID="demoGridToolbar" runat="server" />
         </CommandItemTemplate>
         <Columns>
             <telerik:GridBoundColumn DataField="ID" HeaderText="xID" />
             <telerik:GridBoundColumn DataField="Name" HeaderText="xName" />
             <telerik:GridBoundColumn DataField="Note" HeaderText="xNote" />
             <telerik:GridBoundColumn DataField="Size" HeaderText="xSize"  />
             <telerik:GridBoundColumn DataField="LastUpdate" HeaderText="xLastUpdate" />
         </Columns>
     </MasterTableView>
 </telerik:RadGrid>
0
Pavlina
Telerik team
answered on 15 Nov 2011, 06:18 PM
Hello,

Please set UniqueName property of your GridBoundColumns and let me know if then you are able to access them on the server.

Also please review the Customizing columns programmatically section in the following help topic and let me know if its useful for you:
http://www.telerik.com/help/aspnet-ajax/grid-using-columns.html

Kind regards,
Pavlina
the Telerik team
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 their blog feed now
0
Yamin
Top achievements
Rank 1
answered on 09 Apr 2012, 03:15 PM
Hi,
I'm facing the problem with the rad grid column width.
I need to set UserStaticHeader ="true" for showing header and footer and Allow column resize = "true"  inorder to resize the column.
The problem is that when i resize the column , my grid have white space of the end of the last column. Please see my attachment picture below.
<div id="divGrid" style="margin-left:5px;">
<telerik:RadGrid ID="grdFatal" AllowMultiRowSelection="True" runat="server"
AllowPaging="True" OnSelectedIndexChanged="grdFatal_OnSelectedIndexChanged"
ShowStatusBar="True" Width="99%" onprerender="grdFatal_PreRender"
onitemcreated="grdFatal_ItemCreated"
onneeddatasource="grdFatal_NeedDataSource" CellSpacing="0"
Skin="WebBlue" AllowSorting="True" EnableAjaxSkinRendering="true">
<MasterTableView PageSize="10" TableLayout="Fixed">
<CommandItemSettings ExportToPdfText="Export to PDF" />
<RowIndicatorColumn Visible="True" FilterControlAltText="Filter RowIndicator column" />
<ExpandCollapseColumn Visible="True" FilterControlAltText="Filter ExpandColumn column" />
<Columns>
<telerik:GridClientSelectColumn UniqueName="ClientSelectColumn" HeaderStyle-Width="30px"
Resizable="False" >
<HeaderStyle Width="30px"></HeaderStyle>
</telerik:GridClientSelectColumn>
</Columns>
 
<EditFormSettings>
<EditColumn FilterControlAltText="Filter EditCommandColumn column" />
</EditFormSettings>
</MasterTableView>
<HeaderStyle Wrap="false" HorizontalAlign="Left" VerticalAlign="Middle" />
<ItemStyle Wrap="true" HorizontalAlign="Left" VerticalAlign="Middle" />
<PagerStyle Mode="NumericPages" />
 
 
<ClientSettings EnableRowHoverStyle="true" EnablePostBackOnRowClick="true" >
<Selecting CellSelectionMode="None" AllowRowSelect="True" />
<Selecting AllowRowSelect="True" />
<Scrolling AllowScroll="true" UseStaticHeaders="true" SaveScrollPosition="true"></Scrolling>
<Resizing AllowColumnResize="true" AllowRowResize="false" ResizeGridOnColumnResize="false"
ClipCellContentOnResize="true" EnableRealTimeResize="false" AllowResizeToFit="true"/>
<ClientEvents OnColumnResizing="ColumnResizing"/>
</ClientSettings>
 
<FilterMenu EnableImageSprites="False"></FilterMenu>
</telerik:RadGrid>
 
</div>
0
Pavlina
Telerik team
answered on 09 Apr 2012, 04:52 PM
Hi Yamin,

When using resizing with scrolling and static headers only the GridTableView is resized - RadGrid's width remains fixed. Therefore the behavior you have observed (blank space after the last column) is expected. The grid does not support automatic column width recalculations when the sum of the widths of all its columns is less than the sum of the grid width. Please turn off static headers or leave the control as is, with the ability to add a horizontal scrollbar or empty space on the right. Sorry about the inconvenience caused.

Kind regards,
Pavlina
the Telerik team
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 their blog feed now.
0
nazeer
Top achievements
Rank 1
answered on 04 Jan 2013, 06:39 AM
Hi Telerik Team,

We are also facing same problem.Is there any Solution for that?

I am trying to set the width if Radgrid actual width greater than ResizetoFit width.But it is not setting.Please check the below code and let me know.

function pageLoad() {
    var AllcolumnsSize = 0;
    var grid = $find('<%=RadGrid1.ClientID %>');
    var MasterTable = grid.get_masterTableView(); 
    var ActualGridWidth = MasterTable._element.clientWidth;
    var columns = grid.get_masterTableView().get_columns();
    for (var i = 0; i < columns.length; i++) {
        columns[i].resizeToFit();
        AllcolumnsSize = AllcolumnsSize + columns[i].get_element().clientWidth;
        }
  
    if (AllcolumnsSize < ActualGridWidth ) {
    for (var i = 0; i < columns.length; i++) {
        columns[i].get_element().width = (ActualGridWidth ) / (columns.length) + "px";
        }
    }
}

Please let me know if you have any Clarification.

ThankYou
Shaik Nazeer Hussain
0
Kaushal
Top achievements
Rank 2
answered on 07 Jan 2013, 10:35 AM
Hi nazeer,

I have my own work around for this issue which will resolve this problem for Grid width issue.
Do paste this JS function code in  <telerik:RadCodeBlock /> and call this method in RadGrid 
<ClientEvents OnColumnResized="ResizeGridToFit" />

function ResizeGridToFit(sender, eventArgs) {
var grid = $find("<%= RadGridID.ClientID %>");
var wd = 0;
wd = sender.get_masterTableView().get_element().offsetWidth +
"px";
$(
'#RadGridID').css('width', wd);grid.repaint();               
}
0
nazeer
Top achievements
Rank 1
answered on 07 Jan 2013, 01:15 PM
Thank you Kaushal.It is working fine.

Thankyou
Shaik Nazeer Hussain
Tags
Grid
Asked by
Big-Sy
Top achievements
Rank 1
Answers by
Pavlina
Telerik team
Big-Sy
Top achievements
Rank 1
Jayesh Goyani
Top achievements
Rank 2
Yamin
Top achievements
Rank 1
nazeer
Top achievements
Rank 1
Kaushal
Top achievements
Rank 2
Share this question
or