Hello,
Is there a way to have a scrolling Grid set to 100% height and width but also have padding around the grid so it doesn't go all the way to the edges but still expands based on the window size? I got it to work having the grid be 100% of the screen (or using a radsplitter) but I haven't found a way to successfully add padding around the grid. Any time I try to add a div around the grid and add padding then the grid doesn't expand to 100% and I've tried wrapping it with other controls and also adding padding to my radpane.
I've also tried using javascript to resize the grid when the splitter is resized but could not get it to work correctly. Does anyone have any ideas?
Thanks.
Is there a way to have a scrolling Grid set to 100% height and width but also have padding around the grid so it doesn't go all the way to the edges but still expands based on the window size? I got it to work having the grid be 100% of the screen (or using a radsplitter) but I haven't found a way to successfully add padding around the grid. Any time I try to add a div around the grid and add padding then the grid doesn't expand to 100% and I've tried wrapping it with other controls and also adding padding to my radpane.
I've also tried using javascript to resize the grid when the splitter is resized but could not get it to work correctly. Does anyone have any ideas?
Thanks.
1 Answer, 1 is accepted
0
Iggy
Top achievements
Rank 1
Rank 1
answered on 16 Jul 2010, 08:37 PM
I think I figured out how to make it work using javascript. The solution that works for me is below but if anyone knows of a better way to do this let me know or if there's even a better way to set the height/width on a grid in javascript. I've only tried this in Firefox and IE8.
Styles to remove margin/padding from sides & set to no scroll.
Splitter & grid definition.
The javascript to adjust the size of the grid based on the containing splitter size. Numbers for height & width should be adjusted accordingly to make it show correctly in your page.
Styles to remove margin/padding from sides & set to no scroll.
<head runat="server"> <title></title> <style type="text/css"> html { overflow:auto; } html, body, form { margin:0; height:100%; } </style> </head>Splitter & grid definition.
<Telerik:RadSplitter ID="rsMain" runat="server" Height="100%" Width="100%" Orientation="Horizontal" BorderSize="0" BorderWidth="0" OnClientResized="SplitterResized"> <telerik:RadPane ID="rpTop" runat="server" Height="110px" Locked="true"> <div style="padding: 10px; padding-bottom:0;"> <div style="padding-bottom: 20px"> <telerik:RadToolBar ID="rtbMainToolbar" runat="server" SkinID="regToolbar"> <Items> <telerik:RadToolBarButton runat="server" SkinID="FolderUp" id="rtbbBack" PostBack="false"></telerik:RadToolBarButton> <telerik:RadToolBarButton runat="server" SkinID="Refresh" id="rtbbRefresh" PostBack="false"></telerik:RadToolBarButton> <telerik:RadToolBarButton runat="server" SkinID="Add" id="rtbbAdd" PostBack="false" Text="Add Template"></telerik:RadToolBarButton> </Items> </telerik:RadToolBar> </div> </div> </telerik:RadPane> <telerik:RadPane ID="rpBottom" runat="server" Height="100%" scrolling="none" > <div style="height: 100%; padding-left: 10px;"> <telerik:RadGrid ID="rgMyGrid" runat="server" OnNeedDataSource="rgMyGrid_NeedDataSource" Width="100%" Height="100%" OnInit="rgMyGrid_Init"> <ClientSettings EnableRowHoverStyle="true" ClientEvents-OnGridCreated="DelayedGridAdjust" > <Scrolling AllowScroll="true" UseStaticHeaders="true" /> </ClientSettings> <MasterTableView AutoGenerateColumns="false" TableLayout="Fixed" AllowFilteringByColumn="true"> <Columns> <telerik:GridHyperLinkColumn UniqueName="TemplateName" DataTextField="Name" DataNavigateUrlFields="TemplateUrl" HeaderText="Name" AutoPostBackOnFilter="true"> </telerik:GridHyperLinkColumn> <telerik:GridImageColumn UniqueName="IsCustom" HeaderStyle-Width="60px" HeaderText="Custom" DataImageUrlFields="IsCustomImageUrl" ItemStyle-HorizontalAlign="Center" AllowFiltering="false" /> </Columns> </MasterTableView> </telerik:RadGrid> </div> </telerik:RadPane> </telerik:RadSplitter> The javascript to adjust the size of the grid based on the containing splitter size. Numbers for height & width should be adjusted accordingly to make it show correctly in your page.
var maxRetries = 20; var count = 0; //Delay the adjust after the GridLoad because the js objects for the splitter aren't loaded at the time that this event is fired. function DelayedGridAdjust() { if ($find("<%=rsMain.ClientID %>") != null) { AdjustGridSize(); } else { if (count < maxRetries) { setTimeout("DelayedGridAdjust();", 100); //Try up to 20 times in 2 seconds count++; } } } function SplitterResized(sender, args) { AdjustGridSize(); } function AdjustGridSize() { var splitter = $find("<%=rsMain.ClientID %>"); var height = splitter.get_height(); var width = splitter.get_width(); var grid = $find("<%=rgMyGrid.ClientID %>"); var gridDiv = grid.get_element(); gridDiv.style.width = (width - 23) + "px"; gridDiv.style.height = (height - 130) + "px"; var masterTable = grid.get_masterTableView(); var mtElement = masterTable.get_element(); var mtContainer = mtElement.parentNode; mtContainer.style.height = (height - 190) + "px"; grid.repaint(); }