We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Schedule Context menu (Right Click) event

Hi Team,

I am using Syncfusion Schedule in my project and on context menu click of cell(right click of the cell) I want to make AJAX call and depending on the data return I want to bind context menu.

But I am not able to get right click of one particular cell.

So please help me how can I implement it or provide any link that explain the same.

Many Thanks.

3 Replies

SK Sarath Kumar P K Syncfusion Team July 1, 2015 01:18 PM UTC

Hi Pankaj,

Thank you for using Syncfusion products.

We have prepared the workaround sample (MVC sample with JavaScript Schedule control) that tries to meet your requirement “ Triggering the Ajax method and based on the data return and bind it to the context menu”, which can be downloaded from the following location.


In the above sample, we have used the Schedule control client side method “beforeContextMenuOpen” and within this method we have called the “Ajax method GetItems” and bind the returned data to the ContextMenu. Please find the following code snippets that will help you to meet your requirement.

Controller page:

public JsonResult GetItems() {

            List<Appointment> appointment = new List<Appointment>();

            appointment.Add(new Appointment() { Id = "open", Text = "Open Appointment" });

            appointment.Add(new Appointment() { Id = "delete", Text = "Delete Appointment" });

            appointment.Add(new Appointment() { Id = "custommenu3", Text = "Custom Menu3" });

            appointment.Add(new Appointment() { Id = "custommenu4", Text = "Custom Menu4" });

            List<Cells> cells = new List<Cells>();

            cells.Add(new Cells() { Id = "new", Text = "New Appointment" });

            cells.Add(new Cells() { Id = "recurrence", Text = "New Recurring Appointment" });

            cells.Add(new Cells() { Id = "today", Text = "Today" });

            cells.Add(new Cells() { Id = "gotodate", Text = "Go to date" });

            cells.Add(new Cells() { Id = "settings", Text = "Settings" });

            cells.Add(new Cells() { Id = "view", Text = "View", ParentId = "settings" });

            cells.Add(new Cells() { Id = "businesshours", Text = "Business Hours", ParentId = "settings" });

            cells.Add(new Cells() { Id = "custommenu1", Text = "Custom Menu1" });

            cells.Add(new Cells() { Id = "custommenu2", Text = "Custom Menu2" });

            ViewBag.app = appointment;

            ViewBag.cell = cells;

            var data = new {app = ViewBag.app,cell=ViewBag.cell };

            return Json(data, JsonRequestBehavior.AllowGet);


Index Page:

<script type="text/javascript">

$(function () {

            var dManager = ej.DataManager(window.Default).executeLocal(ej.Query().take(10));


                width: "100%",

                height: "525px",

                contextMenuSettings: {

                    enable: true


                appointmentSettings: {

                    dataSource: dManager,

                    id: "Id",

                    subject: "Subject",

                    startTime: "StartTime",

                    endTime: "EndTime",

                    description: "Description",

                    allDay: "AllDay",

                    recurrence: "Recurrence",

                    recurrenceRule: "RecurrenceRule"


                beforeContextMenuOpen: "onContextMenuOpen",




        var appMenu = [];

        var cellMenu = [];

        $(document).mouseup(function (e) {



        function onMenuItemClick(args) {



        function onContextMenuOpen(args) {

            $("#Schedule1").ejSchedule("option", "showQuickWindow", false);

            args.cancel = true;

            var eve = args.events.events;

            targetClass = $(args.events.target);


  url: '@Url.Action("GetItems","Schedule")',        // Here we are calling the method "GetItems"               

  dataType: "json",

                success: function (e) {

                    for (var i = 0; i < e.app.length; i++) {


                            id: e.app[i].Id,

                            text: e.app[i].Text,



                    for (var i = 0; i < e.cell.length; i++) {


                            id: e.cell[i].Id,

                            text: e.cell[i].Text,



                    $("#Schedule1").ejSchedule({ contextMenuSettings: { menuItems: { appointment: appMenu, cells: cellMenu } } });  // Here we are binding the returned menu data to ContextMenu

                    var menuObj = $("#Schedule1contextMenu").data("ejMenu");

                    appFlag = (targetClass.hasClass("e-appointinnertext") || targetClass.hasClass("e-apptime") || targetClass.hasClass("e-apptext")) ? false : true;

                    (appFlag) ? menuObj.option("fields.dataSource", cellMenu) : menuObj.option("fields.dataSource", appMenu);

                    $("#Schedule1contextMenu").css({ "top": targetClass.offset().top + 10 + "px", "left": targetClass.offset().left + 10 + "px" });

                    var obj = $("#Schedule1").data("ejSchedule");

                    obj._target = args.events;



                    appMenu = [];

                    cellMenu = [];

                    $("#Schedule1").ejSchedule("option", "showQuickWindow", true);




Please let us know if it helps and if you need any further assistance on this.

Sarath Kumar P K

SG Sakthi G Syncfusion Team July 2, 2015 06:10 AM UTC

From: Pankaj Sharma [mailto:pankajss29@gmail.com]
Sent: Thursday, July 02, 2015 2:04 AM
To: Syncfusion Support
Subject: Re: Syncfusion support community forum 119485, Schedule Context menu (Right Click) event, has been updated.

Hi Sarath,

Thanks for the reply.

This is what exactly I want.



SK Sarath Kumar P K Syncfusion Team July 3, 2015 04:10 AM UTC

Hi Pankaj,

Thanks for your update.

We are glad to hear that the solution provided by us helped you to meet your requirement.
Please let us know, if you require any further assistance. As always, we will be happy to assist you.

Sarath Kumar P K

Live Chat Icon For mobile
Up arrow icon