I have a GridView with multiple date columns in it.
For dates, I use textboxes. I would like to use ajaxToolkit:CalendarExtender to make inserting dates easier. But if I place a ajaxToolkit:CalendarExtender in each ItemTemplate, it will make my page much slower. Could you please tell me how I can use one ajaxToolkit:CalendarExtender for all textboxes? I guess, the calendar should appear when the user clicks a textbox. And of course, the calendar should appear somewhere next to the textbox.
Thanks.
I suggest you yo use jQuery plug-in. Visit http://jqueryui.com/demos/datepicker/
this plug-in helps you.
I don't thing there's a way or a easy way to do it. You could think to use another component. Have you known datapicker from jquery ui ? It's nice, free, clean and fast calendar component. Using it, you can apply a css style in your textboxes and filter it by jquery doing a calendar, using datepicker, something like this:
your textboxes inside the gridview:
<asp:TextBox ID="txtDate1" runat="server" CssClass="date" />
<asp:TextBox ID="txtDate2" runat="server" CssClass="date" />
<asp:TextBox ID="txtDate3" runat="server" CssClass="date" />
and in bottom of your webform, you could do a jquery script
<script language='javascript'>
$(function() { // <- page_load in client side with jQuery
// get all inputs that has .date css style and apply datepicker
$("input.date").datepicker();
});
</script>
Read more about jquery ui to know how to setup it on your application (basically, add a javascript file and css file)
Take a look at these links:
http://www.jquery.com
http://jqueryui.com/demos/datepicker/
PS: Sorry for my english!
Related
I have 2 aspx files in my project. The first.aspx page has some content on it and when I click on a button, it will launch a frame (second.aspx that only has code to show a calendar) on the same page.
Now once that calendar(second.aspx) loads on first.aspx, I want to click a link on the calendar that will .show() a hidden DIV on the first.aspx page.
How do I access code cross pages? In other words, how can I write some code in second.aspx that will affect first.aspx.
What you're asking for is not really possible. You're probably approaching it the wrong way. What you should do is turn your calendar page into a user control so that it can be used seamlessly in first.aspx.
Here is how to get started with user controls in asp.net:
After you turn it into a user control there are different approaches to getting access to the properties of the user control from your page. Here is one approach using the FindControl method.
Hope that helps.
The easiest solution would be to show and hide your div with jquery. Simple give your div a class like:
<div class="myCalendarDiv" style="display:none" />
And your Button should look like this:
<asp:Button id="myButton" OnClientClick="return ShowCalendar();" runat="server" />
<script type="text/javascript">
function ShowCalendar() {
$(".myCalendarDiv").show();
return false;
}
</script>
Another way would be instead of creating a seprate webpage for the calendar, as proposed you can use a jquery dialog, or make a usercontrol and embedd it on the same page.
(Posted on behalf of the OP).
So since I was dealing with an Iframe, I found out that you can target the parent window which would be first.aspx.
I used "window.parent.MYFUNCTION();" to call my JavaScript function on first.aspx and show the div.
I have been having trouble updating the value for my input type=text or the texbox control text value with the jquery $(window).resize(function(){}); I know that the event fires because when i resize the browser an alert will appear. I also am using the functionality for something else.
It currently looks like this:
$(window).resize(function(){
if($(window).width()>1080){
var innerwidth = $(window).width()-170;
$("#div1").width(innerwidth);
}
I want to add this:
$(window).resize(function(){
if($(window).height()>500){
var innerheight = $(window).height();
$('input.hiddentest').val(innerheight);
}
I know that the issue lies with:
$('input.hiddentest').val(innerheight);
I have also tried this:
$('#texttest.ClientID').text(innerheight);
This is the input and the textbox below that I am using(note that the type used to be hidden, but i dont think that makes an issue and I wanted it to be visible for debugging purposes)
<input id="hiddentest" type="text" visible="true" name="hiddentest" onclick="test();" runat="server" value="1000" />
<asp:TextBox id="texttest" Visible="true" runat="server" Text="1000" />
Overall I have been looking for a way to dynamically update the values as the page resizes with the size of the page. My geuss is that i am not using the right thing to identify the id's. Thanks for taking the time to look at this and for any replies.
P.S. I am also open to the idea of using a javascript function instead but i can't even seem to get the function to fire for the resize event so it would require more help.
This is what i have so far:
window.onresize=Test();
function Test(){
var hdnfld= document.getElementById("texttest");
var testing = window.innerWidth;
alert(testing);
hdnfld.text= testing;
}
Use just ID of elements without dots (that actually represent the classes you don't have).
So use
$('#hiddentest').val(innerheight)
and
$('#texttest').val(innerheight)
Note that asp:TextBox renders as inptut type="text" so you still have to use .val() on it, not .text()
Hidden text box id is "hiddentest" so the code will be
$('#hiddentest').val(innerheight);
hiddentest is an id not a class in your case
Try,
$(window).resize(function(){
if($(window).height()>500){
var innerheight = $(window).height();
$('#hiddentest').val(innerheight);
}
});
<asp:TextBox id="texttest" Visible="true" runat="server" Text="1000" />
For the above asp.net textbox control, the ID changes dynamically when rendered (prepended with master and page information), id looks similar to main_ctrl100_texttest
var hdnfld= document.getElementById("texttest");, so this no longer holds good. Use a class instead.
<asp:TextBox id="texttest" Visible="true" runat="server" CssClass="texttest" Text="1000" />
var hdnfld = document.getElementsByClassName("texttest");
If you need more info on how to access .net controls using jquery, see here.
How can I retain client side html controls on postback? I have tried setting enableviewstate="true" but that did not work. A workaround I've done was to build a server side function that takes all the posted values and resets them via ClientScript.RegisterStartupScript and call this on every postback method. Is there an easier and more time efficient way of doing this?
You have have html control to keep their values on postback by making them runat="server" e.g.
<input type="text" id="txt1" runat="server" />
You need to create the controls at every postback. If you're looking for something a little easier to implement, take a look at the DynamicControlsPlaceholder control. It's a nifty little control that takes away most of the pain associated with persisting dynamic content.
Can you use HiddenField?
Now on clicking any button at client side, Preserve the data in HiddenField.
Use JQuery document.ready function to set the value again from HiddenField again. JQuery docuemnt.ready will be called on each Postback.
Iam trying to use System.Web.UI.WebControls.Calender.
But when I select any date , It post backs automatically. Is there any way to avoid this behavior.
(I dont see the usual property AutoPostback which I set to False to avoid this behavior)
I need the selected date only once user submits the form.
Note- I am using VS2008
I generally avoid avoid the MS calender control because I find it so hard to work with and style. Have you considered something like the jQuery UI date picker, works as you need and far easier to style after too.
http://jqueryui.com/demos/datepicker/#inline
It posts back to set the selected form on the UI. what you can do is use a client side calendar (like jquery ui) or use ajax calendar extender so it will not postback the whole page.
It is possible with MS Calendar. You can customize content of each cell in DayRender event:
protected void Calendar1_DayRender(object sender, DayRenderEventArgs e)
{
e.Cell.Text = e.Day.DayNumberText;
}
You can set e.Cell.Text to be div or span with text and javascript onclick event or link. You can put any HTML there.
You cannot disable "Autopostback" of the Standard Calendar control
I think you can use CalendarExtender from AjaxToolkit
<asp:TextBox ID="txtCalendarExtender" runat="server"></asp:TextBox>
<cc3:CalendarExtender ID="Calendar1" PopupButtonID="imgPopup" runat="server" TargetControlID="txtCalendarExtender" Format="dd/MM/yyyy">
</cc3:CalendarExtender>
Remember to add this code at the top of your page:
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc3" %>
Remember, there is a forum about this topic where PLBlum says:
The Calendar control included with ASP.NET uses postbacks only. If you added Microsoft ASP.NET AJAX to the page and put the calendar into an UpdatePanel, it can reduce the appearance of postbacks by using callbacks. But it still makes a trip to the server for each click on a date or month.
I'm pretty new to this, infact this is my first post.
I'm using Visual Studio 2005. On my .aspx page, I have a 'loginStatus' control so the user can logout of a page which works well. However the 'loginStatus' control is not a button, it's text ("logout"). Is it possible to make this into a button?
Here is the line of code:
<asp:LoginStatus ID="LoginStatus1" runat="server" OnLoggingOut="LoginStatus1_LoggingOut" />
Would I just add some style somehow? If so, please help me.
Thanks.
Haven't tested this, but it might solve your problem : forum post
Otherwise you might use jQuery to solve this. (I think...)
You can try this:
<asp:LoginStatus ID="HeadLoginStatus" runat="server"
LogoutAction="Redirect"
LogoutText="<input type='button' value='Log Out' />"
LogoutPageUrl="~/"/>
The LogoutText attribute contains the definition of a simple button, that you can customize with css and js.
Just use LoginImageUrl or LogoutImageUrl
<asp:LoginStatus runat="server"
LogoutImageUrl="~/App_Themes/Theme1/Images/logout.png"
LoginImageUrl="~/App_Themes/Theme1/Images/login.png" />
Using JavaScript:
Grab the url of the link and add a button which, when onclick'ed, points the browser to that url. Then add display:none to the original link with CSS.
You can also use an image as Colin says, but that would fake a button and I assume you want a real button.
YOu could try to render it using an Image, as stated here
The LoginStatus control displays either a text or an image link, depending on the setting of the LoginImageUrl and LogoutImageUrl properties. You can display either text or images for one or both states.
Cheers, I will have a look into this :)
I think it's strange that the option of turning it into a button is not already available.
You could wrap the LoginStatus inside of a LinkButton (Or any kind of button).
<asp:LinkButton id="LinkButton1" runat="server">
<asp:LoginStatus id="LoginStatus1" runat="server" />
</asp:LinkButton>
then use the LinkButton1 events.
You could always just extend the LoginStatus control by creating a derived class, and overriding the rendering behaviour to change the output elements into your desired elements, or add style attributes, or whatever.
(apologies for VB)
Public Class MyLoginStatus
Inherits System.Web.UI.WebControls.LoginStatus
Public Overrides Sub RenderBeginTag(ByVal writer As System.Web.UI.HtmlTextWriter)
writer.AddStyleAttribute("display", "none")
MyBase.RenderBeginTag(writer)
End Sub
End Class
This kind of behaviour could be extended to turn the output into a button, if you so wish, either in aggregate (modifying the final rendered output by creating your own HtmlTextWriter enclosing a StringWriter and invoking the base methods), or by injecting your own behaviour into the relevant render events.
Have you looked into Control Adapters - this allows you to alter the HTML generated. It's primarily used for adapting HTML for different browsers and devices, but can be used to have complete control over server controls.
Lee
I know this is an old post but I'll chime in.
Here's a very simple way to make a button out of the LoginStatus control. Set the control CssClass to a bootstrap button and your good to go. Whatever text you have for the login and logout will go into the button.
<asp:LoginStatus ID="LoginStatus1" runat="server" CssClass="btn btn-primary" LogoutPageUrl="yourlogin.aspx" />
http://www.w3schools.com/bootstrap/bootstrap_buttons.asp