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.

How to add and handle events

Thread ID:

Created:

Updated:

Platform:

Replies:

121388 Dec 8,2015 04:38 PM Dec 16,2015 08:37 AM ASP.NET MVC 7
loading
Tags: Schedule
Tommy Klausen
Asked On December 8, 2015 04:38 PM

Hi!

Can you show or tell me where I can find some more information on how to add and handle events for the schedule in an asp .net mvc web application?

Tommy

Velmurugan S [Syncfusion]
Replied On December 9, 2015 05:07 AM

Hi Tommy,

Thanks for contacting Syncfusion support.

You can refer to the following sample, class reference, and API reference links to know more about adding and handling events for the schedule in an asp .net mvc web application.


Sample link: http://mvc.syncfusion.com/demos/web/schedule/events

Class Reference link:

http://help.syncfusion.com/cr/cref_files/aspnetmvc/ejmvc/Syncfusion.EJ~Syncfusion.JavaScript.ScheduleClientSideEventsBuilder_members.html

API reference link:

http://help.syncfusion.com/js/api/ejschedule#events

Note: To know more about the client-side events argument details, please refer to the above JS link. The argument details will be the same for the EJMVC Platform Schedule control.

Regards,
Velmurugan

Tommy Klausen
Replied On December 14, 2015 07:30 AM

Hi.

Can you take a look at the attached index file and se if I`ve understood this right?

Tommy

Attachment: Index_618923d1.7z

Karthigeyan Krishnamurthi [Syncfusion]
Replied On December 15, 2015 08:12 AM

Hi Tommy,

Thanks for your update.

We have prepared the following JS Playground link by modifying the attached code example.
JS Playground Link:
http://jsplayground.syncfusion.com/qd3ktqcc

In the above sample when the appointment is edited we have enabled the alert window by displaying the edited appointment’s subject, start time and end time. We request you to visit the below User Guide link in order to know more about the events and the arguments returned from the events.
API Reference Link:
http://help.syncfusion.com/js/api/ejschedule#events:appointmentedited

Note: The argument details will be the same for the EJMVC Platform Schedule control.

Kindly see the following code example that we have used in the above sample.
<Code>

<script type="text/javascript">

            $(function () {

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

                $("#Schedule1").ejSchedule({

                    width: "100%",

                    height: "525px",

                    currentDate: new Date(2014, 4, 5),

                    appointmentSettings: {

                        dataSource: dManager,

                        id: "Id",

                        subject: "Subject",

                        startTime: "StartTime",

                        endTime: "EndTime",

                        description: "Description",

                        allDay: "AllDay",

                        recurrence: "Recurrence",

                        recurrenceRule: "RecurrenceRule"

                    },

                    appointmentEdited: "OnAppointmentEdited" // This event will raise only when the appointment is edited through edit appointment window

                });


            });

            function OnAppointmentEdited(args) {

                //args.appointment- returns the appointments being edited

                //args.type- returns the name of the event

                var appointment = args.appointment;

                alert("Subject: " + appointment.Subject + "\nStartTime: " + appointment.StartTime + "\nEndTime: " + appointment.EndTime);

            }
        </script>
</Code>

Regards,
Karthigeyan


Tommy Klausen
Replied On December 15, 2015 09:42 AM

Hi.

Thank you for your answer.

Can you tell me where this code should go?
I`m also using a shared layout file where some of the links and script references are allready included in the file.

And in my example, how can I use the datasource instead of the datamanager. I use a different source than the example you provided. 

Tommy

Tommy Klausen
Replied On December 15, 2015 11:31 AM

And I can`t seem to find these to files in my syncfusion folder

 <script src="13.3.0.18/scripts/web/properties.js" type="text/javascript"></script>
    <script src="13.3.0.7/scripts/web/jsonscheduledata.js" type="text/javascript"></script>

Tommy

Tommy Klausen
Replied On December 15, 2015 02:35 PM

Hi.

I have managed to render the schedual now.
But I still need a couple of things done.

1. I need to pick up the data from my model as I did in the file I sent you.
2. In your example I loose the main menu in the top of the page. How is that rendered?

Tommy

Karthigeyan Krishnamurthi [Syncfusion]
Replied On December 16, 2015 08:37 AM

Hi Tommy,

We have prepared the sample for your requirement “Event sample for scheduler” which can be downloaded from the following location,
http://www.syncfusion.com/downloads/support/forum/121388/ze/EventColumnSample119211995

In the above sample when the appointment is edited AppointmentEdited event will raise. In that  event function we have enabled the alert window by displaying the edited appointment’s subject, start time and end time. We have retrieved the appointments from Model and rendered in the schedule control. In the previous update we have provided the online hosted JS sample in which the below CDN links were used in the sample. These CDN links will not be available in Syncfusion folders.
<Code>
<script src="13.3.0.18/scripts/web/properties.js" type="text/javascript"></script>
<script src="13.3.0.7/scripts/web/jsonscheduledata.js" type="text/javascript"></script>
</Code>

In the above sample we have referred the script files from the folder Scripts and CSS files from the folder Content. Kindly refer the below image.


Once you have installed Essential studio in your machine, necessary script and css files will be available under the following location,
CSS file location:
(installed location)\Syncfusion\Essential Studio\xxxxx\JavaScript\assets\css
Script location:
(installed location)\ Syncfusion\Essential Studio\xxxxx\JavaScript\assets\external

Apart from the above dependent scripts, you need to refer the ej.web.all.min.js file, which contains all the JavaScript components script in a minified format. Copy the ej.web.all.min.js file into the Scripts\ej folder.

Minified web file location:

(installed location)\ Syncfusion\Essential Studio\xxxxxx\JavaScript\assets\scripts\web
Note: xxxx denotes the build version installed in your local machine.

We request you to visit the below link in order to know more about the dependent script and css files location.
http://help.syncfusion.com/aspnetmvc/dependencies#stylesheets

We are unclear about your requirement “In your example I lose the main menu in the top of the page. How is that rendered?”. We request you to provide more information regarding this requirement in order to proceed further.

Regards,
Karthigeyan


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.

;