• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 380
  • Last Modified:

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.
0
bemara57
Asked:
bemara57
  • 4
  • 3
  • 2
3 Solutions
 
SimonFerrisCommented:
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
 
active_agentCommented:
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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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_agentCommented:
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

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

  • 4
  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now