Schedule Context menu (Right Click) event

[Pankaj]

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.

[Sarath Kumar P K]

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.

http://www.syncfusion.com/downloads/support/directtrac/140828/ze/ScheduleContextMenu517275920

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.

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

            $("#Schedule1").ejSchedule({

                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",

                menuItemClick:"onMenuItemClick",

            });

        });

        var appMenu = [];

        var cellMenu = [];

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

            $("#Schedule1contextMenu").hide();

        });

        function onMenuItemClick(args) {

            $("#Schedule1contextMenu").hide();

        }

        function onContextMenuOpen(args) {

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

            args.cancel = true;

            var eve = args.events.events;

            targetClass = $(args.events.target);

            $.ajax({

  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++) {

                        appMenu.push({

                            id: e.app[i].Id,

                            text: e.app[i].Text,

                        });

                    }

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

                        cellMenu.push({

                            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;

                    $(targetClass).trigger("tap");                   

                    $("#Schedule1contextMenu").show();

                    appMenu = [];

                    cellMenu = [];

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

                }

            });           

        }
    </script>

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

Regards,
Sarath Kumar P K

[Sakthi G]

From: Pankaj Sharma [mailto:[e-mail]]
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.

Regards

Pankaj

[Sarath Kumar P K]

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.

Regards,
Sarath Kumar P K