I want to upload a file and display the contents of that file in a grid using a FileUpload and a button control .But i need to do both the events in a single button click .I tried to Hide the FileUpload control but this doesn't work that well.
Following are the css style definitions i tried to apply :
<div style="height: 89px; width: 620px; position: relative; top: 226px; left: 229px; overflow:hidden">
<asp:FileUpload ID="FileUpload1" runat="server"
Style=" top:1px; left:-10px; width: 265px; position: relative; height: 26px; opacity: 0; filter: alpha(opacity=0)"
Font-Size="30pt" />
<asp:Button ID="Button1" runat="server" Text="Choose file.."
Style="top: -5px; left:-265px; z-index: -1; width: 251px; position: relative;"
Height="22px" />
</div>
This doesn't seem to serve my purpose.
Is there any way that will allow me to browse the file and display it in single button click?
Maybe this code will help
uploadButton.Attributes.Add("style", "visibility:hidden");
inputFile.Attributes.Add("onchange", "var uploadControl = document.getElementById('" + uploadButton.ClientID + "'); uploadControl.click();");
Related
I'm trying to show a div on top of my grid view when the grid is loading.
This is how I placed my UpdateProgress, UpdatePanel and GridView:
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdtPnlRefList" >
<ProgressTemplate>
<div style="position: fixed; text-align: center; height: 100%; width: 100%; top: 0; right: 0; left: 0; z-index: 9999999; background-color: #000000; opacity: 0.7;">
<span style="border-width: 0px; position: fixed; padding: 50px; background-color: #FFFFFF; font-size: 36px; left: 40%; top: 40%;">Loading ...</span>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel ID="UpdtPnlRefList" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:GridView>
......
</asp:GridView>
...
I've used the ProgressTemplate code from another question which I've lost track to, however this code greys out the whole page, but i need to only grey out my grid.
Is that possible?
I've achieved this in the past by using the Ajax Control Toolkit's UpdatePanelAnimationExtender control.
<ajaxToolkit:UpdatePanelAnimationExtender ID="UpdatePanelAnimationExtender1" runat="server" TargetControlID="YourUpdatePanel">
<Animations>
<OnUpdating>
<Sequence>
<ScriptAction Script="UpdatePanel_OnUpdating(updatePanelClientID, divToOverlayClientID);" />
<Parallel duration="0">
<FadeOut minimumOpacity=".5" />
</Parallel>
</Sequence>
</OnUpdating>
<OnUpdated>
<Sequence>
<Parallel duration="0" >
<FadeIn minimumOpacity=".5" />
<ScriptAction Script="UpdatePanel_OnUpdated(divToOverlayClientID);" />
</Parallel>
</Sequence>
</OnUpdated>
</Animations>
Ensure that you set the two required ClientIDs on load, like so:
<script type="text/javascript">
var updatePanelClientID = '<%=YourUpdatePanel.ClientID %>';
var divToOverlayClientID = '<%=divUpdateProgress.ClientID %>';
</script>
My div comprises this:
<div id="divUpdateProgress" runat="server" align="center" style="display: none; height: 40px; width: 200px; text-align: center; vertical-align: middle;">
<asp:Image ID="imgProgress" runat="server" ImageUrl="~/images/common/waitspin.gif" />
</div>
The final piece of the puzzle is the pair of JS functions called by the UpdatePanelAnimationExtender. They look like this:
function UpdatePanel_OnUpdating(updatePanelClientID, divClientID) {
// Displays a div over an updating UpdatePanel
// Get the update progress div
var divUpdateProgress = $get(divClientID);
// Make it visible
divUpdateProgress.style.display = '';
// Get the UpdatePanel element
var pnlUpdatePanel = $get(updatePanelClientID);
// Get the bounds of both the UpdatePanel and the progress div
var pnlUpdatePanelBounds = Sys.UI.DomElement.getBounds(pnlUpdatePanel);
var divUpdateProgressBounds = Sys.UI.DomElement.getBounds(divUpdateProgress);
// Work out where to position the element (the centre of the UpdatePanel)
var x = pnlUpdatePanelBounds.x + Math.round(pnlUpdatePanelBounds.width / 2) - Math.round(divUpdateProgressBounds.width / 2);
var y = pnlUpdatePanelBounds.y + Math.round(pnlUpdatePanelBounds.height / 2) - Math.round(divUpdateProgressBounds.height / 2);
// Set the progress element to this position
Sys.UI.DomElement.setLocation(divUpdateProgress, x, y);
}
function UpdatePanel_OnUpdated(divClientID) {
// Related to UpdatePanel_OnUpdating, above. Hides the div once the UpdatePanel has been updated
$get(divClientID).style.display = 'none';
}
This code was originally written almost 10 years ago, but I've just successfully reused it in a legacy project.
<asp:GridView>
<div style="position: relative;">
Code goes here
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdtPnlRefList" >
<ProgressTemplate>
<div style="position: absolute; display: table; width: 100%; text-align: center; top: 0; right: 0; left: 0; bottom: 0; z-index: 9999999; background-color: rgba(255,255,255,0.7);">
<span style="border-width: 0px; padding: 50px; font-size: 36px; display: table-cell"; vertical-align: middle;>Loading ...</span>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
</div>
</asp:GridView>
place the <ProgressTemplate></ProgressTemplate> inside the <asp:GridView></asp:GridView> tags.
and give the <div> a position: relative; and the div inside the <ProgressTemplate></ProgressTemplate> a position: absolute;
.
Don't use opacity as it applies for the whole tag and everything inside. Unless that's exactly what you want.
I have used an rgba(255,255,255,0.7); which will only decrease the opacity of the background color to 70%.
I have vertically centered the <span>Loading ...</span> by adding display: table-cell"; vertical-align: middle; and adding display: table; to the parent tag.
It would be advisable to use a separate stylesheet for all this. =)
Hopefully this helps.
Its a wonderful day to CODE =)
I am using the following code to generate a popup box
<cc1:modalpopupextender ID="ErrorMessage" runat="server" TargetControlID="cmdHospitalNew"
PopupControlID="popupError" PopupDragHandleControlID="PopupHeader" Drag="true"
OkControlID="SubmitOk" BackgroundCssClass="ModalPopupBG">
</cc1:modalpopupextender>
<div class="popupConfirmation" id="popupError" style="display: none; background-color: White;
width: 200px; height: auto;">
<div id="popupErrorMessage" style="width: 190px">
<asp:Label ID="lbl_DB_popupError" runat="server" Text="Please fill all required fields!"></asp:Label></div>
<div id="popupErrorSubmitOk">
<input type="submit" id="SubmitOk" value="OK" style="visibility: visible;" /></div>
Is there a way to move this to the middle-Top-Left? Right now the popup is in the center of the screen. Here is the stylesheet I am using:
body {
}
.ModalPopupBG
{
background-color: #666699;
filter: alpha(opacity=50);
opacity: 0.7;
}
You can modifiy the CSS to include top & left positions based on where you want it to appear:
.ModalPopupBG
{
background-color: #666699;
filter: alpha(opacity=50);
opacity: 0.7;
top: 100px;
left: 100px;
}
Also, your code shows:
BackgroundCssClass="ModalPopupBG"
This should be:
CssClass="ModalPopupBG".
I believe you are in position: fixed; when you want to be position: absolute;, try that instead.
If that does not work, then try position: absolute!important; and see if that forces it to absolute position.
Try adding these 3 lines to your .ModalPopupBG class
position:absolute;
top:300px;
left:300px;
and tweak the pixels until it lines up to where you want it.
I have a drop down list that shows all of the job numbers that are current. I need a text box to display the "name" equivalent of this number. The drop down list is based on a query to a separate table within the same database. The drop down list is:
<asp:DropDownList ID="dlRef" runat="server" DataSourceID="DataRef" DataTextField="Ref"
DataValueField="Ref" style="z-index: 1; left: 155px; top: 68px; position: absolute;
width: 115px; height: 29px; bottom: 254px;" AutoPostBack="True">
</asp:DropDownList>
What I need to do is have the text box tbADName to be associated with a datasource that uses a query such as this select Name from ActiveJobs where Ref = dlRef.DataValueField.
Is this possible or do I need to use another construct to display this information?
You can use the following function
onchange="showText(this.options[this.selectedIndex].text);"
Adding in your dropdown it will be
<asp:DropDownList ID="dlRef" runat="server" DataSourceID="DataRef" DataTextField="Ref"
DataValueField="Ref" style="z-index: 1; left: 155px; top: 68px; position: absolute;
width: 115px; height: 29px; bottom: 254px;" AutoPostBack="True"
onchange="showText(this.options[this.selectedIndex].text);">
</asp:DropDownList>
Create a function in java-script
function showText(value)
{
document.getElementById("textboxid").value=value
}
Edit 1
<head>
<title>DropDown</title>
<script type="text/javascript">
function chkind(){
var dropdown1 = document.getElementById('dlRef');
var textbox = document.getElementById('textbox');
var a = dropdown1.options[dropdown1.selectedIndex].text;
textbox.value = a;
}
}
</script>
</head>
<body>
<asp:DropDownList ID="dlRef" runat="server" DataSourceID="DataRef" DataTextField="Ref"
DataValueField="Ref" style="z-index: 1; left: 155px; top: 68px; position: absolute;
width: 115px; height: 29px; bottom: 254px;" AutoPostBack="True"
onchange="chkind()">
<option>Hi</option>
<option>Bye</option>
</select><br />
<asp:textbox id="textbox" type="text" runat="server" />
</body>
I'd use javascript to do this. Add an onchange=functionName() in your asp:DropDownList and handle the onchange in javascript to change the textbox text to the value in the dropdown list.
EDIT:
you could call the onchange event like this:
<asp:DropDownList ID="dlRef" runat="server" DataSourceID="DataRef" DataTextField="Ref"
DataValueField="Ref" style="z-index: 1; left: 155px; top: 68px; position: absolute;
width: 115px; height: 29px; bottom: 254px;" AutoPostBack="True" onchange="changeTextBox(this)">
</asp:DropDownList>
And your script like this:
<script>
function changeTextBox(data) {
document.getElementById("yourTextBoxId").value = data.value;
}
</script>
If you want the text displayed I'm guessing you should use the text property.
Note: As of html5 the script tags can be used like so without the type attribute.
I'm trying to do what I thought is going to be the simples thing on earth. I'm having some png box with graphic element that suppose to cover part of an image I was intending to disply inside this box (this is a product box and the graphic element is supposed to simulate price tag).
So I need to have the box and I wanted to display the image underneath it using asp:ImageButton.
I've been struggling with this for hours, trying to put divs and images etc. Tried all sort of things with z-order, with no success, the product image is still being displayed above the graphic box. Fot the price it has been working fine, though.
I thought this should work:
<div id="HPItemBox">
<div id="HPItemPriceBox">
<asp:Label ID="lblPrice" runat="server" CssClass="HPItemPrice"></asp:Label>
</div>
<div id="imgBox" runat="server" class="HPimgBox">
<asp:Image ID="ibImage" runat="server" Width="140" Height="140" style="position: relative; z-index: 10;" />
<div id="HPItemLink">
<asp:LinkButton ID="lbToBuy" runat="server" CssClass="ItemURLStyle" OnClientClick="aspnetForm.target ='_blank';">Buy it</asp:LinkButton>
</div>
</div>
</div>
Also tried:
<div id="HPItemBox">
<div id="HPItemPriceBox">
<asp:Label ID="lblPrice" runat="server" CssClass="HPItemPrice"></asp:Label>
</div>
<div id="imgBox" runat="server" class="HPimgBox">
<div id="divImage" runat="server" style="position: relative; width: 140px; height: 140px;
z-index: 10;">
</div>
<div id="HPItemLink">
<asp:LinkButton ID="lbToBuy" runat="server" CssClass="ItemURLStyle" OnClientClick="aspnetForm.target ='_blank';">Buy it</asp:LinkButton>
</div>
</div>
</div>
There is the css:
#HPItemBox
{
position: relative;
width: 190px;
height: 190px;
background-image: url('../images/home-product-box.png');
background-repeat: no-repeat;
background-color: #ffffff;
float: left;
z-index: 50;
}
.HPItemPrice
{
font-family: Arial;
font-size: 12px;
font-weight: bold;
color: #4d4d4d;
}
.HPimgBox
{
position: relative;
top: -10px;
right: 20px;
width: 170px;
z-index: 10;
}
Any ideas? Thanks in advanced.
Hey i think your code is some mistake please manage your code according to you and some change to your css file as like this
HTML
<div id="HPItemBox">
<div id="HPItemPriceBox">
<asp:Label ID="lblPrice" runat="server" CssClass="HPItemPrice"></asp:Label>
</div>
<div id="imgBox" runat="server" class="HPimgBox">
<div id="divImage" runat="server" style="position: relative; width: 140px; height: 140px;background:green;
z-index: 10;">
Hello
<div id="HPItemLink">
<asp:LinkButton ID="lbToBuy" runat="server" CssClass="ItemURLStyle" OnClientClick="aspnetForm.target ='_blank';">Buy it</asp:LinkButton>
</div>
</div>
</div>
</div>
Css
#HPItemBox
{
position: relative;
width: 190px;
height: 190px;
background-image: url('../images/home-product-box.png');
background-repeat: no-repeat;
background-color:red;
float: left;
z-index: 50;
}
.HPItemPrice
{
font-family: Arial;
font-size: 12px;
font-weight: bold;
color: #4d4d4d;
position: relative;
}
#HPItemLink
{
position: absolute;
bottom: 10px;
left: 10px;
z-index: 10;
border:solid 2px yellow;
}
Live demo check here http://jsfiddle.net/8yg49/1/
I came up with a somewhat crooked idea, but i'm short in time so if it works for now it's fine with me.
I'll sketch the idea. basically, I think that an imagebutton gets the highest z-order, so there is no point of putting it above any div hoping that it will reside behind it.
so my solution was to take out the imagebutton and just put the image using some div, and then put a fully TRANSPARENT imagebutton above.
it goes something like this:
<div id="HPItemBox">
<div id="HPItemPriceBox">
<asp:Label ID="lblPrice" runat="server" CssClass="HPItemPrice"></asp:Label>
</div>
<div id="imgBox" runat="server" class="HPimgBox">
<div id="HPItemLink">
<asp:LinkButton ID="lbToBuy" runat="server" CssClass="ItemURLStyle" OnClientClick="aspnetForm.target ='_blank';" ImageURL="FULLY_TRANSPARENT_RECTANGLE!!!">Buy it</asp:LinkButton>
</div>
</div>
</div>
<div id="THE ACTUAL IMAGE!!!"> .... in this DIV I put the image using image control (NOT imagebutton!) and then relatively place it under HPItemBox div </div>
This way the actual image is presented under the frame div and the button is actually a rectangular transparent image so the image i wanted to display appears as the button (but without the 'click' affect.
How do I add css for the Panle and the div tag, I am new to this I tried many ways but could not make it to work. How should I add css for individual Panel and individual Div tag. Thanks
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="Server">
<link href="Styles/AboutUs.css" rel="stylesheet" type="text/css" />
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="Server">
<asp:Panel ID="Panel2" runat="server" >
<div id="main">
</div>
</asp:Panel>
</asp:Content>
CSS:
----
.Panel2
{
position: relative;
top: -11px;
left: -20px;
height: 450px;
width: 928px;
}
.main
{
position: relative;
top: 17px;
left: 154px;
height: 110px;
width: 691px;
}
For this HTML
<asp:Panel ID="Panel2" runat="server" >
<div id="main">
</div>
</asp:Panel>
Change it to (see the change in BOLD)
<asp:Panel ID="Panel2" runat="server" **CssClass="pnlCSS"**>
<div id="main">
</div>
</asp:Panel>
and the css should be
#main
{
position: relative;
top: 17px;
left: 154px;
height: 110px;
width: 691px;
}
.pnlCSS
{
// CSS for panel here
}
If you what to use Ids instead of CssClass you will have to change your ClientIDMode="Static":
<asp:Panel ID="Panel2" ClientIDMode="Static" runat="server" >
<div id="main">
</div>
</asp:Panel>
What you need to do is look at the div and panel class in Firebug - when using ASP.NET Master pages, it will append certain things to your specified class; it will look something like #ct100_MainContent etc etc.
Again, take a look at Firebug and see what the div is being written to the browser as, and update that in your CSS.
You can use the CssClass property to define a css class for you panel div.
<asp:Panel ID="Panel2" runat="server" CssClass="myClass">
</asp:Panel>
And then use this class in your css:
.myClass {
position: relative;
top: -11px;
left: -20px;
height: 450px;
width: 928px;
}
Use
#main
{
position: relative;
top: 17px;
left: 154px;
height: 110px;
width: 691px;
}
and add CssClass="Panel2" to the panel