Binding resources to dynamic remote data

2 posts, 0 answers
  1. Brent
    Brent avatar
    5 posts
    Member since:
    May 2015

    Posted 03 Mar Link to this post

    Hello,

    I need to bind the scheduler resources to a remote data source in order to make the resource list dynamic.  I have about 60 different resources, and I do not want to display all resources when there are no events scheduled for the given date range of the view.  When the date range changes, I want to get a new list of resources from the server.  All of the examples I have see so far involve a local dataSource, so there are no promises which makes it work.

    Is there a way to achieve this?  I should note that I would be ok listing all resources, and then hiding or filtering the resources that do not have an event in the view.  Perhaps that would be easier?  Please let me know the best method to achieve this.  Thanks!

  2. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 08 Mar Link to this post

    Hello Brent,

    Please check the example below which shows possible implementation of the desired behavior:

    "timezone": "Etc/UTC",
        "resources": [{
            "dataSource": {
                "transport": {
                    "read": {
                        "url": "/Home/Read_Owners",
                        "data": getResourceAdditionalData,
                        "dataType": "json",
                        "contentType": "application/json; charset=utf-8"
                    }
                }
            },
            "title": "Owner",
            "field": "OwnerID",
            "dataTextField": "Text",
            "dataValueField": "Value",
            "dataColorField": "Color"
        }],
        "dataSource": {
     
            "transport": {
                "read": {
                    "url": "/Home/Read",
                    "data": getAdditionalData
                },
                "prefix": "",
                "update": {
                    "url": "/Home/Update"
                },
                "create": {
                    "url": "/Home/Create"
                },
                "destroy": {
                    "url": "/Home/Destroy"
                }
            },
            "serverPaging": true,
            "serverSorting": true,
            "serverFiltering": true,
            "serverGrouping": true,
            "serverAggregates": true,
            "requestStart": onRequestStart,

    function getResourceAdditionalData() {
        var data = getAdditionalData();
     
        if (!data) { return;}
     
        return JSON.parse(JSON.stringify(data));
    }
     
    function getAdditionalData() {
        var scheduler = $("#scheduler").data("kendoScheduler");
     
        var timezone = scheduler.options.timezone;
     
        //support initial rendering
        if (scheduler.view()) {
            var startDate = kendo.timezone.convert(scheduler.view().startDate(), timezone, "Etc/UTC");
            var endDate = kendo.timezone.convert(scheduler.view().endDate(), timezone, "Etc/UTC");
     
            //optionally add startTime / endTime of the view
            var startTime = kendo.date.getMilliseconds(scheduler.view().startTime());
            var endTime = kendo.date.getMilliseconds(scheduler.view().endTime());
            endTime = endTime == 0 ? kendo.date.MS_PER_DAY : endTime;
     
            var result = {
                Start: new Date(startDate.getTime() - (startDate.getTimezoneOffset() * kendo.date.MS_PER_MINUTE) + startTime),
                End: new Date(endDate.getTime() - (endDate.getTimezoneOffset() * kendo.date.MS_PER_MINUTE) + endTime)
            }
     
            return result;
        }
    }
     
    var isResourcesRequested = false;
    function onRequestStart(e) {
        if (!isResourcesRequested) {
            var scheduler = $("#scheduler").data("kendoScheduler");
            scheduler.resources[0].dataSource.read().then(function () {
                var scheduler = $("#scheduler").data("kendoScheduler");
                isResourcesRequested = true;
                scheduler.dataSource.read();
            });
     
            e.preventDefault();
        } else {
            isResourcesRequested = false;
        }
    }

    Regards,
    Vladimir Iliev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
Back to Top