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. Image for the cookie policy date

Appointments in Month view are not in the expected order

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

6 Replies

KK Karthigeyan Krishnamurthi Syncfusion Team June 13, 2017 04:54 AM UTC

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 
 
 



KK Karthigeyan Krishnamurthi Syncfusion Team June 13, 2017 04:54 AM UTC

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 
 
 



DS dsapo June 13, 2017 05:25 PM UTC

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


KK Karthigeyan Krishnamurthi Syncfusion Team June 14, 2017 10:21 AM UTC

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. 

<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 



DS dsapo June 14, 2017 08:49 PM UTC

Thanks Karthigeyan for your an excellent answer.

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

Thanks again

David


KK Karthigeyan Krishnamurthi Syncfusion Team June 15, 2017 04:25 AM UTC

Hi David, 
 
We are happy to hear that our solution has fulfilled your requirement. 
 
Regards, 
Karthigeyan 


Loader.
Up arrow icon