Solved

asp:Calendar problems

Posted on 2012-04-13
6
585 Views
Last Modified: 2012-04-13
I have an asp:calendar control that is functioning differently depending on the browser that is being used. Everything works fine when using IE, when any other browser is used the functionality breaks. Also when the mouseover styles are removed everything works fine in all browsers...see example below

On the DayRender event I add mouseover styles and then add LinkButtons to a gridview control and then add that gridview control to the calendar cell. See code below…

I am adding an attribute to the LinkButton to fire a postback event when clicked. I then determine what LinkButton caused the postback in the Page_Load event.

When using IE here is the sequence of events when a link is clicked:
Link is Clicked.
Page_Load //(cntrlname = Calendar1)
Calendar1_SelectionChanged
Page_Load //(cntrlname = LinkButton_TestingEvent_xx)
Link_Click

When I run with any other browser the sequence is:
Link is clicked.
Page_Load //(cntrlname = Calendar1)
Calendar1_SelectionChanged
It’s like the link was never clicked…

If I comment out the ApplyMouseOverStyles(e) method it works fine with all browsers and the sequence of events is:
Link is clicked.
Page_Load //(cntrlname = LinkButton_TestingEvent_xx)
Link_Click

Here is an example of what I am trying to do:

HTML:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="CalendarTest.WebForm1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Calendar ID="Calendar1" runat="server" ondayrender="Calendar1_DayRender" onselectionchanged="Calendar1_SelectionChanged" Height="629px" Width="908px"></asp:Calendar>
    </div>
    </form>
</body>
</html>

Open in new window


CodeBehind:

public partial class WebForm1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            string cntrlname = Page.Request.Params.Get("__EVENTTARGET");
            if (!string.IsNullOrEmpty(cntrlname))
            {
                if (cntrlname.Contains("LinkButton_TestingEvent"))
                {
                    Link_Click(cntrlname);
                }
            }
        }
        
        protected void Calendar1_DayRender(object sender, DayRenderEventArgs e)
        {
            ApplyMouseOverStyles(e);
            AddLink(e);
        }
        
        protected void Calendar1_SelectionChanged(object sender, EventArgs e)
        {
            //handle event
        }
        
        private void Link_Click(string cntrlname)
        {
            //Do some stuff here....
        }
        
        private void ApplyMouseOverStyles(DayRenderEventArgs e)
        {
            string onmouseoverStyle = "this.style.backgroundColor='#D4EDFF'";
            string onmouseoutStyle = "this.style.backgroundColor='White'";
            string onmouseoutStyleOther = "this.style.backgroundColor='White'";

            e.Cell.Attributes.Add("onmouseover", onmouseoverStyle);

            if (e.Day.IsOtherMonth)
                e.Cell.Attributes.Add("onmouseout", onmouseoutStyleOther);
            else
                e.Cell.Attributes.Add("onmouseout", onmouseoutStyle);

            e.Cell.Attributes.Add("OnClick", e.SelectUrl);
            e.Cell.Style.Add("cursor", "pointer");
        }
        
        private void AddLink(DayRenderEventArgs e)
        {
            DataTable dataTable = new DataTable();
            dataTable.Columns.Add("ID");
            dataTable.Columns.Add("Title");

            DataRow newRow = dataTable.NewRow();
            newRow["ID"] = "10";
            newRow["Title"] = "Testing";
            dataTable.Rows.Add(newRow);

            GridView gv = new GridView();
            gv.ID = "GridView_" + e.Day.DayNumberText;
            gv.RowDataBound += new GridViewRowEventHandler(gv_RowDataBound);

            gv.DataSource = dataTable;
            gv.DataBind();

            gv.HeaderRow.Visible = false;
            foreach (GridViewRow gvr in gv.Rows)
            {
                gvr.Cells[0].Visible = false;
            }

            e.Cell.Controls.Add(gv);
        }
        
        void gv_RowDataBound(object sender, GridViewRowEventArgs e)
        {
            if (e.Row.RowType == DataControlRowType.DataRow)
            {
                LinkButton link = new LinkButton();
                
                link.ID = "LinkButton_TestingEvent_" + (e.Row.Cells[0]).Text;

                link.Text = ((e.Row.Cells[1])).Text;
                link.Attributes.Add("href", "javascript:__doPostBack('" + link.ID + "','')");
                link.ForeColor = Color.Blue;
                e.Row.Cells[1].Controls.Add(link);
            }
        }
    }

Open in new window


I really want to include the mouseover styles, so removing them is not really the solution I am looking for. Any suggestions to get this working?

Thanks in advance!
0
Comment
Question by:rypinbubs
  • 3
  • 3
6 Comments
 
LVL 38

Expert Comment

by:Tom Beck
ID: 37843948
Have you tried adding a hover pseudo class for those cells. Seems like it would be much easier if you only need to change the background color.
0
 

Author Comment

by:rypinbubs
ID: 37843989
Can you post an example please tommyBoy?
0
 
LVL 38

Accepted Solution

by:
Tom Beck earned 500 total points
ID: 37844123
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled</title>
    <style type="text/css">
    td.tdBlueHover:hover {background-color:#D4EDFF}
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Calendar ID="Calendar1" runat="server" OnDayRender="Calendar1_DayRender"></asp:Calendar>
        </div>
    </form>
</body>
</html>

Open in new window


DayRender event:
protected void Calendar1_DayRender(object sender, DayRenderEventArgs e)
        {
            if (!e.Day.IsOtherMonth)
            {
                e.Cell.Attributes.Add("class", "tdBlueHover");
            }
            e.Cell.Style.Add("cursor", "pointer");
        }

Open in new window

0
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 

Author Comment

by:rypinbubs
ID: 37844377
Thanks tommyBoy, I think we're on the right track.
However, I still need the ability to select the cell itself.

If anywhere else in the cell is clicked I need to handle that as well.

I added the line
e.Cell.Attributes.Add("OnClick", e.SelectUrl);

but then this just gives me the same original problem:
string cntrlname = Page.Request.Params.Get("__EVENTTARGET");
says that it was calendar1 that was clicked when a link is actually clicked.
0
 

Author Comment

by:rypinbubs
ID: 37844443
Found a solution.
I changed the linkbutton attribute from
link.Attributes.Add("href", "javascript:__doPostBack('" + link.ID + "','')");

to

link.Attributes.Add("OnClick", "javascript:__doPostBack('" + link.ID + "','')");

Thanks for your help tommyBoy!!!
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 37844551
Thanks.

On a side note, that "OnClick" should be all lower case.
0

Featured Post

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Exception Handling is in the core of any application that is able to dignify its name. In this article, I'll guide you through the process of writing a DRY (Don't Repeat Yourself) Exception Handling mechanism, using Aspect Oriented Programming.
It was really hard time for me to get the understanding of Delegates in C#. I went through many websites and articles but I found them very clumsy. After going through those sites, I noted down the points in a easy way so here I am sharing that unde…
Microsoft Active Directory, the widely used IT infrastructure, is known for its high risk of credential theft. The best way to test your Active Directory’s vulnerabilities to pass-the-ticket, pass-the-hash, privilege escalation, and malware attacks …
This video shows how to quickly and easily add an email signature for all users on Exchange 2016. The resulting signature is applied on a server level by Exchange Online. The email signature template has been downloaded from: www.mail-signatures…

813 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now