CheckBox for each timeslot in DayView of Scheduler

[Navya]

Hi,

I need to add a checkbox for each timeslot row in day view of the Scheduler, is there such flexibility for Scheduler control?
Ref: Like how the data grid allows us to include different control in item template, same way is there any option in Scheduler control.

Thanks,
Navya

[Peter]

Hello Navya,

You can add controls in TimeSlotCreated. For example -

protected void RadScheduler1_TimeSlotCreated(object sender, TimeSlotCreatedEventArgs e)
   {
       RadScheduler scheduler = (RadScheduler) sender;
       if (scheduler.SelectedView == SchedulerViewType.DayView)
       {

           CheckBox TimeSlotCheckBox = new CheckBox();
           e.TimeSlot.Control.Controls.Add(TimeSlotCheckBox);

       }
   }

Best wishes,
Peter
the Telerik team

[Navya]

Thank you so much. I am getting 2 checkboxes for each timeslot, how can I make one chkbox per timeslot. Please suggest me.
My scheduler settings are like this:

 

 

 

<telerik:RadScheduler runat="server" ID="AppointmentRadScheduler" Skin="Windows7"  

Height="551px" Width="625px" ShowFooter="false" SelectedView="MonthView" 

TimeZoneOffset="03:00:00"  

DayStartTime="08:00:00" DayEndTime="21:00:00" 

FirstDayOfWeek="Sunday" LastDayOfWeek="Saturday"  

EnableDescriptionField="true"  

AppointmentStyleMode="Default"  

EnableDatePicker="true"  

OnNavigationComplete="AppointmentRadScheduler_NavigationComplete"  

OnAppointmentCreated="AppointmentRadScheduler_AppointmentCreated"  

OnAppointmentDataBound="AppointmentRadScheduler_AppointmentDataBound" 
OnAppointmentDelete="AppointmentRadScheduler_AppointmentDelete"  

OnAppointmentUpdate="AppointmentRadScheduler_AppointmentUpdate"  

OnAppointmentInsert="AppointmentRadScheduler_AppointmentInsert"  

Localization-ContextMenuAddAppointment="Add Appointment"  

OnAppointmentClick="AppointmentRadScheduler_OnAppointmentClick"  

OnClientTimeSlotClick="AppointmentRadScheduler_OnClientTimeSlotClick"  

OnTimeSlotCreated = "AppointmentRadScheduler_TimeSlotCreated"  

AllowEdit="true"  

DataKeyField="Key" DataStartField="StartDate" DataEndField="EndDate" DataSubjectField="Subject" MinutesPerRow="5" 

>

 

[Peter]

Hello Navya,

Please, try the following modification of the code:

protected void RadScheduler1_TimeSlotCreated(object sender, TimeSlotCreatedEventArgs e)
   {
       RadScheduler scheduler = (RadScheduler)sender;

       if ((scheduler.SelectedView == SchedulerViewType.DayView)&&(e.TimeSlot.End.Minute != 0))
       {

           CheckBox TimeSlotCheckBox = new CheckBox();
           e.TimeSlot.Control.Controls.Add(TimeSlotCheckBox);
       }
   }

All the best,
Peter
the Telerik team

[Navya]

Thanks, I could even achieve that by making

TimeLabelRowSpan

="1"

One more question, I do not find double click event associated with timeslot, is there any alternative solution for timeslot doubleclick?

[Navya]

One more issue, the checkboxes which I inserted programatically are not visible for a created(blocked) appoitment time slot.
Ref: Please see the attachment.

[Plamen]

Hi Navya,

You can handle the Timeslot doubleclick event by getting the OnClientAppointmentInserting event like this and after using it set_cancel to prevent the actual inserting:

function OnClientAppointmentInserting(sender, args) {
           alert(1);
           args.set_cancel(true);
       }

As for the second question here is one way how you can move the appointments a little bit in DayView:

protected void RadScheduler1_TimeSlotCreated(object sender, TimeSlotCreatedEventArgs e)
    {
            if ((RadScheduler1.SelectedView == SchedulerViewType.DayView) )
            {
                if (e.TimeSlot.End.Minute != 0)
                {
                    CheckBox TimeSlotCheckBox = new CheckBox();

                    e.TimeSlot.Control.Controls.Add(TimeSlotCheckBox);
                    RadScheduler1.CssClass = "moveRight";
                }
            }
            else
            {
                RadScheduler1.CssClass = "normal";
            }
        }
}

<style type="text/css">
        .moveRight .rsApt
       {
           margin-left:20px !important;
           }
           .normal .rsApt
           {
                margin-left:0px !important;
               }
   </style>

Hope this will be helpful.

Regards,
Plamen Zdravkov
the Telerik team

[Navya]

Thank you.

There is one more problem, I do not want the horizontal lines for the timeslots for which there is an appoinyment. PFA the screenshot. The unwanted lines are inside the red box.

Thanks,
Navya

[Plamen]

Hi Navya,

You can change the css of the separate timeslot after checking if there is an appointment in it like in this code:

protected void RadScheduler1_TimeSlotCreated(object sender, TimeSlotCreatedEventArgs e)
    {
        if ((RadScheduler1.SelectedView == SchedulerViewType.DayView))
        {
            foreach (Appointment app in RadScheduler1.Appointments)
            {
                if (app.Start>= e.TimeSlot.Start && app.End>= e.TimeSlot.End && app.Start<=e.TimeSlot.End)
                {
                    e.TimeSlot.CssClass = "slot";
                }
                if (app.Start<= e.TimeSlot.Start && app.End>= e.TimeSlot.End)
                {
                    e.TimeSlot.CssClass = "slot";
                }

            }
}

.slot
       {
          border-color:White !important;
           }

Hope this will be helpful.

Best wishes,
Plamen Zdravkov
the Telerik team

[vijay]

Hi,

I have added a check box to time slot, and i selected multiple check boxes. I need to find all selected check boxes while creating new appointment. How can i get this from code behind. please see attached screen shot. 

i used below code to add check box

protected void RadScheduler1_TimeSlotCreated(object sender, TimeSlotCreatedEventArgs e)
        {
            RadScheduler scheduler = (RadScheduler)sender;
            if ((scheduler.SelectedView == SchedulerViewType.WeekView)&& (e.TimeSlot.End.Minute != 0))
            {
                CheckBox TimeSlotCheckBox = new CheckBox();
                TimeSlotCheckBox.Text = "All Are Available";
                e.TimeSlot.Control.Controls.Add(TimeSlotCheckBox);
            }
        }

[Nencho]

Hi vijay,

I am afraid that there is not applicable approach to get a reference to the checkboxes or to all timeslots at server side. The option I can suggest you is to use jquery to get a reference to the checked checkboxes and use the scheduler.get_activeModel().getTimeSlotFromDomElement(rthtmlelement)) in order to get the timeslots at client-side.

For example:

var element = $telerik.$('input[type="checkbox"]:checked').parent().parent();

var timeslot = $find("radScheduler1").get_activeModel().getTimeSlotFromDomElement(element.get(0));

Hope this informality helps.

Kind regards,
Nencho
the Telerik team

 

 

[vijay]

Thank you Nencho, I followed your code and I am getting error.
please find attached "radSchedulerError" image. seems there is another thread for this error.
http://www.telerik.com/forums/problem-getting-client-radscheduler-reference

Here my idea is to create multiple meetings based on number of check boxes selected.
What is the client side event for "New appointment"--> "Save" button click. So i will get all selected slots and create meetings.

I tried for "OnClientAppointmentInserting" but this is firing when click on "New Appointment" itself, but we need a event when execute click on "Save" button.

[Veselin Tsvetanov]

Hello Vijay,

The error observed shows that you did not get correct reference to the RadScheduler client-side object. Apart from the forum thread that you have found, I would recommend you to review our Documentation article on this topic.

Concerning the second part of your question, the clicking the Save button on the advanced form does not fire any client-side event. Instead, you will have to attach an event listener to the click event using jQuery. You could do that by handling the OnClientFormCreated client side event:

function formCreated(sender, args) {
    if (args.get_mode() === 3) {
        $telerik.$('#RadScheduler1_Form_InsertButton').on('click', function (e) {
            // Implement here your custom code
        });
    }
}

Regards,
Veselin Tsvetanov
Telerik by Progress