Obtaining the height of grid

[topry]

Using current release of the controls-
Grid within a div with a label beneath, both contained within a Webusercontrol.
Grid config:

<telerik:RadGrid ID="gridMain" runat="server" AllowPaging="True"
        GridLines="None" Skin="Office2007" AutoGenerateColumns="False"
        AllowSorting="True" DataSourceID="dsPMail" PageSize="5">
<HeaderContextMenu EnableTheming="True">
<CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
</HeaderContextMenu>

        <PagerStyle Mode="NumericPages" />

<MasterTableView DataKeyNames="RowID,SentBy,DateSent,Body"
            ClientDataKeyNames="RowID, Body" DataSourceID="dsPMail">
<RowIndicatorColumn>
<HeaderStyle Width="20px"></HeaderStyle>
</RowIndicatorColumn>

    <Columns>
        <telerik:GridBoundColumn DataField="Body" Display="False" UniqueName="Body" ReadOnly="True" Visible="False">
        </telerik:GridBoundColumn>
        <telerik:GridBoundColumn UniqueName="DateSent" DataField="DateSent"
            HeaderText="Date Sent" ReadOnly="True" DataType="System.String" DataFormatString="{0:MM/dd/yyyy hh:mm tt}">
            <HeaderStyle Width="135em" />
        </telerik:GridBoundColumn>
        <telerik:GridBoundColumn DataField="SentBy" HeaderText="Sent By"
            ReadOnly="True" UniqueName="SentBy">
            <HeaderStyle Width="120em" />
        </telerik:GridBoundColumn>
        <telerik:GridBoundColumn DataField="Subject" HeaderText="Subject"
            ReadOnly="True" UniqueName="Subject">
        </telerik:GridBoundColumn>
        <telerik:GridBoundColumn DataField="RowID" UniqueName="RowID"
            DataType="System.Int32" Visible="False">
        </telerik:GridBoundColumn>
    </Columns>

</MasterTableView>

        <ClientSettings>
            <Selecting AllowRowSelect="True" />
            <ClientEvents OnCommand="OnCommand"
                OnRowSelected="OnRowClicked" />

        </ClientSettings>

<FilterMenu EnableTheming="True">
<CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
</FilterMenu>
</telerik:RadGrid>

 
Within the webusercontrol's resize event, I set the height of the label to fill the remainder of the .ClientHeight, which requires that I know the current height of the grid. Only the grid's .scrollHeight is returning a value and it varies even though the height is the same.

Within the resize event I use the following jscript:

var gridControl = document.getElementById("<%= gridMain.ClientID %>");
var txtControl = document.getElementById("<%= txtMail.ClientID %>");
txtControl.style.height = (document.documentElement.clientHeight - gridControl.scrollHeight) + "px";

Half the time the grid's .scrollHeight value is correct (187px for 5 rows), half the time its returning 271px, even though its the same 5 rows and the same height.

What should I be using to obtain the grid's height during the usercontrol's resize event?

[Todd Anglin]

Hello Topry-

This is definitely an unusual scenario! Usually, with web layouts, you rarely need to calculate the size of items to fill spaces. CSS and flow layouts tend to "naturally" fill available spaces. For instance, if I have a DIV, I can set the height in PX, then set the height of my label to 100%, and it will naturally fill the space "left over" by the Grid.

Perhaps you can provide more details about what you're trying to achieve? That may help better frame the scenario you're working on and enable us to find the best solution for you. Setting things in exact pixel sizes can cause a lot of headaches, so hopefully we can help you find a more flexible solution.

-Todd

[topry]

Thanks for the offer -

I have a master page that I dynamically load usercontrols within the ContentPlaceHolder based upon user input. The master page is basically an inverted L with content on the left and top. The webusercontrol within the placeholder fills the remainder of the page.
This usercontrol contains a grid at top, a label underneath and two buttons beneath the label. Each (grid, label and buttons) are currently contained with a separate divs and all 3 of those within one 'main' div.

The grid has a page size of 5 rows.
When the user clicks on a row, I display the text (content) for the selected row within the label.
I have tried numerous methods to try and get the label to automatically resize the height, but the only thing I have been able to get to work was to set the height of the label within the resize event  (hence my trying to determine the grid height). If there is a method to get the height to adjust automatically (or a better way to do this), I would appreciate knowing how to do it.

 

-Tim

[Todd Anglin]

Can you send a snippet that shows your HTML/CSS layout? In other words, something like:

<div id="main">

<div>

<telerik:RadGrid...

<div>

<div>

<asp:Label CssClass="?" Height="?"...

</div>

<div>

<asp:Button...

</div>

</div>

I don't need to see all of your Grid mark-up, but I am curious to see how your area is structured. Also, what is the problem that you're trying to solve? Does the label need to be bigger for some selected elements? Or are you trying to prevent the page layout from shifting when you select an element? If I understand your goal, that will help target my advice.

Thanks-

Todd

[topry]

Here is the basic layout (everything sans grid detail):

<div id="divMain" runat="server">
<div id="divGrid" runat="server">
<telerik:RadGrid ID="gridMain" runat="server" AllowPaging="True"
        GridLines="None" Skin="Office2007" AutoGenerateColumns="False"
        AllowSorting="True" DataSourceID="dsPMail" PageSize="5">
</telerik:RadGrid>

 </div>

        <div id="divMessage" runat="server">

            <asp:Label ID="txtMail" runat="server" Text="" Width="100%" style="overflow:scroll;" BackColor="#D7E5F7"></asp:Label>

        </div>

        <div style="text-align: center;">
            <ul class="mailBtn">
                <li><asp:LinkButton ID="btnReply" runat="server" Text="Reply" OnClientClick="openReply();return false;" /></li>
                <li><asp:LinkButton ID="btnNew" runat="server" Text="New" OnClientClick="openNewMail();return false;" /></li>
            </ul>
        </div>

</div>

 

Having the grid pagesize set, the max height of the grid is limited, so I need the label to fill the remainder of the container area, leaving room for the buttons at the bottom. If I set the label height to 100%, the label sized to text, which can exceed the document.documentElement.clientHeight. What I want is the label height to be consistent, regardless of the amount of text displayed (hence the style setting on the label for overflow).

[Todd Anglin]

If everything is "fixed size" in your layout, could you not use do something like:

#divGrid, #divMessage{

overflow:scroll;

height: 200px;

}

#divMessage{

height: 100px;

}

Or do you not know your available space ahead of time? Perhaps a screen shot or (even better) a live demo would help short-cut the forum explanations. I'm still having a hard time picturing the scenario that requires you to calcuate a div's height explicitly.

To your original question, instead of trying to get the height from the Grid, why not pull the height from the DIV surrounding the Grid? That should accurately convey the total area consumed by the RadGrid in your layout.

-Todd

[topry]

My experience is primarily with winforms apps, my asp/ajax knowledge is still quite limited (as you probably surmised...), so I do not doubt there is a better way to do this, so I appreciate your input. No need to hold back, I have thick skin <G>.

Demo site, not possible at the moment, heading out of town shortly.
I took some screenshots that should help:
Image 1 - no row selected
Image 2 - row selected, height of label set to fill available area.

While the area on the left and top of the masterpage are both divs and fixed in size, and the contentplaceholder with the loaded usercontrol fills the rest, the original intent was to fill the height remaining by the users current browser height.

[Todd Anglin]

The screenshots definitely help! So things look semi-right, right? The DIV with your selected message is filling the area between your Grid and buttons. I'm assuming the challenge now is that you always want the buttons at the bottom of the page (and not "moving" when you select different messages).

If that's the case, you can apply some CSS to your DIV that has your buttons to achieve that effect. There is a great discussion on the CSS you need here:

http://www.webmasterworld.com/css/3248614.htm

http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

Essentially, you can apply the CSS logic that's often used to keep "footers" on the bottom of a page to your buttons.

Hope this helps. Sorry in advance if I'm still of track with what you're trying to do.

-Todd

[topry]

>>So things look semi-right, right?
Correct - currently, I am hardcoding the offset and setting the label height, which in turn positions the buttons at the bottom.

>>I'm assuming the challenge now is that you always want the buttons at the bottom of the page (and not "moving" when you select different messages).
Exactly!

I am using a style sheet currently, and will review the articles you listed upon my return.

Thank you again for the info/help.