CheckBox for each timeslot in DayView of Scheduler

13 posts, 0 answers
  1. Navya
    Navya avatar
    14 posts
    Member since:
    Aug 2011

    Posted 01 Aug 2011 Link to this post

    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
  2. Peter
    Admin
    Peter avatar
    6637 posts

    Posted 01 Aug 2011 Link to this post

    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

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Navya
    Navya avatar
    14 posts
    Member since:
    Aug 2011

    Posted 01 Aug 2011 Link to this post

    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" 

    >

     

  5. Peter
    Admin
    Peter avatar
    6637 posts

    Posted 03 Aug 2011 Link to this post

    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

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  6. Navya
    Navya avatar
    14 posts
    Member since:
    Aug 2011

    Posted 03 Aug 2011 Link to this post

    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?

  7. Navya
    Navya avatar
    14 posts
    Member since:
    Aug 2011

    Posted 03 Aug 2011 Link to this post

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

    Posted 08 Aug 2011 Link to this post

    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

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  9. Navya
    Navya avatar
    14 posts
    Member since:
    Aug 2011

    Posted 22 Aug 2011 Link to this post

    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
  10. Plamen
    Admin
    Plamen avatar
    2731 posts

    Posted 25 Aug 2011 Link to this post

    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

    Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

  11. vijay kumar
    vijay kumar avatar
    7 posts
    Member since:
    Nov 2016

    Posted 05 Nov Link to this post

    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);
                }
            }

  12. Nencho
    Admin
    Nencho avatar
    1458 posts

    Posted 07 Nov Link to this post

    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
     
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
     
  13. vijay kumar
    vijay kumar avatar
    7 posts
    Member since:
    Nov 2016

    Posted 08 Nov in reply to Nencho Link to this post

    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.

  14. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    283 posts

    Posted 10 Nov Link to this post

    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
    Check out the new UI for ASP.NET Core, the most complete UI suite for ASP.NET Core development on the market, with 60+ tried-and-tested widgets, based on Kendo UI.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017