Help! Disable RadScheduler rerendering on client side.

2 posts, 0 answers
  1. Adam
    Adam avatar
    2 posts
    Member since:
    Oct 2012

    Posted 01 Oct 2012 Link to this post

    Hello,

    I've created my own class inheriting from the RadScheduler in order to customize the view to display as an hebrew calendar - right to left with hebrew dates at the calendar header and at each cell header.

    After working on overriding the CreateChildControls on the server side, finding the controls I need and changing them to fit my needs, I was able to put an empty scheduler control and see it rendering as I expected - everything worked great, I'll note I wasn't using ajax, and moving through months made a post-back and the calendar showed with all my hebrew strings and settings.

    My next requirement was to call a webservice that can be called only from a client side code, so I've used jQuery and added the result using $find('<%=schScheduler.ClientID %>').insertAppointment(newAppointment); - the appointment wasn't added at first, but after looking at this: http://www.telerik.com/community/forums/aspnet-ajax/scheduler/insert-appointment-client-side.aspx#823397 I've changed the provider of the scheduler to a dummy webservice which returns empty lists and added a cancelEvent client handlers.
    After doing this, every time I refresh the page I see my hebrew calendar for a second or less and then it renders to the english default radscheduler calendar with none of my hebrew settings or string, as if the entire dom elements are being re-created using javascript after receiving the empty list from the dummy webservice.

    I can't seem to add the appointment using jQuery if the scheduler is not using webservice provider. On the other hand, I've worked a lot on customizing the scheduler on the server side, Is there's a way to disable that javascript rerendering of the control after a webservice response? I've tried disabling the OnClientRequestSuccess event with the cancelEvent (as described in the link above) but then nothing happens (I can't move through months)..

    Help!!

    This is some of my aspx code:
    <hbc:HebrewCalendar runat="server" ID="schScheduler" TimeZoneOffset="03:00:00" SelectedView="MonthView"
                      DayStartTime="08:00:00" DayEndTime="22:00:00" EnableDescriptionField="true" Culture="Hebrew (Israel)"
                      OverflowBehavior="Expand" FirstDayOfWeek="Sunday" OnClientNavigationComplete="OnClientNavigationComplete"
                      OnClientAppointmentWebServiceInserting="OnClientAppointmentWebServiceInserting"
                      OnClientAppointmentsPopulating="OnClientAppointmentsPopulating"
                      OnClientResourcesPopulating="OnClientResourcesPopulating">
        <WebServiceSettings Path="~/AppointmentsWebService.asmx" />
    </hbc:HebrewCalendar>
    <script language="javascript" type="text/javascript">
    var adding_appt = false;
    var scheduler;
     
    $('#<%=schScheduler.ClientID %>').ready(function () {
        loadAppointments($find('<%=schScheduler.ClientID %>'));
    });
     
    function loadAppointments(sceduler) {
        var startDate = sceduler.get_firstDayStart();
        var endDate = sceduler.get_activeModel().get_visibleRangeEnd();
        $.getJSON('<%= GetApptUrl %>', function (appointments) {
                       for (var i = 0; i < appointments.length; i++) {
                           var apt = appointments[i];
     
                           var newAppointment = new Telerik.Web.UI.SchedulerAppointment();
     
                           var start = $.datepicker.parseDate("dd/mm/yy", apt.StartDate);
                           start.setHours(apt.StartHour.split(':')[0]);
                           var end = $.datepicker.parseDate("dd/mm/yy", apt.EndDate);
                           end.setHours(apt.EndHour.split(':')[0]);
     
                           newAppointment.set_start(start);
                           newAppointment.set_end(end);
                           newAppointment.set_subject(apt.Subject);
     
                           adding_appt = true;
                           sceduler.insertAppointment(newAppointment);
                           adding_appt = false;
                       }
                   });
    }
    function OnClientNavigationComplete(sender, eventArgs) {
        loadAppointments(sender);
    }
    function OnClientAppointmentsPopulating(sender, eventArgs) {
        if (adding_appt)
            eventArgs.set_cancel(true);
    }
    function OnClientAppointmentWebServiceInserting(sender, eventArgs) {
        if (adding_appt)
            eventArgs.set_cancel(true);
    }
    function OnClientResourcesPopulating(sender, eventArgs) {
        if (adding_appt)
            eventArgs.set_cancel(true);
    }
    </script>


    I've attached some of my hebrew calendar code to demonstrate part of the things I'm doing on server side (it's about 20% of the logic, it's not really relevant to the problem I'm having on the client side so I truncated most of it to avoid confusion):

    public class HebrewCalendar : RadScheduler
    {
        protected override void CreateChildControls()
        {
            base.CreateChildControls();
     
            var allControls = AllControls().ToList();
            var allHtmlGenericControls = allControls.OfType<HtmlGenericControl>();
            var minDate = DateTime.MaxValue;
            var maxDate = DateTime.MinValue;
            MakeViewJewish(allHtmlGenericControls, ref minDate, ref maxDate);
     
            // Update top only if dates exists or in case this is a single day view
            if ((minDate != DateTime.MaxValue && maxDate != DateTime.MinValue) || SelectedView == SchedulerViewType.DayView)
            {
                var header = allControls.OfType<LiteralControl>().Where(lt => lt.ID == "DateLabel").FirstOrDefault();
     
                if (header != null)
                {
                    switch (SelectedView)
                    {
                        case SchedulerViewType.MonthView:
                            header.Text = string.Format("<div class='header-date-text'>{0} ({1})</div>", header.Text, GetHebrewMonths(minDate, maxDate));
                            break;
                    }
                }
            }
     
            // Swap prev/next buttons on the upper-left corner of the calendar
            var prev = allControls.OfType<HtmlGenericControl>().Where(c => c.Attributes["class"] == "rsPrevDay").FirstOrDefault();
            var next = allControls.OfType<HtmlGenericControl>().Where(c => c.Attributes["class"] == "rsNextDay").FirstOrDefault();
            if (prev != null && next != null)
            {
                prev.Attributes["class"] = "rsNextDay";
                next.Attributes["class"] = "rsPrevDay";
     
                var prevHtml = prev.InnerHtml;
                prev.InnerHtml = next.InnerHtml;
                next.InnerHtml = prevHtml;
            }
        }
     
        private void MakeViewJewish(IEnumerable<HtmlGenericControl> allHtmlGenericControls, ref DateTime minDate, ref DateTime maxDate)
        {
            foreach (var control in allDateControls)
            {
                try
                {
                    string hebDay, hebMonth;
                    DateTime controlDate = DateTime.MinValue;
                    switch (SelectedView)
                    {
                        case SchedulerViewType.MonthView:
                            // Check if this cell wasn't handled already
                            if (control.Attributes["title"].EndsWith(")"))
                                continue;
     
                            // Add hebrew day string
                            controlDate = DateTime.Parse(control.Attributes["title"], Culture);
                            hebDay = GetHebrewDay(controlDate);
                            hebMonth = GetHebrewMonth(controlDate);
                            control.Attributes["title"] += string.Format(" ({0} ב{1})", hebDay, hebMonth);
                            control.InnerHtml = string.Format("<div class='eng-date'>{0}</div><div class='heb-date'>{1}</div>",
                                                              control.InnerHtml,
                                                              hebDay != "א'" ? hebDay : string.Format("{0} {1}", hebDay, hebMonth));
                            break;
                }
                catch (Exception ex)
                {
                    throw ex;
                }
            }
        }
     
        #region Georgian to hebrew date converting
                // Code irelevant to the problem...
        #endregion
    }
  2. Adam
    Adam avatar
    2 posts
    Member since:
    Oct 2012

    Posted 07 Oct 2012 Link to this post

    After a lot of digging telerik's js source code, I've managed to advance so far:

    I canceled the rerendering as I wanted - both on loading and on navigation (through the arrows).

    The only thing that wasn't fixed was the rerendering of the calendar when navigating with the datetimepicker at the top (selecting day).

    This is the js code that I wrote to fix all of that for those who wanna do the same:
    Telerik.Web.UI.RadScheduler.prototype.insertAppointment = function (l) {
        if (this._renderingManager) {
            this.get_appointments().add(l);
            return;
        }
    };
    Telerik.Web.UI.RadScheduler.prototype._onNavigationCommand = function (k, n) {
        if (k)
            k._renderingManager = null;
    };
    if (Telerik.Web.UI.Scheduler.Rendering.RenderingManagerBase)
    {
        Telerik.Web.UI.Scheduler.Rendering.RenderingManagerBase.prototype.initialize = function () {
            this._initializeLoader();
         
            // most logic removed
         
            this._owner.add_propertyChanged(Function.createDelegate(this, this._onSchedulerPropertyChanged));
        };
    }
    function OnClientAppointmentsPopulating(sender, eventArgs) {
        if (adding_appt)
            eventArgs.set_cancel(true);
    }
    function OnClientAppointmentWebServiceInserting(sender, eventArgs) {
        if (adding_appt)
            eventArgs.set_cancel(true);
    }
    function OnClientResourcesPopulating(sender, eventArgs) {
        if (adding_appt)
            eventArgs.set_cancel(true);
    }
Back to Top