Question

I have got a grid[Grid1] that build its dataRows when a button[search] is clicked, I managed to Ajaxify it by placing it in an UpdatePanel and it worked fine. Before Ajaxifying Grid 1, another grid[Grid2] and some other controls[Text and Labels] used to get populated/updated when a row in Grid 1 was clicked .

The Grid2 and other controls used to get populated/updated on the OnItemCommand Event of Grid 1.Its the code in the OnItemCommand that binds the related data to Grid2 and other controls.

After I placed the Grid 1 in the update panel,they stopped updating. It will work fine if I place Grid2 and other controls in the same Update Panel but the page is designed in a way that I cant have those controls in the same UpdatePanel as the first Grid nor I dont intend to use another Update Panel.

I hope I’m making some sense. I’m a newbie in .Net so please excuse. Please find the code below.

 <asp:ScriptManager EnablePartialRendering="true" ID="ScriptManager1" runat="server"></asp:ScriptManager>
     <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers ="True">
      <ContentTemplate>
       <asp:DataGrid ID="grdJobs" runat="server" AllowPaging="true" 
        AlternatingItemStyle-CssClass="gridAltItemStyle"
        AutoGenerateColumns="False" CellPadding="0" 
        DataKeyField="code"
        CssClass="datagridBox" 
        GridLines="horizontal" 
        PagerStyle-Mode="NumericPages"
        HeaderStyle-CssClass="gridHeaderStyle" 
        ItemStyle-CssClass="gridItemStyle"
        PagerStyle-CssClass="gridPagerStyle" 
        Width="445px" OnPageIndexChanged="grdJobs_PageIndexChanged" OnItemCreated="grdJobs_ItemCreated" OnItemCommand="grdJobs_ItemCommand"             OnItemDataBound="grdJobs_ItemDataBound">
         <Columns>
          <asp:BoundColumn  DataField="J_ID" HeaderText="Job"></asp:BoundColumn>
          <asp:BoundColumn  DataField="Contract" HeaderText="Contract" ReadOnly="True"></asp:BoundColumn>
          <asp:BoundColumn  DataField="J_Fault_Line1" HeaderText="Fault" ReadOnly="True"></asp:BoundColumn>
          <asp:BoundColumn  DataField="j_p_id" HeaderText="Fault" Visible="false" ></asp:BoundColumn>
          <asp:ButtonColumn Text="<img src=images/addFeedback.gif style=border: 0px; alt=Add Feedback>" ButtonType="LinkButton"  HeaderText="Add"                   CommandName="Load" ItemStyle-cssClass="Col_9_Item_2"></asp:ButtonColumn>
         </Columns>
        </asp:DataGrid>
       <asp:ImageButton ID="cmdLkp"  ImageUrl="Images/search.gif" runat="server" OnClick="cmdLkp_Click" />

       </ContentTemplate>
      </asp:UpdatePanel>

The code below in the code behind stopped working

protected void grdJobs_ItemCommand(object source, DataGridCommandEventArgs e)
    {

        if (e.CommandName == "Load")
        {
            functionToBindDataToGrid2();
            functionToBindDataToOtherControls();
        }
}

 protected void grdJobs_ItemDataBound(object sender, DataGridItemEventArgs e)
    {
      e.Item.Attributes.Add("onclick", "javascript:__doPostBack('grdJobs$ctl" + ((Convert.ToInt32(e.Item.ItemIndex + 3).ToString("00"))) + "$ctl00','')");
     }

Answer 1

A GridView is a complex asp.net server control. You will have a lot of difficulty updating Grid2 after Grid1 is updated inside of the UpdatePanel. However, it is possible to a execute JavaScript on the client after Grid1 is updated. You could update Grid1 inside of the update panel, execute JavaScript after Grid1 has been updated that will update HTML on the page. The problem is that updating Grid2 with Javascript is going to be a nightmare amount of work.

Here’s an example of what I’m talking about: Ajax Enabled Gridview using JavaScript in ASP.NET. It is a total hack, a huge amount of work, and your co-workers will hate you when they have to maintain it.

If you wanted to update a label or a dropdown list then that would be possible but updating a GridView using Javascript and having those updates persist across postbacks is a daunting challenge.