KendoUI scheduler doesn't display data - kendo-ui

I'm having a bit of difficulty with KendoUI Scheduler data(scheduler events or whatever you want to call them) display. The call is made amd the data comes in but it doesn't display it, nor does it cause any errors. I've pasted the code and responce, hoping that someone knows what I'm doing wrong.
And yes I've been switching between json/jsonp as the datatype and batch set to true and false in all possible combinations.
The Code:
var my_dataSource;
$("#calendar").kendoScheduler({
height: "650px",
timezone: "Etc/UTC",
views: [
"day",
"week",
{ type: "month", selected: true },
"agenda"
]
});
my_dataSource = new kendo.data.SchedulerDataSource({
transport: {
read: {
url: "ashx/Calendar/GetCalendarData.ashx",
cache: false,
data: {
dtFrom: convertDate($("#calendar").data("kendoScheduler").view().startDate()),
dtUntil: convertDate($("#calendar").data("kendoScheduler").view().endDate()),
DateInterval: "month",
dateIntervalSteps: "1",
Categories: ""
},
dataType: "jsonp"
},
batch: true,
parameterMap: function (options, operation) {
//console.log(JSON.stringify(options));
return options;
}
},
schema: {
data: "Data",
model: {
id: "taskID",
fields: {
taskID: { from: "id", type: "number" },
title: { from: "summary", defaultValue: "No title", validation: { required: false } },
start: { type: "date", from: "startTime" },
end: { type: "date", from: "endTime" },
//startTimezone: { from: "StartTimezone" },
//endTimezone: { from: "EndTimezone" },
//description: { from: "Description" },
//recurrenceId: { from: "RecurrenceID" },
//recurrenceRule: { from: "RecurrenceRule" },
//recurrenceException: { from: "RecurrenceException" },
ownerId: { from: "eOwnerId", defaultValue: 1 },
isAllDay: { type: "boolean", from: "allDay" }
}
}
}
});
var cal = $("#calendar").data("kendoScheduler");
cal.dataSource = my_dataSource;
The Response:
[
{
"id": 329837,
"summary": "Lorem Ipsum",
"startTime": "Date(1375862400)",
"endTime": "Date(1377273600)",
"allDay": true,
"calendar": "cat10001",
"eOwnerId": 1569,
"Title": "Project Meeting"
},
{
"id": 334664,
"summary": "Lorem Ipsum",
"startTime": "Date(1376985600)",
"endTime": "Date(1376989200)",
"allDay": false,
"calendar": "cat10002",
"eOwnerId": 130,
"Title": "Meeting"
},
{
"id": 334659,
"summary": "Lorem Ipsum",
"startTime": "Date(1377007200)",
"endTime": "Date(1377010800)",
"allDay": false,
"calendar": "cat10003",
"eOwnerId": 1810,
"Title": "Task"
}
]

I had a the same problem while getting no errors. What fixed it was (silly but) i was setting the start and end timezones ie. task.setEndTimezone(TimeZone.getTimeZone("UTC"));, just set them to null while timezone is still set in the returned start and end datetime of the task. Hope this helps.

I see "ReferenceError: convertDate is not defined" when using Firefox debugging...
dtFrom: convertDate($("#calendar").data("kendoScheduler").view().startDate()),
dtUntil: convertDate($("#calendar").data("kendoScheduler").view().endDate()),
You may want to make sure you are including all of the appropriate .js files

Related

Type ahead search does not work from Task Module

I need to implement a scenario where type ahead search makes a call to my remote api and fills in the choice list. This works fine the if adaptive card is sent directly in the chat. But this not work inside if the adaptive card is sent in the task module.
Steps
Following is the message which is sent for adaptive card
const card = CardFactory.adaptiveCard({
type: 'AdaptiveCard',
body: [
{
type: 'RichTextBlock',
inlines: [
{
type: 'TextRun',
text: 'Test',
weight: 'bolder',
},
{
type: 'TextRun',
text: 'Test',
}
],
separator: parseInt(index) === 0,
spacing: parseInt(index) === 0 ? 'extraLarge': 'default',
},
{
title: 'Update',
type: 'Action.Submit',
data: {
msteams: {
type: 'task/fetch'
},
id: 'Upate Id',
buttonText: 'Update',
}
}
],
$schema: 'http://adaptivecards.io/schemas/adaptive-card.json',
version: '1.5',
})
Following is card which is sent in task module
const card = CardFactory.adaptiveCard({
$schema: 'http://adaptivecards.io/schemas/adaptive-card.json',
version: '1.5',
type: 'AdaptiveCard',
body: [
{
"columns": [
{
"width": "stretch",
"items": [
{
"choices": [
{
"title": "Static Option 1",
"value": "static_option_1"
},
{
"title": "Static Option 2",
"value": "static_option_2"
},
{
"title": "Static Option 3",
"value": "static_option_3"
}
],
"isMultiSelect": false,
"style": "filtered",
"choices.data": {
"type": "Data.Query",
"dataset": "npmpackages",
"testkey": "harkirat"
},
"id": "choiceselect",
"type": "Input.ChoiceSet"
}
],
"type": "Column"
}
],
"type": "ColumnSet"
}
],
actions: [
{
type: 'Action.Submit',
title: 'Save',
data: {
privateMeta,
replyToId
}
}
]
});
Following is the onActivityInvoke code:-
async onInvokeActivity(context: TurnContext): Promise<InvokeResponse<any>> {
if (context.activity.name === 'task/fetch') {
const result = await this.handleTeamsTaskModuleFetch(context, {
replyToId: context.activity.replyToId,
data: context.activity.value.data
});
return {
status: 200,
body: result
}
}
if (context.activity.name == 'application/search') {
const successResult = {
status: 200,
body: {
"type": "application/vnd.microsoft.search.searchResponse",
"value": {
"results": [
{
"value": "FluentAssertions",
"title": "A very extensive set of extension methods"
},
{
"value": "FluentUI",
"title": "Fluent UI Library"
}
]
}
}
}
return successResult;
}
}
Note that the activityInvoke function is not called when I enter the search text in my input box. However, if I send this card directly i.e without task module and directly in chat it works just fine.
Can someone please help me understand if I am missing something, is this a bug or the feature itself is not supported?

Kendo Grid Server side filtering with a array type column

I have this kendo grid blinded to my web service. One of the columns has a custom filter with a kendo multiselector array so the client can choose multiple ItemTypes. The grid is displaying data correctly but my costume filters are not working for this particular column. I got this error from the service: "A binary operator with incompatible types was detected. Found operand types 'Telerik.Sitefinity.DynamicTypes.Model.ClinicFinder.Clinic.ItemType.ItemType' and 'Edm.Int32' for operator kind 'Equal'."
My grid definition
$("#grid").kendoGrid({
dataSource: {
type: "odata-v4",
transport: {
read: {
url: function () {
return "//myservice/api/clinics?$select=Id,Title,Address,ItemType,productsystems&top=20";
}
}
},
schema: {
model: {
fields: {
Title: { type: "string" },
CountryCode: { type: "string" },
Street: { type: "string" },
City: { type: "string" },
Zip: { type: "string" },
ItemType: { type: "" }
}
}
},
serverPaging: true,
serverFiltering: true,
serverSorting: false,
pageSize: 20
},
pageable: true,
filterable: {
mode: "row",
extra: false,
showOperators: false,
operators: {
string: {
contains: "contains"
}
}
},
sortable: false,
columns: [
{ field: "Title", title: "Clinic" },
{ field: "CountryCode", title: "Country" },
{ field: "Street", title: "Address" },
{ field: "City", title: "City" },
{ field: "Zip", title: "Zip", filterable: false },
{ field: "ItemType", title: "Clinic Type", filterable: { multi: true } }
],
rowTemplate: kendo.template($("#template").html())
});
My Filter function
function filterByclinicCategory() {
var filter = { logic: "or", filters: [] };
var grid = $('#grid').data('kendoGrid');
var filterValue = $("#clinicTypeFilter").data("kendoMultiSelect").value();
var clinicCode = [];
if (filterValue.length > 0) {
$.each(filterValue, function (i, v) {
clinicCode.push(convertClinicTypesInCodes(v));
filter.filters.push({
field: "ItemType", operator: "eq", value: clinicCode, logic: "or"
});
grid.dataSource.filter(filter);
});
} else {
$("#grid").data("kendoGrid").dataSource.filter({});
}
}
ItemType is the column I canĀ“t filter.
My webservice data
{
"#odata.context": "https://sf-admin-local.medel.com/api/wstest/$metadata#clinics(*)",
"value": [
{
"Id": "896aa08b-2f17-64e6-80bd-ff09000c6e28",
"LastModified": "2019-05-13T09:28:04Z",
"PublicationDate": "2018-06-19T14:19:13Z",
"DateCreated": "2018-06-19T14:19:13Z",
"UrlName": "??",
"Email": "",
"URL": "",
"Telephone": "",
"Title": "????????",
"officeregions": [],
"salespartnerregions": [],
"productsystems": [
"b8ec2a8b-2f17-64e6-80bd-ff09000c6e28",
"1878cb61-ac79-69d9-867b-ff01007297b6",
"1b78cb61-ac79-69d9-867b-ff01007297b6",
"36d8938b-2f17-64e6-80bd-ff09000c6e28"
],
"Area": "",
"Order": 0,
"Tags": [],
"AdditionalInformation": "",
"ImportID": 1,
"Featured": false,
"ItemType": "2",
"Address": {
"Id": "d76aa08b-2f17-64e6-80bd-ff09000c6e28",
"CountryCode": "AT",
"StateCode": "",
"City": "????",
"Zip": "6800",
"Street": "Carinagasse ?????",
"Latitude": 47.2311043,
"Longitude": 9.580079999999953,
"MapZoomLevel": 8
}
}
]
}
I manage to fix it using parameterMap https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/configuration/transport.parametermap.
I add a parameterMap: functiondata, type) function, with that I was able to intercept and change the call made by the filters.
parameterMap: function (data, type) {
var c = kendo.data.transports["odata-v4"].parameterMap(data, type);
if (c.$filter) {
//my transformation
c = myTransformation;
return c;
} else{
return c; //not apply transformation loading the data
}
}

Kendo Schedular Uncaught TypeError: Cannot read property 'getTimezoneOffset' of undefined

<script>
$("#scheduler").kendoScheduler({
startTime: new Date("#DateTime.Now"),
height: 600,
views: [
"day",
{ type: "workWeek", selected: true },
"week",
"month",
"agenda",
{ type: "timeline", eventHeight: 50}
],
timezone: "Etc/GMT",
date: new Date("#DateTime.Now"),
dataSource: {
batch: true,
transport: {
read: {
url: url + "read",
dataType: "json",
type: "GET"
},
update: {
url: url + "update",
dataType: "json",
type: "POST"
},
create: {
url: url + "create",
dataType: "json",
type: "POST"
},
destroy: {
url: url + "destory",
dataType: "json",
type: "POST"
},
parameterMap: function (options, operation) {
return {
models: options.models,
};
}
},
schema: {
model: {
id: "ID",
fields: {
ID: { from: "ID", type: "number" },
Title: { from: "Title", defaultValue: "No title", validation: { required: true } },
Start: { type: "datetime", from:"Start" , format: "{0:dd-MM-yyyy}"},
End: { type: "datetime", from: "End", format: "{0:dd-MM-yyyy}" },
Description: { from: "Description" },
UserID: { from: "UserID", defaultValue: 1 },
IsAllDay: { type: "boolean", from: "IsAllDay" }
}
}
},
filter: {
logic: "or",
filters: [
{ field: "UserID", operator: "eq", value: 1 },
{ field: "UserID", operator: "eq", value: 2 }
]
}
},
resources: [
{
field: "UserID",
title: "Owner",
dataSource: [
{ text: "Alex", value: 1, color: "#f8a398" },
{ text: "Bob", value: 2, color: "#51a0ed" },
{ text: "Charlie", value: 3, color: "#56ca85" }
]
}
]
});
</script>
I've got this problem according the date property in the Kendo UI scheduler. It keeps saying that it's undefined but I'm really sure I defined it as you can see. I've been searching now for a while but I still haven't found the answer. Maybe someone could help me? I can provide every piece of could you would like to see.

Kendo UI scheduler doesn't display data

I am currently working on a kendoscheduler for a sharepoint list. I'm building off of this demo.
I'm populating my demo with the data which is present at this URL, which I have mapped locally. The only difference between the article and my code is that their URL is http://demos.telerik.com/kendo-ui/scheduler/timeline-night but mine is some JSON stored in a local file.
Here is my code:
<script>
$(function () {
$("#scheduler").kendoScheduler({
date: new Date("2013/6/12"),
startTime: new Date("2013/6/12 08:00 PM"),
endTime: new Date("2013/6/12 08:00 PM"),
dateHeaderTemplate: kendo.template("<strong>#=kendo.toString(date, 'D')# - #=kendo.toString(kendo.date.nextDay(date), 'D')#</strong>"),
eventHeight: 50,
majorTick: 360,
views: [ "timeline", "timelineWeek" ],
timezone: "Etc/UTC",
dataSource: {
batch: true,
transport: {
read: {
url: _spPageContextInfo.webAbsoluteUrl + "/_layouts/15/Stomo/Ajax.aspx/GetDataForTimeline",
}
},
schema: {
model: {
id: "meetingID",
fields: {
meetingID: { from: "MeetingID", 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" },
roomId: { from: "RoomID", nullable: true },
attendees: { from: "Attendees", nullable: true },
isAllDay: { type: "boolean", from: "IsAllDay" }
}
}
}
},
group: {
resources: ["Rooms"],
orientation: "vertical"
},
resources: [{
field: "roomId",
name: "Rooms",
dataSource: [
{ text: "Meeting Room 101", value: 1, color: "#6eb3fa" },
{ text: "Meeting Room 201", value: 2, color: "#f58a8a" }
],
title: "Room"
}]
});
});
</script>
Here is the response i am getting from my ajax call
[
{
"MeetingID":2,
"RoomID":1,
"Attendees":[
2
],
"Title":"Meeting with customers.",
"Description":"",
"StartTimezone":null,
"Start":"\/Date(1370865600000)\/",
"End":"\/Date(1370872800000)\/",
"EndTimezone":null,
"RecurrenceRule":null,
"RecurrenceID":null,
"RecurrenceException":null,
"IsAllDay":false
},
{
"MeetingID":3,
"RoomID":2,
"Attendees":[
1,
2
],
"Title":"Guided tour for the investors.",
"Description":"",
"StartTimezone":null,
"Start":"\/Date(1370865600000)\/",
"End":"\/Date(1370872800000)\/",
"EndTimezone":null,
"RecurrenceRule":null,
"RecurrenceID":null,
"RecurrenceException":null,
"IsAllDay":false
}]
Do you have any thoughts on how to make this work correctly?

Kendo UI scheduler not showing json data

I have a kendo UI scheduler that makes a ajax call and receives 2 json records through the read method. This is my scheduler widget.
$("#scheduler").kendoScheduler({
date: new Date(),
startTime:time ,
height: kendo.support.mobileOS.wp ? "28em" : 600,
views: [
{ type: "day", selected: true },
{ type: "week", selectedDateFormat: "{0:ddd,MMM dd,yyyy} - {1:ddd,MMM dd,yyyy}" },
"month",
{ type: "agenda", selectedDateFormat: "{0:ddd, M/dd/yyyy} - {1:ddd, M/dd/yyyy}" },
],
mobile: "phone",
datasource:{
batch: true,
transport: {
read: {
url: "http://mydomain.com/api/Schedule/Tasks_Read",
dataType: "jsonp"
},
update: {
url: "http://demos.telerik.com/kendo-ui/service/meetings/update",
dataType: "jsonp"
},
create: {
url: "http://demos.telerik.com/kendo-ui/service/meetings/create",
dataType: "jsonp"
},
destroy: {
url: "http://demos.telerik.com/kendo-ui/service/meetings/destroy",
dataType: "jsonp"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
},
schema: {
data:"Data",
model: {
id: "AppointmentId",
fields: {
//meetingID: { from: "MeetingID", 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" },
//roomId: { from: "RoomID", nullable: true },
//atendees: { from: "Atendees", nullable: true },
isAllDay: { type: "boolean", from: "IsAllDay" },
//professionalId:{type:"string", from: "ProfessionalId", defaultValue=""},
//professionalName:{type:"string", from: "ProfessionalName"},
//clientId:{type:"string", from: "ClientId", defaultValue=""},
//clientName:{type:"string", from: "ClientName"}
}
}
}
}
})
I have 2 problems
the problem is that the records are not displayed on the scheduler
When i un-comment out my custom properties in the schema design the code when i compile the code it errors.
UPDAE
The json server response looks like
"{\"AppointmentId\":30,\"ClientId\":\"b26d9cc1-ddcc-4277-a4eb-61835c83fb48\",\"ClientName\":\"beast client\",\"ProfessionalId\":\"260f0c43-7ff9-4654-af2b-5df2f5b8d6a1\",\"ProfessionalName\":\"AutoFirstName AutoLastName\",\"Start\":\"2014-03-30T07:00:00\",\"End\":\"2014-03-30T07:30:00\",\"ColorUsed\":null,\"HairStyleId\":null,\"Title\":\"beast client Haircut \",\"Description\":\"beast client Haircut\",\"InactiveReasonDate\":null,\"InactiveReasonId\":null,\"IsAllDay\":false,\"StartTimezone\":null,\"EndTimezone\":null,\"RecurrenceRule\":null,\"RecurrenceException\":null,\"ClientRating\":null},{\"AppointmentId\":31,\"ClientId\":\"b26d9cc1-ddcc-4277-a4eb-61835c83fb48\",\"ClientName\":\"beast client\",\"ProfessionalId\":\"260f0c43-7ff9-4654-af2b-5df2f5b8d6a1\",\"ProfessionalName\":\"AutoFirstName AutoLastName\",\"Start\":\"2014-03-31T07:00:00\",\"End\":\"2014-03-31T07:30:00\",\"ColorUsed\":null,\"HairStyleId\":null,\"Title\":\"beast client Haircut\",\"Description\":\"beast client Haircut \",\"InactiveReasonDate\":null,\"InactiveReasonId\":null,\"IsAllDay\":false,\"StartTimezone\":null,\"EndTimezone\":null,\"RecurrenceRule\":null,\"RecurrenceException\":null,\"ClientRating\":null}"

Resources