Solved

asp:Calendar problems

Posted on 2012-04-13
6
611 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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

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

DevOps Toolchain Recommendations

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

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Open dialog with server side controls in it 3 46
Reactjs with .NET 3 70
asp.net mvc 2 32
Validation for Passport expiry in asp.net 2 6
Entity Framework is a powerful tool to help you interact with the DataBase but still doesn't help much when we have a Stored Procedure that returns more than one resultset. The solution takes some of out-of-the-box thinking; read on!
Calculating holidays and working days is a function that is often needed yet it is not one found within the Framework. This article presents one approach to building a working-day calculator for use in .NET.
Although Jacob Bernoulli (1654-1705) has been credited as the creator of "Binomial Distribution Table", Gottfried Leibniz (1646-1716) did his dissertation on the subject in 1666; Leibniz you may recall is the co-inventor of "Calculus" and beat Isaac…

713 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