Hi,
I want to hide first calendar when a second is open or when the calendar field lost focus. The issue is that if the user doesn't select any date from calendar and go to other control in page the calendar doesn't hide, only when user select any date from calendar the popup hides. This capture show the problem.
I see that in ajaxtoolkit calendarextender sample page the calendar control works fine, when out from one to another calendar prior popup hides but I don't find the sample code of this page. I think this page manage in javascript the event when the focus is lost, but I had found any sample code or project ...
Thank you in advance!
As Yuri mentions, using an ImageButton fixes this... or...
You need to handle the onmouseout event. You can do it this way:
http://forums.asp.net/p/1182269/4708411.aspx/1?Re+Calendarextender+and+Lose+Focus+Or+Mouse+Out
Or you could add some javascript (via jQuery) and inject an onmouseout event:
Adding extra functions to an image's onmouseout attribute
This is also shown in the forums.asp.net link, but basically, on the onmouseout event you can just set the visibility of the calendar extender to hidden or none.
As an option in addition to solutions provided by dash, you may use following decision if you don't want to use ImageButton instead of Image for PopupButton: set OnClientShowing properties on extenders to "hideAnotherOpenedPoups" and add onto a page script below.
// Array of BehaviorIds of each extender for those you use Image as PopupButton
var behaviorIds = ["CalendarExtender1", "CalendarExtender2"];
function hideAnotherOpenedPoups(sender) {
for (var index = 0; index < behaviorIds.length; index++) {
if (behaviorIds[index] !== sender.get_id()) {
var extender = $find(behaviorIds[index]);
if (extender.get_isOpen()) {
extender.hide.call(extender);
}
}
}
}
Try the following line of code to show the calendar on both Textbox and Image click.
<asp:TextBox runat="server" onclick="showCalendar();" onfocusout="showCalendar();" ID="txtDate" />
<asp:ImageButton runat="Server" ID="imgPopup" AlternateText="Click to show calendar" />
<cc1:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID="txtDate" CssClass="MyCalendar" Format="MMMM d, yyyy" PopupButtonID="imgPopup" />
and add a javascript function like this
<script type="text/javascript">
function showCalendar() {
$( "#<%=imgPopup.ClientID %>" ).trigger( "click" ); //I've used .ClientID here just in case your page is inherited from a Master page
}
</script>
That should display the calendar when you click on the Textbox, and the calendar will be hidden once you click anywhere else on the form
Related
I use asp:AutoCompleteExtender control in my page.
Here is control:
<asp:AutoCompleteExtender ID="txtStreet_AutoCompleteExtender" runat="server" DelimiterCharacters=""
Enabled="True" MinimumPrefixLength="2" ServiceMethod="GetCompletionList" ServicePath=""
TargetControlID="txtStreet">
</asp:AutoCompleteExtender>
I also have javascript function named sizeCalc(autoCompleteHeight) the function has parameter named autoCompleteHeight that get height of the autoComplete popup.
My question is how can fire sizeCalc function when autoComplete popup appears and pass the height of the autoComplete popup window?
here it's getting fired for a MinimumPrefixLength so we're gonna check based on that.
This is using jQuery assuming it's a normal textbox or you'll need to give your server control a clientID attribute.
$('#txtStreet').keyup(function() {
if(this.value.length > 2)
{
//your code
}
});
I am working with Telerik Ajax control RadOrgChart
I want to capture when a node was clicked (in fact right clicked) in an OrgChart. I want the event to pass the ID of the node clicked.
I cannot find any such event in OrgChart.
Can anyone please suggest how to do it.
Thanks
Reading the documentation i see that RadOrgChart doesnt have a event handler for node click, so i think you could make your own ItemTemplate and handle the click of the items of the template, something like this.
<telerik:RadOrgChart ID="RadOrgChartDirectReports1" EnableViewState="true" Skin="Office2010Silver"
runat="server">
<ItemTemplate>
<asp:Button CausesValidation = "false" OnClick="LinkButton_Click" CommandArgument='<%# DataBinder.Eval(Container.DataItem, "EmployeeId")%>'
runat="server" Text = "Click" ID="LinkButtonNode"></asp:Button>
</ItemTemplate>
</telerik:RadOrgChart>
in this example you put a button inside a item, so, you can handle the button click.
Thanks Ewerton.
I found a better way to do it on client side instead.
Each of the telerik orgchart nodes have default css class, so something like this work:
$telerik.$(".rocItem").click(function (e) {
var orgChart = $find("<%= RadOrgChart1.ClientID %>");
var index = orgChart._extractGroupItemFromDomElement(e.target).get_index();
var hierarchicalIndex = orgChart._extractNodeFromDomElement(e.target)._getHierarchicalIndex();
hierarchicalIndex = orgChart._getRealHierarchicalIndex(hierarchicalIndex);
alert("Clicked " + hierarchicalIndex);
})
Hey I have a Terms and Conditions Text area which has a scroll bar and a normal ASP.NET button below that.
I was wondering how could I disable this button till the user scroll till the end of terms and conditions.
This is something that's best accomplished client-side - are you already using a library such as jQuery or something else?
Setting up the following works a treat:
<asp:TextBox runat="server" id="termsConditions"
TextMode="MultiLine" Rows="10" Columns="50">
Lots of text here[...]
</asp:textbox>
<asp:button runat="server" id="accept" text="Accept" />
<script type="text/javascript">
// Using jQuery, other options are available
// pick up the button, and disable it, keeping the button for later.
// Note the use of the ClientID property of the ASP.NET controls - this allows
// us to cleanly pick up the client side id of the objects.
var button = $("#<%= accept.ClientID %>");
button.attr("disabled", "disabled");
// pick up the textarea.
var terms = $("#<%= termsConditions.ClientID %>");
// bind to the textarea's scroll event
terms.scroll(
function () {
// Compare the scollHeight (the complete height of the textarea), with the
// combination of the current position (scrollTop) and the offsetHeight.
if (terms[0].scrollHeight < (terms[0].offsetHeight + terms[0].scrollTop)) {
// Re-enable the button
button.attr("disabled", null);
}
});
</script>
ours is not to reason why, here's an example
http://www.27seconds.com/kb/article_view.aspx?id=56
i m working on simple asp.net and in that i am using validators.
my situation is like that i have used reaquired field validator its working fine.
and after that if i ented data and fired insert query then data is inserted and sucessful message is displyed on the lable. but agin if i clik on submit button with empty fields then validator works but the lable of successful message does not disapper. how to hide that lable.
You need to use javascript to hide the success message, here is a sample
<script type="text/javascript">
function hide() {
document.getElementById('<%=lblSuccess.ClientID %>').style.display = 'none';
return false;
}
</script>
<asp:Label ID="lblSuccess" runat="server" Text="Success"></asp:Label>
..your form code
<asp:Button ID="btnOk" runat="server" Text="OK" OnClientClick="hide()" ValidationGroup="ValidateForm" />
Why javascript, the form doesn't get posted because validators don't let the form to be posted if the conditions aren't met, so you are left to hide the message dynamically with javascript
<script type="text/javascript">
function Hide() {
document.getElementById("Lable1").style.display = 'none';
return false;
}
</script>
<asp:Button ID="Button1" OnClientClick="Hide()" runat="server" onclick="Button1_Click" Text="Button"/>
and use
if (Page.IsValid){}
on clik event.
Show us some code of what you're up to and we can tell you more precisely where you are going wrong. In a nutshell though the visibility of that message is going to be persisted through a postback so you have to explicitly tell it to not be visible if validation has failed.
Set the label to visable=false and on save set the text value if required and change visible =true ?
On form load, do something like this:
TheValidMessageLabel.Visible = Page.IsValid;
You are probably just setting the visible state to true when it's valid and never setting it to false again.
Set your success label visibility in page load to false.
And only if operation is successfully set that label visibility to true.
cheers
I have an ASP.NET page that is basically a search form. My code for this form looks like this:
<form id="mainForm" runat="server">
Search For: <asp:TextBox ID="searchTB" runat="server" />
<input id="myButton" runat="server" type="button" value="Go"
onclick="disableButton(this);" onserverclick="myButton_Click" />
<script type="text/javascript">
function disableButton(b) {
b.disabled = true;
b.value = "Searching...";
}
</script>
</form>
This code works fine as long as a user manually clicks the button. However, if a user hits the "Enter" key, the search is not performed. My question is, how do I set an HTML button to the default button in an ASP.NET page when client-side scripting is involved?
Thank you!
Have you tried the onkeypress event? Bind it to the same function and it should work.
For enter to work by default, your button needs to be the first one on the page and it should be type="submit" rather than type="button".
You could also try changing your input to a standard asp.net button. If you change your javascript function to return true, the post click of the button should still work. However to bind 2 events to the button you may need to add the client side click in your page load method.
myButton.Attributes.Add("onclick", "return disableButton(this)");
ASP.NET 2.0 - Enter Key - Default Submit Button