Sort all-day items by object field

3 posts, 1 answers
  1. Jason
    Jason avatar
    16 posts
    Member since:
    Dec 2016

    Posted 15 Jun Link to this post

    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.

  2. Answer
    Aleksandar
    Admin
    Aleksandar avatar
    204 posts

    Posted 17 Jun Link to this post

    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

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
  3. Jason
    Jason avatar
    16 posts
    Member since:
    Dec 2016

    Posted 17 Jun in reply to Aleksandar Link to this post

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