Change popup page and filter issue

[Jacob]

Hello,

These days I have been trying Syncfusion Schedule control and I need your support to solve this issue.

Issue 1:

I'm trying to change the default dialog of Schedule Edit Appointment popup page. I'm use the AJAX to call a partial view but have some problem.

At View.cshtml:

//===========================
@(Html.EJ().Schedule("Schedule")
//...
        .ScheduleClientSideEvents(evt =>
            .AppointmentClick("appWindow")
            )
//...
<script>
     function appWindow(args) {
        $.ajax
                ({
                    url: "/Kanban/EditPartial",
                    type: 'GET',
                    async: false,
                    success: function (data) {

                        $("#ScheduleAppointmentAddEditWindow_wrapper").html(data);  //script1
                        
                        //$("#ScheduleAppointmentAddEditWindow").html(data);  //script2

                        //$("#Schedule_AddEditForm").html(data);  //script3
                });
}
</script>
//===========================

In this case, when I use the script1, it is worked and change all the dialog popup page, but have this error:

//===========================
ej.web.all.min.js:10 Uncaught ejDialog: methods/properties can be accessed only after plugin creation
Error: ejDialog: methods/properties can be accessed only after plugin creation
//===========================


For the script2 and script3, I'm trying just change only the inside of part in the popup page, but not worked and this is the error code:

//===========================
Uncaught TypeError: Cannot read property 'selectValueByKey' of undefined
//===========================

Is any solution to implement the functionality?

-----------------------------------------------------------------------------------------------------

[Jacob]

Issue 2:

I'm trying to add some event as a Json from use AJAX, and it worked well but when I use the Schedule filter to switch and display different event sources, it has problem.

The default data from this action at controller.cs:

//===========================
 public ActionResult IndexUseSampleClass()
        {
             List<SampleScheduleData> data = new List<SampleScheduleData> {
                new SampleScheduleData {
                    Id = 1,
                    Subject = "House Cleaning",
                    StartTime = new DateTime(2014, 2, 2, 5, 0, 0),
                    EndTime = new DateTime(2014, 2, 2, 10, 0, 0),
                    Type="Schedule",
                    Categorize="2"
                },
                new SampleScheduleData {
                    Id=2,
                    Subject = "Morning Meeting",
                    StartTime = new DateTime(2014, 2, 3, 1, 0, 0),
                    EndTime = new DateTime(2014, 2, 3, 3, 0, 0),
                    Type="Schedule",
                    Categorize="2"
                },
                new SampleScheduleData {
                    Id=3,
                    Subject = "Dinner with Girlfriend",
                    StartTime = new DateTime(2014, 2, 7, 10, 0, 0),
                    EndTime = new DateTime(2014, 2, 7, 14, 0, 0),
                    Type="Schedule",
                    Categorize="2"
                },
                new SampleScheduleData {
                    Id=4,
                    Subject = "Fishing Holiday",
                    StartTime = new DateTime(2014, 2, 28, 1, 0, 0),
                    EndTime = new DateTime(2014, 2, 28, 11, 0, 0),
                    Type="Schedule",
                    Categorize="5"
                },
                new SampleScheduleData {
                    Id=5,
                    Subject = "Holiday",
                    StartTime = new DateTime(2014, 2, 2, 1, 0, 0),
                    EndTime = new DateTime(2014, 2, 2, 11, 0, 0),
                    Type="AAA",
                    Categorize="5"
                },
                new SampleScheduleData {
                    Id=6,
                    Subject = "Fishing",
                    StartTime = new DateTime(2014, 2, 3, 1, 0, 0),
                    EndTime = new DateTime(2014, 2, 3, 11, 0, 0),
                    Type="AAA",
                    Categorize="5"
                },
                new SampleScheduleData {
                    Id=7,
                    Subject = "Filiday",
                    StartTime = new DateTime(2014, 2, 4, 1, 0, 0),
                    EndTime = new DateTime(2014, 2, 4, 11, 0, 0),
                    Type="AAA",
                    Categorize="5"
                },
                new SampleScheduleData {
                    Id=8,
                    Subject = "Fishday",
                    StartTime = new DateTime(2014, 2, 5, 1, 0, 0),
                    EndTime = new DateTime(2014, 2, 5, 11, 0, 0),
                    Type="AAA",
                    Categorize="5"
                },
                new SampleScheduleData {
                    Id=9,
                    Subject = "shiliday",
                    StartTime = new DateTime(2014, 2, 12, 1, 0, 0),
                    EndTime = new DateTime(2014, 2, 12, 11, 0, 0),
                    Type="AAA",
                    Categorize="5"
                },
                new SampleScheduleData {
                    Id=10,
                    Subject = "goliday",
                    StartTime = new DateTime(2014, 2, 13, 1, 0, 0),
                    EndTime = new DateTime(2014, 2, 13, 11, 0, 0),
                    Type="AAA",
                    Categorize="5"
                },
                new SampleScheduleData {
                    Id=11,
                    Subject = "Fgoday",
                    StartTime = new DateTime(2014, 2, 24, 1, 0, 0),
                    EndTime = new DateTime(2014, 2, 24, 11, 0, 0),
                    Type="AAA",
                    Categorize="5"
                }
            };

            ViewBag.datasource = data;

            return View();
        }
//===========================

I use the Type property to distinguish between different sources.
The SampleScheduleData class is:

//===========================
 public class SampleScheduleData
    {
        public int Id { get; set; }
        public string Subject { get; set; }
        public DateTime StartTime { get; set; }
        public DateTime EndTime { get; set; }
        public bool AllDay { get; set; }
        public bool Recurrence { get; set; }
        public string RecurrenceRule { get; set; }
        public string Type { get; set; }
        public string Categorize { get; set; }
    }
//===========================

And I use this script to distinguish between different Type.

//===========================
    $('#btnFilterPersonal').click(function () {

        var filter = [{
            field: "Type",
            operator: "contains",
            value: "Schedule",
            predicate: "or"
        }];

        var schObj = $("#Schedule").data("ejSchedule");
        var filterAppointments = schObj.filterAppointments(filter);

        $("#Schedule").ejSchedule({ appointmentSettings: { dataSource: filterAppointments } });
    })
//===========================


I fiund when the ViewBag.datasource add more than 10 event and use the filter, the object of Id1 all the value will be rewritten as a Id2, so Id2 will become two.

I do not know how to fix this problem.

I using ASP.NET MVC5 framework and Syncfusion frameworks version 15.2.0.43.

Forgive my this issue a bit long, because I want to describe the situation clearly as much as possible.

Thanks a lot,

Best regards.

[Karthigeyan Krishnamurthi]

Hi Jacob,   

   

Thank you for contacting Syncfusion support. 

 

Please find the below responses for your queries. 

 

Query1 

 

In the provided code example, AppointmentClick event (which will be trigger when an app/cell is single clicked) is called but within ajax post detailed appointment window div element ( $("#ScheduleAppointmentAddEditWindow_wrapper")) is used which is not correct and we have prepared the sample to customize the detailed appointment window using partial view which can be download from the below location. 

http://www.syncfusion.com/downloads/support/forum/131514/ze/Sample-142776570 

 

<Code> 

@(Html.EJ().Schedule("Schedule1") 

        .Width("100%") 

        .Height("525px") 

        .CurrentDate(new DateTime(2017, 4, 20)) 

          .ScheduleClientSideEvents(evt =>evt           

            .AppointmentWindowOpen("appWindow") 

            ) 

        .AppointmentSettings(fields => fields.Datasource(ViewBag.dataSource) 

                .Id("Id") 

                    .Subject("Subject") 

                    .StartTime("StartTime") 

                    .EndTime("EndTime") 

                    .AllDay("IsAllDay") 

                    .Recurrence("Recurrence") 

                    .RecurrenceRule("RecurrenceRule")) 

) 

@{ Html.RenderPartial("_schedule");  } 

</Code> 

 

Note: We recommend not to use partial view ajax post with in Scheduler event for customizing the appointment window. 

 

Query2 

 

We are not clear about your requirement, kindly share image/video demo which clearly depicts your issue to proceed further else try to reproduce the error in the below sample and revert us. 

http://www.syncfusion.com/downloads/support/forum/131514/ze/Sample2070021255 

 

 

Regards,   

Karthigeyan  

 

[Jacob]

Query1
I hope I could use partial view ajax post with in Scheduler event of the appointment window. So that I could add other Syncfusion controls or other plugins with Razor.

Query2
I update a sample project files and the mainly code is Sample action at HomeController and Sample view. When click the Filter button at the Sample view page, it should display Meeting1,  Meeting10, and Meeting11. But the result is display Meeting10,  Meeting10, and Meeting11.

I would like to upload a complete project file but it's too large, so I can only upload some of the mainly files and 2 pics to illustrate this issue.

Thanks your help.

Attachment: Sample_6109f63d.zip

[Karthigeyan Krishnamurthi]

Hi Jacob,       

   

Thanks for your update.   

 

Query1 

 

The cause for the issue “Uncaught ejDialog: methods/properties can be accessed only after plugin creation” is Scheduler not destroyed properly before re-rendering it or its elements. To overcome this issue, we should destroy the Scheduler before re-rendering it or its elements but it is not possible if the scope is within the control event function. Therefore, we suggested not to use ajax post for rendering its element with in event function. It is not standard and recommended. 

 

 

Query2 

 

Kindly use the below code example to overcome the reported issue “Duplicate appointment is rendered”. 

 

<Code> 

<script> 

    $('#Filter').click(function () { 

 

        var filter = [{ 

            field: "Subject", 

            operator: "contains", 

            value: "Meeting1", 

            predicate: "or" 

        }]; 

 

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

        var filterAppointments = schObj.filterAppointments(filter); 

 

        $("#Schedule1").ejSchedule({ appointmentSettings: { dataSource: [] } }); 

        $("#Schedule1").ejSchedule({ appointmentSettings: { dataSource: filterAppointments } }); 

        

 

        console.log("done"); 

    }) 

</script> 

</Code> 

 

Note: Once the filtered data collection is rendered, then the default Scheduler data source (11 appointments) will be replaced with the filtered data source (3 Appointments).  

 

Regards, 

Karthigeyan 

 

  

[Jacob]

Hi Saravanan,

Thanks a lot , this solution worked well.
I will continue to try the sample project you provided, the scripts needs a little time to be familiar.

Best regards.

[Karthigeyan Krishnamurthi]

Hi Jacob,        

    

Thanks for your update.    

We will wait to hear from you. 

Regards, 

Karthigeyan