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.
Related
I have an ASP page, and I have a calendar which is shown (set to visible) on the page when an image button is clicked.
The problem is everytime the calendar is shown it moves other components on the page down, and when it's invisible components move back up again.
Could anyone give me an idea plz. Here is what i did finally: (Now its fixed)
<body>
<form id="form1" runat="server">
<asp:TextBox ID="CreationTimeTextBox" runat="server" ClientIDMode="Static">Creation Time</asp:TextBox><br />
<script>
AnyTime.picker("CreationTimeTextBox",
{ format: "%d/%m/%z %h:%i", firstDOW: 1 });
</script>
<asp:TextBox ID="EndTimeTextBox" runat="server" ClientIDMode="Static">End Time</asp:TextBox>
<script>
AnyTime.picker("EndTimeTextBox",
{ format: "%d/%m/%z %h:%i", firstDOW: 1 });
</script>
<asp:Button ID="btnResetSearchInput" runat="server" Text=" Reset search input" CssClass="resetBtn" Width="140px" OnClick="btnResetSearchInput_Click" />
To not moving the rest of the page down, the calendar must a correct style that allow him to show as pseudo-dialog on the page.
The main attributes on the css that must be correct and set is the position, top and left.
Here is an example:
.dialog {
position: absolute;
top:10px;
left:20px;
width: 140px;
height: 30px;
background-color:blue;
color:white;
}
.NotDialog {
width: 200px;
height: 30px;
background-color:blue;
color:white;
}
<div>Some other text before
<div class="dialog">open as dialog</div>
and after the dialog
</div>
<div>
Some other text below the blue dialog
<div>
<br><br><br>
<div>Some other text before
<div class="NotDialog">open by moving the text down</div>
and after the dialog
</div>
<div>
Some other text below the blue dialog
<div>
More to read
CSS OVERLAY TECHNIQUES
I have an asp.net datagrid on my page. This grid will have three column. Id, date and photo.
The photo column, is an actual column on the table VARBINARY(MAX).
When the user clicks on the photo (which will be either a text or an icon) I want to open a jquery modal with the photo in its full size. The user than can right click and save if he want.
I've never done this before. Tried to search on the net but I only find examples on displaying the image into the column, which is not what I want.
See below code sample to display small image in grid and displaying it large by clicking on it.
<asp:GridView runat="server" ID="gvData" AutoGenerateColumns="False">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<img src='<%# "data:image/gif;base64," + Eval("Data") %>' onclick="DisplayImage(this)" height="10" width="10" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<%--Popup dialog to display large image--%>
<div id="dialog" style="display: none">
<img height="100" width="100" id="imgLargeImage" />
</div>
Note: here my image type is gif so update it as per your image type.
JavaScript to display image in popup :
<script type="text/javascript">
function DisplayImage(ctrl) {
document.getElementById('imgLargeImage').src = ctrl.src;
$("#dialog").dialog({
title: "View Details",
buttons: {
Ok: function () {
$(this).dialog('close');
}
},
modal: true
});
}
</script>
Here's the scenario:
I've a page(Homepage.aspx) which has a button.
When clicked i used to Pass some values in cookies inside _Click method of the button in .CS file and then open a different aspx page(Detail_Report.aspx) where i was retrieving the values from the cookies and then display the content of the page which uses the values i've retrieved.
Now recently i've decided to implement Ajax pop-up extender to show the Detail_Report.aspx page.
I'm able to do this using the following code:
<asp:modalpopupextender id="ModalPopupExtender1"
runat="server" cancelcontrolid="btnCancel"
okcontrolid="btnOkay" targetcontrolid="Detail_Report"
popupcontrolid="DR" popupdraghandlecontrolid="PopupHeader"
drag="true" backgroundcssclass="ModalPopupBG">
</asp:modalpopupextender>
<div class="popupConfirmation" id="DR" style="display: none">
<iframe id="frameeditexpanse" src="DetailReport.aspx" frameborder="1">
</iframe>
<div class="popup_Buttons" style="display: none">
<input id="btnOkay" type="button" value="Done2" />
<input id="btnCancel" type="button" value="Cancel2" />
</div>
</div>
Here's the button declaration:
<asp:Button ID="Detail_Report" runat="server"
style="z-index: 1; left: 60px; top: 110px; position: absolute; width: 230px;"
Text="Detail Report" Font-Bold="True" BorderStyle="Solid"
Enabled="False" onclick="Detail_Report_Click"/>
And this is what i've inside my onClick Method:
protected void Detail_Report_Click(object sender, EventArgs e)
{
//string javaScript = "<script language=JavaScript>\n" + "DetailReport();\n" + "</script>";
Response.Cookies["proj"].Value = c_ProjName.Text.ToString();
Response.Cookies["LOB"].Value = c_LOB.Text.ToString();
Response.Cookies["release"].Value = c_ReleaseName1.Text.ToString();
Response.Cookies["country"].Value = c_CountryName.Text.ToString();
Response.Cookies["testenvkey"].Value = testenvkey.ToString();
//ClientScript.RegisterStartupScript(this.GetType(), "Detail_Report_Click", javaScript);
Now my problem is Pop-up is coming up, but i'm unable to fetch the values from cookies as those are blank. As a result My Detail_Report.aspx page is not displaying correctly
%If Session("ChildLoad") = "True" Then%>
'Model Extender and panel
<%end if%>
and then on the load of child page check the session status if its true then pick the values from session or cookies but to do that you need to enable post back on your main page.
Idea behind is
when you refresh the main page it will fire the load event from child page as well.
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">
I have the following case :
I use RadWindow , to open a specific page (which) exist in my solution.
Now i want to put a panel with set of buttons in the bottom of this window (constant panel) seperate from the page.
but i don't know how to do this.
<telerik:RadWindowManager ID="RadWindowManager1" runat="server" EnableShadow="true">
<Windows>
<telerik:RadWindow ID="RadWindow1" runat="server" ShowContentDuringLoad="false" Width="400px"
Height="400px" Title="Telerik RadWindow" Behaviors="Default" EnableShadow="true" KeepInScreenBounds="true" Modal="true" VisibleStatusbar="true">
<ContentTemplate>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
</ContentTemplate>
</telerik:RadWindow>
</Windows>
</telerik:RadWindowManager>
<script type="text/javascript">
//<![CDATA[
function openRadWin() {
radopen("About.aspx", "RadWindow1");
}
function openPopUp() {
window.open("About.aspx", "WindowPopup", "width=400px, height=400px, resizable");
}
//]]>
</script>
You are using the ContentTemplate it seems, not an external page. Nevertheless, simple CSS with position: fixed (or absolute + a div wrapper with position: relative) and bottom: 0px for the wrapper of the buttons should get the job done, be it in a RadWindow or directly in the browser. There are many ways to position elements like that.
Other options are using richer controls like RadNotification (see this demo) or RadSplitter to put your static content in its bottom pane (see here and here).