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

Set Grid Height to 100%

1 Answer 93 Views
Grid
This is a migrated thread and some comments may be shown as answers.
John
Top achievements
Rank 1
John asked on 14 Jul 2010, 08:03 AM
  <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 .



1 Answer, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 14 Jul 2010, 02:24 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Tags
Grid
Asked by
John
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Share this question
or