change grid scroll height dynamically

[Babu Puchakayala]

I want change the scroll height from clientside. I have seen your examples But my scenario is is different. I have radgrid on popup window with addnotes tab. By defalut grid scroll height is 220px. when i click addnote button i want decrease the scrollheight size to 120px. How to do it. I tried your code but i am getting error like "Microsoft JScript runtime error: 'GridDataDiv' is null or not an object".  (Please see Images)  Here is my code....

<div id="div1" style="width: 100%; overflow: auto; overflow-x: hidden">
    <table class="customFont" width="98.5%">
        <tr id="tr1" runat="server">
            <td align="right">
                <asp:Button Text="Add Note" runat="server" ID="Button1" OnClientClick="return showAddNotes()" />
            </td>
        </tr>
        <tr style="display: none; position: relative" id="tr2">
            <td>
                <table style="background-color: #F5F5E9" cellspacing="2">
                    <tr>
                        <td align="left" style="width: 70px;">
                            Note Type
                        </td>
                        <td align="left" style="width: 82px; height: 24px;">
                            <telerik:RadComboBox ID="RadComboBox1" EmptyMessage="Please select" runat="server"
                                MarkFirstMatch="True" CollapseDelay="0" Width="115px" DropDownWidth="100px" AllowCustomText="True">
                                <CollapseAnimation Duration="0" />
                            </telerik:RadComboBox>
                            <asp:RequiredFieldValidator InitialValue="" ValidationGroup="Notes" ID="RequiredFieldValidator1"
                                runat="server" ControlToValidate="ddlNoteType" ClientValidationFunction="ddlNt"
                                Display="None" ErrorMessage="Please select Note Type."></asp:RequiredFieldValidator>
                            <cc2:ValidatorCalloutExtender ID="ValidatorCalloutExtender1" TargetControlID="custValCou"
                                runat="server" Enabled="True">
                            </cc2:ValidatorCalloutExtender>
                        </td>
                        <td>
                        </td>
                    </tr>
                    <tr>
                        <td align="left" valign="middle" style="width: 70px;">
                            Notes
                        </td>
                        <td align="left">
                            <asp:TextBox ID="TextBox1" runat="server" TextMode="MultiLine" Rows="3" Width="570px"></asp:TextBox>
                            <asp:RequiredFieldValidator ID="RequiredFieldValidator2" ValidationGroup="Notes"
                                ControlToValidate="txtNoteDesc" Display="None" runat="server" ErrorMessage="Please enter Notes."></asp:RequiredFieldValidator>
                            <cc2:ValidatorCalloutExtender ID="ValidatorCalloutExtender2" TargetControlID="valCliID"
                                runat="server">
                            </cc2:ValidatorCalloutExtender>

                        </td>
                        <td valign="top">
                            <div style="padding-bottom: 4px;">
                                <asp:Button ID="Button2" Width="60px" OnClick="btnAddNote_Click" ValidationGroup="Notes"
                                    runat="server" Text="Add" /></div>
                            <asp:Button ID="Button3" Width="60px" runat="server" OnClientClick="return  hideAddNotes()"
                                Text="Cancel" />
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td>

            </td>
        </tr>
        <tr>
            <td>
                <telerik:RadGrid ID="RadGrid1" GridLines="None" AllowSorting="false" Width="100%"
                    runat="server" AutoGenerateColumns="false" ShowFooter="false" ShowGroupPanel="false"
                    ShowStatusBar="false" EnableEmbeddedSkins="false" HeaderStyle-HorizontalAlign="Left"
                    ItemStyle-HorizontalAlign="Left" Font-Size="7.5pt" BorderColor="White" BorderWidth="0"
                    BorderStyle="None">
                    <HeaderStyle BackColor="#004000" ForeColor="White" Font-Size="7.5pt" Font-Bold="True"
                        HorizontalAlign="Left" BorderColor="White" />
                    <ItemStyle BorderStyle="None" />
                    <AlternatingItemStyle BorderStyle="None" />
                    <AlternatingItemStyle BackColor="#F5F5E9" />
                    <MasterTableView>
                        <Columns>
                            <telerik:GridBoundColumn HeaderText="#" DataField="rowNum" HeaderStyle-Width="12px"
                                ItemStyle-Width="12px">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn ReadOnly="true" HeaderStyle-Width="413px" ItemStyle-Width="413px"
                                UniqueName="Notes" HeaderText="Notes" DataField="Notes">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn UniqueName="Type Description" HeaderStyle-Width="57px" ItemStyle-Width="57px"
                                HeaderText="Note Type" DataField="Type Description" ReadOnly="true">
                            </telerik:GridBoundColumn>
                            <telerik:GridTemplateColumn HeaderText="Created By">
                                <ItemTemplate>
                                    <asp:Label ID="lblCreatedBy" runat="server" Width="78px" Text='<%# Bind("CreatedBy") %>'></asp:Label>
                                </ItemTemplate>
                            </telerik:GridTemplateColumn>
                            <telerik:GridBoundColumn UniqueName="CreationDate" HeaderText="Created Date" DataField="CreationDate"
                                ReadOnly="true">
                            </telerik:GridBoundColumn>
                        </Columns>
                        <NoRecordsTemplate>
                            No notes are avaliable</NoRecordsTemplate>
                    </MasterTableView>
                    <ClientSettings>
                        <Scrolling AllowScroll="True" UseStaticHeaders="True" ScrollHeight="220px" SaveScrollPosition="True">
                        </Scrolling>
                    </ClientSettings>
                </telerik:RadGrid>
            </td>
        </tr>
    </table>
</div>

function showAddNotes(sender, args) {
            document.getElementById('trAddNewNotes').style.display = "block";
            document.getElementById('ctl00_PagePlaceholder_winBlkTskAssign_C_tabTskAssign_TabNotes_trNotes').style.display = "none";
            var scrollArea = sender.GridDataDiv;
            var parent = $get("div1");
            var gridHeader = sender.GridHeaderDiv;
            scrollArea.style.height = "120px";
            return false;
        }

[Pavlina]

Hello Babu,

When static headers are enabled you will also have to take into account the header height (gridHeader.clientHeight). Give it a try and see if it helps.

Greetings,
Pavlina
the Telerik team

[Babu Puchakayala]

Pavlina,
how to do it? I didnt het it actually

[Babu Puchakayala]

hi,

I got it this way thanks

grid = $find("<%= gvNotes.ClientID %>");
            grid.get_element().style.height = 190 + "px";
            grid.repaint();
            return false;