Forums Retired Products and Controls
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
DR
3550
WebMonthCalendar. RenderDay fires before Initialize
posted

WebMonthCalendar. RenderDay fires before Initialize


I have DatePicker connected to monthCalendar.

For the example I want to color all the days of 2013 in red.

I want to show special days. on the Month calendar.

My plan was to load the CustomDays on the initialize, from webservice, and then to show them on the Render.

To my surprise, RenderDay fires before Initialize.

If I open the monthcalendar once, and then press the refresh button, the days dont show correctly,

when I open the monthcalendar again.

Since JS is Async, the actual rendering happens before I get the dates from the webservice, and is

therefore incorrect.

I expected that RendereDay will happen each time I open the month calendar, but it doesnt(checking on the debug).

.

Therefore the days dont get the correct style that have been updated from the webservice.

 

 


 using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using DealingRoom.Utils.BasicManiputlations;
using DealsRoomDAL;
using System.Data;
using DealingRoom.Utils.BuisnessDays;
using Infragistics.Web.UI.EditorControls;
using Infragistics.Web.UI.GridControls;

namespace OptionPricer
{
    public partial class Pricer : System.Web.UI.Page
    {

        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                txtExpiryDate.Date = DateTime.Now;
            }
        }

        protected void ButtonRefresh_Click(object sender, EventArgs e)
        {

 


        }
    }
}
 


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

<%@ Register Assembly="Infragistics4.Web.v12.2, Version=12.2.20122.2054, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb"
    Namespace="Infragistics.Web.UI.EditorControls" TagPrefix="ig" %>
<%@ Register Assembly="Infragistics4.Web.v12.2, Version=12.2.20122.2054, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb"
    Namespace="Infragistics.Web.UI.ListControls" TagPrefix="ig" %>
<%@ Register Assembly="Infragistics4.Web.v12.2, Version=12.2.20122.2054, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb"
    Namespace="Infragistics.Web.UI" TagPrefix="ig1" %>
<%@ Register Assembly="Infragistics4.Web.v12.2, Version=12.2.20122.2054, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb"
    Namespace="Infragistics.Web.UI.GridControls" TagPrefix="ig" %>
<%@ Register Assembly="Infragistics4.Web.v12.2, Version=12.2.20122.2054, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb"
    Namespace="Infragistics.Web.UI.LayoutControls" TagPrefix="ig" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
</head>
<style type='text/css'>
    .Red
    {
        background-color: Red;
    }
</style>
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script type="text/javascript" src="DatePickerJs.js"></script>
<body>
    <form id="form1" runat="server">
    <ig1:WebScriptManager ID="WebScriptManager1" runat="server">
        <Scripts>
        </Scripts>
    </ig1:WebScriptManager>
    <ig:WebDatePicker ID="txtExpiryDate" runat="server" ClientIDMode="Static" DropDownCalendarID="PortalMonthCalendar1">
    </ig:WebDatePicker>
    <ig:WebMonthCalendar ID="PortalMonthCalendar1" runat="server">
        <ClientEvents Initialize="WebMonthCalendar1_Initialise" RenderDay='WebMonthCalendar1_RenderDay' />
    </ig:WebMonthCalendar>
    <asp:Button ID="ButtonRefresh" runat="server" OnClick="ButtonRefresh_Click" Text="refresh">
    </asp:Button>
    </form>
</body>
</html>


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Data;

namespace OptionPricer
{
    /// <summary>
    /// Summary description for BuisnessDates
    /// </summary>
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.ComponentModel.ToolboxItem(false)]
    // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
    [System.Web.Script.Services.ScriptService]
    public class BuisnessDates : System.Web.Services.WebService
    {

        [WebMethod]
        public List<DateTime> CalcDates()
        {
            List<DateTime> lsDates = new List<DateTime>();
            DateTime dtStart = new DateTime(2013, 1, 1);
            DateTime dtEnd = new DateTime(2013, 12, 31);
            for (DateTime date = dtStart; date.Year == 2013; date=date.AddDays(1))
            {
                lsDates.Add(date);
            }
            return lsDates;
        }     
    }
}

 


customDays = new Array();
var AlreadyTaken = false;

function WebMonthCalendar1_Initialise() {
    GetSpecialDaysYear()
}

function WebMonthCalendar1_RenderDay(sender, eventArgs) {
    var eventDay = eventArgs.get_day();
    GetSpecialDaysYear()
    RenderDay(eventDay);
}


function RenderDay(eventDay) {
    if (contains(customDays, eventDay))
        eventDay.css = "Red";
    else
        eventDay.css = "";
}


function GetSpecialDaysYear() {
 
    if (AlreadyTaken == true)
        return;
    CallWebServiceSpecialDates();
    AlreadyTaken = true;  
}


function contains(customDays, obj) {
    for (var i = 0; i < customDays.length; i++) {
        if (EqualDays(customDays[i], obj)) {
            return true;
        }
    }
    return false;
}

function EqualDays(obj1, obj2) {
    if (obj1.day == obj2.day && obj1.month == obj2.month && obj1.year == obj2.year)
        return true;
    else
        return false;
}


function CallWebServiceSpecialDates() {
    $.ajax({
        type: "POST",
        url: "BuisnessDates.asmx/CalcDates",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: OnSuccess,
        error: OnError
    });
}
function OnSuccess(data, status) {
    var response = data.d;
    $(response).each(function (dt) {
        var date = new Date(parseInt(response[dt].substr(6)));
        AddCustomDate(date);
    });
}


function OnError(request, status, error) {
}
function AddCustomDate(dt) {

    var newCD = new Object();

    newCD.day = dt.getDate();
    newCD.month = dt.getMonth() + 1;
    newCD.year = dt.getFullYear();

    customDays.push(newCD);
}

 

 


customDays = new Array();
var AlreadyTaken = false;

function WebMonthCalendar1_Initialise() {
    GetSpecialDaysYear()
}

function WebMonthCalendar1_RenderDay(sender, eventArgs) {
    var eventDay = eventArgs.get_day();
    GetSpecialDaysYear()
    RenderDay(eventDay);
}


function RenderDay(eventDay) {
    if (contains(customDays, eventDay))
        eventDay.css = "Red";
    else
        eventDay.css = "";
}


function GetSpecialDaysYear() {
 
    if (AlreadyTaken == true)
        return;
    CallWebServiceSpecialDates();
    AlreadyTaken = true;  
}


function contains(customDays, obj) {
    for (var i = 0; i < customDays.length; i++) {
        if (EqualDays(customDays[i], obj)) {
            return true;
        }
    }
    return false;
}

function EqualDays(obj1, obj2) {
    if (obj1.day == obj2.day && obj1.month == obj2.month && obj1.year == obj2.year)
        return true;
    else
        return false;
}


function CallWebServiceSpecialDates() {
    $.ajax({
        type: "POST",
        url: "BuisnessDates.asmx/CalcDates",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: OnSuccess,
        error: OnError
    });
}
function OnSuccess(data, status) {
    var response = data.d;
    $(response).each(function (dt) {
        var date = new Date(parseInt(response[dt].substr(6)));
        AddCustomDate(date);
    });
}


function OnError(request, status, error) {
}
function AddCustomDate(dt) {

    var newCD = new Object();

    newCD.day = dt.getDate();
    newCD.month = dt.getMonth() + 1;
    newCD.year = dt.getFullYear();

    customDays.push(newCD);
}

 

Parents
No Data
Reply
  • 29417
    Verified Answer
    Offline posted

    Hello drpoalim,

     

    Thank you for posting in our forum.

     

    RenderDays event would fire once when the controls is loaded on the page ,also when you change the currently visible days (for example by changing the month) or if you hover over or select a days.

    As for the order of the events this seems to be the expected behavior. You can access the days collection during the Initialize event so the days should be rendered at that point so that you could apply changes to them.

    I would suggest to iterate trough the days collection on the success function  of your ajax request to set the additional class and keep the logic in  WMC_RenderDay so that the class will be applied when you’re changing the month or when you hover over the days. 

    Please refer to the attached sample and let me know if this is what you’re trying to achieve.

     

    Best Regards,

    Maya Kirova

    Developer Support Engineer II

    Infragistics, Inc.

    http://ko.infragistics.com/support

     

    WMC_Days.zip
Children