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

Column Sorting Changes Grid Height

1 Answer 78 Views

Grid

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

Carla Lewis asked on 15 Apr 2009, 02:02 PM

The only problem I am having with the pages I am working on right now is that when the user performs a column sort, the grid goes to half height and stays that way. Is there a client-side event I can capture that happens after the sort so that I can fix the height of the grid?

I'm already dynamically sizing the grid in relation to the browser height and the toolbar height when the page loads or the browser window is resized.

My page code is:

    
            <%@ Page Language="VB" AutoEventWireup="false" CodeFile="findDriver.aspx.vb" Inherits="findDriver" %> 
        
            <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
        
            <%@ Register Src="previewDriver.ascx" TagName="driverDetails" TagPrefix="etherion" %> 
        
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
        
            <html xmlns="http://www.w3.org/1999/xhtml"> 
        
            <head runat="server"> 
        
                <title>Find driver</title> 
        
                <style type="text/css"> 
        
                    body, html 
        
                    { 
        
                        margin: 0px; 
        
                        height: 100%; 
        
                    } 
        
                    form 
        
                    { 
        
                        margin: 0px; 
        
                        height: 100%; 
        
                    } 
        
                </style> 
        
            </head> 
        
            <body onload="fixHeights()" onresize="fixHeights()"> 
        
                <form id="form1" runat="server"> 
        
                <asp:ScriptManager ID="ScriptManager1" runat="server"> 
        
                </asp:ScriptManager> 
        
                <telerik:RadToolTip ID="tipFind" runat="server" TargetControlID="btnFind" IsClientID="true" 
        
                    ManualClose="True" RelativeTo="Element" ShowDelay="0" ShowEvent="OnClick" Position="BottomRight" 
        
                    Title="Find driver"> 
        
                    <fieldset style="border: none"> 
        
                        <legend></legend> 
        
                        <ul style="list-style: none"> 
        
                            <li> 
        
                                <label for="txtName"> 
        
                                    First name: 
        
                                </label> 
        
                                <telerik:RadTextBox ID="txtFirstName" runat="server"> 
        
                                </telerik:RadTextBox> 
        
                            </li> 
        
                            <li> 
        
                                <label for="txtName"> 
        
                                    Last name: 
        
                                </label> 
        
                                <telerik:RadTextBox ID="txtLastName" runat="server"> 
        
                                </telerik:RadTextBox> 
        
                            </li> 
        
                            <li> 
        
                                <label for="txtSSN"> 
        
                                    SSN: 
        
                                </label> 
        
                                <telerik:RadTextBox ID="txtSSN" runat="server"> 
        
                                </telerik:RadTextBox> 
        
                            </li> 
        
                            <li> 
        
                                <label for="cmbArea"> 
        
                                    Area: 
        
                                </label> 
        
                                <telerik:RadComboBox ID="cmbArea" runat="server" DataSourceID="sqlArea" DataTextField="Text" 
        
                                    DataValueField="ID" ZIndex="50002" MaxHeight="100px"> 
        
                                    <CollapseAnimation Duration="200" Type="OutQuint" /> 
        
                                </telerik:RadComboBox> 
        
                            </li> 
        
                            <li> 
        
                                <label for="cmbMarket"> 
        
                                    Market: 
        
                                </label> 
        
                                <telerik:RadComboBox ID="cmbMarket" runat="server" DataSourceID="sqlMarket" DataTextField="Text" 
        
                                    DataValueField="ID" ZIndex="50003" MaxHeight="100px"> 
        
                                    <CollapseAnimation Duration="200" Type="OutQuint" /> 
        
                                </telerik:RadComboBox> 
        
                            </li> 
        
                        </ul> 
        
                    </fieldset> 
        
                    <asp:Button ID="cmdFind" runat="server" Text="OK" /> 
        
                </telerik:RadToolTip> 
        
                <telerik:RadToolBar ID="RadToolBar" runat="server"> 
        
                    <CollapseAnimation Type="OutQuint" Duration="50"></CollapseAnimation> 
        
                    <Items> 
        
                        <telerik:RadToolBarButton runat="server" Text="New" ImageUrl="~/RadControls/Toolbar/Skins/office2007/Img/new.gif"> 
        
                        </telerik:RadToolBarButton> 
        
                        <telerik:RadToolBarButton runat="server" Text="Open" ImageUrl="~/RadControls/Toolbar/Skins/office2007/Img/open.gif"> 
        
                        </telerik:RadToolBarButton> 
        
                        <telerik:RadToolBarButton runat="server" IsSeparator="True" Text="Button 2"> 
        
                        </telerik:RadToolBarButton> 
        
                        <telerik:RadToolBarButton runat="server" Text="Print" ImageUrl="~/RadControls/Toolbar/Skins/office2007/Img/print.gif"> 
        
                        </telerik:RadToolBarButton> 
        
                        <telerik:RadToolBarButton runat="server" IsSeparator="True" Text="Button 4"> 
        
                        </telerik:RadToolBarButton> 
        
                        <telerik:RadToolBarButton runat="server" id="btnFind" ImageUrl="~/RadControls/Toolbar/Skins/office2007/Img/find.gif" 
        
                            Text="Find"> 
        
                        </telerik:RadToolBarButton> 
        
                    </Items> 
        
                </telerik:RadToolBar> 
        
                <asp:UpdatePanel ID="UpdatePanel" runat="server" UpdateMode="Conditional"> 
        
                    <ContentTemplate> 
        
                        <telerik:RadToolTipManager ID="tipPreview" OffsetY="-1" ManualClose="true" Width="250" 
        
                            Height="350" runat="server" OnAjaxUpdate="OnAjaxUpdate" RelativeTo="Element" 
        
                            Position="MiddleRight"> 
        
                        </telerik:RadToolTipManager> 
        
                        <telerik:RadGrid ID="RadGrid" runat="server" AllowPaging="True" AllowSorting="True" 
        
                            DataSourceID="sqlDrivers" GridLines="None" AutoGenerateColumns="False" Height="400px" 
        
                            Width="100%"> 
        
                            <HeaderContextMenu> 
        
                                <CollapseAnimation Duration="200" Type="OutQuint" /> 
        
                            </HeaderContextMenu> 
        
                            <MasterTableView ClientDataKeyNames="ID" DataKeyNames="ID" DataSourceID="sqlDrivers" 
        
                                TableLayout="Auto" PageSize="100"> 
        
                                <RowIndicatorColumn> 
        
                                    <HeaderStyle Width="20px" /> 
        
                                </RowIndicatorColumn> 
        
                                <ExpandCollapseColumn> 
        
                                    <HeaderStyle Width="20px" /> 
        
                                </ExpandCollapseColumn> 
        
                                <NoRecordsTemplate> 
        
                                    no records to display 
        
                                </NoRecordsTemplate> 
        
                                <Columns> 
        
                                    <telerik:GridTemplateColumn HeaderText="Product" AllowFiltering="False"> 
        
                                        <ItemTemplate> 
        
                                            <asp:HyperLink ID="targetControl" runat="server" NavigateUrl="#" Text='<%# Eval("id") %>'></asp:HyperLink> 
        
                                        </ItemTemplate> 
        
                                        <HeaderStyle Width="25px" /> 
        
                                        <ItemStyle VerticalAlign="Top" Wrap="False" /> 
        
                                    </telerik:GridTemplateColumn> 
        
                                    <telerik:GridBoundColumn DataField="ID" DataType="System.Int32" HeaderText="ID" ReadOnly="True" 
        
                                        SortExpression="ID" UniqueName="ID" Display="false" AllowFiltering="False"> 
        
                                        <HeaderStyle Width="50px" /> 
        
                                        <ItemStyle VerticalAlign="Top" Wrap="False" /> 
        
                                    </telerik:GridBoundColumn> 
        
                                    <telerik:GridBoundColumn DataField="Date_Application" DataType="System.DateTime" 
        
                                        HeaderText="Applied" SortExpression="Date_Application" DataFormatString="{0:d}" 
        
                                        UniqueName="Date_Application" AllowFiltering="False"> 
        
                                        <HeaderStyle Width="60px" /> 
        
                                        <ItemStyle VerticalAlign="Top" Wrap="False" Width="60px" /> 
        
                                    </telerik:GridBoundColumn> 
        
                                    <telerik:GridBoundColumn DataField="FirstName" HeaderText="First" SortExpression="FirstName" 
        
                                        UniqueName="FirstName"> 
        
                                        <HeaderStyle Width="125px" /> 
        
                                        <ItemStyle VerticalAlign="Top" Wrap="False" Width="125px" /> 
        
                                    </telerik:GridBoundColumn> 
        
                                    <telerik:GridBoundColumn DataField="LastName" HeaderText="Last" SortExpression="LastName" 
        
                                        UniqueName="LastName"> 
        
                                        <HeaderStyle Width="125px" /> 
        
                                        <ItemStyle VerticalAlign="Top" Wrap="False" Width="125px" /> 
        
                                    </telerik:GridBoundColumn> 
        
                                    <telerik:GridBoundColumn DataField="City" HeaderText="City" SortExpression="City" 
        
                                        UniqueName="City"> 
        
                                        <HeaderStyle Width="125px" /> 
        
                                        <ItemStyle VerticalAlign="Top" Wrap="False" Width="125px" /> 
        
                                    </telerik:GridBoundColumn> 
        
                                    <telerik:GridBoundColumn DataField="Phone1" HeaderText="Phone1" SortExpression="Phone1" 
        
                                        UniqueName="Phone1" AllowFiltering="False"> 
        
                                        <HeaderStyle Width="60px" /> 
        
                                        <ItemStyle VerticalAlign="Top" Wrap="False" Width="60px" /> 
        
                                    </telerik:GridBoundColumn> 
        
                                    <telerik:GridBoundColumn DataField="Phone2" HeaderText="Phone2" SortExpression="Phone2" 
        
                                        UniqueName="Phone2" AllowFiltering="False"> 
        
                                        <HeaderStyle Width="60px" /> 
        
                                        <ItemStyle VerticalAlign="Top" Wrap="False" Width="60px" /> 
        
                                    </telerik:GridBoundColumn> 
        
                                    <telerik:GridBoundColumn DataField="Phone3" HeaderText="Phone3" SortExpression="Phone3" 
        
                                        UniqueName="Phone3" AllowFiltering="False"> 
        
                                        <HeaderStyle Width="60px" /> 
        
                                        <ItemStyle VerticalAlign="Top" Wrap="False" Width="60px" /> 
        
                                    </telerik:GridBoundColumn> 
        
                                    <telerik:GridBoundColumn DataField="ClassEndorsements" HeaderText="Endorsements" 
        
                                        SortExpression="ClassEndorsements" UniqueName="ClassEndorsements"> 
        
                                        <HeaderStyle Width="60px" /> 
        
                                        <ItemStyle VerticalAlign="Top" Wrap="False" Width="60px" /> 
        
                                    </telerik:GridBoundColumn> 
        
                                    <telerik:GridBoundColumn DataField="Experience" HeaderText="Experience" SortExpression="Experience" 
        
                                        UniqueName="Experience"> 
        
                                        <ItemStyle VerticalAlign="Top" Wrap="True" /> 
        
                                    </telerik:GridBoundColumn> 
        
                                </Columns> 
        
                            </MasterTableView> 
        
                            <ClientSettings> 
        
                                <Selecting AllowRowSelect="true" /> 
        
                                <Scrolling AllowScroll="True" UseStaticHeaders="True" /> 
        
                            </ClientSettings> 
        
                            <FilterMenu> 
        
                                <CollapseAnimation Duration="200" Type="OutQuint" /> 
        
                            </FilterMenu> 
        
                        </telerik:RadGrid> 
        
                    </ContentTemplate> 
        
                </asp:UpdatePanel> 
        
                <asp:SqlDataSource ID="sqlDrivers" runat="server" ConnectionString="<%$ ConnectionStrings:DMS3 %>" 
        
                    SelectCommand="dmsDriverFind" SelectCommandType="StoredProcedure"> 
        
                    <SelectParameters> 
        
                        <asp:ControlParameter ControlID="txtFirstName" DefaultValue="%" Name="fname" PropertyName="Text" 
        
                            Type="String" /> 
        
                        <asp:ControlParameter ControlID="txtLastName" DefaultValue="%" Name="lname" PropertyName="Text" 
        
                            Type="String" /> 
        
                        <asp:ControlParameter ControlID="txtSSN" DefaultValue="%" Name="ssn" PropertyName="Text" 
        
                            Type="String" /> 
        
                        <asp:ControlParameter ControlID="cmbArea" DefaultValue="0" Name="area" PropertyName="SelectedValue" 
        
                            Type="String" /> 
        
                        <asp:ControlParameter ControlID="cmbMarket" DefaultValue="1" Name="market" PropertyName="SelectedValue" 
        
                            Type="String" /> 
        
                    </SelectParameters> 
        
                </asp:SqlDataSource> 
        
                <telerik:RadSkinManager ID="RadSkinManager1" runat="server" Skin="Hay"> 
        
                </telerik:RadSkinManager> 
        
                <asp:SqlDataSource ID="sqlArea" runat="server" ConnectionString="<%$ ConnectionStrings:DMS3 %>" 
        
                    SelectCommand="SELECT DISTINCT * FROM [dmsArea] ORDER BY [Text]"></asp:SqlDataSource> 
        
                <asp:SqlDataSource ID="sqlMarket" runat="server" ConnectionString="<%$ ConnectionStrings:DMS3 %>" 
        
                    SelectCommand="SELECT DISTINCT * FROM [dmsMarket] ORDER BY [Text]"></asp:SqlDataSource> 
        
                <script type="text/javascript" language="javascript"> 
        
                    function fixHeights() { 
        
                        var grd = document.getElementById("<%=radgrid.ClientID %>"); 
        
                        var tlb = document.getElementById("<%=radtoolbar.ClientID %>"); 
        
                        grd.style.height = (document.documentElement.offsetHeight - (tlb.offsetHeight + 4)) + 'px'; 
        
                    } 
        
                </script> 
        
                </form> 
        
            </body> 
        
            </html>

1 Answer, 1 is accepted

answered on 16 Apr 2009, 08:15 AM

Hello Carla Lewis,

You can use the GridCreated client side event to resize RadGrid with Javascript. It is fired on initial load and after every RadGrid update with AJAX.

In this case you should remove body onload, because it will not be needed.

<body onload="...." onresize="....">

By the way, the recommended way to resize RadGrid with static headers is the following:

($get is short for document.getElementById in ASP.NET AJAX. $find returns an ASP.NET AJAX client control instance)

    
                    function fixHeights() 
        
                    {  
        
                        var grd = $find("<%=radgrid.ClientID %>");  
        
                        var tlb = $get("<%=radtoolbar.ClientID %>");  
        
                        grd.get_element().style.height = (document.documentElement.offsetHeight - (tlb.offsetHeight + 4)) + 'px';  
        
                        grd.repaint(); 
        
                    }

Greetings,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Column Sorting Changes Grid Height

1 Answer, 1 is accepted