Update Panel & Event firing twice - asp.net

I have an ASPX page with 3 dropdown boxes via Infragistic controls. 1 of them is inside an UpdatePanel and the two outside of the UpdatePanel is suppose to control what is displayed in the 3rd one via AsynPostBack Event. Both dropdown boxes outside of the UpdatePanel call the same function in the code behind but depending on which object I pass to it, it will show something in the 3rd drop-down box. Problem is, the function appears to be getting triggered twice regardless of which dropdown box I select and each call passes its control to the function and the second one is what always being displayed even when I click on the first one. How do I stop that? I'm expecting for the function to just fire once depending on which control I select. I also tried to have each dropdown box point to its own function and still, both of them got triggered...
<td style="width:3px;"><asp:HiddenField ID="pnb_recno" runat="server" /></td>
<td style="width:100px;">Line Of Business:</td>
<td colspan="2" width="150px"><!--OnSelectionChanged="pnb_product_list"-->
<ig:WebDropDown ID="pnb_ddRgn" runat="server" Width="175px" DropDownContainerHeight="100px"
EnableDropDownAsChild="false" TextField="Name" DropDownContainerWidth="175px" Font-Size="11px"
StyleSetName="Windows7" OnSelectionChanged="pnb_product_list" AutoPostBack="true" ClientEvents-SelectionChanged="pnb_chgLOB" >
<Items>
<ig:DropDownItem Text="" Value="" />
<ig:DropDownItem Text="Global Client Access" Value="Global Client Access" />
<ig:DropDownItem Text="Solution Center" Value="Solution Center" />
<ig:DropDownItem Text="Both" Value="Both" />
</Items>
</ig:WebDropDown>
</td>
<td style="width:3px;"></td>
<td style="width:100px;">Problem Type:</td>
<td colspan="2" width="150px">
<ig:WebDropDown ID="pnb_ddPblmTyp" runat="server" Width="175px" DropDownContainerHeight="80px" EnableDropDownAsChild="false" TextField="Name" DropDownContainerWidth="175px" Font-Size="11px" StyleSetName="Windows7" AutoPostBack="true" OnSelectionChanged="pnb_product_list">
<Items>
<ig:DropDownItem Text="" Value="" />
<ig:DropDownItem Text="Infrustructure" Value="Infrustructure" />
<ig:DropDownItem Text="Products" Value="Products" />
</Items>
</ig:WebDropDown>
</td>
<td colspan="2" width="150px">
<asp:UpdatePanel ID="pnb_udtPnlPrdts" runat="server" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="pnb_ddRgn" EventName="SelectionChanged" />
<asp:AsyncPostBackTrigger ControlID="pnb_ddPblmTyp" EventName="SelectionChanged" />
</Triggers>
<ContentTemplate>
<ig:WebDropDown ID="pnb_ddPrdts" runat="server" Width="175px" EnableClosingDropDownOnSelect="false" TextField="ProductName" EnablePaging="false" DropDownContainerHeight="175px" EnableMultipleSelection="true" MultipleSelectionType="Checkbox" StyleSetName="Windows7" DisplayMode="DropDown">
<ClientEvents SelectionChanged="selectedIndexChanged" SelectionChanging="selectedIndexChanging" />
</ig:WebDropDown>
</ContentTemplate>
</asp:UpdatePanel>
</td>
protected void pnb_product_list(object sender, EventArgs e)
{
try
{
using (SqlConnection sqlConnection = new SqlConnection(connectionString))
{
using (SqlCommand sqlCommand = new SqlCommand("dbo.getDdProducts", sqlConnection))
{
sqlCommand.CommandTimeout = 0;
sqlCommand.CommandType = CommandType.StoredProcedure;
if (!String.IsNullOrEmpty(pnb_ddRgn.CurrentValue))
sqlCommand.Parameters.AddWithValue("#lob", pnb_ddRgn.CurrentValue);
else
sqlCommand.Parameters.AddWithValue("#alert_type", pnb_ddPblmTyp.CurrentValue);
using (DataTable dataTable = new DataTable())
{
using (SqlDataAdapter dataAdapter = new SqlDataAdapter(sqlCommand))
{
dataAdapter.Fill(dataTable);
}
pnb_ddPrdts.DataSource = dataTable;
pnb_ddPrdts.DataBind();
}
}
}
}
catch (Exception exception)
{
}
}

I would try looking for AutoPostBackFlags one for selectionChanged and another for valueChanged is it possible it is just infact because both these events are being triggered is why it is posting back twice??

Related

Why does my gridview's edit\update not work after I add item to it at runtime

On my Page I have a textbox and a submit button which adds an item to my gridview which has edit/update functionality.All this is in an update panel.
I am binding my gridview with data from database using sqlreader. The edit/update option works fine when it bind it first time. but once I add an Item at runtime, the newly added item gets added to my gridview but edit update stops working. Also, not able to add new item after that.
Please find my sample code below
This is my HTML code:
-
<li>
<input type="radio" id="tabb" name="tabs11"/>
<label for="tabb">Family Name</label>
<div id="tab-content12" class="tab-content animated fadeIn" style="background-color:white; padding:10px;" >
<asp:UpdatePanel ID="UpdatePanel4" runat="server">
<ContentTemplate>
<asp:Button ID="BtnAddFamilyName" runat="server" Text="Add" CssClass="buttons" OnClick="BtnAddFamilyName_Click" /><br />
<asp:Label ID="Label1" runat="server" Text="Enter Family Name"></asp:Label>
<asp:TextBox ID="FamilyNameTextBox" runat="server" CssClass="inputs" placeholder="Enter Family Name"></asp:TextBox>
<asp:Button ID="BtnSubmitFamilyName" runat="server" Text="Submit" OnClick="BtnSubmitFamilyName_Click" CssClass="inputs"/><br /><br />
<asp:GridView ID="gdvEDitFamilyName" runat="server" OnRowEditing="gdvEDitFamilyName_RowEditing" OnRowCancelingEdit="gdvEDitFamilyName_RowCancelingEdit" OnRowUpdating="gdvEDitFamilyName_RowUpdating" AutoGenerateEditButton="true" DataKeyNames="FamilyId" CssClass="grid" RowStyle-CssClass="rows">
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</li>
2: My code behind for binding the gridview:
SqlDataReader reader = DataExecuter.ReadMultipleRows("spBindHIGridview",
CommandType.StoredProcedure);
reader.NextResult();
gdvEDitFamilyName.DataSource = reader;
gdvEDitFamilyName.DataBind();
3:My code behind for adding the item to the grid:
protected void BtnSubmitFamilyName_Click(object sender, EventArgs e)
{
if (FamilyNameTextBox.Text.Equals(""))
{
ScriptManager.RegisterClientScriptBlock(this,
this.GetType(), "alertMessage", "alert('Please enter a
value')", true);
}
else
{
DataExecuter.ExecuteCommand("spInsertFamilyName", new[,] { {
"#FamilyName", FamilyNameTextBox.Text } },
CommandType.StoredProcedure);
this.BindDdl();
this.BindGrid();
ScriptManager.RegisterClientScriptBlock(this,
this.GetType(), "alertMessage", "alert('Record Inserted
Successfully')", true);
}
}
After the 3rd step i can't add a new item or edit/update the gridview

Do a Button Click from Code behide

I have a gridview which lists Tools and Access values. To edit I have an edit imagebutton on each row. I have an OnRowBound method which assigns an OnClick attribute to each button so that I will know which record I need to edit.
The code is
Protected Sub ChangeFirstRowIcon(ByVal Sender As Object, ByVal e As GridViewRowEventArgs) Handles gv_AccessRights.RowDataBound
'This sub fires on each gridview row created...
'It first checks that the row is a data row (as opposed to Header, Footer etc.)
'If ib_Edit is true then change add an attribut to button with aid, tid and ac values attached.
If e.Row.RowType = DataControlRowType.DataRow Then
Dim ib_Edit As ImageButton = e.Row.FindControl("ib_Edit")
Dim lb_AccessID As Label = e.Row.FindControl("lb_AccessID")
Dim hd_ToolID As HiddenField = e.Row.FindControl("hd_ToolID")
Dim hd_AccessCode As HiddenField = e.Row.FindControl("hd_AccessCode")
If ib_Edit IsNot Nothing Then
ib_Edit.Attributes.Add("onClick", "proxyClick('" & lb_AccessID.Text & "', '" & hd_ToolID.Value & "', '" & hd_AccessCode.Value & "')")
End If
End If
End Sub
I'm using a hidden proxy button to show a modal popup which the user will use to edit a record... (the same popup will be used to add a new access record... but that will come later). So having passed my details to proxyClick I set values to controls within the modal popup. The javascript is....
<script type="text/javascript">
function proxyClick(aid, tid, ac) {
document.getElementById('hd_AccessID').value = aid;
document.getElementById('hd_ToolIDMod').value = tid;
document.getElementById('hd_AccessCodeMod').value = ac;
document.getElementById('but_SetModalDetails').click();
}
</script>
For reference the main bits of the markup are....
<table class="border">
<tr>
<td>
<asp:Button ID="but_SetModalDetails" runat="server" Style="display: none" Text="Set modal details" ClientIDMode="Static" UseSubmitBehavior="true" />
<asp:Button ID="but_HiddenProxy" runat="server" Style="display: none" Text="Hidden Proxy Button for Modal Popup" ClientIDMode="Static" />
</td>
<td class="rt">
<asp:Button ID="but_AddTool" runat="server" AccessKey="A" CssClass="butGreen" Text="Add Tool" ToolTip="Add Tool - Alt A" />
</td>
</tr>
</table>
<asp:ModalPopupExtender ID="mpx_AddEditAccess" runat="server" CancelControlID="but_Cancel"
BehaviorID="pn_AddEditAccess" PopupControlID="pn_AddEditAccess" TargetControlID="but_HiddenProxy"
BackgroundCssClass="modalBackground" />
<asp:Panel ID="pn_AddEditAccess" runat="server" Width="500px" CssClass="modalPopup"
Style="display: block">
<div class="box">
<h2>
<asp:Label ID="lb_ModTitle" runat="server"></asp:Label>
</h2>
<asp:HiddenField ID="hd_AccessID" runat="server" ClientIDMode="Static"></asp:HiddenField>
<div class="block">
<asp:UpdatePanel ID="up_Access" runat="server" UpdateMode="Always">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ddl_ToolName" EventName="SelectedIndexChanged" />
</Triggers>
<ContentTemplate>
<table>
<tr>
<th class="p66 rt">
Tool Name:
</th>
<td class="p66">
<asp:HiddenField ID="hd_ToolIDMod" runat="server" ClientIDMode="Static" />
<asp:DropDownList ID="ddl_ToolName" runat="server" AutoPostBack="true" AppendDataBoundItems="True"
DataSourceID="SqlDS_Tools" DataTextField="ToolName" DataValueField="ToolID" OnSelectedIndexChanged="ddl_ToolName_SIC">
<asp:ListItem Text="Please Select..." Value="0"></asp:ListItem>
</asp:DropDownList>
<asp:SqlDataSource ID="SqlDS_Tools" runat="server" ConnectionString="<%$ ConnectionStrings:ToolsConnString %>"
SelectCommand="SELECT [ToolID], [ToolName] FROM [tbl_Tools] WHERE ([Redundant] = #Redundant)">
<SelectParameters>
<asp:Parameter DefaultValue="False" Name="Redundant" Type="Boolean" />
</SelectParameters>
</asp:SqlDataSource>
<asp:RequiredFieldValidator ID="rfv_ddl_ToolName" runat="server" ControlToValidate="ddl_ToolName"
CssClass="error" Display="Dynamic" ErrorMessage="Please Select Tool Name" InitialValue="0">
</asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<th class="p66 rt">
Access Rights:
</th>
<td class="p66">
<asp:HiddenField ID="hd_AccessCodeMod" runat="server" ClientIDMode="Static" />
<asp:DropDownList ID="ddl_AccessCode" runat="server" Enabled="false">
<asp:ListItem Text="No Access" Value="0"></asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
<td class="p66">
<asp:Button ID="but_Cancel" runat="server" Text="Cancel" />
</td>
<td class="p66 rt">
<asp:Button ID="but_Save" runat="server" Text="Save" />
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
</asp:Panel>
As you can see I have implemented two hidden buttons but_SetModalDetails and but_HiddenProxy. but_SetModalDetails has some codebehind which sets a couple of dropdown lists (one populated from a datasource, the other is populated dynamically based on the value of the first. The codebehind is...
Protected Sub but_SetModalDetails_Click(ByVal sender As Object, ByVal e As EventArgs) Handles but_SetModalDetails.Click
If hd_AccessID.Value = "0" Then
lb_ModTitle.Text = "Assigning Access Rights to:"
ddl_ToolName.SelectedIndex = 0
ddl_AccessCode.SelectedIndex = 0
ddl_AccessCode.Enabled = False
Else
lb_ModTitle.Text = "Edit Access Rights to:"
ddl_ToolName.SelectedValue = hd_ToolIDMod.Value
ddl_ToolName.Enabled = False
SqlStr = "SELECT AccessID AS ddlValue, AccessText as ddlText FROM tbl_AccessCodes WHERE ToolID = " & hd_ToolIDMod.Value
PopulateDDLvalue(ddl_AccessCode, SqlStr)
ddl_AccessCode.SelectedValue = hd_AccessCodeMod.Value
ddl_AccessCode.Enabled = True
End If
'NOW I NEED TO SIMULATE but_HiddenProxy Click
End Sub
As you can see at the end I need to simulate a click of but_HiddenProxy so that the modalPopup is shown populated with the correct data.
Any Ideas? Thanks
After all that... I was able to do everything in codebehind...
I only needed one hidden button but_HiddenProxy.
In the gridview instead of setting an onClick attribute for each edit image button I just set a commandname of 'AccessEdit' (don't use 'Edit'). I then had a method that handled the gridview.RowCommand event. This found the various info I needed by using findControl on the selected row. These values were then used to populate the dropdowns in the popup and then use the show command to make the popup visible.
One bit that did stump me for a while was why my RowCommand was not triggering when an imagebutton was clicked. I'd forgotten that I had validation in the modal which stopped the RowCommand being executed. I stuck a CausesValidation="false" in the imagebutton and all was OK.
Talk about using a hammer to crack a nut!

ASP:Labels not updating on button Click

I know this is probably something so simple that I am just not able to see it. I have an aspx form that has a usercontrol in an updata panel. The user control is a people picker the searches on users from a corporate database.
What I want to see happen is:
The user clicks on a pick user button
The update panel with people picker becomes visible
They search for a user and then select the one they want.
When they make the selection and click Done, I get the user id of the user and look them up in our user table.
The user information should show up in a the form in label fields.
I can step through the code and see that I am getting the user information and that the label text is being set to the values but the page never updates the labels. It is a postback so I would think they would update.
<tr>
<td colspan="4">
<asp:UpdatePanel ID="CollapseDelegate" runat="server">
<ContentTemplate>
<asp:Panel ID="pDelegateHeader" runat="server">
<div style="padding: 10px 0 10px 20px; height:10px; text-align: left; background-color:#ffffff; color:#000000; border: 2px solid #ccc;" >
<asp:Label ID="ShowDelegate" runat="server" /><br />
</div>
</asp:Panel>
<asp:Panel ID="pDelegateBody" runat="server">
<PP:PeoplePicker ID="PP" runat="server" />
<asp:Button ID="btnOk" runat="server" Text="Done" CssClass="Buttons" onclick="btnOk_Click" />
</asp:Panel>
<asp:CollapsiblePanelExtender ID="CollapsiblePanelExtender3" runat="server" TargetControlID="pDelegateBody" CollapseControlID="pDelegateHeader" ExpandControlID="pDelegateHeader" Collapsed="true" TextLabelID="ShowDelegate" CollapsedText="Pick User..." ExpandedText="Close..." CollapsedSize="0"></asp:CollapsiblePanelExtender>
</ContentTemplate>
</asp:UpdatePanel>
</td>
</tr>
<tr>
<td><asp:Label ID="DelegateNameLabel" runat="server" Text="Name:" CssClass="indentedText" /></td>
<td><asp:Label ID="DelegateNameValueLabel" runat="server" CssClass="indentedText" Visible="true"></asp:Label></td>
<td><asp:Label ID="DelegateEmailLabel" runat="server" Text="Email:" CssClass="indentedText" /></td>
<td><asp:Label ID="DelegateEmailValueLabel" runat="server" CssClass="indentedText" Visible="true"></asp:Label></td>
</tr>
<tr>
<td><asp:Label ID="DelegatePhoneLabel" runat="server" Text="Phone:" CssClass="indentedText" /></td>
<td><asp:Label ID="DelegatePhoneValueLabel" runat="server" CssClass="indentedText" Visible="true"></asp:Label></td>
<td><asp:Label ID="DelegateVerifiedLabel" runat="server" Text="Last Verified Date:" CssClass="indentedText" /></td>
<td><asp:Label ID="DelegateVerifiedValueLabel" runat="server" CssClass="indentedText" /></td>
</tr>
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
string PassedDelegateID = string.Empty;
string Mode = string.Empty;
int delegateId = 0;
if (Request.QueryString["Id"] != null)
{
PassedDelegateID = Request.QueryString["Id"].ToString();
}
else
{
PassedDelegateID = "0";
}
if (Request.QueryString["mode"] != null)
{
Mode = Request.QueryString["mode"].ToString();
}
else
{
Mode = "add";
}
if (Mode == "add")
{
pnlUdpateDelegateText.Text = UIConstants.ADDDELEGATETEXT.ToString();
}
else
{
pnlUdpateDelegateText.Text = UIConstants.UPDATEDELEGATETEXT.ToString();
if (int.TryParse(PassedDelegateID, out delegateId))
{
loadDelegateData(delegateId);
}
}
}
}
protected void btnOk_Click(object sender, EventArgs e)
{
TextBox txtSearchValue = (TextBox)PP.FindControl("txtSearchResults");
string LanId = txtSearchValue.Text;
User user = BusinessUtility.GetUser(LanId);
DelegateNameValueLabel.Text = user.Name;
DelegateEmailValueLabel.Text = user.Email;
DelegatePhoneValueLabel.Text = user.Phone;
DelegateVerifiedValueLabel.Text = DateTime.Now.ToShortDateString();
}
Thanks,
Rhonda
Because the labels are outside the update panel, only the content inside the update panel is updated from an ajax post-back, that's the whole point of an update panel.
You will need to either move the labels inside the update panel's content area, or have another update panel for the labels and make it's update mode "always"
Your lables are outside of the UpdatePanel.
Under the hood, ASP.Net performes a full postback, but only the part that pertains to your UpdatePanel is transfered back down to the client. Some JavaScript then takes this bit of HTML and replaces the existing <div> element that is your UpdatePanel.
Since your labels are outside of that <div> they never get updates.

GridView isn't reflecting AJAX changes

I'm using AJAX right now to update my GridView when I search for a string of text in the gridview, or when I select from a dropdownlist what I want to order the Gridview by. This was working previously, but I had really messy code. So I've cleaned it up a little bit, added some parameters and such. Unfortunately, now, when the selectedindex of the dropdownlist is changed or when someone tries to search for a field, nothing happens - the page just refreshes. I'm also getting an exception saying "The SELECT item identified by the ORDER BY number 1 contains a variable as part of the expression identifying a column position. Variables are only allowed when ordering by an expression referencing a column name".
If you need to see any more code then please let me know!
public vieworders()
{
this.PreInit += new EventHandler(vieworders_PreInit);
}
void vieworders_PreInit(object sender, EventArgs e)
{
orderByString = orderByList.SelectedItem.Value;
fieldString = searchTextBox.Text;
updateDatabase(fieldString, orderByString);
}
protected void updateDatabase(string _searchString, string _orderByString)
{
string updateCommand = "SELECT fName,lName,zip,email,cwaSource,price,length FROM SecureOrders WHERE fName LIKE #searchString OR lName LIKE #searchString OR zip LIKE #searchString OR email LIKE #searchString OR cwaSource LIKE #searchString OR length LIKE #searchString OR price LIKE #searchString ORDER BY #orderByString";
Configuration rootWebConfig = System.Web.Configuration.WebConfigurationManager.OpenWebConfiguration("/Cabot3");
ConnectionStringSettings connectionString = rootWebConfig.ConnectionStrings.ConnectionStrings["secureodb"];
// Create an SqlConnection to the database.
using (SqlConnection connection = new SqlConnection(connectionString.ToString()))
using (SqlCommand _fillDatabase = new SqlCommand(updateCommand, connection))
{
connection.Open();
_fillDatabase.Parameters.Add("#searchString", SqlDbType.VarChar, 50).Value = _searchString;
_fillDatabase.Parameters.Add("#orderByString", SqlDbType.VarChar, 50).Value = _orderByString;
_fillDatabase.ExecuteNonQuery();
dataAdapter = new SqlDataAdapter("SELECT * FROM SecureOrders", connection);
// create the DataSet
dataSet = new DataSet();
// fill the DataSet using our DataAdapter
dataAdapter.Fill(dataSet, "SecureOrders");
DataView source = new DataView(dataSet.Tables[0]);
DefaultGrid.DataSource = source;
DefaultGrid.DataBind();
connection.Close();
}
}
Form
<form id="form1" runat="server">
<asp:ScriptManager ID = "ScriptManager" runat="server" />
<div>
<asp:Label runat="server" id = "orderByLabel" Text = "Order By: " />
<asp:DropDownList runat="server" ID="orderByList" AutoPostBack="true">
<asp:ListItem Value="fName" Selected="True">First Name</asp:ListItem>
<asp:ListItem Value="lName">Last Name</asp:ListItem>
<asp:ListItem Value="state">State</asp:ListItem>
<asp:ListItem Value="zip">Zip Code</asp:ListItem>
<asp:ListItem Value="cwaSource">Source</asp:ListItem>
<asp:ListItem Value="cwaJoined">Date Joined</asp:ListItem>
</asp:DropDownList>
</div>
<div>
<asp:Label runat="server" ID="searchLabel" Text="Search For: " />
<asp:TextBox ID="searchTextBox" runat="server" Columns="30" />
<asp:Button ID="searchButton" runat="server" Text="Search" />
</div>
<div>
<asp:UpdatePanel ID = "up" runat="server">
<ContentTemplate>
<div style= "overflow:auto; height:50%; width:100%">
<asp:GridView ID="DefaultGrid" runat = "server" DataKeyNames = "IdentityColumn"
onselectedindexchanged = "DefaultGrid_SelectedIndexChanged"
autogenerateselectbutton = "true">
<SelectedRowStyle BackColor="Azure"
forecolor="Black"
font-bold="true" />
<Columns>
<asp:TemplateField HeaderText="Processed">
<ItemTemplate>
<asp:CheckBox ID="CheckBoxProcess" AutoPostBack = "true" Checked ='<%#Eval("processed") %>' OnCheckedChanged="CheckBoxProcess_CheckedChanged" runat="server" Enabled="true" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</div>
<div style= "overflow:auto; height:50%; width:100%" />
<table border="1">
<tr>
<td>Name: </td>
<td><%=name %></td>
</tr>
<tr>
<td>Zip: </td>
<td><%=zip %></td>
</tr>
<tr>
<td>Email: </td>
<td><%=email %></td>
</tr>
<tr>
<td>Length: </td>
<td><%=length %></td>
</tr>
<tr>
<td>Price: </td>
<td><%=price %></td>
</tr>
<tr>
<td>Source: </td>
<td><%=source %></td>
</tr>
</table>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
I have never used the UpdatePanel since my company uses Telerik, but from the examples I see during my research I remember seeing a trigger component.
From my understanding, if the control is w/i the UpdatePanel itself, then you do not have to specify the trigger, since it is assumed.
For your scenario, the trigger (dropdownlist) is outside of the UpdatePanel. You may need to include this in your aspx:
<asp:UpdatePanel ID = "up" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="orderByList" >
</Triggers>
<ContentTemplate>
...
Try the following:
In HTML move the update panel direct after the scriptmanager line.
Move the code lines in vieworders_PreInit to vieworders_PageLoad with !IsPostPack clause.

Update Panel animation extender with multi update panel

Q:
I use Update Panel animation extender
,, it works so good but unfortunately
,,when i have more than update panel
on the same page and any partial post
back for any update panel on the page
the extender works (animate)..
How to make the extender works with
the intended one (the one i add the
extender to Only)..please sample if possible
The Script:
<script type="text/javascript" language="javascript">
function onUpdating() {
// get the update progress div
var updateProgressDiv = $get('updateProgressDiv');
// make it visible
updateProgressDiv.style.display = '';
// get the gridview element
var gridView = $get('<%=this.pnl_courseImg.ClientID %>');
// get the bounds of both the gridview and the progress div
var gridViewBounds = Sys.UI.DomElement.getBounds(gridView);
var updateProgressDivBounds = Sys.UI.DomElement.getBounds(updateProgressDiv);
// do the math to figure out where to position the element (the center of the gridview)
var x = gridViewBounds.x + Math.round(gridViewBounds.width / 2) - Math.round(updateProgressDivBounds.width / 2);
var y = gridViewBounds.y + Math.round(gridViewBounds.height / 2) - Math.round(updateProgressDivBounds.height / 2);
// set the progress element to this position
Sys.UI.DomElement.setLocation(updateProgressDiv, x, y);
}
function onUpdated() {
// get the update progress div
var updateProgressDiv = $get('updateProgressDiv');
// make it invisible
updateProgressDiv.style.display = 'none';
}
</script>
My ASPX:
<asp:Panel ID="pnl_courseImg" runat="server" HorizontalAlign="Center">
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<contenttemplate>
<br />
<asp:ListView ID="lv_showCourseImages" runat="server" ItemPlaceholderID="a"
onitemcommand="lv_showCourseImages_ItemCommand">
<LayoutTemplate>
<table ID="Table1" runat="server" cellpadding="2" cellspacing="2"
>
<tr ID="a" runat="server">
</tr>
</table>
</LayoutTemplate>
<ItemTemplate>
<tr ID="Tr1" runat="server">
<td>
<asp:Image ID="img_news" runat="server" ImageUrl='<%# "CourseImages" + "/" + Eval("FK_CourseCode") + "/"+ Eval("photoName")%>' BorderWidth="4px" Height="355px"
Width="410px"/>
</td>
</tr>
<tr id = "tr2" runat ="server">
<td>
<asp:HiddenField ID="hf_newsImage" runat="server" Value ='<%#Eval("photoId")%>'/>
<asp:Button ID="btn_deleteImg" runat="server" Text="Delete" CommandName ="deleteImage" />
</td>
</tr>
</ItemTemplate>
</asp:ListView>
<asp:DataPager ID="dp_CourseImages" runat="server"
PagedControlID="lv_showCourseImages"
PageSize="1" onprerender="dp_CourseImages_PreRender">
<Fields>
<asp:NextPreviousPagerField ButtonType="Button" NextPageText=">>"
PreviousPageText="<<" ShowFirstPageButton="True"
ShowLastPageButton="True" />
</Fields>
</asp:DataPager>
</contenttemplate>
</asp:UpdatePanel>
<cc3:updatepanelanimationextender id="UpdatePanel2_UpdatePanelAnimationExtender"
runat="server" enabled="True" behaviorid="animation" targetcontrolid="UpdatePanel2">
<Animations>
<OnUpdating>
<Parallel duration="0">
<%-- place the update progress div over the gridview control --%>
<ScriptAction Script="onUpdating();" />
<%-- disable the search button --%>
<EnableAction AnimationTarget="btn_deleteImg" Enabled="false" />
<%-- fade-out the GridView --%>
<FadeOut minimumOpacity=".5" />
</Parallel>
</OnUpdating>
<OnUpdated>
<Parallel duration="0">
<%-- fade back in the GridView --%>
<FadeIn minimumOpacity=".5" />
<%-- re-enable the search button --%>
<EnableAction AnimationTarget="btn_deleteImg" Enabled="true" />
<%--find the update progress div and place it over the gridview control--%>
<ScriptAction Script="onUpdated();" />
</Parallel>
</OnUpdated>
</Animations>
</cc3:updatepanelanimationextender>
</asp:Panel>
i have one more update panel when click the button in it it fires the extender in this update panel how to fix this problem.
Thanks in advance..
Stolen from the ASP.NET Forums (sorry, didn't know how to get a link directly to the specified thread post):
Okay I solved it. here is my solution:
Just add the following javascript to your page
<script type="text/javascript">
var currentPostBackElement;
function pageLoad()
{
var manager = Sys.WebForms.PageRequestManager.getInstance();
manager.add_initializeRequest(OnInitializeRequest);
}
function OnInitializeRequest(sender, args)
{
var manager = Sys.WebForms.PageRequestManager.getInstance();
currentPostBackElement = args.get_postBackElement().parentElement;
}
</script>
and use the ConditionScript in the UpdatePanelAnimationExtender as followed:
<ajaxToolkit:UpdatePanelAnimationExtender ID="MyExtender" runat="server" TargetControlID="updPanel">
<Animations>
<OnUpdating>
<Condition ConditionScript="currentPostBackElement.name == 'updPanel' ">
<FadeOut AnimationTarget="updPanel" minimumOpacity=".1" Fps="30" />
</Condition>
</OnUpdating>
<OnUpdated>
<Condition ConditionScript="currentPostBackElement.name == 'updPanel' ">
<FadeIn AnimationTarget="updPanel" minimumOpacity=".1" Fps="30" />
</Condition>
</OnUpdated>
</Animations>
</ajaxToolkit:UpdatePanelAnimationExtender>
Its important to have the trigger (in my case a timer) in the update panel which should be refreshed. so you can get the parent
I didn't test this solution by I hope it will help you.
The Ajax Control Toolkit is now maintained by DevExpress, and this bug has been resolved. I updated my DLL to version 18.1, and I'm no longer experiencing the problem.

Resources