heavy customization of the quick window

[marco]

Hi there,

I was trying to do myself but I would prefer a word from you before going "from scratch".

My Requirement is the following:

Click-On-Cell => display a custom quickWindow, with some fields the control doesn't manage and a "forced" category. In this quick window there would not your default button but something like a radial menu, for I need to know which flavor of action you choose.

I also need a validation on this, and to be able to retrieve an html fragment from server ( yep, something changes based on a variety of business condition, and something not).

Click-On-Appointment: display a custom QuickWindow with some more information and again a radial menu for you can take more than an action on it that the common crud - which you may still want to perform in the AppointmentWindow.

Same as above, I need to ask the server business condition and therefore the markup of a non-static part. This may lead even to CRUD on other entities (still, no Entity Framework) as long as business requirements allow that.

You see, you start for a minimal appointment insertion and ends up to insert a new Person, which in turn will used to complete the appointment creation. This is a related action on the intent of placing a meeting.

Do you natively support this scenario or had I simply to disable the quick window and do it myself from scratch, ending with notifying the Schedule of a new "already inserted" appointment?

Another related question:

1.I would show a context-menu (even radial) on the click, not the right-click

2. I'd like this menu would do what I bid it to do: that is, I can customize your built-in right-click menu, yet it controls the Schedule directly. I would place my code in the middle to divert from standard action to custom action. As far as I can see I fear it is not a simply "setting" of the schedule nor of its context-menu. For Instance, I have 3 menu entry, all of them would end up inserting an appointment, but each of them will pre-set something, and possibly take a related action. The first will pre-set the counterpart of a meeting, the second will lead you to pick the counterpart from a list which is suitable for the _activity_ the cell is marked for, the third will pick from another list again, and all of them would pre-set (and pin) the category of the resulting appointment based on the list, the activity, and other business consideration. It may also come some rules about duration.

So I really need the user to fire the proper intent, for that would kick-off a process which will end up in an appointment. And I Really need to know which was it choice: did he choose the first of the voice?

I have also voices that would not relate so directly to the schedule itself. And choices differs by cell, by appointment, and by each of the appointment, so I would prefer to apply the right set of choices on the opening of the menu, and then dispatch a dedicated event.

For when i choose from the actual context menu, the Schedule opens up its form but...  I don't have a clue of what opened that form - which _intent_ was that started (at least, which choice the user did, which voice he clicked.

Thanks for your clarification,

Marco

[Vinitha Devi Murugan]

Hi Marco, 

  

Thanks for contacting Syncfusion support. 

  

Q1: Quick window customization on cell click and appointment click. 

Yes it’s possible to customize the quick window on cell click and appointment click. We have prepared the sample based on your requirement which can be available in below link. 

 

http://www.syncfusion.com/downloads/support/forum/138775/ze/Customization_quickwindow-62556049 

  

In the above sample we have added the two custom fields namely Status and Reporter on Quick window. Instead of using normal buttons, we have used the radial menu with two options add and edit. 

When we click add icon in radial menu, it will create the new appointment with custom fields values. When we click the edit icon in radial menu, it opens the create appointment window. Also, we have used the local database for databinding. 

  

Please find the following code example, we have used in the above sample.  

  

<code> 

    <div id="radialtarget1" class="content-container-fluid"> 

        <div class="row" id="rteSample1"> 

            <div class="cols-sample-area"> 

                <div style="float: left" id="Schedule1"> 

                </div> 

            </div> 

        </div> 

        <div id="defaultRadialMenu"> 

            <ul> 

                <li data-ej-imageurl="/fonts/images/add.png" 

                    data-ej-text="Create" data-ej-click="createAppointment"></li> 

                <li data-ej-imageurl="/fonts/images/edit.png" 

                    data-ej-text="Edit" data-ej-click="editAppointment"></li> 

            </ul> 

        </div> 

    </div> 

    <script type="text/javascript"> 

        $(function () { 

            var data = [{ 

                Id: 100, 

                Subject: "Meeting", 

                StartTime: new Date(2014, 4, 4, 10, 00), 

                EndTime: new Date(2014, 4, 4, 11, 00), 

                AllDay: false, 

                Recurrence: false, 

                Status: 'Fixed' 

            } 

            ]; 

            var dataManager = ej.DataManager({ 

                // get the appointment data from the specified controller action 

                url: '@Url.Action("GetData","Home")', // This will trigger to bind the appointment data initially to the Schedule control 

                crudUrl: '@Url.Action("Batch","Home")', // This will trigger while performing CRUD operation on the Scheduler appointments 

                crossDomain: true, 

                adaptor: new ej.UrlAdaptor() 

            }); 

            dataManager.adaptor = new ej.UrlAdaptor(); 

            $("#Schedule1").ejSchedule({ 

                width: "100%", 

                height: "525px", 

                beforeAppointmentCreate: "OnBeforeAppointmentCreate", 

                appointmentClick: "OnAppointmentClick", 

                cellClick: "OnCellClick", 

                currentDate: new Date(2015, 5, 15), 

                appointmentSettings: { 

                    dataSource: dataManager, 

                    id: "Id", 

                    subject: { field: "Subject", validationRules: { required: true } }, 

                    startTime: "StartTime", 

                    endTime: "EndTime", 

                    startTimeZone: "StartTimeZone", 

                    endTimeZone: "EndTimeZone", 

                    allDay: "AllDay", 

                    recurrence: "Recurrence", 

                    recurrenceRule: "RecurrenceRule" 

                }, 

                appointmentWindowOpen: "onAppointmentWindowOpen" 

            }); 

            radialEle = $('#defaultRadialMenu'); 

            if (!(ej.browserInfo().name == "msie" && ej.browserInfo().version < 9)) { 

                radialEle.ejRadialMenu({ imageClass: "imageclass", backImageClass: "backimageclass" }); 

            } 

        }); 

 

 

        function OnAppointmentClick(args) { // Quick window customization on appointment click 

            if (!ej.isNullOrUndefined(args.appointment.Status)) { 

                if ($(".customfields").length == 0) { 

                    var customDesign = "<tr class='customfields'><td>Issue Status</td><td><div class='statusValue'/></td></tr>" + 

                          "<tr class='customfields'><td>Reporter</td><td><div class='reporterValue'/></td></tr>"; 

                    $(".e-quicksubject").parent().parent().after(customDesign); // here we are adding the custom fields in app quick window 

                } 

 

                this._quickAppDetailsWindow.find(".statusValue").html(args.appointment.Status); 

                this._quickAppDetailsWindow.find(".reporterValue").html(args.appointment.Reporter); 

            } 

            else { 

                this._quickAppDetailsWindow.find(".statusValue").html(""); 

                this._quickAppDetailsWindow.find(".reporterValue").html(""); 

            } 

        } 

 

        function OnBeforeAppointmentCreate(args) { 

            // checks if the subject value is not left blank before saving it. 

 

            args.appointment["Subject"] = this._quickAppointWindow.find('.subject').val(); 

            args.appointment["Status"] = this._quickAppointWindow.find('.Status').val(); 

            args.appointment["Reporter"] = this._quickAppointWindow.find('.Reporter').val(); 

        } 

 

        var celltarget = ''; 

        function OnCellClick(args) { // Quick window customization ob cell click 

            celltarget = args.target; 

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

            if ($(".customfields1").length == 0) { 

                var customDesign1 = "<tr class='customfields1'><td class='customlabel'>Status</td><td><input name='Status' class='Status' type='text'/></td></tr>" + 

                    "<tr class='customfields1'><td class='customlabel'>Reporter</td><td><input name='Reporter' id='Report' class='Reporter' type='text'/></td></tr>" + 

                    "<tr ><td></td><td class='customlabel'><button id='delRea1'>Click me to show radial menu</button></td></tr>"; 

                $(".e-subjectlabel").parent().after(customDesign1); // here we are adding the custom fields in quick window 

            } 

            $('.e-quickcreatebottomcontainer').hide(); 

            this._quickAppointWindow.find(".Status").val(""); 

            this._quickAppointWindow.find(".Reporter").val(""); 

 

            $("#delRea1").click(function (e) { // Radial menu open on button click 

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

                var target = $("#radialtarget1"), radialRadius = 150, radialDiameter = 2 * radialRadius, 

                      // To get Iframe positions 

                      iframeY = e.clientY, iframeX = e.clientX, 

                      // To set Radial Menu position within target 

                      x = iframeX > target.width() - radialRadius ? target.width() - radialDiameter : (iframeX > radialRadius ? iframeX - radialRadius : 0), 

                      y = iframeY > target.height() - radialRadius ? target.height() - radialDiameter : (iframeY > radialRadius ? iframeY - radialRadius : 0); 

                $('#defaultRadialMenu').ejRadialMenu("setPosition", x, y); 

 

            }); 

 

        } 

        function createAppointment(args) { // Appointment Save 

            var appointment = {}; 

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

            var result = obj.getSlotByElement(); // to get the selected cell details 

            if (result) { 

                appointment["StartTime"] = result.startTime; 

                appointment["EndTime"] = result.endTime; 

                if (result.resources) { 

                    appointment["roomId"] = result.resources.id; 

                } 

                obj.saveAppointment(appointment); 

                obj._quickWindowClose(); 

                $("#defaultRadialMenu").ejRadialMenu("hide"); 

                //$("#delRea1").close(); 

            } 

        } 

        function editAppointment(args) { 

            debugger; 

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

            if (celltarget != '') 

                obj._appointmentWindow(celltarget); 

 

            $("#defaultRadialMenu").ejRadialMenu("hide"); 

        } 

 

        function onAppointmentWindowOpen(args) { 

            //  args.cancel = true; // prevents the display of default appointment window 

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

            debugger; 

            // If double clicked on the appointments, fill the custom appointment window fields with appropriate values. 

            if (!ej.isNullOrUndefined(args.appointment)) { 

                $("#customId").val(args.appointment.Id); 

                $("#subject").val(args.appointment.Subject); 

            } 

        } 

 

    </script> 

 

</code> 

 

Q2: Show a context-menu on the click not the right click. 

It’s possible to open the context-menu on the click event, for which we have prepared the sample based on your requirement that can be seen in the below link.  

http://jsplayground.syncfusion.com/qhmhfw0g  

Since the left click on work cells and appointments opens up the quick window by default, therefore either one of the option you could follow. Kindly share on more details, if any concerns on this. 

  

Q3: Customization in context menu: 

We have also included how to customize context menu with custom menu options in the above jsplayground link. 

Also, please refer the below online sample for context menu customization.  

  

Sample Link: https://js.syncfusion.com/demos/web/#!/bootstrap/schedule/contextmenu  

UG Link: https://help.syncfusion.com/js/schedule/context-menu#custom-menu-options  

  

Kindly check the above sample and revert us with further details, if we have misunderstood your requirement or else if you need any further assistance on this.  

  

Regards, 

M. Vinitha devi.