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.
Unfortunately, activation email could not send to your email. Please try again.

Schedule Context menu (Right Click) event

Thread ID:

Created:

Updated:

Platform:

Replies:

119485 Jun 30,2015 03:45 AM Jul 3,2015 12:10 AM JavaScript 3
loading
Tags: ejSchedule
Pankaj
Asked On June 30, 2015 03:45 AM

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 [Syncfusion]
Replied On July 1, 2015 09:18 AM

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 [Syncfusion]
Replied On July 2, 2015 02:10 AM

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.


Regards

Pankaj


Sarath Kumar P K [Syncfusion]
Replied On July 3, 2015 12:10 AM

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

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;