Dynamically Created Scheduler Context Menu and Ajax

[EmpowerIT]

Hi,
I am having some issues with a dymanically created SchedulerContextMenu and ajax updates on a page. On the AppointmentContextMenu client side event, I fire off some javascript that attempts to enable/disable  some option on the context menu based on attributes of the appointment. This was working fine when the context menu was defined statically on the page. 

I have started to generate the menu dynamically as I wish to use it on other pages.  This is  how it is created:

   public static RadSchedulerContextMenu BuildSiteAppointmentContextMenu(Page page)
   {
       RadSchedulerContextMenu cxt = new RadSchedulerContextMenu();
       cxt.ID = "SiteSchedulerContextMenu";
       cxt.ClientIDMode = ClientIDMode.Static;
       //QUICK ASSIGN
       cxt.Items.Add(new RadMenuItem()
                         {
                             Text = "Quick Assign",
                             Value = "QuickAssignJob",
                             ImageUrl = "~/Images/Menu/tiny/nav_right_blue_quick.png",
                             DisabledImageUrl = "~/Images/Menu/tiny/nav_right_blue_quick_bw.png"
                         });
       //ADVANCED ASSIGN
       cxt.Items.Add(new RadMenuItem()
       {
           Text = "Advanced Assign",
           Value = "AdvancedAssignJob",
           ImageUrl = "~/Images/Menu/tiny/nav_right_blue.png",
           DisabledImageUrl = "~/Images/Menu/tiny/nav_right_blue_bw.png"
       });
       //UNASSIGN
       cxt.Items.Add(new RadMenuItem()
       {
           Text = "Unassign Employee",
           Value = "UnassignJob",
           ImageUrl = "~/Images/Menu/tiny/nav_right_red.png",
           DisabledImageUrl = "~/Images/Menu/tiny/nav_right_red_bw.png"
       });
return cxt;
   }

It is assigned to the SiteScheduler in the PageLoad event on every load, see below:

SiteSchedule.OverflowBehavior = OverflowBehavior.Expand;
SiteSchedule.ShowNavigationPane = false;
SiteSchedule.AppointmentContextMenus.Add(ContextMenu.BuildSiteAppointmentContextMenu(this.Page));

The javascript that I am calling is this:

function GetSchedulerContextMenu() {
          var menu = document.getElementById("SiteSchedulerContextMenu");
           return menu;
       }

The above always returns null. Previously, i was using $find("%= SiteSchedulerContextMenu.ClientID %>") as this was defined in the markup

This fails after an ajax update and returns null. What am I doing wrong? Is there a different way to dynamically create and assign an appointment context menu to a scheduler?

Thanks,

[Peter]

Hi,

To add an appointment context menu dynamically, the ClientIDMode should not be 'Static';

public static RadSchedulerContextMenu BuildSiteAppointmentContextMenu(Page page)
    {
        RadSchedulerContextMenu cxt = new RadSchedulerContextMenu();
        cxt.ID = "SiteSchedulerContextMenu";
        //cxt.ClientIDMode = ClientIDMode.Static;
        //QUICK ASSIGN
        cxt.Items.Add(new RadMenuItem()

 * * *

Then, you can find the menu through the RadScheduler client API like this:

<script type="text/javascript">
      function pageLoad() {

          var scheduler = $find('<%= RadScheduler1.ClientID %>');
          var appointmentContextMenu = scheduler.get_appointmentContextMenus()[0];
          alert(appointmentContextMenu.get_id());
      }
  </script>

Kind regards,
Peter
the Telerik team

[EmpowerIT]

Hi Peter,
Thanks for your info. I have made the changes you recommended, however I am still receiving the same problem with the context menu's failing to display after an ajax update.

To summarize I have changed the following:

ClientIdMode is not static, it is the default

The javascript has been changed to the following:

function GetScheduler() {
         var scheduler = $find("<%= SiteSchedule.ClientID %>");
         return scheduler;
     }

     function GetSchedulerContextMenu() {
         var scheduler = GetScheduler();
         var menu = scheduler.get_appointmentContextMenus()[0];
         // alert(menu.get_id());
         return menu;
     }

     function GetSchedulerTimeContextMenu() {
         var scheduler = GetScheduler();
         var menu = scheduler.get_timeSlotContextMenus()[0];
         return menu;
     }

Like I said, before any ajax updates, this is working fine. Once the page has gone through an ajax update, the context menus stop being displayed (javascript errors to the effect that the contextmenus are either null or undefined)

[Peter]

Could you please try using the Page Init event instead of Page Load?

protected override void OnInit(EventArgs e)
  {
           RadScheduler1.AppointmentContextMenus.Add(BuildSiteAppointmentContextMenu(this.Page));
  }

Regards,
Peter
the Telerik team