Set Grid Height to 100%

[John]

  <table style="table-layout: fixed;" id="tblVisibility" runat="server">

                        <tr>

                            <td>
                                 Some Controls to add/update details.

     </td>

                        </tr>

                    </table>

                                <telerik:RadGrid ID="radGridStaffDetaills" AllowFilteringByColumn="false" runat="server"

                                    GridLines="None" AllowPaging="true" Height="150px" PageSize ="5" PagerStyle-Mode="NumericPages"

                                    AllowSorting="true" AutoGenerateColumns="false" EnableEmbeddedSkins="false">

                                    <ClientSettings EnableRowHoverStyle="true">

                                        <Scrolling AllowScroll="true" SaveScrollPosition="true"></Scrolling>

                                        <Selecting AllowRowSelect="true" />

                                        <ClientEvents OnRowSelected="rowSelected" />

                                        <ClientEvents OnCommand="radGridStaffDetaills_Command" />

                                    </ClientSettings>

                                    <MasterTableView TableLayout="Fixed" PagerStyle-Mode="NumericPages" CssClass="RadGrid_Web20"

                                        ClientDataKeyNames="Staff_Code">

                                        <Columns>

                                            <telerik:GridBoundColumn SortExpression="Staff_Code" UniqueName="Staff_Code" DataField="Staff_Code"

                                                HeaderText="Staff Code" HeaderStyle-HorizontalAlign="Right" ItemStyle-HorizontalAlign="Right"

                                                HeaderStyle-Wrap="false" ItemStyle-Wrap="false" Display="false" >

                                            </telerik:GridBoundColumn>

                                            <telerik:GridBoundColumn SortExpression="FirstName" DataField="FirstName" HeaderText="First Name"

                                                HeaderStyle-Wrap="false" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left">

                                            </telerik:GridBoundColumn>

                                            <telerik:GridBoundColumn SortExpression="LastName" DataField="LastName" HeaderText="Last Name"

                                                HeaderStyle-Wrap="false" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left">

                                            </telerik:GridBoundColumn>

                                            <telerik:GridBoundColumn SortExpression="Designation" DataField="Designation" HeaderText="Designation"

                                                HeaderStyle-Wrap="false" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left">

                                            </telerik:GridBoundColumn>

                                            <telerik:GridBoundColumn SortExpression="JoiningDate" DataField="JoiningDate" HeaderText="JoiningDate"

                                                HeaderStyle-Wrap="false" ItemStyle-Wrap="false" HeaderStyle-HorizontalAlign="Left"

                                                ItemStyle-HorizontalAlign="Left">

                                            </telerik:GridBoundColumn>

                                            <telerik:GridBoundColumn SortExpression="Country_Name" DataField="Country_Name" HeaderText="Country"

                                                HeaderStyle-Wrap="false" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left">

                                            </telerik:GridBoundColumn>

                                            <telerik:GridBoundColumn SortExpression="County_Name" DataField="County_Name" HeaderText="County"

                                                HeaderStyle-Wrap="false" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left">

                                            </telerik:GridBoundColumn>

                                            <telerik:GridBoundColumn SortExpression="PostalCode" DataField="PostalCode" HeaderText="Post Code"

                                                HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left" HeaderStyle-Wrap="false"

                                                ItemStyle-Wrap="false">

                                            </telerik:GridBoundColumn>

                                            <telerik:GridBoundColumn SortExpression="Telephone" DataField="Telephone" HeaderText="Telephone"

                                                HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left" HeaderStyle-Wrap="false"

                                                ItemStyle-Wrap="false">

                                            </telerik:GridBoundColumn>

                                            <telerik:GridBoundColumn SortExpression="Mobile" DataField="Mobile" HeaderText="Mobile"

                                                HeaderStyle-Wrap="false" ItemStyle-Wrap="false" HeaderStyle-HorizontalAlign="Left"

                                                ItemStyle-HorizontalAlign="Left">

                                            </telerik:GridBoundColumn>

                                            <telerik:GridBoundColumn SortExpression="Email" DataField="Email" HeaderText="Email"

                                                HeaderStyle-Wrap="false" ItemStyle-Wrap="false" HeaderStyle-HorizontalAlign="Left"

                                                ItemStyle-HorizontalAlign="Left">

                                            </telerik:GridBoundColumn>

                                            <telerik:GridBoundColumn SortExpression="Department_Name" DataField="Department_Name"

                                                HeaderStyle-Wrap="false" Display="false" HeaderText="Department" HeaderStyle-HorizontalAlign="Left"

                                                ItemStyle-HorizontalAlign="Left">

                                            </telerik:GridBoundColumn>

                                            <telerik:GridBoundColumn SortExpression="BusinessUnitId" DataField="BusinessUnitId"

                                                Display="false" HeaderText="BusinessUnitId" HeaderStyle-HorizontalAlign="Left"

                                                HeaderStyle-Wrap="false" ItemStyle-Wrap="false" ItemStyle-HorizontalAlign="Left">

                                            </telerik:GridBoundColumn>

                                            <telerik:GridBoundColumn SortExpression="CaseTypeId" DataField="CaseTypeId" Display="false"

                                                HeaderText="CaseTypeId" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left"

                                                HeaderStyle-Wrap="false" ItemStyle-Wrap="false">

                                            </telerik:GridBoundColumn>

                                            <telerik:GridBoundColumn SortExpression="CountyId" DataField="CountyId" Display="false"

                                                HeaderText="CountyId" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left"

                                                HeaderStyle-Wrap="false" ItemStyle-Wrap="false">

                                            </telerik:GridBoundColumn>

                                            <telerik:GridBoundColumn SortExpression="CountryId" DataField="CountryId" Display="false"

                                                HeaderText="CountryId" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left"

                                                HeaderStyle-Wrap="false" ItemStyle-Wrap="false">

                                            </telerik:GridBoundColumn>

                                            <telerik:GridBoundColumn SortExpression="SystemUserId" DataField="SystemUserId" Display="false"

                                                HeaderText="SystemUserId" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left"

                                                HeaderStyle-Wrap="false" ItemStyle-Wrap="false">

                                            </telerik:GridBoundColumn>

                                            <telerik:GridBoundColumn SortExpression="Role_Id" DataField="Role_Id" Display="false"

                                                HeaderText="Role_Id" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left"

                                                HeaderStyle-Wrap="false" ItemStyle-Wrap="false">

                                            </telerik:GridBoundColumn>

                                        </Columns>

                                    </MasterTableView>

                                </telerik:RadGrid>

                        

i have taken table above grid and which is having list on controls and i am hiding the table from button on a page so now i need to display grid with full space height so i m assigning control property Height=100% but its not working and if insated i am assigning in pixel as Height="400px" then its a fix height .So how can i set grid height flexible also i want scrolling automatically as i have added code in grid .

[Dimo]

Hello John,

Please refer to:

http://www.telerik.com/community/code-library/aspnet-ajax/grid/how-to-set-radgrid-height-client-side-with-javascript.aspx

Note that if the RadGrid control is 100% high, its parent element must have an explicit height. If the parent's height is in percent, then its parent must have height as well, and so on.

http://www.telerik.com/community/code-library/aspnet-ajax/grid/setting-100-height-and-resize-on-container-resize-for-grid-with-scrolling-and-static-headers.aspx

If the RadGrid is 100% high and is ajaxified, then its generated update panel should have a 100% height as well:

http://www.telerik.com/community/code-library/aspnet-ajax/ajax/how-to-set-100-height-and-random-styles-to-a-radajaxmanager-update-panel.aspx


Regards,
Dimo
the Telerik team