Changing focus when date selected in CalendarExtender control

This may fall more within the realm of general ASP.NET web development, but since it's regarding an AJAX Control Toolkit control, I thought it'd be best posted here.

I'm finding a "feature" of the calendar extender behavior to be be quite annoying. It seems that by default when a date is selected on the calendar and the selected date displays in the associated textbox, the calendar itself stays displayed and the only way I've found to get rid of it is to click anywhere outside the calendar itself. You can't tab out of it to the next textbox, Enter won't get rid of it, etc.

I'm sure there's a way to have the calendar collapse when the date is changed, but I just don't know how - could someone provide a way to do this?

Here's the code for my calendarextender:

<asp:TemplateField HeaderText="Date"><ItemTemplate><asp:Label ID="lblWeatherDate" runat="server" Text='<%# Bind("WeatherDate", "{0:dd-mm-yyyy}")%>' /></ItemTemplate><EditItemTemplate><%-- OnTextChanged="txtWeatherDate_OnTextChanged" --%><asp:TextBox ID="txtWeatherDate" Text='<%# Bind("WeatherDate")%>' runat="server"TabIndex="0" Width="80px" Font-Size="10px" /><ajaxToolkit:MaskedEditExtender ID="editExtWeatherDate" runat="server" TargetControlID="txtWeatherDate" Mask="99/99/9999" MaskType="Date" MessageValidatorTip="True" OnFocusCssClass="MaskedEditFocus" OnInvalidCssClass="MaskedEditError" ErrorTooltipEnabled="True" /><ajaxToolkit:MaskedEditValidator ID="editValidatorWeatherDate" runat="server" ControlExtender="editExtWeatherDate" ControlToValidate="txtWeatherDate" IsValidEmpty="True" InvalidValueMessage="Invalid entry. Select a date from the calendar or enter the format "mm\dd\yyyy"" Display="Dynamic" InvalidValueBlurredMessage="Error" /><ajaxToolkit:CalendarExtender ID="calExtWeatherDate" runat="server" Enabled="True" TargetControlID="txtWeatherDate" Format="MM/dd/yyyy" /></EditItemTemplate></asp:TemplateField>

As you can see I tried messing with the OnTextChanged of the textbox and started up with this code:

Sub txtWeatherDate_TextChanged(ByVal senderAs Object,ByVal eAs EventArgs)Handles txtWeatherDate.TextChangedDim txtWeatherDateAs TextBox =Me.gvWeather.FindControl("txtWeatherDate")txtWeatherDate.End Sub

But I couldn't figure out where to go with that. I was looking for something to do with changing the focus of the textbox, but couldn't figure that out.

Any help would be greatly appreciated.

Thanks!

this is in c# but this is how i get the calendar extender to close on date click

to close the calendar onClick i set this up in the code behind

//Hide the calendarprotected override void OnLoad(EventArgs e) { Page.ClientScript.RegisterClientScriptBlock(this.GetType(),"hideCalendar", @."function hideCalendar(cb) { cb.hide(); }",true);base.OnLoad(e); }

and this is what the asp code looks like

 <cc1:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID="txtDate" OnClientDateSelectionChanged='hideCalendar'>

Hey, keyboardcowboy

Thanks for the code. It was pretty much a copy-paste thing. The C# converted nicely in a code converter. After selecting the date, the calendar disappears, as it should.

However, the oddest thing is happening now: The date displays in the date label as "dd-00-yyyy". I.e. the proper date number,two zeros for the month, then the proper year. This is regardless of what formatting I use for either the extender or the textbox (I was usingFormat="MM/dd/yyyy" in the extender). The date in the sql table it's coming from is correct and the date can be changed and saved (this is in a gridview) properly and it is even displayed properly when the textbox is showing while the gridview is in edit mode. It's just messed up in the label.

I was using the following for the bound text value for the date label:Text='<%# Bind("WeatherDate", "{0:dd-mm-yyyy}")%>'.When I remove the formatting string the date displays properly, but with the time as well. I can't get the date formatted to mm-dd-yyyy now!

Any thoughts?

Thanks

Okay, I caught one thing I was doing wrong: I was using two different formats: dd-mm-yyyy in the label and mm-dd-yyyy in the textbox.

But unfortunately, getting those two to the same format didn't fix the display problem. It's still displaying the month as two zeros (00). And that's regardless of whether I set the format as dd-mm-yyyy or mm-dd-yyyy.

Weird...

weird. maybe if that format string you are trying doesnt work you can try this .ToShortDateString(); that will display a date but without the time. it works in c# in sure it does in vb also so try this (not sure if it will work because i think casting types is different in vb)

Text='<% # ((DateTime)Bind("WeatherDate")).ToShortDateString()%>'

Yeah - I tried just putting it in my label, but got a build error, saying "DateTime" is a type and cannot be used as an expression. I don't know quite enough to know how to change it to work for my VB code.

Okay - found out CDate is used for casting dates. But I can't find quite the right syntax. I've tried: Text='<%# Bind(CDate("WeatherDate")).ToShortDateString() %>' , and Text='<%# CDate(Bind("WeatherDate")).ToShortDateString() %>' and even Text='<%# Bind((CDate("WeatherDate")).ToShortDateString()) %>' so far, but got build errors saying the Bind was not well formed.

Anyone know what the correct syntax would be in this case?

Thanks

I would make a new topic for the problem with your date and give it a title about the date. Some people will know how to do this in vb but will not check this post because it is about calendar stuff :P

Good idea. Will do. Thanks for your help - you got me further than I was an hour ago!

Regards

Changing Background color of grid row when row checkbox selected

What option should I choose:

1) Write java script for this

2) Write server code and have grid in UpdatePanel

?

Not clear what the best guidline would be. I am already using update panel for that grid.

I guess the best solution should be if I have defined this background color in CSS.. I guess I could use java script to change the class name dynamicly and have that class defined in CSS. Not sure how to do it...

Here's some sample code I use in my custom ajaxed gridview control...

May or not work for you but should give you some idea..

 protectedvirtualvoid GridView_RowDataBound(Object s,GridViewRowEventArgs e)
{
if (e.Row.RowType ==DataControlRowType.DataRow )
{
//Note: Here is where we change the button submit so that

//our IPostBackHandler can properly handle AJAX requests.

int editID = (int)DataBinder.Eval(e.Row.DataItem,"id");

e.Row.Attributes.Add("onMouseOver","SetNewColor(this);");

e.Row.Attributes.Add("onMouseOut","SetOldColor(this);");

e.Row.Attributes.Add("onDblClick", Page.ClientScript.GetPostBackEventReference(this, e.Row.RowIndex.ToString()));

e.Row.Attributes.Add("onKeyDown","if( event.keyCode == 13 ) " + Page.ClientScript.GetPostBackEventReference(this,"KEYDOWN" +"$" + e.Row.DataItemIndex.ToString()));

Here is the code for adding it to the script manager on the prerender() phase

protected override void OnPreRender(EventArgs e) {string script = @." var _oldColor; function SetNewColor(source) { _oldColor = source.style.backgroundColor; source.style.backgroundColor = '#00ff00';} function SetOldColor(source) { source.style.backgroundColor = _oldColor; }"; ScriptManager.RegisterClientScriptBlock(this,typeof(Page),"ToggleScript", script,true);

Here is the aspx / ascx .Net code to use if you do not wanna do the PreRender event...

<script language="javascript" type="text/javascript"> var _oldColor; function SetNewColor(source) { _oldColor = source.style.backgroundColor; source.style.backgroundColor = '#00ff00';} function SetOldColor(source) { source.style.backgroundColor = _oldColor; } </script>

That should set you on the right direction....at least...

I have tried your aproach, I have created very similar code, but in my code I want to change ackground colour when the checkbox is chcked... It changes the color, but than it does not reverse it back to the old color... Any idea?

function highLight(CheckBoxObj){

var _oldColor;

if (CheckBoxObj.checked ==true) {

_oldColor = CheckBoxObj.parentElement.parentElement.style.backgroundColor;

CheckBoxObj.parentElement.parentElement.style.backgroundColor ='#D6DEEC';

//'#88AAFF';

}

else

{

CheckBoxObj.parentElement.parentElement.style.backgroundColor = _oldColor;

}

OK, I almost figured this out. My _OldColor variable needs to be global, outside of the function of course. OK, it seems to be working for one chcekbox at the time, but when multiple checkboxes are selected it doe not work. My guess would be I need to put the saved value to the array, but not sure how to do it...

var _oldColor;

function highLight(CheckBoxObj){

if (CheckBoxObj.checked ==true) {

_oldColor = CheckBoxObj.parentElement.parentElement.style.backgroundColor;

CheckBoxObj.parentElement.parentElement.style.backgroundColor ='#D6DEEC';

//'#88AAFF';

}

else

{

CheckBoxObj.parentElement.parentElement.style.backgroundColor = _oldColor;

}

In fact I suspect you may have the same problem happening in yourcode as you also do not put it (old color) into an array...

I was merely interested in just showing it highlighted for editing not necessarily for the checkboxes although that would be a nice feature to incorporate...

here some SAMPLE CODE to bite your teeth into - its out of the ajaxtoolkit... shows how to at least work with the arrays:

disableTab :function()

var i = 0;

var tagElements;

var tagElementsInPopUp =new Array();

this._saveTabIndexes.clear();

//Save all popup's tag in tagElementsInPopUp

for (var j = 0; j <this._tagWithTabIndex.length; j++) {

tagElements =this._foregroundElement.getElementsByTagName(this._tagWithTabIndex[j]);

for (var k = 0 ; k < tagElements.length; k++) {

tagElementsInPopUp[i] = tagElements[k];

i++;

}

}

Its from the ModalBehavior.js if you need to examine it a bit more...

Also some of the checkboxes can be initially checked as I keep track of those checked if user changes the pages... I used some code for this, I found on the web...

Thank you very much, the problem is how to get an index of the curren checkbox in the function (I am new to js):

function highLight(CheckBoxObj){

//var theBox=(spanChk.type=="checkbox")?spanChk:spanChk.children.item[0];

//xState=theBox.checked;

//elm=theBox.form.elements;

//for(i=0;i<elm.length;i++)

//if(elm[i].type=="checkbox" && elm[i].id!=theBox.id)

//{

////elm[i].click();

//if(elm[i].checked!=xState)

//elm[i].click();

if (CheckBoxObj.checked ==true) {

_oldColor = CheckBoxObj.parentElement.parentElement.style.backgroundColor;

CheckBoxObj.parentElement.parentElement.style.backgroundColor ='#D6DEEC';

//'#88AAFF';

}

else

{

CheckBoxObj.parentElement.parentElement.style.backgroundColor = _oldColor;

}

This is my checkbox declaration (onclick works somehow, even not recognized by VS editor...):

<ItemTemplate>

<asp:CheckBoxid="chkActive"onclick="javascript:highLight(this);"runat="server"></asp:CheckBox>

</ItemTemplate>

CascadingDropDownList and a MySQL database

How to use CascadingDropDownLists bound to a MySQL-database? I want a parent DDList with items selected from one table and a second DDlist with items selected from another table based on the value selected in the first one. But how to write the asmx-file?

Hi,

First, you can refer to this documentation for how to use it with a database. http://ajax.asp.net/ajaxtoolkit/Walkthrough/CCDWithDB.aspx

Then, as far as I know, MySql provides db driver for .net which can be used in a similar way as the build-in ADO.NET does. You can download it from their website and try to implement it according to the above documentation.

Hope this helps.

CascadingDropDown: Pulling selected values from a cookie

I am using the CascadingDropDown extender from the AjaxControlToolkit and I was wondering if there was an easy way to set the selected value and to populate child drop downs when the page loads. I am storing a users previous selections in a cookie so when they start a new form these values are already selected. I did some looking at the CascadingDropDown code but I didn't see an easy way to accomplish this. Does anyone know an easy way to do it?

Or am I going to have to cobble some JS together to make it happen?

Thanks.

Derek

Couldn't you just do something like

myCascadingDropdownListExtender.SelectedValue = Request.Cookies("MyCookie")

on Page_Load ? It works for me.

CascadingDropDown problem with the v1.0 version

Hi all,

in one of my pages, i have two dropdowns: one for listing countries and the second for listing the states/provinces of the country selected in the first one dropdown.

When i was using the AJAX Release candidate version, I used the cascadingdropdown without problem. But when i installed the v1.0, the cascadingdropdown stop updating the second dropdown, as used to. Is there someone who can tell me what i am doing wrong?

Part of my code in the aspx file:

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:UpdatePanel id="UpdatePanel1" runat="server" UpdateMode="Conditional" RenderMode="Inline">
<ContentTemplate>

<TABLE style="WIDTH: 100%; TEXT-ALIGN: left">
<TBODY> <TR>
<TD style="WIDTH: 328px; TEXT-ALIGN: left">
<asp:DropDownList id="CountryDropDownList" tabIndex=12 runat="server" Width="204px" AutoPostBack="True" DataTextField="Name" DataValueField="Id"></asp:DropDownList>
</TD>

<TD style="WIDTH: 328px; HEIGHT: 24px; TEXT-ALIGN: left">
<asp:DropDownList id="ProvinceDropDownList" tabIndex=12 runat="server" Width="204px" DataTextField="Name" DataValueField="Id"></asp:DropDownList>
</TD>
</TBODY>
</TABLE>

<cc1:CascadingDropDown id="CascadingDropDown1" runat="server" TargetControlID="CountryDropDownList" Category="Country" ServicePath="CustomerSignUp.aspx" ServiceMethod="GetAllCountries" PromptText="<%$ Resources:Messages, SelectCountry %>" LoadingText="<%$ Resources:Messages, Loading %>"></cc1:CascadingDropDown>

<cc1:CascadingDropDown id="CascadingDropDown2" runat="server" TargetControlID="ProvinceDropDownList" Category="Province" ServicePath="CustomerSignUp.aspx" ServiceMethod="GetCountryProvinces" PromptText="<%$ Resources:Messages, SelectProvince %>" LoadingText="<%$ Resources:Messages, Loading %>" ParentControlID="CountryDropDownList"></cc1:CascadingDropDown>

</ContentTemplate>
</asp:UpdatePanel>

</asp:Content>

Methods in the aspx.cs file:

[WebMethod]
public static CascadingDropDownNameValue[] GetAllCountries(string knownCategoryValues, string category)
{
List<CascadingDropDownNameValue> values = new List<CascadingDropDownNameValue>();
ICollection<Country> countries = KinocastFacade.Instance.GetAllCountries();
foreach (Country country in countries)
{
values.Add(new CascadingDropDownNameValue(
Resources.Messages.ResourceManager.GetString(country.Name), country.Id.ToString()));
}

return values.ToArray();

}

[WebMethod]
public static CascadingDropDownNameValue[] GetCountryProvinces(string knownCategoryValues, string category)
{
StringDictionary kv = CascadingDropDown.ParseKnownCategoryValuesString(
knownCategoryValues);
int countryId;

/*Verifica se a chave country está no StringDictionary e se é possivel
*fazer o parse do seu valor para inteiro. Se possivel coloca o valor
*em countryId*/
if (!kv.ContainsKey("Country") ||
!Int32.TryParse(kv["Country"], out countryId))
{
return null;
}

List<CascadingDropDownNameValue> values = new List<CascadingDropDownNameValue>();
ICollection<Province> provinces = KinocastFacade.Instance.GetCountryProvinces(countryId);
foreach (Province province in provinces)
{
values.Add(new CascadingDropDownNameValue(
Resources.Messages.ResourceManager.GetString(province.Name), province.Id.ToString()));
}

return values.ToArray();
}

Thanks a lot for any help,

Rodrigo

Anyway,

I've just resolved my problem re-creating the project, including all my files and modules again. And at the end, i include the AjaxControlToolkit.dll (version 1.0.10301.0) and the cascadingdropdown problem disapeared.

Maybe, it had happened because the VS saves some olds DLLs in a limbo place :p ...... I dont know...

Cheers.