Kendo Scheduler CRUD Save/Update Issue

2 posts, 0 answers
  1. Sanjay
    Sanjay avatar
    1 posts
    Member since:
    Jun 2015

    Posted 29 Jun 2015 Link to this post

    Hi,

     

    A newbee to kendo and js:). I am trying to use kendo scheduler in my project and having issue with Create / update operations. Create / Update opertions works and DB is updated but kendo UI dialog stays and gets following error "Uncaught TypeError: Cannot read property 'getTimezoneOffset' of null". Refreshing browser display newly added /updated  event. Also in destroy method I nned to add event id to path like /schedules/id, how to add this, in parameterMap we gets like options.models[0].id but not in destroy method.

    Any quick help is appreciated. Posting my code:

    'use strict';

    /*
    * Add UI Functions To This File Such As "ManipulateDataFromServer"
    * */

    adoc.controller('accountManagerController', [
    '$scope', '$rootScope', '$filter', 'adoc.common', 'restServices', 'TokenStorage',
    function ($scope, $rootScope, $filter, ADOCServices, restServices, TokenStorage) {

    $scope.colors = [
    {name: 'black', shade: 'dark'},
    {name: 'white', shade: 'light'},
    {name: 'red', shade: 'dark'},
    {name: 'blue', shade: 'dark'},
    {name: 'yellow', shade: 'light'}
    ];

    $scope.myColor = $scope.colors[2];

    $scope.changeColor = function (newColor) {
    $scope.myColor = newColor;
    };

    $scope.myData = [];

    $scope.loadPractices = function () {
    restServices.call('GET', "/adoc/practice/all").then(
    function (response) {
    $scope.gridPractice.data = response.data;
    console.log($scope.gridPractice.data);
    });
    };

    $scope.gridPractice = {
    autoResize: true,
    rowHeight: 70,
    //data:$scope.loadPractices(),
    enableRowSelection: true,
    columnDefs: [
    {
    field: 'id',
    displayName: 'Practice Id',
    cellTemplate: '<div class="controls-column"><div ng-controller="accountManagerController">{{row.entity.id}}</div>' +
    '<div class="grid-row-links-container">' +
    '<button class="btn-link" ng-click="grid.appScope.editSelectedPractice(row.entity.id);">Edit</button>' +
    '<button class="btn-link" href="#">View Website</button>' +
    '<button class="btn-link" href="#">Delete</button>' +
    '</div>' +
    '</div>'
    },
    {
    field: 'name',
    displayName: 'Practice Name'
    },
    {
    field: 'path',
    displayName: 'Path'
    },
    {
    field: 'email',
    displayName: 'Email'
    }
    ]
    }

    $scope.myData2 = [
    {
    "practiceId": "1",
    "firstName": "Cox",
    "lastName": "Carney",
    "company": "Enormo",
    "employed": true
    },
    {
    "practiceId": "2",
    "firstName": "Lorraine",
    "lastName": "Wise",
    "company": "Comveyer",
    "employed": false
    },
    {
    "practiceId": "3",
    "firstName": "Nancy",
    "lastName": "Waters",
    "company": "Fuelton",
    "employed": false
    },
    {
    "practiceId": "4",
    "firstName": "Cox",
    "lastName": "Carney",
    "company": "Enormo",
    "employed": true
    },
    {
    "practiceId": "5",
    "firstName": "Lorraine",
    "lastName": "Wise",
    "company": "Comveyer",
    "employed": false
    },
    {
    "practiceId": "6",
    "firstName": "Nancy",
    "lastName": "Waters",
    "company": "Fuelton",
    "employed": false
    }
    ];

    $scope.gridPracticeAdmins = {
    autoResize: true,
    rowHeight: 70,
    data: $scope.myData2,
    enableRowSelection: true,
    columnDefs: [
    {
    field: 'firstName',
    displayName: 'First Name',
    cellTemplate: '<div class="controls-column"><div ng-controller="accountManagerController">{{row.entity.firstName}}</div>' +
    '<div class="grid-row-links-container">' +
    '<button class="btn-link" ng-click="grid.appScope.editSelectedPractice(row.entity.practiceId);">Edit</button>' +
    '<button class="btn-link" href="#">Delete</button>' +
    '</div>' +
    '</div>'
    },
    {
    field: 'lastName',
    displayName: 'Last Name'
    },
    {
    field: 'company',
    displayName: 'UserName'
    }
    ]
    };

    // Filter Practices
    $scope.filterPractice = function () {
    console.log($scope.searchPractices);
    $scope.gridPractice.data = $filter('filter')($scope.myData, this.searchPractices, undefined);
    };

    // Show Edit Page For Editing The Selected Practice
    $scope.editSelectedPractice = function (practiceId) {
    alert(practiceId);
    };

    $scope.init = function () {
    $scope.loadPractices();
    };

    $scope.schedulerOptions = {
    date: new Date("2015/6/13"),
    startTime: new Date("2015/6/13 07:00 AM"),
    minorTickCount: 1,
    height: 850,
    editable: true,
    isAllDay: false,
    views: [
    {type: "day", selected: false},
    {type: "week", selected: false},
    {type: "month", selected: true},
    {type: "workWeek", selected: false},
    {type: "agenda", selected: false},
    {type: "timeline", eventHeight: 50}
    ],
    timezone: "Etc/UTC",
    dataSource: {
    batch: true,
    /* sync: function() {
    this.read();
    },*/
    transport: {
    read: {
    // url: "http://demos.telerik.com/kendo-ui/service/tasks",
    url: "/schedules/practice/" +
    $rootScope.user.practiceId,
    headers: {'X-AUTH-TOKEN': TokenStorage.retrieve()},
    dataType: "json"
    },
    update: {
    // url: "http://demos.telerik.com/kendo-ui/service/tasks/update",
    url: "/schedules/",
    headers: {'X-AUTH-TOKEN': TokenStorage.retrieve()},
    method: "post",
    contentType: "application/json; charset=utf-8",
    dataType: "json"
    },
    create: {
    url: "/schedules/",
    headers: {'X-AUTH-TOKEN': TokenStorage.retrieve()},
    method: "put",
    contentType: "application/json; charset=utf-8",
    dataType: "json"


    },
    destroy: {
    // url: "http://demos.telerik.com/kendo-ui/service/tasks/destroy",
    url: "/schedules/",
    headers: {'X-AUTH-TOKEN': TokenStorage.retrieve ()},
    method: "delete",
    contentType: "application/json; charset=utf-8",
    dataType: "json"
    },
    parameterMap: function (options, operation) {
    switch (operation) {
    case "read":

    break;
    case "update":
    if (options.models) {
    console.log(kendo.stringify(options.models[0].id));
    console.log(kendo.stringify(options.models[0].scheduleTitle));
    console.log(kendo.stringify(options.models[0].scheduleStartTime));
    console.log(kendo.stringify(options.models[0].scheduleEndTime));
    console.log(kendo.stringify(options.models[0].scheduleDescription));
    console.log(kendo.stringify(options.models[0].recurrenceId));
    console.log(kendo.stringify(options.models[0].recurrenceRule));
    console.log(kendo.stringify(options.models[0].recurrenceException));
    console.log(kendo.stringify(options.models[0].physicianId));
    console.log(kendo.stringify(options.models[0].practiceId));
    console.log(kendo.stringify(options.models[0].allDay));

    /* return {models: kendo.stringify(options.models)};*/
    return kendo.stringify({
    id: options.models[0].id,
    scheduleTitle: options.models[0].scheduleTitle,
    scheduleStartTime: options.models[0].scheduleStartTime,
    scheduleEndTime: options.models[0].scheduleEndTime,
    scheduleDescription: options.models[0].scheduleDescription,
    recurrenceId: options.models[0].recurrenceId,
    recurrenceRule: options.models[0].recurrenceRule,
    recurrenceException: options.models[0].recurrenceException,
    physicianId: options.models[0].physicianId,
    practiceId: $rootScope.user.practiceId,
    allDay: options.models[0].allDay
    })
    }
    break;
    case "create":
    if (options.models) {
    console.log(kendo.stringify(options.models[0].scheduleTitle));
    console.log(kendo.stringify(options.models[0].scheduleStartTime));
    console.log(kendo.stringify(options.models[0].scheduleEndTime));
    console.log(kendo.stringify(options.models[0].scheduleDescription));
    console.log(kendo.stringify(options.models[0].recurrenceId));
    console.log(kendo.stringify(options.models[0].recurrenceRule));
    console.log(kendo.stringify(options.models[0].recurrenceException));
    console.log(kendo.stringify(options.models[0].physicianId));
    console.log(kendo.stringify(options.models[0].practiceId));
    console.log(kendo.stringify(options.models[0].allDay));

    /* return {models: kendo.stringify(options.models)};*/
    return kendo.stringify({
    scheduleTitle: options.models[0].scheduleTitle,
    scheduleStartTime: options.models[0].scheduleStartTime,
    scheduleEndTime: options.models[0].scheduleEndTime,
    scheduleDescription: options.models[0].scheduleDescription,
    recurrenceId: options.models[0].recurrenceId,
    recurrenceRule: options.models[0].recurrenceRule,
    recurrenceException: options.models[0].recurrenceException,
    physicianId: options.models[0].physicianId,
    practiceId: $rootScope.user.practiceId,
    allDay: options.models[0].allDay
    })
    }
    break;
    case "destroy":
    console.log(options.models[0].id);
    return kendo.stringify({id: options.models[0].id});
    break;
    }

    }
    },
    schema: {
    model: {
    id: "id",
    fields: {
    id: {from: "id", type: "number"},
    title: {from: "scheduleTitle", defaultValue: "No title", validation: {required: true}},
    start: {type: "date", from: "scheduleStartTime"},
    end: {type: "date", from: "scheduleEndTime"},
    description: {from: "scheduleDescription"},
    recurrenceId: {from: "recurrenceId", defaultValue: 0},
    recurrenceRule: {from: "recurrenceRule"},
    recurrenceException: {from: "recurrenceException"},
    ownerId: {from: "physicianId", defaultValue: 1},
    practiceId: {from: "practiceId"},
    isAllDay: {type: "boolean", from: "allDay"}
    }
    }
    },

    filter: {
    logic: "or",
    filters: [
    {field: "ownerId", operator: "eq", value: 1},
    {field: "ownerId", operator: "eq", value: 2}
    ]
    }
    },
    resources: [
    {
    field: "ownerId",
    title: "Owner",
    dataSource: [
    {text: "Alex", value: 1, color: "#f8a398"},
    {text: "Bob", value: 2, color: "#51a0ed"},
    {text: "Charlie", value: 3, color: "#56ca85"}
    ]
    }
    ]
    };

    $scope.selectedTags = [];

    $scope.loadTags = function (query) {
    // Get Available Providers From DB As An Array
    var availableTags = [
    {text: 'All', value: -1},
    {text: 'Provider 1', value: 1},
    {text: 'Provider 2', value: 2},
    {text: 'Provider 3', value: 3},
    {text: 'Provider 4', value: 4},
    {text: 'Provider 5', value: 5},
    {text: 'Provider 6', value: 6}
    ];


    // Get All Providers Selected
    var allProvidersSelected = 0;
    for (var i = 0; i < $scope.selectedTags.length; i++) {
    allProvidersSelected = $scope.selectedTags[i].value;
    if (allProvidersSelected == -1) {
    break;
    }
    }
    console.log(allProvidersSelected);

    // Get Selected Providers IDs
    var selectedIds = [];
    if (allProvidersSelected == -1) {
    for (var i = 0; i < availableTags.length; i++) {
    selectedIds.push(parseInt(availableTags[i].value));
    }
    } else {
    for (var i = 0; i < $scope.selectedTags.length; i++) {
    selectedIds.push(parseInt($scope.selectedTags[i].value));
    }
    }

    // Filter Providers Schedule On Addition Of Tags
    var scheduler = $(".k-scheduler").data("kendoScheduler");
    scheduler.dataSource.filter({
    operator: function (task) {
    return $.inArray(task.ownerId, selectedIds) >= 0;
    }
    });


    // Return Filtered Set Of Available Providers
    return $filter('filter')(availableTags, query, undefined);
    };

    }
    ]);
  2. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2206 posts

    Posted 02 Jul 2015 Link to this post

    Hi Sanjay,

    The error is thrown when the Scheduler receives response from the server which cannot be parsed - could you please make sure the server return the updated / created records back to the client side formatted the same way as the records for read operation (nested in array). 
    Also when deleting events they should be accessible in the "parameterMap" function - could you please provide runable example where this behavior can be reproduced? This would help us pinpoint the exact reason for current behavior.

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