Thursday, July 15, 2010

Firing TreeView TreeNodeCheckChanged Event

Normally in ASP.Net TreeView you can enable it to show checkboxes in its node levels. So if you need to do any actions when a node is checked or unchecked you need to use the TreeNodeCheckChanged event. But the problem is TreeNodeCheckChanged event will not fire when a checkbox is clicked. The cause for this is because the TreeNode class which represents a node in the TreeView will not add onClick event on the checkbox.

But if you carefully check it the event is getting fired at the next page postback. Since I needed to do some actions when the checkbox statuses are changed I made the page post back when a checkbox is checked or unchecked by the following java script. What it does is simply it will check the element which caused the event is a checkbox and do a postback of the page.





  1. <script type="text/javascript">
  2.     function TreeViewCheckBoxClicked(Check_Event) {
  3.         var objElement;
  4.         try {
  5.             // Get the element which fired the event.
  6.             objElement = window.event.srcElement;
  7.         }
  8.         catch (Error) {
  9.             //srcElement is failing, objElement is null.
  10.         }
  11.         if (objElement != null) {
  12.             // If the element is a checkbox do postback.
  13.             if (objElement.tagName == "INPUT" && objElement.type == "checkbox") {
  14.                 __doPostBack("", "");
  15.             }
  16.         }
  17.         else {
  18.             //    If the srcElement is failing due to browser incompatibility determine
  19.             // whether the element is and HTML input element and do postback.
  20.             if (Check_Event != null) {
  21.                 if (Check_Event.target.toString() == "[object HTMLInputElement]") {
  22.                     __doPostBack("", "");
  23.                 }
  24.             }
  25.         }
  26.     }
  27. </script>




To make this work you need to bind the onClick event with the javascript shown above as shown below.





  1. protected void Page_Load(object sender, EventArgs e)
  2. {
  3.     // Adding the onClick script to the TreeView.
  4.     TreeView1.Attributes.Add("onClick", "TreeViewCheckBoxClicked(event)");
  5. }




Even though I have done this in Page Load this can be done in other places of code as well, for example if you are adding the TreeView by code you can use this right before adding it to the page.

The above will make the page post back when ever a checkbox in the TreeView is clicked, but nothing special will happen. You need to implement the code for TreeNodeCheckChanged event to get some task done out of it, for example I am using the following code to check or uncheck the child nodes depending on the action done for the parent node.





  1. protected void TreeView1_TreeNodeCheckChanged(object sender, TreeNodeEventArgs e)
  2. {
  3.     // Loop through all the child nodes and change the checked status as required.
  4.     foreach (TreeNode tn in e.Node.ChildNodes)
  5.     {
  6.         if (e.Node.Checked)
  7.             tn.Checked = true;
  8.         else
  9.             tn.Checked = false;
  10.     }
  11. }




Tuesday, July 13, 2010

Changing GridView Column Headers

If you are wondering a way to change the column header appearing in the .Net GridView control in run time then this post will help you to get it done.

For example think that you need to change the normal grid headers shown in Screen A into something like shown in Screen B.

Screen A

Screen B

I have removed few columns from the grid header and then I did add few customized column headers. The added “Edit” column and “Id” column are spanning to 2 rows, the “Temp Columns” column is spanning to 2 columns.

I think the code is self explanatory. This way you will be able to create complex gridview headers.





  1. protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e)
  2. {
  3.      if (e.Row.RowType == DataControlRowType.Header)
  4.      {
  5.          // Remving the first two colummn headers.
  6.          e.Row.Cells.RemoveAt(0);
  7.          e.Row.Cells.RemoveAt(0);
  8.          // Creating the gridview row object.
  9.          GridViewRow headerGridRow = new GridViewRow(0, 0, DataControlRowType.Header, DataControlRowState.Selected);
  10.          headerGridRow.ID = "hdrGridRow";
  11.          TableCell HeaderCell;
  12.          // Creating and adding the first header cell.
  13.          HeaderCell = new TableCell();
  14.          HeaderCell.Text = "Edit";
  15.          HeaderCell.ID = "cellEdit";
  16.          HeaderCell.Font.Bold = false;
  17.          HeaderCell.HorizontalAlign = HorizontalAlign.Center;
  18.          HeaderCell.RowSpan = 2; // Spans across 2 rows.
  19.          HeaderCell.ColumnSpan = 1;
  20.          HeaderCell.BackColor = System.Drawing.Color.LightGray;
  21.          HeaderCell.BorderColor = System.Drawing.Color.White;
  22.          HeaderCell.ForeColor = System.Drawing.Color.Red;
  23.          headerGridRow.Cells.Add(HeaderCell);
  24.          // Creating and adding the second header cell.
  25.          HeaderCell = new TableCell();
  26.          HeaderCell.Text = "Id";
  27.          HeaderCell.ID = "cellId";
  28.          HeaderCell.Font.Bold = false;
  29.          HeaderCell.HorizontalAlign = HorizontalAlign.Center;
  30.          HeaderCell.RowSpan = 2;
  31.          HeaderCell.ColumnSpan = 1;
  32.          HeaderCell.BackColor = System.Drawing.Color.LightGray;
  33.          HeaderCell.BorderColor = System.Drawing.Color.White;
  34.          HeaderCell.ForeColor = System.Drawing.Color.Red;
  35.          headerGridRow.Cells.Add(HeaderCell);
  36.          // Creating and adding the third header cell.
  37.          HeaderCell = new TableCell();
  38.          HeaderCell.Text = "Temp Columns";
  39.          HeaderCell.ID = "cellTempColumns";
  40.          HeaderCell.Font.Bold = false;
  41.          HeaderCell.HorizontalAlign = HorizontalAlign.Center;
  42.          HeaderCell.RowSpan = 1;
  43.          HeaderCell.ColumnSpan = 2; // Spans across 2 columns.
  44.          HeaderCell.BackColor = System.Drawing.Color.LightGray;
  45.          HeaderCell.BorderColor = System.Drawing.Color.White;
  46.          HeaderCell.ForeColor = System.Drawing.Color.Red;
  47.          headerGridRow.Cells.Add(HeaderCell);
  48.          // Adding the header row to the gridview.
  49.          GridView1.Controls[0].Controls.AddAt(0, headerGridRow);
  50.      }
  51. }




Sunday, June 27, 2010

Class not registered

Recently when I tried to build and run an existing .Net application code I got the following error which generated from a component named “axShockwaveFlash1” which is an object used to embed flash content on to the application.

System.Runtime.InteropServices.COMException was unhandled
  Message=Class not registered (Exception from HRESULT: 0x80040154 (REGDB_E_CLASSNOTREG))
  Source=System.Windows.Forms
  ErrorCode=-2147221164
  StackTrace:
       at System.Windows.Forms.UnsafeNativeMethods.CoCreateInstance(Guid& clsid, Object punkOuter, Int32 context, Guid& iid)
       at System.Windows.Forms.AxHost.CreateWithoutLicense(Guid clsid)
       at System.Windows.Forms.AxHost.CreateWithLicense(String license, Guid clsid)
       at System.Windows.Forms.AxHost.CreateInstanceCore(Guid clsid)
       at System.Windows.Forms.AxHost.CreateInstance()
       at System.Windows.Forms.AxHost.GetOcxCreate()
       at System.Windows.Forms.AxHost.TransitionUpTo(Int32 state)
       at System.Windows.Forms.AxHost.CreateHandle()
       at System.Windows.Forms.Control.CreateControl(Boolean fIgnoreVisible)
       at System.Windows.Forms.Control.CreateControl(Boolean fIgnoreVisible)
       at System.Windows.Forms.AxHost.EndInit()
       at Tour_Management_System.Loading_Form.InitializeComponent() in D:\Projects\Acc\TMS_20100205_Desktop\Tour_Management_System 2010-01-19\Tour_Management_System\Form1.Designer.cs:line 99
       at Tour_Management_System.Loading_Form..ctor() in D:\Projects\Acc\TMS_20100205_Desktop\Tour_Management_System 2010-01-19\Tour_Management_System\Form1.cs:line 30
       at Tour_Management_System.Program.Main() in D:\Projects\Acc\TMS_20100205_Desktop\Tour_Management_System 2010-01-19\Tour_Management_System\Program.cs:line 18
       at System.AppDomain._nExecuteAssembly(Assembly assembly, String[] args)
       at System.Runtime.Hosting.ApplicationActivator.CreateInstance(ActivationContext activationContext, String[] activationCustomData)
       at Microsoft.VisualStudio.HostingProcess.HostProc.RunUsersAssemblyDebugInZone()
       at System.Threading.ExecutionContext.Run(ExecutionContext executionContext, ContextCallback callback, Object state)
       at System.Threading.ThreadHelper.ThreadStart()
  InnerException:

After some investigation I found that the reason for this was Flash Player’s incompatibility with 64 bit. Since my machine is running Windows 64 bit version it generates an error while trying to start Flash player. Good thing is Adobe is planning to release a Flash player which supports 64 bit soon.

For people who cannot wait until that (like me) can fix the problem in the following manner by running the application as an x86 application by changing the target platform in project properties.

Step 1 - Right click on your project and click on the properties.

Step 2 - Click on the Build tab and select x86 as the Platform target:.

Step 3 - Rebuild the application and run it, you will not get the error.

Tuesday, June 22, 2010

Changing the Tab Container

Are you seeking a way to customize the tabcontainer which comes with AJAX toolkit? AJAX tab container has several Cascade Style Sheet (CSS) properties which you can use to change the look of the tab container. But you need to make sure that you are not changing the keywords used in the CSS (ajax__tab_header, ajax__tab_outer, etc…).

You can change the look of the tabs by two methods. Tab container is using few images to give the 3D look it is having in its default view. so the first method is by changing the images and associating the new images to the tab container using a style sheet, second method is to change the tabs using the CSS without images, by using the CSS you can change the colors, sizes etc of the tabs.

Following are the default images that are shipped with the toolkit.

tab tab
tab-active tab-active
tab-active-left tab-active-left
tab-active-right tab-active-right
tab-hover tab-hover
tab-hover-left tab-hover-left
tab-hover-right tab-hover-right
tab-left tab-left
tab-right tab-right
tab-line tab-line

 

In the following code I am changing the tabcontainer look by using CSS and then placing the updated images to the relevant (Images/Controls) folder.





  1. .tabCont .ajax__tab_header
  2. {
  3.     font-family: verdana,tahoma,helvetica;
  4.     font-size: 11px;
  5.     background: url(../Images/Controls/tab-line.gif) repeat-x bottom;
  6. }
  7. .tabCont .ajax__tab_outer
  8. {
  9.     padding-right: 4px;
  10.     background: url(../Images/Controls/tab-right.gif) no-repeat right;
  11.     height: 21px;
  12. }
  13. .tabCont .ajax__tab_inner
  14. {
  15.     padding-left: 3px;
  16.     background: url(../Images/Controls/tab-left.gif) no-repeat;
  17. }
  18. .tabCont .ajax__tab_tab
  19. {
  20.     height: 13px;
  21.     padding: 4px;
  22.     margin: 0px;
  23.     background: url(../Images/Controls/tab.gif) repeat-x;
  24. }
  25. .tabCont .ajax__tab_hover .ajax__tab_outer
  26. {
  27.     cursor: pointer;
  28.     background: url(../Images/Controls/tab-hover-right.gif) no-repeat right;
  29. }
  30. .tabCont .ajax__tab_hover .ajax__tab_inner
  31. {
  32.     cursor: pointer;
  33.     background: url(../Images/Controls/tab-hover-left.gif) no-repeat;
  34. }
  35. .tabCont .ajax__tab_hover .ajax__tab_tab
  36. {
  37.     cursor: pointer;
  38.     background: url(../Images/Controls/tab-hover.gif) repeat-x;
  39. }
  40. .tabCont .ajax__tab_active .ajax__tab_outer
  41. {
  42.     background: url(../Images/Controls/tab-active-right.gif) no-repeat right;
  43. }
  44. .tabCont .ajax__tab_active .ajax__tab_inner
  45. {
  46.     background: url(../Images/Controls/tab-active-left.gif) no-repeat;
  47. }
  48. .tabCont .ajax__tab_active .ajax__tab_tab
  49. {
  50.     background: url(../Images/Controls/tab-active.png) repeat-x;
  51. }
  52. .tabCont .ajax__tab_disabled
  53. {
  54.     color: #A0A0A0;
  55. }
  56. .tabCont .ajax__tab_body
  57. {
  58.     font-family: verdana,tahoma,helvetica;
  59.     font-size: 10pt;
  60.     border: 0px solid #999999;
  61.     border-top: 0;
  62.     padding: 8px;
  63.     background-color: #f1f1f1;
  64.     margin: 12px;
  65. }




 

To apply the style to the tab container you can use the following code.

<asp:TabContainer ID="tcnManageUsers" runat="server" ActiveTabIndex="0" CssClass="tabCont">

Following is the full code of my tab container.





  1. <asp:TabContainer ID="tcnManageUsers" runat="server" ActiveTabIndex="0" CssClass="tabCont">
  2.      <asp:TabPanel runat="server" HeaderText="Add" ID="tplAdd" >
  3.          <ContentTemplate>
  4.              <uc1:CreateUser ID="AddCreateUser" runat="server" />
  5.          </ContentTemplate>  
  6.      </asp:TabPanel>
  7.      <asp:TabPanel ID="tplEdit" runat="server" HeaderText="Edit" >
  8.          <ContentTemplate >
  9.             <asp:Button ID="btnSelectUser" runat="server" Text="Select User" OnClick="btnSelectUser_Click"/>
  10.             <uc1:CreateUser ID="EditCreateUser" runat="server" />
  11.          </ContentTemplate>
  12.      </asp:TabPanel>
  13.  </asp:TabContainer>




Saturday, June 19, 2010

Water World Kelaniya – Sri Lanka

Recently we went a trip to an aquarium which is located at Kelaniya Sri Lanka. They have named it Water World and claims that they have the largest collection of fish in South Asia.

Mainly they have 2 sections one for birds and the other for fish. If you are going to watch bird park then you need to buy a ticket of Srilankan rupees 70, if you are going for the fish section then the ticket would be 150 Srilankan rupees. You can also contact them if required by using the telephone number +94 11 5555433.

Following are some photos I took on my visit and as I feel they have some rare species on display.

Update

To help the people who whould like to visit Water World I thought to share their new phone number with the address.

Telephone -
+94 11 5555434

Address -
Water World Lanka Pvt. Ltd.,
No: 95, Biyagama Road,
Thalwatta,
Kelaniya,
Sri Lanka.

Location -


View Larger Map

Tech-Ed 2010 – Sri Lanka

In February 2010 Microsoft held Tech-Ed 2010 and we (IronOne) were the silver sponsors for the event.

It was a good event which attracted many of my friends which I didn’t meet for a long time.

In appreciation to the sponsorship Microsoft sent us a thank you cake as well. Looks delicious right?

 

Friday, June 18, 2010

Creating Rounded Corners

When designing web sites it always looks nicer if you could round the sharp corners, for example see below, what looks nicer to you?

Sharp Corners

Rounded Corners

My feeling is the rounded corners are better looking than the normal one. But the problem is, there is no easy way to create this. You need some Cascade Style Sheet (CSS) knowledge to do this. The easy way to round the required corners is to use the following code.





  1. <html xmlns="http://www.w3.org/1999/xhtml">
  2. <head runat="server">
  3.     <title></title>
  4.     <style type="text/css">
  5.         .CornerTopLeft
  6.         {
  7.             float: right;
  8.             width: 100%;
  9.             margin-top: 10px;
  10.             background: url(../Images/TopLeft.png) 0 0 no-repeat rgb(237,28,36);
  11.             border: 1px double #f1f1f1;
  12.         }
  13.         .CornerTopRight
  14.         {
  15.             float: right;
  16.             width: 100%;
  17.             background: url(../Images/TopRight.png) 100% 0 no-repeat;
  18.         }
  19.         .CornerBottomLeft
  20.         {
  21.             float: right;
  22.             width: 100%;
  23.             background: url(../Images/BottomLeft.png) 0 100% no-repeat;
  24.             height: 100%;
  25.         }
  26.         .CornerBottomRight
  27.         {
  28.             float: right;
  29.             width: 100%;
  30.             background: url(../Images/BottomRight.png) 100% 100% no-repeat;
  31.         }
  32.         div#Content
  33.         {
  34.             margin: 15px;
  35.         }
  36.     </style>
  37. </head>
  38. <body bgcolor="rgb(232,232,232)">
  39.     <form id="form1" runat="server">
  40.     <div class="CornerTopLeft">
  41.         <div class="CornerTopRight">
  42.             <div class="CornerBottomLeft">
  43.                 <div class="CornerBottomRight">
  44.                     <div id="Content">
  45.                         Your content here.....
  46.                         <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
  47.                         <asp:Button ID="Button1" runat="server" Text="Button" />
  48.                     </div>
  49.                 </div>
  50.             </div>
  51.         </div>
  52.     </div>
  53.     </form>
  54. </body>
  55. </html>




The above code is self explanatory so I didn’t put any comments there. To make it work you need the following 4 images placed on your Images directory.

TopLeft.png –

TopRight.png –

BottomLeft.png –

BottomRight.png –

If I am to explain the code, the corners are curved by using 4 different DIVs and placing the above images on them. For example the following DIVs does the trick.

<div class="CornerTopLeft">
<div class="CornerTopRight">
<div class="CornerBottomLeft">
<div class="CornerBottomRight">





  1. <div class="CornerTopLeft">
  2.         <div class="CornerTopRight">
  3.             <div class="CornerBottomLeft">
  4.                 <div class="CornerBottomRight">
  5.                     <div id="Content">
  6.                         Your content here.....
  7.                         <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
  8.                         <asp:Button ID="Button1" runat="server" Text="Button" />
  9.                     </div>
  10.                 </div>
  11.             </div>
  12.         </div>
  13.     </div>




The content you need to put in the middle should be wrapped by these DIVs. In the above code I used another DIV for placing content having the ID Content.

Inserting curved images to the corners of the DIVs are done by using a style per DIV. The CSS classes which are used to change these DIVs are as of below.





  1. <style type="text/css">
  2.         .CornerTopLeft
  3.         {
  4.             float: right;
  5.             width: 100%;
  6.             margin-top: 10px;
  7.             background: url(../Images/TopLeft.png) 0 0 no-repeat rgb(237,28,36);
  8.             border: 1px double #f1f1f1;
  9.         }
  10.         .CornerTopRight
  11.         {
  12.             float: right;
  13.             width: 100%;
  14.             background: url(../Images/TopRight.png) 100% 0 no-repeat;
  15.         }
  16.         .CornerBottomLeft
  17.         {
  18.             float: right;
  19.             width: 100%;
  20.             background: url(../Images/BottomLeft.png) 0 100% no-repeat;
  21.             height: 100%;
  22.         }
  23.         .CornerBottomRight
  24.         {
  25.             float: right;
  26.             width: 100%;
  27.             background: url(../Images/BottomRight.png) 100% 100% no-repeat;
  28.         }
  29.         div#Content
  30.         {
  31.             margin: 15px;
  32.         }
  33.     </style>




The filling of the required area is done by assiging a color at the background tag in CornerTopLeft style which will be applied to CornerTopLeft DIV.

background: url(../Images/TopLeft.png) 0 0 no-repeat rgb(237,28,36);

Note the last div#Content which was placed to style the Content DIV making the contents placed centered so the final output will be nicer.

Thursday, June 17, 2010

Sharing Screen with Multiple People

As you might know the new Skype allows us to share our desktop to another contact by only using Skype. Best things are it is free and we can share through internet. But this has a limitation which is you cannot share the screen with multiple contacts.

To overcome this I happen to find this nice Skype add-on named InnerPass Share and Collaborate which enable us to share our desktop with many people at once freely.

To get it installed go to Skype Extras Manager by clicking Tools –> Extras –> Get Extras.

Type InnerPass on the top left search box and press search.

Then on the left search results select the InnerPass Share and Collaborate add-on and install.

After installing you can launch InnerPass by clicking Tools –> Extras –> InnerPass Share and Collaborate. This will bring you a screen similar to the following.

You can click Get Started button to create your free InnerPass account and start using the features offered by InnerPass.

Some of the features are,

  • Managing meeting rooms.
  • Add contacts from other sources like Yahoo, Gmail, etc.
  • Schedule meetings.
  • Attend meetings.
  • Host meetings.
  • Sharing your screen.
  • Viewing others’ screens.
  • Share documents.

Friday, June 11, 2010

Selecting a Row in ASPxGridView

I found that with the flood of new possibilities with DevExpress grid view a simple functionality of selecting one row is bit hidden. After doing bit of searching in the internet I found the way and thought to share it.

The way we need to do this is by using a java script and bind that in to the RowClick event of the grid.

The java script will look like the following.

<script type="text/javascript">
        function OnRowClick(e) {
            //Unselect all rows
            dxgdSearch._selectAllRowsOnPage(false);
            //Select the row
            dxgdSearch.SelectRow(e.visibleIndex, true);
        }
</script>

Then the binding to the RowClick would be as below.

<ClientSideEvents RowClick="function(s, e) { OnRowClick(e); }"></ClientSideEvents>

The outcome of this is a grid which you can select a row.

The value of the selected row can be taken as below.

dxgdSearch.GetRowValues(dxgdSearch.FocusedRowIndex, "Customer_ID")

For example in my application I used to pass the Customer Id to the Customer.aspx form as below.

 
 


  1. Response.Redirect("~/Customer.aspx?cusID= " + dxgdSearch.GetRowValues(dxgdSearch.FocusedRowIndex, "Customer_ID"));


 

The full source is as of below.

Page.aspx

 
 


  1. <asp:Content ID="Content4" ContentPlaceHolderID="MainContent" runat="server">
  2.     <script type="text/javascript">
  3.         function OnRowClick(e) {
  4.             //Unselect all rows
  5.             dxgdSearch._selectAllRowsOnPage(false);
  6.             //Select the row
  7.             dxgdSearch.SelectRow(e.visibleIndex, true);
  8.         }
  9.     </script>
  10.     <dx:ASPxGridView ID="dxgdSearch" ClientInstanceName="dxgdSearch" runat="server" AutoGenerateColumns="False"
  11.         SettingsBehavior-AllowFocusedRow="True" SettingsBehavior-AllowMultiSelection="False">
  12.         <ClientSideEvents RowClick="function(s, e) { OnRowClick(e); }"></ClientSideEvents>
  13.         <Columns>
  14.             <dx:GridViewDataTextColumn Name="Id" ShowInCustomizationForm="True" VisibleIndex="1"
  15.                 Caption="Customer ID" FieldName="Customer_ID" Visible="False">
  16.             </dx:GridViewDataTextColumn>
  17.             <dx:GridViewDataTextColumn Name="Name" ShowInCustomizationForm="True" VisibleIndex="0"
  18.                 Caption="Name" FieldName="Full_Name">
  19.             </dx:GridViewDataTextColumn>
  20.             <dx:GridViewDataTextColumn Name="TelephoneNo" ShowInCustomizationForm="True" VisibleIndex="1"
  21.                 Caption="Tele. No." FieldName="Mobile_Number">
  22.             </dx:GridViewDataTextColumn>
  23.             <dx:GridViewDataTextColumn Name="EMail" ShowInCustomizationForm="True" VisibleIndex="2"
  24.                 Caption="EMail" FieldName="Email">
  25.             </dx:GridViewDataTextColumn>
  26.             <dx:GridViewDataHyperLinkColumn Name="Select" VisibleIndex="3">
  27.                 <DataItemTemplate>
  28.                     <asp:Button ID="Button1" runat="server" CommandArgument='<%# Eval("Customer_ID") %>'
  29.                         OnClick="Button1_Click" Text="Edit" />
  30.                 </DataItemTemplate>
  31.             </dx:GridViewDataHyperLinkColumn>
  32.         </Columns>
  33.         <SettingsBehavior AllowFocusedRow="True"></SettingsBehavior>
  34.         <Settings ShowGroupPanel="True" ShowFilterRow="True" />
  35.         <Settings ShowFilterRow="True" ShowGroupPanel="True"></Settings>
  36.     </dx:ASPxGridView>
  37. </asp:Content>


Page.aspx.cs

 
 


  1. protected void Button1_Click(object sender, EventArgs e)
  2. {
  3.     Response.Redirect("~/Customer.aspx?cusID= " + dxgdSearch.GetRowValues(dxgdSearch.FocusedRowIndex, "Customer_ID"));
  4. }