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

100% height and width with padding

1 Answer 170 Views
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
Iggy asked on 16 Jul 2010, 06:52 PM

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?


1 Answer, 1 is accepted

Sort by
Top achievements
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.
<head runat="server">
    <style type="text/css">

Splitter & grid definition.
<Telerik:RadSplitter ID="rsMain" runat="server" Height="100%" Width="100%" Orientation="Horizontal" BorderSize="0" BorderWidth="0" 
    <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">
                        <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>
    <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%"  
                <ClientSettings EnableRowHoverStyle="true" ClientEvents-OnGridCreated="DelayedGridAdjust" >
                    <Scrolling AllowScroll="true" UseStaticHeaders="true" />
                <MasterTableView AutoGenerateColumns="false" TableLayout="Fixed" AllowFilteringByColumn="true">                
                        <telerik:GridHyperLinkColumn UniqueName="TemplateName" DataTextField="Name" DataNavigateUrlFields="TemplateUrl" 
                            HeaderText="Name" AutoPostBackOnFilter="true">
                        <telerik:GridImageColumn UniqueName="IsCustom" HeaderStyle-Width="60px" HeaderText="Custom" 
                            DataImageUrlFields="IsCustomImageUrl" ItemStyle-HorizontalAlign="Center" AllowFiltering="false" />

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) {
    else {
        if (count < maxRetries) {
            setTimeout("DelayedGridAdjust();", 100); //Try up to 20 times in 2 seconds
function SplitterResized(sender, args) {
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(); = (width - 23) + "px"; = (height - 130) + "px";
    var masterTable = grid.get_masterTableView();
    var mtElement = masterTable.get_element();   
    var mtContainer = mtElement.parentNode; = (height - 190) + "px";

Asked by
Top achievements
Rank 1
Answers by
Top achievements
Rank 1
Share this question