Sort all-day items by object field

[Jason]

I'm using the scheduler for only all-day items, and would like to sort items based off a given field (in this case a C# long value).

How would I go about doing this?
This is my current code:

@{
    ViewBag.Title = $"Profile Calendar";
}
<style>
    /* increase the height of the cells in day, work week and week views */
    .k-scheduler-table td,
    .k-scheduler-table th {
        height: 1em;
    }

    /* The following styles will work only with Kendo UI versions before 2020 R1 */
    /* increase the height of the month view cells */
    .k-scheduler-monthview .k-scheduler-table td {
        height: 20em;
    }

    .k-event-template {
        font-size: 0.75em;
        width: 125px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
</style>

<h2>@ViewBag.Title</h2>

<div id="scheduler"></div>

<script>
    $(function() {
        $("#scheduler").kendoScheduler({
            change: function(e) {
                var start = e.start;
                var end = e.end;

                console.log(kendo.format("Selection between {0:g} and {1:g}", start, end));
            },
            edit: function(e) {
                e.preventDefault(true);
                window.location.href = "@Url.Action("View", "Profile")?id=" + e.event.ProfileId;
            },
            views: [
                { type: "month", selected: true},
                { type: "day"},
            ],
            resources: [{
                dataSource: {
                    transport: {
                        read: {
                            url: "@Url.Action("ListAll", "Lab")"
                        }
                    },
                    schema: {
                        model: {
                            id: "Id",
                            fields: {
                                Id: {
                                    "type": "number"
                                },
                                ProfileId: {
                                    "type": "number"
                                },
                                Name: {
                                    "type": "string"
                                },
                                DisplayColor: {
                                    "type": "string"
                                }
                            }
                        }
                    }
                },
                title: "Lab",
                field: "LabId",
                dataTextField: "Name",
                dataValueField: "Id",
                dataColorField: "DisplayColor"
            }],
            dataSource: {
                transport: {
                    read: {
                        url: "@Url.Action("List", "Calendar")",
                        dataType: "json",
                        contentType: "application/json; charset=utf-8",
                        type: "POST"
                    },
                    parameterMap: function (options, operation) {
                        if (operation === "read") {
                            var scheduler = $("#scheduler").data("kendoScheduler");
                            var result = {
                                start: scheduler.view().startDate(),
                                end: scheduler.view().endDate()
                            }
                            return kendo.stringify(result);
                        }
                        return kendo.stringify(options);
                    }
                },
                serverFiltering: true,
                schema: {
                    model: {
                        id: "taskID",
                        fields: {
                            taskID: { from: "TaskID", type: "number" },
                            title: { from: "Title", defaultValue: "No title", validation: { required: true } },
                            start: { type: "date", from: "Start" },
                            end: { type: "date", from: "End" },
                            startTimezone: { from: "StartTimezone" },
                            endTimezone: { from: "EndTimezone" },
                            description: { from: "Description" },
                            recurrenceId: { from: "RecurrenceID" },
                            recurrenceRule: { from: "RecurrenceRule" },
                            recurrenceException: { from: "RecurrenceException" },
                            ownerId: { from: "OwnerID", defaultValue: 1 },
                            isAllDay: { type: "boolean", from: "IsAllDay" },
                            LabId: { from: "LabId", type: "number" },
                            ProfileId: { from: "ProfileId", type: "number" }
                        }
                    }
                }
            }
        });
    });
</script>

 

The field I want to sort by is LabId, which is a long.

Additionally, if there was a way to do this in MVC instead, greatly appreciated. With the inclusions of resources, I had trouble doing it in MVC.

[Aleksandar]

Hi Jason,

Currently, the Scheduler does not provide support for custom sorting of its events. Even if the dataSource of the widget is sorted, the events might be rendered in a different order, depending on the browser used. The built-in logic of the event positioning is designed to put the longest (in duration) events at the most left side. 

As a possible approach to achieve the desired result you could try and modify the start time of the events, so that there is an insignificant difference between the events (e.g 1 millisecond). You could do this on the server-side. This is also discussed more extensively in the following forum thread:

https://www.telerik.com/forums/order-of-all-day-events-in-agenda-view

Alternatively, you could extend the desired Scheduler View and provide your own implementation details based on the project requirements. You can check out the following resources on the topic:

https://docs.telerik.com/kendo-ui/controls/scheduling/scheduler/how-to/custom-views/custom-view

Custom Sort in Agenda View

http://www.telerik.com/support/code-library/custom-view-0286055de51d

Finally, I would also urge you to upvote the following Feature request in the Kendo UI Feedback Portal where similar functionality is discussed:

https://feedback.telerik.com/kendo-jquery-ui/1359765-scheduler-implement-custom-sorting-inside-day-then-data-is-grouped

Regards,
Aleksandar
Progress Telerik

[Jason]

Using the date offset as seen in one of the mentioned links worked a charm. Thanks!