Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 653
  • Last Modified:

asp:Calendar problems

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
rypinbubs
Asked:
rypinbubs
  • 3
  • 3
1 Solution
 
Tom BeckCommented:
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
 
rypinbubsAuthor Commented:
Can you post an example please tommyBoy?
0
 
Tom BeckCommented:
<!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
Nothing ever in the clear!

This technical paper will help you implement VMware’s VM encryption as well as implement Veeam encryption which together will achieve the nothing ever in the clear goal. If a bad guy steals VMs, backups or traffic they get nothing.

 
rypinbubsAuthor Commented:
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
 
rypinbubsAuthor Commented:
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
 
Tom BeckCommented:
Thanks.

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

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now