Change datasource for a datagrid using ajax

Hi ppl,

I have a datagrid with XML's as a source file. I have a combo box in the same page and when a user selects a value from the combo box i want to display different stats data without doing a normal postback. I am still learning the updatepanel Ajax control . Can anyone please guide me what i should i do to achieve the functionality? do i need to write any function in js ?

Any help much appreciated

thanks

Place the UpdatePanel around the DataGrid and the Combobox. Make sure the combobox do a postback, set the Autopostback attribute to true. Hook up to the OnSelectedIndexChanged event and get the data based on the selected value and bind it to the DataGrid. When a control inside a UpdatePanel will do a postback, the content of the UpdatePanel will be updated.

If you layout of you page don't allow a UpdatePanel around your combobox, you can instead add a async. postback trigger to the UpdatePanel that will listen to a control's event and update the panel.

Hi Thanks for the response. I placed as the gridview control in the updatepanel and used async trigger as you mentioned. when i changed the dropdownlist the grid doesnt appear at all.

Here is the script and code:

<

divID="Panel1"style="width: 568px; position: static; height: 180px; background-image: url(images/bg-nav.png);">

<spanstyle="color: #ffffff"><strong>

Select L :

</strong></span><asp:DropDownListID="DropDownList1"runat="server"Width="134px"AutoPostBack="True"OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged1"><asp:ListItemSelected="True"Value="1">yes</asp:ListItem><asp:ListItemValue="2">no</asp:ListItem></asp:DropDownList><br/><asp:UpdateProgressID="UpdateProgress1"runat="server"AssociatedUpdatePanelID="test"><ProgressTemplate><divstyle="color: #ffffff; background-color: transparent"><imgsrc="images/indicator.gif"/>

Updating ....

</div></ProgressTemplate></asp:UpdateProgress><asp:UpdatePanelID="test"runat="server"><ContentTemplate><asp:GridViewID="GridView1"runat="server"ForeColor="Silver"BorderColor="LimeGreen"BorderStyle="Inset"AutoGenerateColumns="True"><AlternatingRowStyleBackColor="LightSkyBlue"ForeColor="#404040"/></asp:GridView></ContentTemplate><Triggers><asp:AsyncPostBackTriggerControlID="DropDownList1"EventName="SelectedIndexChanged"/></Triggers></asp:UpdatePanel>

Code:

ProtectedSub DropDownList1_SelectedIndexChanged1(ByVal senderAsObject,ByVal eAs System.EventArgs)If DropDownList1.SelectedValue = 1ThenDim myDataSetAsNew DataSet()

myDataSet.ReadXml(Server.MapPath(

"test1.xml"))

GridView1.DataSource = myDataSet

GridView1.DataBind()

ElseDim myDataSetAsNew DataSet()

myDataSet.ReadXml(Server.MapPath(

"test2.xml"))

GridView1.DataSource = myDataSet

GridView1.DataBind()

EndIf

EndSub

When i give wrong XML File name, it comes up with the message saying that it cant find the xml file. Is it something i missing in grid control?

Any help much appreciated?

I copied your code, created 2 example XML files, and everything worked fine for me. When I select a value the GirdView was displayed with the correct XML file.

Hi Fredreik

Can you post your sample XML files? I tried using without AJAX functionality and its working fine :(

thanks

I can't think it has anything to do with your XML files, btw do you use the ASP.Net Ajax version 1.0 RTM, becuase your code runs on my machine with no problems at all so I can't see why it shouldn't work on yours.. maybe you have some more code that I don't have.. I only copy the code you posted.. mabye you do something in code-behind etc..!?

CascadingDropDown Selects Wrong Item on PostBack

I have a page where the cascadingdropdown is selecting the wrong item in the list on postback. I can verify that the JavaScript created by the AJAX controls says to select item "5::Description Here" yet item 4 gets selected when the page loads after post back. So you select the parent value, then the child, then click a button that does a postback (in this case a search) and when the two drop downs load the first one is selected correctly and the 2nd one, the cascading drop down, has selected the item above the correct item. If I continue to submit the form over and over the selected item just keeps moving up one spot. I attemted to remove any appended items, in my case one that says "-- Select --", as well as the prompttext as it appears to be an "index" issue, but that didn't solve the problem. I have the exact same dropdown fields on another form where they work just fine on postback. I don't want to post the whole page but here are the dropdowns in question. OfficeLocation is the parent and RateSchedule is the child.

<asp:DropDownListID="drpOfficeLocation"runat="server"AppendDataBoundItems="True"DataSourceID="srcOfficeLocations"DataTextField="Value"DataValueField="ID"Width="150px"EnableViewState="True">

<asp:ListItemValue="">-- Select --</asp:ListItem>

</asp:DropDownList>

<asp:DropDownListID="drpRateSchedule"runat="server"AppendDataBoundItems="True"

DataTextField="Value"DataValueField="ID"EnableViewState="False">

</asp:DropDownList>

<cc1:cascadingdropdownid="ccRates"runat="server"category="Location"

loadingtext="Loading Rates..."parentcontrolid="drpOfficeLocation"

servicemethod="GetRateResults"servicepath="JobAJAX.asmx"targetcontrolid="drpRateSchedule"></cc1:cascadingdropdown>

You simply won't believe what I found to be the problem. My controls are in a table that has style="display:none;" and you click an image to show the table. Removing this "display:none" from the table allowed the JS to select the correct item in the dropdown. I added it back and it selected the wrong one again. I can't make any sense of this but that's the problem.