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.

Access properties of an event on ClientSide

Thread ID:

Created:

Updated:

Platform:

Replies:

105857 Nov 23,2012 07:46 AM Dec 10,2012 04:23 AM ASP.NET MVC (Classic) 9
loading
Tags: Schedule
Bryan Macmillan
Asked On November 23, 2012 07:46 AM

Hi, 
I am trying to add a ClientSide Event on the MCV Schedule control. 
The event fires ok and I reach my javascript function, however how do I access the text of the "Subject" element of the Appointment that the user double clicked on?
I tried the below in an alertbox but the subject is returned as null, even though I am sure there is text in the subject. 
If the user clicks an appointment with a certain value in the subject I wish to display a pop-up, else I wish to re-direct the user to a custom form. Is this possible?
VIEW
<div>
                            @(Html.Syncfusion().Schedule("Diary""ScheduleModel")
 
                                .BindList(columns =>
                                    {
                                        columns.IdField("SlotId");
                                        columns.SubjectField("DiarySubject");
                                        columns.StartTimeField("EntryDt");
                                        columns.EndTimeField("EntryEndDT");
                                        columns.OwnerField("OwnerResource");
                                        columns.CategorizeField("Category");
 
                                    })
                                 .Resources((List<ScheduleResource>)ViewData["resources"])
                                 .AllowAddNew(false)
                                 .AllowDelete(false)
                                 .AllowDragAndDrop(false)
                                 .AllowResize(false)
                                 .AllowRecurrence(false)
                                 .AllowReminder(false)
                                 .AllowPriority(false)
                                 .AllowMultipleResource(true)
                                 .BusinessStartHour(8)
                                 .BusinessEndHour(18)
                                 .CellWidth(200)
                                 .ClientSideOnAppointmentDoubleClick("onCellDblClick")
                                 .EndHour(18)
                                 .Height(650)
                                 .HighlightBusinessHours(true)
                                 .ShowPrint(false)
                                 .StartHour(8)
                                 .ShowAppointmentIndicator(false)
                                 .ShowReminderWindow(false)
                                 .ShowContextMenu(true)
                                 .ShowTimeZonesButton(false)
                                 .ShowResourceHeader(true)
                                 .ShowWorkweekView(false)
                                 .Skins(ScheduleSkins.Metro)
                                 .TimeMode(ScheduleTimeMode.Hours24)
                                 .Width(850)
 
                         )
                        </div>

JAVASCRIPT

function onCellDblClick(sender, args) {
    args.cancel = true;
    alert(sender.GetSubject()[args._id]);
}




Uma Maheswari C [Syncfusion]
Replied On November 26, 2012 12:16 AM

Hi MacMillan,
    It is possible to access the "Subject" element of the Appointment which has been double clicked, not through the GetSubject() method as there is no such method available. But it can be accessed through the following code snippet:
    function onCellDblClick(sender, args) {
        args.cancel = true;
        var applist = sender.get_AppointmentList()[args._id];
        var subject = applist.Subject;
        if(subject == "")
        {
            // code to redirect to the custom form
        }
        else
        {
        alert(subject);
        }
    }
 
Regards,
Uma Maheswari C

Bryan Macmillan
Replied On November 26, 2012 05:08 AM

Hi Uma, 

Although I can now successfully access one appointment, it appears to always be the same appointment no matter what appointment I double click on. The problem seems to be that  args._id is always passed into the function with the value 0, hence the same appointment is being retrieved no matter what appointment is clicked on by the user. Can you advise? Not sure if this makes a difference but I am using multiple resources on the schedule.

I am running Essential Studio Enterprise Edition 2012 volume 4 (10.4.0.53), on Visual Studio 2010 SP1 in a asp.net MVC 3 razor project on .net 4.0


Uma Maheswari C [Syncfusion]
Replied On November 28, 2012 12:22 AM

Hi MacMillan,

 

It doesn’t make any difference using multiple resources on the schedule, while accessing an appointment and also we are unable to reproduce the reported problem. Therefore, we have prepared a simple sample, demonstrating the retrieval of fields of an appointment, on which the user double clicks. The sample can be downloaded from the below link:

 

ScheduleMVCForum.zip

 

Kindly try the above sample and let us know whether you are able to reproduce the reported problem in it. If not, kindly try to reproduce the reported problem in the above sample, so that we could sort out the issue and provide you with exact solution.

 

Regards,

Uma Maheswari C


Bryan Macmillan
Replied On November 28, 2012 06:31 AM

Hi Uma, 

I can confirm the sample, and my code, now works. Issue was due to duplicate "Id" values being populated in my dataset, thus several appointments had the same id, I have added a constraint into my repository which has fixed this.

Thanks for your help on this. 

Bryan Macmillan
Replied On November 28, 2012 12:12 PM

Hi Uma, 

Was not sure whether to open a new thread or not, but this is also related to client side scripting. 

I am loading a large amount of appointments (50-60 per day across multiple resources), and I have noticed that switching between "day" view and "week" view, for example, is taking a rather long time to load. In total it is taking 6.5 seconds to load appointments in the "Week" view, of which only 2.5 seconds is server side the rest is client sider rendering. (I have tried multiple browsers, times are all much the same). Note I have already implemented Databinding "Load on Demand" as per examples, which does work.  

Anyway what I would like to do is to display a Syncfusion WaitingPopup
 Control while the content loads/renders between the day and week views. To do this I was planning on using the client side api.  However, I have noticed that the "OnActionBegin" client side method only fires after the ajax call has completed, but does fire pre-render. This can be replicated on the Syncfusion examples here.  Is it possible to display a "Spinner" like the WaitingPopup control inbetween "Action" click events while the content is loading/rendering?

Uma Maheswari C [Syncfusion]
Replied On November 30, 2012 07:56 AM

Hi MacMillan,

We would like to inform you that the client side event ClientSideOnActionBegin” is firing correctly before the Ajax post takes place. To illustrate this, we have worked on a sample and provided the screenshot describing the working of the “ClientSideOnActionBegin” event and the same can be downloaded from the below link:

OnActionBegin.zip

We have used the following code snippet to illustrate the attached screenshot:

 

@{ Html.Syncfusion().Schedule("MySchedule", "ScheduleModel")

                .DataSource(Model)

                .AllowMultipleResource(true)

                .ShowResourceHeader(true)

                .Resources((List<ScheduleResource>)ViewData["resources"])

                .BindList(bind =>

                {

                    bind.IdField("Id");

                    bind.SubjectField("Subject");

                    bind.LocationField("Location");

                    bind.StartTimeField("StartTime");

                    bind.EndTimeField("EndTime");

                    bind.DescriptionField("Description");

                    bind.OwnerField("Owner");

                    bind.ReminderField("Reminder");

                    bind.AllDayField("AllDay");

                    

                })

                .ClientSideOnActionBegin("ActionBegin")

                .ClientSideOnActionSuccess("ActionEnd")

                .Render();

}

 

Script:

<script type="text/javascript">

 

    function ActionBegin(sender, args) {

        Sys.Debug.trace("Action begin");

        // Code to display the Syncfusion waiting popup control.

    }

    function ActionEnd(sender, args) {

        Sys.Debug.trace("Action Successfully ended");

        // Code to hide the waiting popup control.

    }

 

 

</script>

 

Also, it is possible to display the Syncfusion waiting popup control while the action begins, just by including the required code in the above code snippet.

 

Kindly, try the code and let us know, if you have any other concerns.

 

Thanks,

Uma Maheswari C


Bryan Macmillan
Replied On November 30, 2012 12:15 PM

Hi Uma, 

The below code should illustrate the issue. Note if you click between the day and month view you will see the WaitingPopup will not appear. If however you comment out the code in the javascript function "onActionComplete" and re-run the test you will see that the waiting popup control does appear... but only after the calendar content has returned and loaded, it does not display "During" loading. (Note high transparency rate to illustrate the point).

I have also tried doing this with JavaScript and a Canvas element in HTML5, with the same results


<div id="MainDiaryDiv">
                        
                        <div id="targetArea" class="DiaryAjaxTargetArea" >
                            @{Html.Syncfusion().Schedule("Diary""ScheduleModel")
                                .DataSource(Model)
                                .BindList(columns =>
                                {
                                    columns.IdField("DteId");
                                    columns.SubjectField("DiarySubject");
                                    columns.StartTimeField("EntryDt");
                                    columns.EndTimeField("EntryEndDT");
                                    columns.OwnerField("OwnerResource");
                                    columns.CategorizeField("Category");
                                    columns.DescriptionField("Description");
                                   
                                })
                                 .Resources((List<ScheduleResource>)ViewData["resources"])
                                 .AppointmentTemplateName("AppTemplate")
                                 .AllowAddNew(false)
                                 .AllowDelete(true)
                                 .AllowDragAndDrop(true)
                                 .AllowResize(false)
                                 .AllowRecurrence(false)
                                 .AllowReminder(false)
                                 .AllowPriority(false)
                                 .AllowMultipleResource(true)
                                 .AllowKeyboardNavigation(true)
                                 .AllowEdit(false)
                                 .AllowInline(false)
                                 .BusinessStartHour(8)
                                 .BusinessEndHour(18)
                                 .CellWidth(200)
                                 .ClientSideOnAppointmentDoubleClick("onCellDblClick")
                                 .EndHour(18)
                                 .FirstDayOfWeek(DayOfWeek.Monday)
                                 .Height(650)
                                 .HighlightBusinessHours(true)
                                 .ClientSideOnActionBegin("onActionStart")
                                 .ClientSideOnActionSuccess("onActionComplete")
                                 .ShowPrint(false)
                                 .StartHour(8)
                                 .ShowAppointmentIndicator(false)
                                 .ShowReminderWindow(false)
                                 .ShowContextMenu(true)
                                 .ShowTimeZonesButton(false)
                                 .ShowResourceHeader(true)
                                 .ShowWorkweekView(false)
                                 .ShowMonthView(false)
                                 .ShowToolTip(false)
                                 .ShowTodayView(false)
                                 .Skins(ScheduleSkins.Metro)
                                 .TimeMode(ScheduleTimeMode.Hours24)
                                 .Width(850)
                                  .Render();
                                 
                                  }
                        </div>
                         @{Html.Syncfusion().WaitingPopup("myPopup").TargetId("targetArea").ShapeHeight(650).ShapeWidth(850).EnableHTML5(true).Render(); }
                    
                        
                    
</div>

JAVA Script
function onActionStart() {
 
    Sys.Debug.trace("Action begin");
    var waitingObj = $find("myPopup");
    waitingObj.SetBackgroundColor("Blue");
    waitingObj.SetTransparency(1);
    waitingObj.ShowPopUp();
    
}
 
function onActionComplete() {
    Sys.Debug.trace("Action Successfully ended");
    var waitingObj = $find("myPopup");
    waitingObj.HidePopUp();
}




Uma Maheswari C [Syncfusion]
Replied On December 7, 2012 08:27 AM

Hi MacMillan,
 

We regret for the inconvenience caused and also for the delay.

 

We are able to reproduce the issue with "Rendering waiting popup" and we suspect this issue to be a defect. We thank you for bringing this to our attention. To facilitate tracking the progress of the fix we request you to create an incident in our incident database Direct Trac.

 

https://www.syncfusion.com/account/login?ReturnUrl=%2fsupport%2fdirecttrac%2fincidents

 

Regards,

Uma Maheswari C

 


Bryan Macmillan
Replied On December 10, 2012 04:23 AM

Hi Uma, 

Thanks for getting back to me, I have raised incident id 101959

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.

;