Correcting AJAX Calendar Extender Popup Calendar Position

Recently I encountered a positioning error in AJAX calendar extender. When I use the calendar extender inside of other container controls the popup calendar started appearing few inches above the button. You will be able to get an idea of the problem by the following image.

Since I couldn’t get it fixed by changing the properties I thought to find a solution for this.

One way to correct this is by applying a CSS style sheet to change the calendar positioning manually. I found this method while searching the web. This way since you need to enter the location of the calendar you need to try several times to get the correct positioning. If you are using this method simply place the following CSS style in your page and apply the style as shown. Remember you need to change the value to suit your form.

1. <style type="text/css">
2.     .fromDtPos
3.     {
4.         left: 245px !important;
5.     }
6. </style>

Apply the style to your calendar extender.

1. <cc2:calendarextender id="calExpiry" runat="server" targetcontrolid="txtExpiry"
2.     format="dd MMM yyyy" popupbuttonid="imgExpiry" enabled="True" cssclass="ajax__calendar fromDtPos">
3. </cc2:calendarextender>

My preferred way to do this is by using the JavaScript that I wrote below. Since you do not need to enter the position manually this will be easier. Also this code will work irrespective of the number of parent containers it is having above of the control.

Insert the below JavaScript into your page.

1. <script type="text/javascript" language="javascript">
2.     function showCalendar(sender, args) {
3.         var processingControl = $get(sender._button.id); // Getting the control which triggered the calendar.
4.         sender._popupDiv.parentElement.style.top = processingControl.offsetTop + processingControl.height + 'px';
5.         sender._popupDiv.parentElement.style.left = processingControl.offsetLeft + 'px';
6.  
7.         var positionTop = processingControl.height + processingControl.offsetTop;
8.         var positionLeft = processingControl.offsetLeft;
9.         var processingParent;
10.         var continueLoop = false;
11.  
12.         do {
13.             // If the control has parents continue loop.
14.             if (processingControl.offsetParent != null) {
15.                 processingParent = processingControl.offsetParent;
16.                 positionTop += processingParent.offsetTop;
17.                 positionLeft += processingParent.offsetLeft;
18.                 processingControl = processingParent;
19.                 continueLoop = true;
20.             }
21.             else {
22.                 continueLoop = false;
23.             }
24.         } while (continueLoop);
25.  
26.         sender._popupDiv.parentElement.style.top = positionTop + 'px';
27.         sender._popupDiv.parentElement.style.left = positionLeft + 'px';
28.     }
29. </script>

Then call the function showCalendar on onClientShown event of the calendar extender as seen below.

1. <cc2:calendarextender id="calExpiry" runat="server" targetcontrolid="txtExpiry"
2.     format="dd MMM yyyy" popupbuttonid="imgExpiry" enabled="True" onclientshown="showCalendar">
3. </cc2:calendarextender>

Both of the above methods will correct the appearance of the popup calendar of the AJAX Calendar Extender as seen below.

Aldinga Beach – South Australia

If you are a beach person then Aldinga beach is a place not to miss. One speciality in this South Australian beach is that you can take your vehicle into the beach and have a drive. Since the sand is hard on this beach you do not need a 4WD, a normal 2WD car will do the job, but do not get over excited since then there is a chance you can get into trouble.

Without trying to explain using words I will upload some photos I have taken since a picture is worth thousand words.

Aldinga Beach VIEW SLIDE SHOW DOWNLOAD ALL

While we were there, we experienced an extraordinary scene provided by mother nature. Suddenly on top of wet sand we started seeing sand flying with wind for few minutes. Just enjoy it by watching the following video.

Aldinga Beach – Sandy Wind

Map

View Larger Map

HTTP Error 500.19 – Internal Server Error

Recently in one of my machines I got the above HTTP error when running an application hosted on IIS 7. The detailed error was as below.

“This configuration section cannot be used at this path. This happens when the section is locked at a parent level. Locking is either by default (overrideModeDefault="Deny"), or set explicitly by a location tag with overrideMode="Deny" or the legacy allowOverride="false".”

After doing some troubleshooting I was managed to get this error fixed by reinstalling ASP.Net by running the aspnet_regiis –ir command.

For more information on running the command please refer to my old article Unable to start debugging on the web server.

Styles missing in CalendarExtender

When you put an Ajax Calendar Extender inside of a GridView you will see the calendar without any styling on it meaning the calendar will show only the dates overlapping with other items on your form. Sometimes some dates might even be missing. See the sample appearances below.

This happens because the style sheets are not loaded at the correct time due to a bug in toolkit, there are several ways to fix this.

One is to add another calendar extender outside of the update panel and keep it hidden.

Another is to disable partial rendering in the script manager. But this will slow down your site reducing the benefits gained from AJAX.

1. <asp:ScriptManager ID="ScriptManager1" EnablePartialRendering="false" runat="server">
2. </asp:ScriptManager>

My chosen method is to add the styles manually to the style sheet. To move forward this way simply copy the following styles which are used by the calendar extender to your style sheet.

1. .ajax__calendar_container {padding:4px;cursor:default;width:170px;font-size:11px;text-align:center;font-family:tahoma,verdana,helvetica;}
2. .ajax__calendar_body {height:139px;width:170px;position:relative;overflow:hidden;margin:auto;}
3. .ajax__calendar_days, .ajax__calendar_months, .ajax__calendar_years {top:0px;left:0px;height:139px;width:170px;position:absolute;text-align:center;margin:auto;}
4. .ajax__calendar_container TABLE {padding:0px;margin:0px;font-size:11px;}
5. .ajax__calendar_container TD {padding:0px;margin:0px;font-size:11px;}
6. .ajax__calendar_header {height:20px;width:100%;}
7. .ajax__calendar_prev {cursor:pointer;width:15px;height:15px;float:left;background-repeat:no-repeat;background-position:50% 50%;background-image:url(../images/arrow-left.gif);}
8. .ajax__calendar_next {cursor:pointer;width:15px;height:15px;float:right;background-repeat:no-repeat;background-position:50% 50%;background-image:url(../images/arrow-right.gif);}
9. .ajax__calendar_title {cursor:pointer;font-weight:bold; margin-left:15px; margin-right:15px;}
10. .ajax__calendar_footer {height:15px;}
11. .ajax__calendar_today {cursor:pointer;padding-top:3px;}
12. .ajax__calendar_dayname {height:17px;width:17px;text-align:right;padding:0 2px;}
13. .ajax__calendar_day {height:17px;width:18px;text-align:right;padding:0 2px;cursor:pointer;}
14. .ajax__calendar_month {height:44px;width:40px;text-align:center;cursor:pointer;overflow:hidden;}
15. .ajax__calendar_year {height:44px;width:40px;text-align:center;cursor:pointer;overflow:hidden;}
16.  
17. .ajax__calendar .ajax__calendar_container {border:1px solid #646464;background-color:#ffffff;color:#000000;}
18. .ajax__calendar .ajax__calendar_footer {border-top:1px solid #f5f5f5;}
19. .ajax__calendar .ajax__calendar_dayname {border-bottom:1px solid #f5f5f5;}
20. .ajax__calendar .ajax__calendar_day {border:1px solid #ffffff;}
21. .ajax__calendar .ajax__calendar_month {border:1px solid #ffffff;}
22. .ajax__calendar .ajax__calendar_year {border:1px solid #ffffff;}
23.  
24. .ajax__calendar .ajax__calendar_active .ajax__calendar_day {background-color:#edf9ff;border-color:#0066cc;color:#0066cc;}
25. .ajax__calendar .ajax__calendar_active .ajax__calendar_month {background-color:#edf9ff;border-color:#0066cc;color:#0066cc;}
26. .ajax__calendar .ajax__calendar_active .ajax__calendar_year {background-color:#edf9ff;border-color:#0066cc;color:#0066cc;}
27.  
28. .ajax__calendar .ajax__calendar_today .ajax__calendar_day {border-color:#0066cc;}
29. .ajax__calendar .ajax__calendar_today .ajax__calendar_month {border-color:#0066cc;}
30. .ajax__calendar .ajax__calendar_today .ajax__calendar_year {border-color:#0066cc;}
31.  
32. .ajax__calendar .ajax__calendar_other .ajax__calendar_day {background-color:#ffffff;border-color:#ffffff;color:#646464;}
33. .ajax__calendar .ajax__calendar_other .ajax__calendar_year {background-color:#ffffff;border-color:#ffffff;color:#646464;}
34.  
35. .ajax__calendar .ajax__calendar_hover .ajax__calendar_day {background-color:#edf9ff;border-color:#daf2fc;color:#0066cc;}
36. .ajax__calendar .ajax__calendar_hover .ajax__calendar_month {background-color:#edf9ff;border-color:#daf2fc;color:#0066cc;}
37. .ajax__calendar .ajax__calendar_hover .ajax__calendar_year {background-color:#edf9ff;border-color:#daf2fc;color:#0066cc;}
38.  
39. .ajax__calendar .ajax__calendar_hover .ajax__calendar_title {color:#0066cc;}
40. .ajax__calendar .ajax__calendar_hover .ajax__calendar_today {color:#0066cc;}
41.  
42. /* styles for invalid dates as defined by startDate and endDate*/
43. .ajax__calendar .ajax__calendar_invalid .ajax__calendar_day {background-color:#ffffff;border-color:#ffffff; color:#646464; text-decoration:line-through; cursor:default;}
44. .ajax__calendar .ajax__calendar_invalid .ajax__calendar_month {background-color:#ffffff;border-color:#ffffff; color:#646464; text-decoration:line-through; cursor:default;}
45. .ajax__calendar .ajax__calendar_invalid .ajax__calendar_year {background-color:#ffffff;border-color:#ffffff; color:#646464; text-decoration:line-through; cursor:default;}
46.   .ajax__calendar .ajax__calendar_invalid .ajax__calendar_today{visibility:hidden; cursor:default;}

Note that the above CSS uses the “arrow-left.gif” and “arrow-right.gif” for the previous and next buttons. If you want, you can use any other image which suits you. In case you need the originals they are below. To correctly show the previous and next buttons you need to place these images on to the “Images” folder under your project. If the folder is different in your project please change the image paths in the above CSS.

• arrow-left.gif -
• arrow-right.gif -

After doing all this remember to link the style sheet to your web page.

1. <link href="Styles/Site.css" rel="stylesheet" type="text/css" />

If you have done everything correctly your calendar will be shown properly while residing inside of the grid.

Reloading a Page using JavaScript

Ways to reload a page using Java script.

When doing web development if you need to reload / refresh a page using Java script, you can use one of the following three methods.

1. <script language="javascript" type="text/javascript">
2.     function ReloadMethod1() {
3.         window.location.href = window.location.href;
4.     }
5.     function ReloadMethod2() {
6.         window.location.reload();
7.     }
8.     function ReloadMethod3() {
9.         history.go(0);
10.     }
11. </script>
12. <input type="button" value="Reload" onclick="window.location.href=window.location.href" />
13. <%--Calling Javascript function on button click.--%>
14. <input type="button" value="Reload" onclick="ReloadMethod2()" />
15. <input type="button" value="Reload" onclick="window.location.reload()" />
16.  
17. <!-- ASP Buttons -->
18. <asp:Button ID="Button1" runat="server" Text="Reload" OnClientClick="window.location.href=window.location.href" />
19. <%--Calling Javascript function on button click.--%>
20. <asp:Button ID="Button2" runat="server" Text="Reload" OnClientClick="ReloadMethod2()" />
21. <asp:Button ID="Button3" runat="server" Text="Reload" OnClientClick="ReloadMethod3()" />

Enabling Windows Aero

Recently suddenly my computer lost Windows Aero effects. After trying out many things I found that it is due to the Log Me In mirror driver.

It seems Log Me In mirror driver is not compatible with Windows Aero effects so if you also lost Windows Aero and you have Log Me In installed on your machine to activate Aero back first try disabling “LogMeIn Mirror Driver” and restart your machine.

This can be done by going to Device Manager by clicking,

Start –> Control Panel –> Administrative Tools.

Then double click on Computer Management. Now in the Computer Management window click on the Device Manager.

Another way to reach the Device Manager is by pressing the Windows key and the Pause key in your keyboard simultaneously.

Now expand the Display Adapters and right click on LogMeIn Mirror Driver and click on Disable.

This will disable the Log Me In mirror driver enabling Windows Aero after you restart your machine.

If you cannot see Aero effects after the restart search for the word Aero in your start menu and click on the Aero troubleshooter and follow the wizard to get Aero effects back.

Creating Database Table and Moving Data

When the need comes to port tables from one server / database to another server / database there is an easy way than creating the tables manually and importing data into table.

 

By using the following query you can import the table structure and the data of the required table.

1. SELECT *
2. INTO [DestinationServerName\SQLServerInstanceName].[DestinationDatabaseName].[OwnerName].[DestinationTableName]
3. FROM [SourceServerName\SQLServerInstanceName].[SourceDatabaseName].[OwnerName].[SourceTableName]

 

Using the above method you can transfer tables between different databases, Server instances or different database servers.

Consider the following example in which I am transferring the Customers table from Northwind database to my Test database.

 

1. SELECT *
2. INTO [Test].[dbo].[Customers]
3. FROM [Northwind].[dbo].[Customers]

 

Here SELECT statement will behave the same way as in a normal SELECT * FROM TableName statement meaning you can use all the techniques used in SELECT statements to filter the data needed to be ported. For example following query will only bring customers who are from UK.

1. SELECT *
2. INTO [Test].[dbo].[Customers]
3. FROM [Northwind].[dbo].[Customers]
4. WHERE Country = 'UK'

 

One thing to remember is, this method will not import the keys, meaning if you had a primary key set to CustomerId it will not exist in your new table. So you need to add the keys (primary and secondary) to the new table to match it with the source table. If you had identity specification turned on in your source table this will set it for you, so you do not need to set it again.

Painted Desert – Arckaringa South Australia

One of the most famous places in Australian outback is the painted desert. Which consists of different beautiful landscapes which was formed millions years ago while it way covered by water when it was under the sea. Since these attractions are in remote locations for some of us it will be difficult to find them. I agree some of the attractions are in the guide books but I assure you they are not that easy to find when you are on your own without any phone facilities or mobile data connections to browse maps. So for people who are interested in visiting these places I hope this article will help them to locate some of the attractions. Remember to cache your GPS or maps before you leave town or simply buy a detailed map.

All these places are accessible through unsealed / dirt roads and it is always better if you have an AWD or a 4WD. But if you are travelling in dry whether and if you are cautious you will be able to visit all of them in a 2WD as well. Few other things to remember when going to outback places are mentioned in my other post.

The Breakaways

The breakaways has colourful small hills which are broken away from Stuart Range, hence their name “The Breakaways”

You will not miss the road to the lookout since you need to turn right just before the Dingo fence when you travel from Coober Pedy to Oodnadatta. There will also be road signs for this.

The Breakaways VIEW SLIDE SHOW DOWNLOAD ALL

Map

View Larger Map

Dingo Fence

Dingo fence or Dog fence is holding the title of longest man made object in the world having a length of 5614 kms. This runs from Surfaces Paradise in Queensland to Bight in near Western Australia border. This was put up to protect the live stock on the south side of the country from the northern predators.

You can have a look into this if you travel about 15 kms from Cobber Pedy to Oodnadatta.

Dingo Fence VIEW SLIDE SHOW DOWNLOAD ALL

 

Map

View Larger Map

Painted Desert

Painted desert lookout is also giving you a great view onto the vivid coloured mountains. There is a walk of about 15-20 minutes after parking your car. The way is marked in a nature friendly manner by collecting stones to make up arrows as seen in my photos. Some parts of the walk is bit challenging so if you do not like walking or afraid of heights or slopes best is to wait in the car.

Painted Desert VIEW SLIDE SHOW DOWNLOAD ALL

Map

View Larger Map

On your way to these you will encounter other interesting natures creations as well.

On the Way to Painted Desert VIEW SLIDE SHOW DOWNLOAD ALL

Samsung Galaxy S2 not Connecting to Kies

Last week I spent few hours to figure out why Samsung Galaxy S2 was not connecting to Samsung Kies through USB cable. I could browse phone contents using Windows Explorer, transfer files, music and photos, even I could use Kies Air but Kies on my computer kept on ignoring the phone. It always displayed connecting but never got connected.

To resolve the connection problem several times I used the connection troubleshooter which comes with Kies, reinstalled Kies, updated Kies, restarted phone and computer but had no success. Then suddenly I figured this was happening because the phone is in wrong connection mode. By some application or setting the USB connection mode was set to Camera (PTP). Because of this Kies could not connect with the phone. To correct the connection problem simply I had to change the connection mode to Media Device (MTP).

This can be done by accessing the notification area.

Select Media device (MTP) to correctly connect to Kies.

Quarry Road Lookout – Beetaloo South Australia

If you are travelling in Beetaloo and also if you are enjoying the views of nature a good place to visit is Quarry road lookout. Quarry road it self is having some good views in your way. If you have sometime to spend there is a table and chair for you to sit down and have some food. Another good thing is you do not have to walk, you can park your car right in the lookout and enjoy.

Quarry Road Lookout VIEW SLIDE SHOW DOWNLOAD ALL

Map

View Larger Map

Things to Remember when Travelling in Outback and Remote Places

I thought to share with you few things to remember while travelling in remote places. I know most of you are aware of these but thought to put a post since most of us forgets these even though we know these.

• Always take sufficient amount of drinking water to survive for about 2 days.
• Always take sufficient food supplies to survive for about 2 days.
• Before starting your trip check your spare tyre.
• Before leaving each town check your fuel level and calculate the fuel required to reach your next town.
• Check for the fuel station opening and closing times of the town you are planning to visit.
• Get a fly mask or at least carry some water in a bottle to use on face to escape the fly attack while in outback.
• If you are not 100% familiarized with your vehicle do not speed too much.
• Always watch for animals.
• Take a blanket or two to keep you warm in case the unforeseen happen.
• If you are taking any medication do not forget to take medicine.
• It is always better to have a first aid kit while you are travelling.
• If you have knowledge to repair then a tool kit will be handy.

I know there are many more things, so feel free to comment.

Hope these helps.

Automatically Sizing Excel Columns

Today while trying to do some formatting on Excel using .Net I came up with an error.

One of the things I tried is to make Excel columns automatically size according to the content having on them. As all of you might know we can get this done in Excel by simply double clicking on the column’s right margin. While doing this in code I got the following exception.

ExcelSheet.get_Range("A1", "E10")' threw an exception of type 'System.Runtime.InteropServices.COMException'
base {System.Runtime.InteropServices.ExternalException}: {"Exception from HRESULT: 0x800401A8"}

The code involved in generating this error is as below.

1. (ExcelSheet.get_Range("A1", "E10")).EntireColumn.AutoFit();

 

Later I found the reason for this error. Error will occur when we use AutoFit () on empty cells. Because initially I did not have anything in my excel sheet I kept on getting this. So to overcome this error use the same code to auto fit the cell contents simply after the cells are populated with values.

If you cannot get AutoFit () to work the reason might be the same thing. make sure the cells you apply auto fit have some values on them.

The best thing is to use AutoFit () after all data are entered into Excel sheet.