Appointments in Month view are not in the expected order

[dsapo]

Hi Support:

In my controller action method I sorted the data records in specific way.  But in the Schedule control, the sort is being ignored, so the items are being display randomly.

Is there any way to keep the data in the same order defined in the datamanager getdata method.

Thanks

David

[Karthigeyan Krishnamurthi]

Hi David, 

 

Thank you for contacting Syncfusion support 

 

We are not clear with the provided information, kindly share the below information with us to proceed further. 

  

1. Which type of order would you expecting to be rendered?
2. Image/ video demo of an appointment order before and after rendering in the Schedule.
3. Controller sorting code example / sample (if possible).

 

Regards, 

Karthigeyan 

 

 

[Karthigeyan Krishnamurthi]

Hi David, 

 

Thank you for contacting Syncfusion support 

 

We are not clear with the provided information, kindly share the below information with us to proceed further. 

  

1. Which type of order would you expecting to be rendered?
2. Image/ video demo of an appointment order before and after rendering in the Schedule.
3. Controller sorting code example / sample (if possible).

 

Regards, 

Karthigeyan 

 

 

[dsapo]

Hi Karthigeyan:

Is very easy to duplicate our issue.

Our action method is something like this:

 public async Task<List<Booking>> GetData()

        {

                List<Booking> bookings = new List<Booking>();

                Booking instance = new Booking();

                instance.Subject = $"9:05 AM - ACME";

                instance.StartTime = DateTime.Today.Add(new TimeSpan(9,5,0));

                instance.EndTime = instance.StartTime.AddMinutes(30);

                instance.Status = "Pending";

                bookings.Add(instance);

                instance = new Booking();

                instance.Subject = $"9:05 AM - ACME";

                instance.StartTime = DateTime.Today.Add(new TimeSpan(9, 5, 0));

                instance.EndTime = instance.StartTime.AddMinutes(30);

                instance.Status = "Approved";

                bookings.Add(instance);

                 return bookings;

        }

Then in the month view we need to display appointments in Pending status (in red color) first within a month day, and last the items in Accepted status (in green color).

The problem is that the order of appointments within the month view are not persisted.  Is like if they were randomly rendered and not based on order in the dataset.

In the attach file, I added a snapshot named Good.png that is the expected result, but the file named Wrong.png shows the issue.

Thanks again

David

Attachment: Attachment_7aefb7aa.zip

[Karthigeyan Krishnamurthi]

Hi David, 

 

Thanks for your update. 

When two or more appointments are created with the same duration, appointments are internally sorted based on the Start Time, End Time and Guid, since Guid is unique and random, same duration appointments will render in random manner. We have overridden the appointment sorting function on sample side where the appointments are initially sorted based on Start Time, End Time, Guid and then we have returned the sorted appointments based on the Status field value. Therefore, the Pending appointments will be rendered first followed by Approved in the scheduler. Kindly refer the following code example that we have used in the sample. 

http://jsplayground.syncfusion.com/1ahmhwgj 

<Code> 

ej.Schedule.prototype._appointmentSort = function (appointments) { 

    var proxy = this; 

    if (this.currentView() == "agenda") { 

        appointments.sort(function (a, b) { 

            var d1 = a[proxy._appointmentSettings["startTime"]]; 

            var d2 = b[proxy._appointmentSettings["startTime"]]; 

            var d3 = a[proxy._appointmentSettings["endTime"]]; 

            var d4 = b[proxy._appointmentSettings["endTime"]]; 

            return d1.getTime() - d2.getTime() || d3.getTime() - d4.getTime(); 

        }); 

    } 

    else if (this.currentView() != "day") { 

        appointments.sort(function (a, b) { 

            var d1 = a[proxy._appointmentSettings["endTime"]] - a[proxy._appointmentSettings["startTime"]]; 

            var d2 = b[proxy._appointmentSettings["endTime"]] - b[proxy._appointmentSettings["startTime"]]; 

            var date1 = new Date(a[proxy._appointmentSettings["startTime"]]); 

            var date2 = new Date(b[proxy._appointmentSettings["startTime"]]); 

            var date3 = new Date(a[proxy._appointmentSettings["endTime"]]); 

            var date4 = new Date(b[proxy._appointmentSettings["endTime"]]); 

            var d3 = a[proxy._appointmentSettings["startTime"]]; 

            var d4 = b[proxy._appointmentSettings["startTime"]]; 

            if (date1 == date2 && date3 == date4) 

                return d3 - d4 || a.Guid.localeCompare(b.Guid); 

            else if (date1 - date2 == 0) 

                return d2 - d1 || d3 - d4 || a.Guid.localeCompare(b.Guid); 

            else 

                return d3 - d4 || a.Guid.localeCompare(b.Guid); 

        }); 

    } 

    else { 

        appointments.sort(function (a, b) { 

            var d3 = a[proxy._appointmentSettings["startTime"]]; 

            var d4 = b[proxy._appointmentSettings["startTime"]]; 

            var d1 = a[proxy._appointmentSettings["endTime"]] - a[proxy._appointmentSettings["startTime"]]; 

            var d2 = b[proxy._appointmentSettings["endTime"]] - b[proxy._appointmentSettings["startTime"]]; 

            return d3 - d4 || d2 - d1 || a.Guid.localeCompare(b.Guid); 

        }); 

    } 

 

    var Pending = new ej.DataManager(appointments).executeLocal(new ej.Query().where("Status", ej.FilterOperators.equal, "Pending")); 

    var Approved = new ej.DataManager(appointments).executeLocal(new ej.Query().where("Status", ej.FilterOperators.equal, "Approved")); 

    var empty = new ej.DataManager(appointments).executeLocal(new ej.Query().where("Status", ej.FilterOperators.equal, "")); 

    var appointments = []; 

    $.merge(appointments, Pending); 

    $.merge(appointments, Approved); 

    $.merge(appointments, empty); 

    return appointments; 

} 

</Code> 

Regards, 

Karthigeyan 

[dsapo]

Thanks Karthigeyan for your an excellent answer.

In this moment I dont understand the code, but at least works as expected.

Thanks again

David

[Karthigeyan Krishnamurthi]

Hi David, 

 

We are happy to hear that our solution has fulfilled your requirement. 

 

Regards, 

Karthigeyan