Kendo UI Scheduler with AngularJS - Update issue in custom edit template -
we using custom editor template custom fields in agenda view. have edit button fires editevent of scheduler. problem that, when update event, doesn't fire update operation.
as can see, in "add new event" case, works fine. while editing "repetitive events series" case, fires update operation desired.
only problem, having that, while editing single event (all day event or non-repetitive events), update operation not fired.
does have solution this?
here link demo in telerik's dojo :
the html:
<div id="example" ng-app="kendodemos"> <div ng-controller="myctrl"> <div class="thistab clickheretabscheduledcont boxwrapper"> <div class="agenda" style="position:relative;"> <div kendo-toolbar k-options="toolbaroptions" class="newevent" id="toolbar" ng-click="scheduleroptions.addevent()"></div> <div kendo-scheduler="scheduler" k-options="scheduleroptions"> <span k-event-template class='custom-event'> <span>{{dataitem.title}}</span> <hr> <i class="fa fa-pencil" ng-click="scheduleroptions.editevent(dataitem)">edit</i> </span> <div k-all-day-event-template class='custom-all-day-event'>{{dataitem.title}}</div> </div> </div> </div> </div> script section:
<script> angular.module("kendodemos", [ "kendo.directives" ]) .controller("myctrl", function($scope){ $scope.toolbaroptions = { items: [ { type: "button", text: "new event" } ] }; $scope.scheduleroptions = { date: new date("2013/6/13"), starttime: new date("2013/6/13 07:00 am"), height: 600, views: [ "agenda" ], timezone: "etc/utc", editable: { template: kendo.template($("#customeditortemplate").html()) }, datasource: { batch: true, transport: { read: { url: "http://demos.telerik.com/kendo-ui/service/tasks", datatype: "jsonp" }, update: { url: function (data) { alert(json.stringify(data)); return "http://demos.telerik.com/kendo-ui/service/tasks/update"; }, datatype: "jsonp" }, create: { url: function (data) { alert(json.stringify(data)); return "http://demos.telerik.com/kendo-ui/service/tasks/create"; }, }, destroy: { url: "http://demos.telerik.com/kendo-ui/service/tasks/destroy", datatype: "jsonp" }, parametermap: function(options, operation) { alert(operation); } }, 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" } } } }, filter: { logic: "or", filters: [ { field: "ownerid", operator: "eq", value: 1 }, { field: "ownerid", operator: "eq", value: 2 } ] } }, editevent: function (dataitem) { alert(json.stringify(dataitem)); $scope.scheduler.editevent(dataitem); }, addevent: function () { $scope.scheduler.addevent({title: ""}); } }; }) </script>
ok,i think first pass scheduler event function in edit function.then can call api eventid or u like. have done issue that
this html template
<div class="thistab clickheretabscheduledcont boxwrapper"> <div class="agenda" style="position:relative;"> <div kendo-toolbar k-options="toolbaroptions" class="newevent" id="toolbar" ng-click="scheduleroptions.addevent()"></div> <div kendo-scheduler="scheduler" k-options="scheduleroptions"> <span k-event-template class='custom-event'> <span>{{dataitem.title}}</span> <hr> <i class="fa fa-pencil" ng-click="scheduleroptions.editevent($event,$event.isrecurrencehead())">edit</i> </span> <div k-all-day-event-template class='custom-all-day-event'>{{dataitem.title}}</div> </div> </div> </div> here controller
//you can pass scheduler default function in edit function var editeventdetails ={}; update: { url: function (data) { console.log('update function'); var dt; data.signupduedate = moment(data.signupduedate).format('yyyy-mm-dd') + "t23:59:59" + ".000z"; data.programtemplateid = editeventdetails.programtemplateid; data.isteamevent = editeventdetails.isteamevent; data.seasonteamid = editeventdetails.seasonteamid; data.description = editeventdetails.description; data.checkattendance = editeventdetails.checkattendance; data.remarks = editeventdetails.remarks; data.issignuprequired = editeventdetails.issignuprequired; api.post('/scheduler/saveprogramevent', data).then(function (result) { } }, }, editevent: function (evt) { var uid = $(evt.target).closest('.k-task').attr("data-uid"); var event = $scope.scheduler.occurrencebyuid(uid); event.startdate = moment(event.start).format('mm/dd/yyyy h:mm a'); event.enddate = moment(event.end).format('mm/dd/yyyy h:mm a'); dataitem.startdate = moment(event.start).format('mm/dd/yyyy h:mm a'); dataitem.enddate = moment(event.end).format('mm/dd/yyyy h:mm a'); $scope.scheduler.editevent(event); }, edit: function (e) { console.log('edit'); if (e.event.eventmetaid != null && e.event.eventmetaid != undefined && e.event.eventmetaid != 0) { var detailparams = { eventmetaid: (e.event.recurrenceid !== 0 && e.event.eventmetaid === 0) ? e.event.recurrenceid : e.event.eventmetaid, ownerorganizationid: _orgid, usertimezone: global.usertimezoneoffset// usertimezone }; api.get('/scheduler/geteventdetailbyid', detailparams).then(function (data) { editeventdetails = data; mapeventdetail(editeventdetails, e.event) }); settimeout(function () { e.event.startdate = moment(e.event.start).format('mm/dd/yyyy h:mm a'); e.event.enddate = moment(e.event.end).format('mm/dd/yyyy h:mm a'); e.event.recurrenceexception = editeventdetails.recurrenceexception; $scope.$apply(); }, 0); } }, here mapeventdetail map function database , scheduler model can use mapeventdetail that:--
var mapeventdetail = function (fromobj, toobj) { toobj.programtemplateid = fromobj.programtemplateid; toobj.isteamevent = fromobj.isteamevent; toobj.seasonteamid = fromobj.seasonteamid; toobj.description = fromobj.description; toobj.checkattendance = fromobj.checkattendance; toobj.remarks = fromobj.remarks; return toobj; }; 
Comments
Post a Comment