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
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

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 }.

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

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.
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

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!
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

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.
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

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
>
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

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
>
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

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

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();
}

Thankyou
Shaik Nazeer Hussain