Custom edit form.

5 posts, 1 answers
  1. Antony
    Antony avatar
    32 posts
    Member since:
    Feb 2013

    Posted 07 Mar 2013 Link to this post


    Instead of the RadScheduler's default edit form, i want to edit the apointment in my own form or rather use another page in my project which can be displayed like a popup in RadWindow. How to do this?

    Thanks in Advance,
  2. Answer
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 07 Mar 2013 Link to this post

    Hello Antony,

    You can use the OnClientAppointmentEditing and OnClientAppointmentInserting events to replace the default edit form with one of your own.

    1. First you need to insert a RadScheduler into your desired page and bind it to a data source. Also Set its StartEditingInAdvancedForm property to False, so that the new custom edit form is not loaded unless the user clicks the "more" link.
    2. Drag a RadAjaxLoadingPanel from the toolbox onto your Web page. On the body of the loading panel, type the literal "Loading...".
    3. Drag a RadAjaxManager onto your Web page and choose "Configure Ajax Manager" from its smart tag. In the Property Builder, select the RadScheduler as a control that initiates a request and as the updated control by this request. Assign the RadAjaxLoadingPanel as the loading panel for this pair. Then select the RadAjaxManager as a control that initiates a request and select the RadScheduler as the updated control.
    4. Give the AJAX manager an AjaxRequest event handler to rebind the scheduler after an edit:
    protected void RadAjaxManager1_AjaxRequest(object sender, AjaxRequestEventArgs e)
        if (e.Argument == "RebindScheduler")

     5. Add the following JavaScript functions.

    function AppointmentEditing(sender, eventArgs)
         var apt = eventArgs.get_appointment();
         window.radopen("AdvancedForm.aspx?Mode=Edit&AppointmentId=" + apt.ID, "AdvancedForm");
      function AppointmentInserting(sender, eventArgs)
         var start = formatDate(eventArgs.get_startTime());
         var isAllDay = eventArgs.get_isAllDay();
         // New appointment
         window.radopen("AdvancedForm.aspx?Mode=Insert&Start=" + start + "&IsAllDay=" + isAllDay, "AdvancedForm");  
      function formatDate(date)
       var year = padNumber(date.getUTCFullYear(), 4);
       var month = padNumber(date.getUTCMonth() + 1, 2);
       var day = padNumber(date.getUTCDate(), 2);
       var hour = padNumber(date.getUTCHours(), 2);
       var minute = padNumber(date.getUTCMinutes(), 2);
       return year + month + day + hour + minute;
      function padNumber(number, totalDigits)
       number = number.toString();
       var padding = '';
       if (totalDigits > number.length)
         for (i = 0; i < (totalDigits - number.length); i++)
           padding += '0';
       return padding + number.toString();
      function refreshScheduler()
         var ajaxManager = $find("RadAjaxManager1");

    6.  Set the OnClientAppointmentEditing property of your RadScheduler to "AppointmentEditing" and the       OnClientAppointmentInserting property to "AppointmentInserting". These two javascript functions are defined in the javascript   you added to your page. They call window.radopen() to open a RadWindow with content defined by AdvancedForm.aspx. AdvancedForm.aspx is a Web Form that takes information about the appointment from the URL. It uses four query parameters: Mode, which is "Insert" or "Edit" depending on whether the form is inserting a new appointment or editing an existing one; AppointmentId, which is the key for the appointment to edit; Start, which is the start time for an inserted appointment; and IsAllDay, which indicates whether an inserted appointment should begin as an all-day event. AdvancedForm.aspx has its own reference to the data source that the scheduler uses, and uses that data source to obtain information about the appointment to be edited, as well as to save any changes made by the user.

    7.Drag a RadWindowManager onto your page and add a window to the RadWindowManager.
       Set the ID property of the window to "AdvancedForm"

       Set the Title property to "Edit an Appointment"

       Set the ReloadOnShow property to True

       Set the Modal property to True

       Set the VisibleStatusBar property to False

       Set the Behaviors property to "Close"

       Set the OnClientClose property to the "refreshScheduler" function from the javascript you added to your page. The     refreshScheduler function causes the AJAX manager to trigger a rebind of the scheduler to reflect the changes made in the new edit form.


  3. DevCraft R3 2016 release webinar banner
  4. Blas
    Blas avatar
    55 posts
    Member since:
    Dec 2007

    Posted 18 Nov 2013 Link to this post


    I'm trying to apply this technique in my site, but I have a doubt: How does advancedForm.aspx know in a recursive instance whether the whole series is edited or only a this particular instance?

    Thank you
  5. Boyan Dimitrov
    Boyan Dimitrov avatar
    1728 posts

    Posted 21 Nov 2013 Link to this post


    An easy and convenient way of determining whether the user want to edit the current occurrence appointment only ( this will create an exception appointment) or edit the whole series is to use the get_editingRecurringSeries() method of the ClientAppointmentEditing client-side event arguments. Please review this help article in order to know how you can retrieve that value in the ClientAppointmentEditing client-side event.

    Boyan Dimitrov
    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 the blog feed now.
  6. Blas
    Blas avatar
    55 posts
    Member since:
    Dec 2007

    Posted 22 Nov 2013 Link to this post

    Thank you!!!

Back to Top
DevCraft R3 2016 release webinar banner