I am having some troubles with repopulating a dropdownlist inside an updatepanel. On page load, I load the drop down list:
this.dropdownFacility.Items.Clear();
this.dropdownFacility.DataSource = table;
this.dropdownFacility.DataTextField = "FacilityName";
this.dropdownFacility.DataValueField = "FacilityID";
this.dropdownFacility.DataBind();
The variable 'table' is a DataTable that I populate from a SQL Database. This works and shows all my values after the page loads the first time. Then, inside of my page, I have a JQuery Dialog that displays:
<div id="assignmentDialog" title="Process Assignment">
<div style="margin:10px; font-size:16px; ">
<asp:Label runat="server" Text="Select A Facility:*" Font-Bold="true" style="width:140px; display:inline-block; vertical-align:text-top; text-align:right;" />
<asp:DropDownList runat="server" ID="dropdownFacility" />
<asp:LinkButton runat="server" ID="linkNewFacility" Text="New" ForeColor="Blue" OnClientClick="OpenFacilityDialog();" />
</div>
</div>
Upon clicking on the link button, another JQuery dialog displays allowing the user to enter data for a facility. When they are done, they can click a button to submit the data:
<asp:Button runat="server" ID="NewFacility" Text="Submit" OnClick="NewFacility_Clicked" OnClientClick="return CheckFacilityData();" style="display: block; text-align:center; margin: 0 auto;" />
Here is where the issue occurs. After the button is clicked, I can see the record has been inserted into the table. Also, with break points in my code during page load, I can see that after I rebind the drop down, that the number of items have increased by 1, showing that the new record is there. However, on the actual page, that new record is not displayed in the drop down. Below is how I define my update panel with the triggers:
<asp:UpdatePanel runat="server" ID="assignmentUpdatePanel" UpdateMode="Conditional" ChildrenAsTriggers="true">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="NewFacility" EventName="Click" />
</Triggers>
...
Can anyone see what I am doing wrong?
Try like this:
<asp:DropDownList runat="server" ID="dropdownFacility"
AppendDataBoundItems="True" AutoPostBack="True" />
or:
this.dropdownFacility.Items.Clear();
this.dropdownFacility.DataSource = table;
this.dropdownFacility.DataTextField = "FacilityName";
this.dropdownFacility.DataValueField = "FacilityID";
this.dropdownFacility.AppendDataBoundItems = true;
this.dropdownFacility.AutoPostBack = true;
this.dropdownFacility.DataBind();
Well, I figured out the issue. Issue was actually due to the fact that I am using a JQuery Dialog with the ASP.NET UpdatePanel. The JQuery logic actually creates a new div for the dialog and places it outside of the form element. To fix this, I basically did 2 things. The first was to append the dialog back to the form by doing this:
$("#assignmentDialog").dialog(
{
modal: true,
hide: "explode",
width: 450,
autoOpen: false,
resizable: false,
open: function (event, ui)
{
$(this).parent().appendTo("form");
},
close: function (event, ui)
{
// Clear the inputs
$("#textboxStartDate").val("");
$("#textboxEndDate").val("");
$("#dropdownFacility").val("");
}
});
Then, I had to move my update panel inside of the dialog by doing this:
<div id="assignmentDialog" title="Process Assignment">
<asp:UpdatePanel runat="server" ID="assignmentUpdatePanel" UpdateMode="Conditional" ChildrenAsTriggers="true">
Related
I am using Visual Studio 2015 to create a ASP.NET web site. I have a DIV that is hidden by default and I am trying to display it if the user checks a check box. I am wondering if there is a way using C# to immediately display the DIV as soon as the user checks the box. I can't seem to find a way to recognize the change in state without the form being first submitted. I can easily achieve this using JavaScript however this is for a uni assignment and requires functionality to be implemented in C#.
This is the HTML for the checkBox:
<form id="form1" runat="server">
Limit Stations To My Location<asp:CheckBox ID="limitOptions" runat="server" onClick="toggleOptions()" />
<br /><br />
<div id="locationOptions" runat="server" hidden="hidden">
Radius (KM)<asp:TextBox ID="radius" runat="server" Text="100"></asp:TextBox>
<asp:Button ID="updateList" runat="server" Text="Button" OnClick="updateList_Click"/>
</div>
Any help would be greatly appreciated.
You can do this with C# in code behind. Add a OnCheckedChanged event to the CheckBox and set the AutoPostBack to true and handle the change. Note that a Panel becomes a div in HTML.
<asp:CheckBox ID="limitOptions" runat="server" OnCheckedChanged="limitOptions_CheckedChanged" AutoPostBack="true" />
<asp:Panel ID="locationOptions" runat="server" Visible="false">
Radius (KM) <asp:TextBox ID="radius" runat="server" Text="100"></asp:TextBox>
</asp:Panel>
However this causes a PostBack, so just using JavaScript could be a better option.
<asp:CheckBox ID="limitOptions" runat="server" onclick="toggleOptions()" />
<div id="locationOptions" runat="server" style="display: none">
Radius (KM)<asp:TextBox ID="radius" runat="server" Text="100"></asp:TextBox>
</div>
<script type="text/javascript">
function toggleOptions() {
var id = '#<% =locationOptions.ClientID %>';
if ($(id).css('display') == 'none') {
$(id).slideDown('fast', function () { });
} else {
$(id).slideUp('fast', function () { });
}
}
</script>
i want to scroll down my page to bottom when i click specifix button,
e.g after clicking 'btn' a gridview appears but user has to scroll down to see the gridview but i want that it should move as soon as gridview appears
<asp:Button ID="btnSubscribe" runat="server" CssClass="btn btn-success" Width="35px"
OnClick="btnSubscribe_Click" Text="+" />
<asp:GridView ID="GridViewResults" runat="server" Width="100%" AutoGenerateColumns="False"
OnRowDeleting="GridViewResults_RowDeleting" ShowFooter="True" DataMember="S.No"
OnRowDataBound="GridViewResults_RowDataBound" CssClass="table table-hover table-striped table-bordered">
</asp:GridView>
Note: this whole page and section appears in Update Panel
You can accomplish this with JavaScript:
<input type="button" value="Click Me" onclick="document.getElementById('<%= myGridView.ClientID %>').scrollIntoView();" />
Given your GridView's name is myGridView. If you have a server-side control, you can create a JavaScript function and call it from the OnClientClick.
EDIT: If you have a UpdatePanel, you want to be able to execute the previous code when the UpdatePanel has Updated something. Try this:
<script>
function focusGrid() {
var gv = document.getElementById('<%= myGridView.ClientID %>');
if(gv)
gv.scrollIntoView();
}
onload = function () {
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function () { focusGrid(); });
}
</script>
What this code does is to register a handler that executes after the UpdatePanel's request ends. Then the focusGrid function is called, and it will bring the GridView into focus if it is part of the DOM at this point.
I have 2 pages each with an update panel. It has the same content and the same trigger on both pages.
This is how it looks:
<div id="rating">
<span class="rateTxt">Rate</span>
<telerik:RadRating ID="RadRating1" runat="server" ItemCount="5" SelectionMode="Continuous"
Precision="Item" Skin="Default" OnRate="RadRating1_Rate" AutoPostBack="true">
</telerik:RadRating>
</div>
</li>
</ul>
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<div id="divAddMessage" runat="server" visible="false">
<span class="rateTxt">Do you want to add a comment?</span>
<asp:TextBox runat="server" ID="txtComment" TextMode="MultiLine" Rows="3" Width="195">
</asp:TextBox>
<br />
<br />
<asp:ImageButton runat="server" ID="lnkAddComment" ImageUrl="~/App_Themes/123reg/Images/submit-rating.png"
OnClick="lnkAddComment_Click" OnClientClick="showSuccessMessage();" />
<br />
<br />
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="RadRating1" EventName="Rate" />
</Triggers>
</asp:UpdatePanel>
Now when the user rates something with the RadRating the Rate event is triggered which causes a postback.
On the handler for the Rate event I do the following:
protected void RadRating1_Rate(object sender, EventArgs e)
{
divAddMessage.Visible = true;
}
The same code is exactly on 2 pages. On one page it updates the divAddMessage and it becomes visible but on another page it doesn't become visible. Even if I set it to visible on that page when it postback again the Visible property is still false even after setting it to true in the above handler.
I only set the visibily to false in the aspx file and in the above handler I set it to true.
It turns out that I get an error in the javascript console:
Sys.InvalidOperationException: Sys.InvalidOperationException: Could not find UpdatePanel with ID 'ctl00_mainContentPlaceHolder_updatePanel'. If it is being updated dynamically then it must be inside another UpdatePanel.
I have another update panel inside a multiview. But because the active view is not the one with the update panel on postback the update panel isn't rendered.
Check the parent/container elements for divAddMessage. Have they got their Visibility set to false. If so then the child element will always be Visible=false even if you have set it explicitly to true. That's driven me mad in the past.
Just a thought
I had a custom control and had set the Visible property to false on declaration in the aspx file and that was overriding the visibility of any child elements within the control itself.
I wrote this code implemented in a much bigger solution. the point was to add an asp:ImageButton to an asp:GridView. Clicking this image button would trigger a javascript call to a JQuery dialog.
This dialog is bound to a div containing an asp:BulletedList.
Simple enough, and I got it to work, but when I click the button and the dialog opens, it shows up collapsed to only the title bar. I can resize and expand the window to show the contents but I'd like it to open to the right size from the get go.
Setting the Resizable option to false just blocks it in collapsed mode and I can't see the data anymore. Also, opening the source code from the rendered page in IE displays an empty div (the div used by the dialog) while the dialog is collapsed to the title bar, but after I expand the window and display my BulletedList data, displaying the source code by right clicking the bullet list still shows an empty div...
Here is the code, the gridview is a lot bigger and item templates are used because each column has a specific header and footer but I took out all the non-related stuff.
.ascx file
The Javascript:
function ShowReferedTasks() {
$('#litReferedTasks').dialog({
autoOpen: true,
modal: true,
minHeight: 150,
minWidth: 500,
resizable: true
});
}
The gridview containing the button that triggers the dialog:
<ext:GridView ID="gvTaskParameters" runat="server" AutoGenerateColumns="False" DataKeyNames="TaskParameterID"
ShowFooter="<%# _isAdmin %>" ShowHeaderWhenEmpty="True" ShowFooterWhenEmpty="True"
EmptyDataText="Aucun paramètre disponible" AllowPaging="True"
PagerSettings-Mode="NextPreviousFirstLast"
OnPageIndexChanging="gvTaskParameters_PageIndexChanging" OnRowCancelingEdit="gvTaskParameters_RowCancelingEdit"
OnRowEditing="gvTaskParameters_RowEditing" OnRowDeleting="gvTaskParameters_RowDeleting"
OnRowUpdating="gvTaskParameters_RowUpdating" OnRowCommand="gvTaskParameters_RowCommand"
OnRowDataBound="gvTaskParameters_RowDataBound"
OnDataBound="gvTaskParameters_DataBound">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:ImageButton ID="ibViewTasks" runat="server" CausesValidation="False" CommandName="ViewTasks"
ImageAlign="Middle" ImageUrl="../../js/jquery-ui-1.8.19.custom/development-bundle/demos/images/icon-docs-info.gif" AlternateText="<%$ resources:resource, images_VoirTaches %>"
CommandArgument='<%# Eval("TaskParameterID") %>' />
<%--<input id="ibViewTasks" class="ui-state-default ui-corner-all" type="image" src="../../js/jquery-ui-1.8.19.custom/development-bundle/demos/images/icon-docks-info.gif" value="button" />--%>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</ext:GridView>
The div bound to the dialog:
<div id="litReferedTasks" class="" title="Tâches Référées" style="background-color: White; position: absolute;">
<div style="padding-left: 25px; padding-bottom: 25px; padding-right: 25px;">
<asp:BulletedList ID="blReferedTasks" runat="server" DisplayMode="Text">
</asp:BulletedList>
</div>
</div>
Code Behind in C#:
else if (e.CommandName == "ViewTasks")
{
TaskParameterMapManager mgr = new TaskParameterMapManager(DatabaseConnection);
int id = Convert.ToInt32(e.CommandArgument.ToString());
var ts = mgr.GetTasks(id).OrderBy(t => t.TaskDescription);
this.blReferedTasks.DataSource = ts.ToList();
this.blReferedTasks.DataTextField = "TaskDescription";
this.blReferedTasks.DataBind();
ScriptManager.RegisterStartupScript(this, this.GetType(), "Key_ShowReferedTasks", "ShowReferedTasks();", true);
}
The answer was, as #chris suggested, to remove the "position:absolute" style tag in the div used by the dialog.
<asp:Panel ID="EditPanel" runat="server" BackImageUrl="~/Light-Gray-Suede1.jpg"
CssClass="style10" Visible="True" Style="position: absolute; left: 503px; top: 1681px;
width: 411px; height: 280px; margin-right: 0px;">
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:TextBox ID="txt_EditExpiresBy" runat="server" ></asp:TextBox>
<asp:TextBox ID="txt_EditTitle" runat="server" ></asp:TextBox>
<asp:Button ID="btn_EditSave" runat="server" Text="Save" onclick="btn_EditSave_Click" />
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
In the grid view I have this button, when the user clicks on the edit button the panel pops up and it has to have expireby and respondby date from the same row.
<asp:ImageButton ImageUrl="~/Styles/Images/Edit.jpg" CommandName="Edit" runat="server"
ID="btnEdit" ToolTip="Edit Message" />
<asp:PopupControlExtender ID="Edit_PopupControlExtender" runat="server" DynamicServicePath=""
Enabled="True" ExtenderControlID="" TargetControlID="btnEdit" PopupControlID="EditPanel">
</asp:PopupControlExtender>
For redirect I pass the value like this <%# Eval("Email", "SendMessage.aspx?Email={0}") %>. And using that value I do the server side code. But how this can be done in client side. Thanks
Here is work around for displaying selected row's data in popup (i did it with repeater for one of my web project):
javascript to set textboxes with selected row data and then show popup by calling .show()
<script type="text/javascript">
function showPopupWithRowData(expiryBy, respondBy)
{
var txtExpiryBy = $get('<%= this.txt_EditExpiresBy.ClientID %>');
var txtRespondBy = $get('<%= this.txt_EditTitle.ClientID %>');
txtExpiryBy.value = expiryBy;
txtRespondBy.value = respondBy;
$find('<%= this.Edit_PopupControlExtender.ClientID %>').show();
return false;
}
</script>
markup to call javascript showPopupWithRowData() when clicked on button inside Grid
<!-- Note: Replace ColumnNameExpiry and ColumnNameRespond with the original column names -->
<!-- Also note return, since our javascript method always returns false, it will prevent a postback when the image button is clicked -->
<asp:ImageButton ImageUrl="~/Styles/Images/Edit.jpg" CommandName="Edit" runat="server" ID="btnEdit" ToolTip="Edit Message" OnClientClick="javascript:return showPopupWithRowData(<%#Eval("ColumnNameExpiry")%>, <%#Eval("ColumnNameRespond")%>);" />