Limiting javascript update to just an asp:UpdatePanel

Question

I have a GridView inside an UpdatePanel and use javascript to toggle the visibility of a row when the user clicks on an expand button. There is quite a bit of information above the GridView, but I want only the information in the respective UpdatePanel to update so that the screen will stay as is, but the JavaScript call is causing an entire screen refresh and the window jumps back to the top.

The code I'm using for the GridView actually comes from the ExtGridView control on CodeProject (http://www.codeproject.com/Articles/12299/ExtGridView) - it turns the last asp:TemplateField of a GridView into a new row beneath the other items.

I'm new to JavaScript and fairly new to ASP.NET, so I may be missing something simple. Is there a way to keep the JavaScript refresh to just the respective UpdatePanel that caused it?

Here is the JavaScript code:

<script type="text/javascript">
//<![CDATA[
function TglRow(ctl)
{
    var row = ctl.parentNode.parentNode;
    var tbl = row.parentNode;
    var crow = tbl.rows[row.rowIndex + 1];
    var ihExp = ctl.parentNode.getElementsByTagName('input').item(0);

    tbl = tbl.parentNode;

    var expandClass = tbl.attributes.getNamedItem('expandClass').value;
    var collapseClass = tbl.attributes.getNamedItem('collapseClass').value;
    var expandText = tbl.attributes.getNamedItem('expandText').value;
    var collapseText = tbl.attributes.getNamedItem('collapseText').value;

    if (crow.style.display == 'none')
    {
        crow.style.display = '';
        ctl.innerHTML = collapseText;
        ctl.className = collapseClass;
        ihExp.value = '1';
    }
    else
    {
        crow.style.display = 'none';
        ctl.innerHTML = expandText;
        ctl.className = expandClass;
        ihExp.value = '';
    }
}//]]>
</script>

And here is an excerpt from the GridView:

    <asp:UpdatePanel ID="UpdatePanelChapter11" runat="server" 
           ChildrenAsTriggers="false" UpdateMode="Conditional">
      <ContentTemplate>
        <cc1:ExtGridView ID="gvChapter11" runat="server" AutoGenerateColumns="False" DataSourceID="odsChapter11"
          DataKeyNames="pkChapter11ID" ShowFooter="True" SkinID="GridViewSKin" Width="85%"
          onrowcommand="gvChapter11_RowCommand" 
          onrowdatabound="gvChapter11_RowDataBound" 
          onrowupdating="gvChapter11_RowUpdating" 
          CollapseButtonCssClass="GridCollapseButton" 
          ExpandButtonCssClass="GridExpandButton" CollapseButtonText="" 
          ExpandButtonText="" onrowcreated="gvChapter11_RowCreated">
          <Columns>
            <asp:TemplateField HeaderText="Name of<br/>Party" SortExpression="Name">
              <EditItemTemplate>
                <asp:TextBox ID="tbName" runat="server" Text='<%# Bind("Name") %>'></asp:TextBox>
                <br /><asp:RequiredFieldValidator ID="tbNameValidator" runat="server" ErrorMessage="*Name Required" ControlToValidate="tbName"
                 Display="Dynamic" CssClass="Error" ValidationGroup="SaveChapter11Validation"></asp:RequiredFieldValidator>
              </EditItemTemplate>
              <FooterTemplate>
                <asp:TextBox ID="tbName" runat="server" Text='<%# Bind("Name") %>'></asp:TextBox>
                <br /><asp:RequiredFieldValidator ID="tbNameValidator" runat="server" ErrorMessage="*Name Required" ControlToValidate="tbName"
                 Display="Dynamic" CssClass="Error" ValidationGroup="NewChapter11Validation"></asp:RequiredFieldValidator>
              </FooterTemplate>
              <ItemTemplate>
                <asp:Label ID="Label4" runat="server" Text='<%# Eval("Name") %>'></asp:Label>
              </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField>
              <EditItemTemplate>
                <asp:LinkButton CssClass="Button" ID="SaveLink" runat="server" CommandName="Update" Text="Save" ValidationGroup="SaveChapter11Validation"></asp:LinkButton>
                <asp:LinkButton CssClass="Button" ID="CancelLink" runat="server" CommandName="Cancel" Text="Cancel"></asp:LinkButton>
              </EditItemTemplate>
              <ItemTemplate>
                <asp:LinkButton CssClass="Button" ID="EditLink" runat="server" CommandName="Edit" Text="Edit"></asp:LinkButton>
                <asp:LinkButton CssClass="Button" ID="DeleteLink" runat="server" CommandName="Delete" Text="Delete"
                OnClientClick="return confirm('Are you sure you want to delete this entry?');" ></asp:LinkButton>
              </ItemTemplate>
              <FooterTemplate>
                <asp:LinkButton CssClass="Button" ID="AddLink" runat="server" CommandName="Insert" Text="<<< Add" ValidationGroup="NewChapter11Validation"></asp:LinkButton>
              </FooterTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Plan">
              <EditItemTemplate>
                <div class="ExtGridRow" style="vertical-align:top;">Plan: </div>
                <asp:TextBox ID="tbPlan" runat="server" Text='<%# Bind("Plan") %>'></asp:TextBox>
              </EditItemTemplate>
              <ItemTemplate>
                <div class="ExtGridRow" style="vertical-align:top;">Plan: </div>
                <asp:Label ID="Label9" runat="server" Text='<%# Eval("Plan") %>'></asp:Label>
              </ItemTemplate>
              <FooterTemplate>
                <div class="ExtGridRow" style="vertical-align:top;">Plan: </div>
                <asp:TextBox ID="tbPlan" runat="server"></asp:TextBox>
              </FooterTemplate>
            </asp:TemplateField>
          </Columns>
        </cc1:ExtGridView>
      </ContentTemplate>
      <Triggers>
        <asp:AsyncPostBackTrigger ControlID="gvChapter11" EventName="DataBound" />
      </Triggers>
    </asp:UpdatePanel>

Answer 1

Well shoot... a little more playing around with the ExtGridView code and I figured it out. The expand/toggle button that calls the javascript also had an HRef assigned, acting as a link, so when it was clicked it would not only call the JavaScript but also acted as if a link was clicked, causing the page refresh.

The culprit code from the ExtGridView:

       // ...
       else if (RowType == DataControlRowType.DataRow || RowType == DataControlRowType.Footer)
        {       
            _expCell = new TableCell();

            _ctlExpand = new HtmlAnchor();
            //_ctlExpand.HRef = "#";          -- Commenting this out worked!
            _ctlExpand.Attributes["onclick"] = "TglRow(this);";

            _ihExp = new HtmlInputHidden();
            _ihExp.ID = "e" + this.DataItemIndex.ToString();

            _expCell.Controls.Add(_ctlExpand);
            _expCell.Controls.Add(_ihExp);      
        }

        if (_expCell != null)
        {
            _expCell.Width = Unit.Pixel(20);
            Cells.AddAt(0, _expCell);
        }