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 Out of Stack Space

I am getting an "Out of stack space" javascript error when I put more than 8 CascadingDropDowns in one page.

Here is my page source:

<%@dotnet.itags.org. Page Language="VB" MasterPageFile="~/Boss.master" Title="PlowSelection" %><%@dotnet.itags.org. Import Namespace="System.Collections.Generic" %><script runat="server">Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)If Not Me.IsPostBack ThenMe.VehicleSelectionPopUp.Show = TrueEnd IfEnd Sub</script><asp:Content ID="HeaderContent" ContentPlaceHolderID="HeaderContentPlaceHolder" Runat="Server"><h1>PLOW SELECTION</h1><p>Go through the list boxes and select your vehicle specs. Select which plowand plow options you would like.</p></asp:Content><asp:Content ID="MainContent" ContentPlaceHolderID="MainContentPlaceHolder" Runat="Server"><div id="SelectedVehiclePlow"><div id="SelectedVehicle"><nsi:TemplateView ID="SelectedVehicleTemplateView" DataSourceID="SelectedVehicleDataSource" runat="server"><EmptyDataTemplate>No Vehicle Selected</EmptyDataTemplate><ItemTemplate><%# Eval("Year")%></ItemTemplate></nsi:TemplateView></div><div id="SelectedPlow">No Plow Selected</div></div><nsi:PopUp ID="VehicleSelectionPopUp" CloseButtonID="CloseButton" runat="server"><Header><asp:HyperLink ID="CloseButton" NavigateUrl="javascript:void(0);" runat="server" SkinID="PopUpCloseButtonHyperLink" />Vehicle Selection</Header><Content><asp:UpdatePanel ID="VehicleSelectionUpdatePanel" runat="server" UpdateMode="Conditional"><ContentTemplate><asp:DropDownList ID="VehicleYearDropDownList" runat="server" /><ajax:CascadingDropDown ID="VehicleYearCascadingDropDown" Category="Year"LoadingText="[Loading...]" PromptText="Select a Year" runat="server"ServiceMethod="GetVehicleSelectionData" ServicePath="~/WebServices/Vehicles.asmx"TargetControlID="VehicleYearDropDownList" /><asp:DropDownList ID="VehicleMakeDropDownList" runat="server" /><ajax:CascadingDropDown ID="VehicleMakeCascadingDropDown" Category="Make"LoadingText="[Loading...]" ParentControlID="VehicleYearDropDownList" PromptText="Select a Make"runat="server" ServiceMethod="GetVehicleSelectionData"ServicePath="~/WebServices/Vehicles.asmx" TargetControlID="VehicleMakeDropDownList" /><asp:DropDownList ID="VehicleModelDropDownList" runat="server" /><ajax:CascadingDropDown ID="VehicleModelCascadingDropDown" Category="Model"LoadingText="[Loading...]" ParentControlID="VehicleMakeDropDownList" PromptText="Select a Model"runat="server" ServiceMethod="GetVehicleSelectionData"ServicePath="~/WebServices/Vehicles.asmx" TargetControlID="VehicleModelDropDownList" /><asp:DropDownList ID="VehicleDriveTrainDropDownList" runat="server" /><ajax:CascadingDropDown ID="VehicleDriveTrainCascadingDropDown" Category="DriveTrain"LoadingText="[Loading...]" ParentControlID="VehicleModelDropDownList" PromptText="Select a Drive Train"runat="server" ServiceMethod="GetVehicleSelectionData"ServicePath="~/WebServices/Vehicles.asmx" TargetControlID="VehicleDriveTrainDropDownList" /><asp:DropDownList ID="VehicleCabDropDownList" runat="server" /><ajax:CascadingDropDown ID="VehicleCabCascadingDropDown" Category="Cab"LoadingText="[Loading...]" ParentControlID="VehicleDriveTrainDropDownList" PromptText="Select a Cab"runat="server" ServiceMethod="GetVehicleSelectionData"ServicePath="~/WebServices/Vehicles.asmx" TargetControlID="VehicleCabDropDownList" /><asp:DropDownList ID="VehicleBedDropDownList" runat="server" /><ajax:CascadingDropDown ID="VehicleBedCascadingDropDown" Category="Bed"LoadingText="[Loading...]" ParentControlID="VehicleCabDropDownList" PromptText="Select a Bed"runat="server" ServiceMethod="GetVehicleSelectionData"ServicePath="~/WebServices/Vehicles.asmx" TargetControlID="VehicleBedDropDownList" /><asp:DropDownList ID="VehicleFgawrDropDownList" runat="server" /><ajax:CascadingDropDown ID="VehicleFgawrCascadingDropDown" Category="Fgawr"LoadingText="[Loading...]" ParentControlID="VehicleBedDropDownList" PromptText="Select a FGAWR"runat="server" ServiceMethod="GetVehicleSelectionData"ServicePath="~/WebServices/Vehicles.asmx" TargetControlID="VehicleFgawrDropDownList" /><asp:DropDownList ID="VehicleWheelBaseDropDownList" runat="server" /><ajax:CascadingDropDown ID="VehicleWheelBaseCascadingDropDown" Category="WheelBase"LoadingText="[Loading...]" ParentControlID="VehicleFgawrDropDownList" PromptText="Select a Wheel Base"runat="server" ServiceMethod="GetVehicleSelectionData"ServicePath="~/WebServices/Vehicles.asmx" TargetControlID="VehicleWheelBaseDropDownList" /><asp:DropDownList ID="VehicleRearWheelDropDownList" runat="server" /><ajax:CascadingDropDown ID="VehicleRearWheelCascadingDropDown" Category="RearWheel"LoadingText="[Loading...]" ParentControlID="VehicleRearWheelDropDownList" PromptText="Select a Rear Wheel"runat="server" ServiceMethod="GetVehicleSelectionData"ServicePath="~/WebServices/Vehicles.asmx" TargetControlID="VehicleRearWheelDropDownList" /><asp:DropDownList ID="VehicleEngineDropDownList" runat="server" /><ajax:CascadingDropDown ID="VehicleEngineCascadingDropDown" Category="Engine"LoadingText="[Loading...]" ParentControlID="VehicleEngineDropDownList" PromptText="Select an Engine"runat="server" ServiceMethod="GetVehicleSelectionData"ServicePath="~/WebServices/Vehicles.asmx" TargetControlID="VehicleEngineDropDownList" /><asp:DropDownList ID="VehicleHeadlightsDropDownList" runat="server" /><ajax:CascadingDropDown ID="VehicleHeadlightsCascadingDropDown" Category="Headlights"LoadingText="[Loading...]" ParentControlID="VehicleEngineDropDownList" PromptText="Select Headlights"runat="server" ServiceMethod="GetVehicleSelectionData"ServicePath="~/WebServices/Vehicles.asmx" TargetControlID="VehicleHeadlightsDropDownList" /></ContentTemplate></asp:UpdatePanel></Content></nsi:PopUp><asp:ObjectDataSource ID="SelectedVehicleDataSource" DataObjectTypeName="Nsi.Applications.Boss.Service.Vehicle"runat="server" SelectMethod="GetSelectedVehicle" TypeName="Nsi.Applications.Boss.Service.Controller" /></asp:Content>

Here is my web service source:

<%@dotnet.itags.org. WebService Language="VB"Class="Vehicles" %>Imports System.Collections.GenericImports System.WebImports System.Web.Script.ServicesImports System.Web.ServicesImports System.Web.Services.ProtocolsImports AjaxControlToolkitImports Nsi.Applications.Boss.Service<ScriptService(), WebService(Namespace:="http://service.bossplow.com/"), WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _Public Class Vehicles :Inherits System.Web.Services.WebService<WebMethod()> _Public Function GetVehicleSelectionData(ByVal knownCategoryValuesAs String,ByVal categoryAs String)As CascadingDropDownNameValue()Dim knownValuesAs StringDictionary = CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues)Dim typeAs VehicleSelectionAttributeType =CType(System.Enum.Parse(GetType(VehicleSelectionAttributeType), category), VehicleSelectionAttributeType)Dim keyValuesAs List(Of KeyValuePair(OfString,String)) =NothingkeyValues = Nsi.Applications.Boss.Service.Vehicles.GetVehicleSelectionData(type, knownValues("Year"), knownValues("Make"), knownValues("model"), knownValues("DriveTrain"), knownValues("Cab"), knownValues("Bed"), knownValues("Fgawr"), knownValues("WheelBase"), knownValues("RearWheel"), knownValues("Engine"))Dim nameValuesAs New List(Of CascadingDropDownNameValue)()For Each keyValueAs KeyValuePair(OfString,String)In keyValuesnameValues.Add(New CascadingDropDownNameValue(keyValue.Value, keyValue.Key))NextReturn nameValues.ToArray()End FunctionEnd Class

If i take off the last three CascadingDropDowns on the page, everything works great, but when there is more than 8 drop downs on the page, it gives an "Out of stack space" error. Is there a limit to the amount of CascadingDropDowns that are allowed on one page? The maximum number of entries that each list will have is 30.

Never mind. I found my problem and boy is it a stupid one. In two of the CascadingDropDowns I set the ParentControlID the same as the TargetControlID. I need a dunce cap.