How can I dynamically bind data between two GridView's (AJAX?)

I have two GridViews on an aspx page (ASP.NET 2.0 / C#). I want to load data from one GridView to the other dynamically, without reloading the page. This I would imagine be done thru AJAX as well. Can someone give me an example of something like this? I would appreciate any ideas on how to do this.
bemara57Asked:
Who is Participating?
 
active_agentConnect With a Mentor Commented:
AJAX is the solution for you.

Say there are 2 gridviews (as you mentioned grid1 & grid2) you have bunch of records (mast records) with a select links. On selecting a record in grid view (Clickin Select link) related or child records needs to be displayed in grid2.


Add the gridviews (1 & 2) in the UpdatePanel Control. Add the AsyncPostTrigger under updatepanel for grid2 to grid1.SelectedItemChanged.

For SelectedItemChanged of grid1 (in the codebehind or server side code) add the code to populate grid2. Code is as follows: (i am not including all the attributes for the grid view)

 <asp:ScriptManager runat=server ID="scptMgr" EnablePartialRendering=true>
    </asp:ScriptManager>
   
    <asp:UpdatePanel ID="up1" runat="server" UpdateMode=Conditional>
        <ContentTemplate>
            <asp:GridView runat="server" ID="grid1" OnSelectedIndexChanged="grid1_SelectedIndexChanged" AutoGenerateColumns=true AutoGenerateSelectButton=true>
            </asp:GridView>
        </ContentTemplate>
    </asp:UpdatePanel>
   
    <asp:UpdatePanel ID="up2" runat="server" UpdateMode=Conditional>
        <ContentTemplate>
            <asp:GridView runat="server" ID="grid2"  AutoGenerateColumns=true AutoGenerateSelectButton=true>
            </asp:GridView>
        </ContentTemplate>
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="grid1" EventName="SelectedIndexChanged" />
        </Triggers>
    </asp:UpdatePanel>

protected void grid1_SelectedIndexChanged(object sender, EventArgs e)
    {
        DataKey key = grid1.DataKeys[grid1.SelectedIndex]
       
        DataView dv = GetData(); //Get Data based on key.Value
        grid2.DataSource = dv;
    }

I hope this will help.



0
 
SimonFerrisConnect With a Mentor Commented:
I would imagine that you are looking at the Partial Page update in AJAX. Here is a link to some code http://asp.net/ajax/documentation/live/overview/PartialPageRenderingOverview.aspx

0
 
SimonFerrisCommented:
Posted last comment before I could finish.

This a load parts of the page that you want to update. As only parts of the page are updated the user will see little interaction. If there is a large data source look at caching the data for speed.

If you are just moving data from one gridview to another, without the need to postback until complete, look at cloning the data source of the master gridview. As the controls are runat server I don't htink that this would be an option.
0
Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
active_agentCommented:
Just to follow up on the status of your problem.
0
 
bemara57Author Commented:
IOk I've isntalled the AJAX add-on and followed all the code examples but the page still refreshes. Here is my code, I'm hoping someone can see the problem:

    <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true" />

            <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
            <asp:Button ID="Queue_Button1" runat="server" Text="Move to Queue" OnClick="Queue_Button1_Click" />
            </ContentTemplate>
            </asp:UpdatePanel>

            <asp:UpdatePanel ID="QueueUpdatePanel1" runat="server" UpdateMode="Conditional">
            <ContentTemplate>        
            <asp:GridView ID="Queue_GridView1" runat="server" AllowSorting="True" AutoGenerateColumns="True" >
                <AlternatingRowStyle BackColor="White" />
                <RowStyle BackColor="#FFFBD6" ForeColor="#333333" />
                <SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />
            </asp:GridView>
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Queue_Button1" EventName="Click" />
            </Triggers>
            </asp:UpdatePanel>

And my code behind:
    protected void Queue_Button1_Click(object sender, EventArgs e)
    {              
        ArrayList qStack = new ArrayList();
        foreach (GridViewRow row in Queue_GridView1.Rows)
            qStack.Add(row.Cells[0].Text);
        foreach (GridViewRow row in File_GridView1.Rows)
        {
            bool isChecked = ((CheckBox)row.FindControl("chkSelect")).Checked;
            if (isChecked)
                qStack.Add(File_GridView1.DataKeys[row.RowIndex].Value);
        }
        Queue_GridView1.DataSource = qStack;
        Queue_GridView1.DataBind();
    }

Is there something I'm doing wrong?
0
 
active_agentCommented:
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
            <asp:Button ID="Queue_Button1" runat="server" Text="Move to Queue" OnClick="Queue_Button1_Click" />
            </ContentTemplate>
            </asp:UpdatePanel>


Remove the update panel for the button.

            <asp:Button ID="Queue_Button1" runat="server" Text="Move to Queue" OnClick="Queue_Button1_Click" />


Another solution is to add Queue_Button1 inside QueueUpdatePanel1 and you can remove

   <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Queue_Button1" EventName="Click" />
            </Triggers>
 Clicking a button will automatically refresh the update panel.
0
 
bemara57Author Commented:
Awesome it worked! My problem was that I overlooked the web.config modifications needed for AJAX.NET. Below if my web.config that I copied from the installation instructions, but do I need everything below or are there things on there I don't need, or everything in there is needed for AJAX.NET? It seems I don't need the configuration section, anytime I removed anything further I would get Javascript errors. What does that configuration section do for the AJAX?

<?xml version="1.0"?>
<configuration>

  <configSections>
    <sectionGroup name="system.web.extensions" type="System.Web.Configuration.SystemWebExtensionsSectionGroup, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35">
      <sectionGroup name="scripting" type="System.Web.Configuration.ScriptingSectionGroup, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35">
        <section name="scriptResourceHandler" type="System.Web.Configuration.ScriptingScriptResourceHandlerSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" allowDefinition="MachineToApplication"/>
        <sectionGroup name="webServices" type="System.Web.Configuration.ScriptingWebServicesSectionGroup, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35">
          <section name="jsonSerialization" type="System.Web.Configuration.ScriptingJsonSerializationSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" allowDefinition="Everywhere" />
          <section name="profileService" type="System.Web.Configuration.ScriptingProfileServiceSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" allowDefinition="MachineToApplication" />
          <section name="authenticationService" type="System.Web.Configuration.ScriptingAuthenticationServiceSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" allowDefinition="MachineToApplication" />
        </sectionGroup>
      </sectionGroup>
    </sectionGroup>
  </configSections>
 
  <appSettings/>
 
  <system.web>
    <pages>
      <controls>
        <add tagPrefix="asp" namespace="System.Web.UI" assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
      </controls>
    </pages>

    <httpHandlers>
      <remove verb="*" path="*.asmx"/>
      <add verb="*" path="*.asmx" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
      <add verb="*" path="*_AppService.axd" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
      <add verb="GET,HEAD" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" validate="false"/>
    </httpHandlers>

    <httpModules>
      <add name="ScriptModule" type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
    </httpModules>
   
    <compilation debug="true">
      <assemblies>
      <add assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
      </assemblies>
    </compilation>  
  </system.web>
 
...

</configuration>
0
 
bemara57Author Commented:
Also one more question and I'm set.. I have a TreeView control on that same page that doesn't work anymore. When I expand a tree, it says to make <pages enableEventValidation="false"> which I did and worked fine after that. Is this a security problem though?
0
 
active_agentConnect With a Mentor Commented:
I think you need this Web.Config sections and configuration. As ASP.NET AJAX is actually a extension to ASP.NET and basically in your web.config you are configuring you application to use all the handlers and controls which are extended for AJAX functionality rather than default ASP.NET page handlers and controls.

<pages>
      <controls>
        <add tagPrefix="asp" namespace="System.Web.UI" assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
      </controls>
    </pages>

uses AJAX enabled server (System.Web.UI) controls rather than defaults (System.Web) since the namespaces are same your code works seemlessly.

    <add verb="*" path="*.asmx" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
      <add verb="*" path="*_AppService.axd" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
      <add verb="GET,HEAD" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" validate="false"/>

Similarly above handler replaces WebService handler and also adds new AJAX specific handlers.

<add name="ScriptModule" type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>

This is a AJAX module it is used to send js files defined in the script manager for e.g. if you are referring to webservice it is available as a class in your client side (wrapper class to make calls to web service using AJAX)

enableEventValidation attribute actually reduces the risk of unauthorized postback requests and callbacks. (For more info: http://msdn2.microsoft.com/en-us/library/system.web.ui.page.enableeventvalidation.aspx)
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.