Create pop up panel or similar - c#

I have a request.. where I need to create a link, then after the link is clicked.. a pop up should come up with a gridview in there but whatever is selected from that grid view I should pass it to a label on the page where the pop up was originated.. How can I do this?
I do not want to create a separate page.. just want to be able to add a gridview maybe in a panel... and then make the panel pop upon clicking on a linkbutton.
So so far, I have the panel and the gridview in the panel, how do i make it pop up?
PS : I also have Telerik just have not used it much (is there anything from there I can use)
Thank you

Have a look at the ajax control toolkit.
This example demos the popup functionality that you want.

I'd put the gridview in a DIV and hide the div. You can then use JQuery to handle showing the DIV, capturing your value selected and setting your label. This can all be done client side, avoiding any trips to the server as it seems that shouldn't be necessary for what you've described. Here's a very simple sample. I'm simply showing a textbox and the value entered is updated into the label. You'll of course want to add some styling and html here to make your div look more like a form. But it should get you started. You'll also need to include the jquery references.
<script type="text/javascript">
$(document).ready(function () {
$('.ok').click(function (e) {
//Cancel the link behavior
e.preventDefault();
$('#lbl').text($('#input').val());
$('#dialog').hide();
});
$('#btnShow').click(function (e) {
//Cancel the link behavior
e.preventDefault();
//Set the popup window to center
$('#dialog').css('top', $(window).height() / 2 - $('#dialog').height() / 2);
$('#dialog').css('left', $(window).width() / 2 - $('#dialog').width() / 2);
$('#dialog').show();
});
});
</script>
<label id="lbl">Old Value</label>
<input type="button" id="btnShow" value="Get Value" />
<div id="dialog" style="display:none; width:440px; height:200px; position:absolute; ">
<input type="text" id="input" />
<input type="button" value="OK" class="ok" style="width:70px"/>
</div>

Related

How to set the current tab/content on page postback

I have the following JSFiddle which changes the tab/content based on user selection: http://jsfiddle.net/sikni8/3d64w6gf/1/
HTML snippet sample:
<asp:Button ID="btnRegister" ClientIDMode="Static" runat="server" Text="Register" OnClick="btnRegister_Click" />
<!--<input type="submit" name="commit" value="Register" runat="server" />-->
The btnRegister button perform some action when clicked. When the page does a postback, how can I ensure the tab/content which was there is displayed.
For example, if I click on the Register button the page refreshes and brings the first tab/content to view. I would like to change it so that when Register button is clicked and the page reloads, it should remain with the same tab/content.
I can use sessionStorage but I would like to request some assistance.
Tried this but didn't work:
<script>
$(document).ready(function (e) {
localStorage.setItem("whichTab", $("#tabs nav ul li.tab-current"));
alert(localStorage.getItem("whichTab"));
});
</script>
I am using cbpFWTabs.js file to achieve the tab class switch which is in the fiddle.
I did something similar by using hidden field, where I stored the id/class of the current tab in hidden field and after postback I just displayed the current tab again.

Trouble checking checkbox

I have received several reports from people not being able to register on my website due to them not being able to check a checkbox stating they agree to the Terms of Use. Basically, once the checkbox is checked a button is enabled to allow one to continue with registration.
I've tried myself and a lot of the time, clicking on the actual checkbox doesn't do anything but clicking on the associated label usually does. I've given that as the workaround but I'd really like to have clicking on the actual checkbox work all of the time.
The registration page is: http://www.lonelycache.com/Account/GeocachingAuth.aspx
The page form has the following for the checkbox (formatted for readability):
<asp:CheckBox ID="AgreeTOUCheckBox"
AutoPostBack="true"
runat="server" Text=" I have read and agree to the"
OnCheckedChanged="AgreeTOUCheckBox_OnCheckChanged" />
The generated html is (formatted for readability):
<input id="MainContent_AgreeTOUCheckBox" type="checkbox"
name="ctl00$MainContent$AgreeTOUCheckBox"
onclick="javascript:setTimeout('__doPostBack(\'ctl00$MainContent$AgreeTOUCheckBox\',\'\')', 0)"
/>
<label for="MainContent_AgreeTOUCheckBox"> I have read and agree to the</label>
Any ideas on what I might do to get this to work consistently?
Your checkbox is working fine, it's just hidden behind another panel. If you click and drag below the checkbox to highlight the page itself, you can see your left footprint panel is hiding most of the checkbox.
Try clicking just the very right edge of the checkbox and it will work.
It's probably as easy as adjusting your style like so:
<div style="padding-left:10px">
<asp:CheckBox ID="AgreeTOUCheckBox"
AutoPostBack="true"
runat="server" Text=" I have read and agree to the"
OnCheckedChanged="AgreeTOUCheckBox_OnCheckChanged" />
</div>
The same is true of your Authorize button. Try clicking the very left of that and it won't work.
Let me know if that does it for you.
This problem has nothing to do with ASP.NET. I've checked your website and you have a DIV (id: boots) that is sitting on top of the majority of the checkbox (it displays the boots image on the left as it's background image).
If you set the width of that div to be 180px rather than 200px, it should solve your problem,
I tested your site. I can't check either.
According to what I tested, your checkbox is just to enable the button. If so, you can just simply use jQuery to do that.
Here is the sample:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#<%= AgreeTOUCheckBox.ClientID %>').click(function () {
if ($('#<%= AgreeTOUCheckBox.ClientID %>').attr('checked')) {
$('#<%= AuthorizeButton.ClientID %>').removeAttr("disabled");
} else {
$('#<%= AuthorizeButton.ClientID %>').prop("disabled", "disabled");
}
});
});
</script>
<asp:CheckBox ID="AgreeTOUCheckBox" runat="server"
Text=" I have read and agree to the" />
<asp:Button runat="server" ID="AuthorizeButton"
Text="Authorize" Enabled="False"/>

Web Page Print Preview

I'm creating an online application form.
In front page, There are First Name, Last Name, Email etc... form inputs. What I want is that
if user fills the form and click on the submit, I want to show him the print preview page with values which user filled... Is it possible? I'm using ASP.Net C#
If you can use jquery this code is good
$(document).ready(function () {
window.print();
});
and you can see these
http://www.designplace.org/tutorials.php?page=1&c_id=27
http://www.alistapart.com/articles/goingtoprint/
https://web.archive.org/web/20211029043752/https://www.4guysfromrolla.com/webtech/061103-1.shtml
If you can use javascript, then try this
<script type="text/javascript">
function CallPrint(strid) {
var prtContent = document.getElementById(strid);
var WinPrint = window.open('', '', 'letf=0,top=0,width=850,height=800,toolbar=0,scrollbars=1,status=0');
WinPrint.document.write('<html><head><title>Popup</title>')
WinPrint.document.write('</head><body>');
WinPrint.document.write('</body></html>');
WinPrint.document.write(prtContent.innerHTML);
WinPrint.document.close();
WinPrint.focus();
WinPrint.print();
}
</script>
Take a print button on the page
<input id="btnPrint" type="button" value="Print" runat="server"
onclick="javascript:CallPrint('divPrint')"/>
and Place your Controls which are to be printed within a div
<div id="divPrint">
//Your controls
</div>

Inserting text in TextBox at cursor

I have a textbox in aspx page in which the user enters text. Now when user clicks on a button called "Sin" the textbox should show "Sin[]" and the cursor has to be placed in between brackets.Like as follows "Sin[<cursor here>]" Now when the user clicks on some other button say "Cos" the textbox text should show "Sin[Cos[]]" and the cursor has be placed between the brackets of Cos as follows: "Sin[Cos[<cursor here>]]".
How is this handled. Any simple code please..
Thanks in advance
I hope you are using jquery.
<asp:TextBox id="txt" runat="server" />
<input type="button" id="sinBtn" value="Sin" tag="Sin[<cursor here>]" />
<input type="button" id="cosBtn" value="Cos" tag="Cos[<cursor here>]" />
//also you can generate the two buttons with server controls
Here is the javascript:
$(document).ready(function(){
$('input[tag]').click(function(){
var theText = $('#<%= txt.ClientID %>');
theText.txt(theText.txt().replace('<cursor here>',this.tag);
})
});
If you don't have a string.replace method, extend one using prototype.
I think this shouldnt be difficult with jQuery.
Look at these links:
jQuery Tutorial
inserting-a-text-where-cursor-is-using-javascript-jquery
10-jquery-and-non-jquery-javascript-rich-text-editors

Need to create a datepicker in Asp.net?

I need to create a datepicker in asp.net.
Got a few in the web but lokking for some thing different.
Thanks
I suggest you use the jQueryUI datepicker plugin:
http://jqueryui.com/demos/datepicker/
Here is an example from jQuery UI website:
<script type="text/javascript">
$(function() {
$("#datepicker").datepicker();
});
</script>
<div class="demo">
<p>Date: <input id="datepicker" type="text"></p>
</div><!-- End demo -->
<div style="display: none;" class="demo-description">
<p>The datepicker is tied to a standard form input field. Focus on the input (click, or use the tab key) to open an interactive calendar in a small overlay. Choose a date, click elsewhere on the page (blur the input), or hit the Esc key to close. If a date is chosen, feedback is shown as the input's value.</p>
</div><!-- End demo-description -->
I agree Jquery is nice
http://www.ajaxline.com/10-best-jquery-datepickers-plugins
This is also nice, I have used this many time, very simple:
http://www.graymattersoft.com/NETProducts/GMDatePicker/tabid/68/Default.aspx
Have you tried the ASP.NET Ajax Calendar control? http://www.asp.net/AJAX/AjaxControlToolkit/Samples/Calendar/Calendar.aspx

Categories