So I have exhausted all the help on this I can find, but am still stumped.
I have a DDL within a repeater, that I need to Async postback and update an updatepanel also within the same repeater:
<asp:Repeater ID="rptOverdue" runat="server"
OnItemDataBound="setUpDateActionsSpecial">
<ItemTemplate>
<div class="theActions clearfix overdue edit hiddenrepeater" id='action_<%# Eval("item_id")%>'>
<span class="actionid"><%# Eval("item_id") %></span>
<div class="actiontitle">
<asp:TextBox ID="tbTitle" CssClass="theTitle" runat="server" Text='<%# Eval("item_title") %>' />
</div>
<div class="actionicons">
<a href="#" onclick='cancelUpdateAction(<%# Eval("item_id") %>)'><i class="icon-remove-sign actioniconcancel"></i></a>
<a href="#" onclick='commitUpdateAction(<%# Eval("item_id") %>)'><i class="icon-ok-sign actioniconok"></i></a>
</div>
<div class="actiondate">
<div class="input-append date" id="dp_<%# Eval("item_id") %>" data-date="<%= String.Format("{0:yyyy-MM-dd}", DateTime.Now) %>" data-date-format="yyyy-mm-dd">
<asp:TextBox ID="when2" CssClass="span2 theDuedate" size="16" type="text" name="when" placeholder="Due Date" runat="server" Text='<%# String.Format("{0:yyy-MM-dd}",Eval("item_duedate")) %>' />
<span class="add-on"><i class="icon-th"></i></span>
</div>
</div>
<div class="actionmeta">
<asp:DropDownList ID="ddlUpdateArea" CssClass="ddlUpdateArea" runat="server"></asp:DropDownList>
<asp:UpdatePanel ID="upDdlGoal" runat="server" UpdateMode="always">
<ContentTemplate>
<asp:DropDownList ID="ddlUpdateGoal" CssClass="ddlUpdateGoal" runat="server"></asp:DropDownList>
</ContentTemplate>
<Triggers>
</Triggers>
</asp:UpdatePanel>
<asp:UpdatePanelAnimationExtender ID="ae" runat="server" TargetControlID="upDdlGoal">
<Animations>
<OnUpdating>
<FadeOut Duration=".3" Fps="20" minimumOpacity=".5" />
</OnUpdating>
<OnUpdated>
<sequence>
<FadeIn Duration=".3" Fps="20" minimumOpacity=".5" />
<ScriptAction Script=" $('.goaliconplus').tooltip({ placement: 'top', trigger: 'hover', title: 'Add' });
$('.goaliconeye').tooltip({ placement: 'top', trigger: 'hover', title: 'Edit' });
$('.actioniconlist').tooltip({ placement: 'top', trigger: 'hover', title: 'View list' });
$('.actioniconnote').tooltip({ placement: 'top', trigger: 'hover', title: 'View note' });
$('.actioniconeye').tooltip({ placement: 'top', trigger: 'hover', title: 'Edit' });
$('.actionicondelete').tooltip({ placement: 'top', trigger: 'hover', title: 'Delete' });
$('.actioniconcomplete').tooltip({ placement: 'top', trigger: 'hover', title: 'Complete' });
scrollItemList();" />
</sequence>
</OnUpdated>
</Animations>
</asp:UpdatePanelAnimationExtender>
</div>
</div>
</ItemTemplate>
</asp:Repeater>
I set up the triggers and the autopostbacks etc in the ItemDataBound event for the repeater:
protected void setUpDateActionsSpecial(object sender, RepeaterItemEventArgs e)
{
if ((e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem))
{
// Bind DDLs
DropDownList ddlAreas = (DropDownList)e.Item.FindControl("ddlUpdateArea");
DropDownList ddlGoals = (DropDownList)e.Item.FindControl("upDdlGoal").FindControl("ddlUpdateGoal");
UpdatePanel upDdlGoal = (UpdatePanel)e.Item.FindControl("upDdlGoal");
DataRowView drv = e.Item.DataItem as DataRowView;
ddlAreas.DataSource = (DataTable)Session["arealist"]; ;
ddlAreas.DataTextField = "area_title";
ddlAreas.DataValueField = "area_id";
ddlAreas.DataBind();
ddlAreas.SelectedValue = drv["goal_area"].ToString();
// Register Area DDL for postback
ddlAreas.SelectedIndexChanged += updateTheGoals;
ddlAreas.AutoPostBack = true;
AsyncPostBackTrigger trigger = new AsyncPostBackTrigger();
trigger.ControlID = ddlAreas.UniqueID;
trigger.EventName = "SelectedIndexChanged";
upDdlGoal.Triggers.Add(trigger);
if (ScriptManager.GetCurrent(Page).IsInAsyncPostBack)
{
triggerInitMethod.Invoke(trigger, null);
}
DataTable goalTable = (DataTable)Session["goallist"];
DataRow[] goalsDR = goalTable.Select("goal_area = " + ddlAreas.SelectedValue);
DataTable goalFiltered = goalTable.Clone();
foreach (DataRow row in goalsDR)
{
goalFiltered.ImportRow(row);
}
goalFiltered.AcceptChanges();
ddlGoals.DataSource = goalFiltered;
ddlGoals.DataTextField = "goal_title";
ddlGoals.DataValueField = "goal_id";
ddlGoals.DataBind();
ddlGoals.SelectedValue = drv["item_goal"].ToString();
litEmptyActionsDate.Visible = false;
}
}
This should asynchronously postback and do the code in updateTheGoals eventhandler:
protected void updateTheGoals(object sender, EventArgs e)
{
// Bind DDLs
DropDownList ddlAreas = (DropDownList)sender;
UpdatePanel thisUP = (UpdatePanel)ddlAreas.Parent.FindControl("upDdlGoal");
DropDownList ddlGoals = (DropDownList)thisUP.FindControl("ddlUpdateGoal");
DataTable goalTable = (DataTable)Session["goallist"];
DataRow[] goalsDR = goalTable.Select("goal_area = 1024");// + ddlAreas.SelectedValue);
DataTable goalFiltered = goalTable.Clone();
foreach (DataRow row in goalsDR)
{
goalFiltered.ImportRow(row);
}
goalFiltered.AcceptChanges();
ddlGoals.DataSource = goalFiltered;
ddlGoals.DataTextField = "goal_title";
ddlGoals.DataValueField = "goal_id";
ddlGoals.DataBind();
ddlGoals.Items.Insert(0, new ListItem("Choose a Goal", "0"));
ddlGoals.SelectedValue = "Choose a Goal";
thisUP.Update();
}
What actually happens is the Update Panel seems to do the update (the animation runs and completes) but the actual contents of the ddlUpdateGoal dropdownlist does not change. It appears to be doing an async postback, but not actually running the SelectedIndexChanged eventhandler to change the contents of the updatepanel.
Has anyone come across this issue before? (All help gratefully received, before I launch my monitor across the office!)
Thanks, Ben
