SharePoint data does not display in Kendo Scheduler - json

Data is retrieved using the REST call in my transport, but the event does not display in Kendo Scheduler. I am interested in only displaying data at this point, the update is not working
$("#scheduler").kendoScheduler({
date: new Date("2018/11/11"),
startTime: new Date("2018/11/11 07:00 AM"),
height: 600,
views: [
"day",
"workWeek",
"week",
{ type: "month", selected: true },
"agenda",
{ type: "timeline", eventHeight: 50}
],
add: function (e) {
},
change: function (e) {
},
error: function (e) {
//TODO: handle the errors
alert(e.errorThrown);
},
dataSource: {
transport: {
read: {
url: "https://SharePoint URL/apps/crp/_api/web/lists/getbytitle('list name')/items?$expand=Author&$select=Author/Id,Author/Title,Title,Start1,OData__x0045_nd1,RecurrenceRule,RecurrenceParentID,CategoryDescription,IsAllDay&$filter=Start1 ge datetime'2018-11-01T00:00:00Z'",
beforeSend: function (xhr) {
xhr.setRequestHeader("Accept", "application/json; odata=verbose");
}
},
add: function (e) {
},
error: function (e) {
//TODO: handle the errors
alert(e.errorThrown);
},
update:
{
url: function (data) {
alert('updating');
return "https://SharePoint URL/_api/web/lists/getbytitle(listname)/items" + "(" + data.ID + ")";
},
type: "POST",
dataType: "json",
contentType: "application/json;odata=verbose",
headers: {
"accept": "application/json;odata=verbose",
"X-RequestDigest": $("#__REQUESTDIGEST").val(),
"If-Match": "*",
"X-HTTP-Method": "MERGE",
},
},
parameterMap: function (data, type) {
if (data.models) {
alert(kendo.stringify(data.models));
return {
models: kendo.stringify(data.models)
}
}
}
},
schema: {
model: {
id: "ID",
fields: {
ID: { from: "ID", type: "number" },
title: { from: "Title", defaultValue: "No title", validation: { required: true } },
start: { type: "date", from: "Start1" },
end: { type: "date", from: "OData__x0045_nd1" },
recurrenceRule: { from: "RecurrenceRule" },
recurrenceId: { from: "RecurrenceParentID", type: "number" },
description: { from: "CategoryDescription" },
isAllDay: { type: "boolean", from: "IsAllDay" } //,
}
}
}
}
});
Reviewing the JSON call, data is retrieved properly but does not display in the Scheduler. I tried capturing events in the datasource, that does not look like it is processed, so the datasource does not seem to populate (change or add events).
Data returned looks like this after JSON call:
"{\"d\":{\"results\":[{\"__metadata\":{\"id\":\"Web/Lists(guid'2abecf66-35ed-4c67-b1f1-8b7255ebf0e2')/Items(1)\",\"uri\":\"https://SharePoint url/_api/Web/Lists(guid'2abecf66-35ed-4c67-b1f1-8b7255ebf0e2')/Items(1)\",\"etag\":\"\\"4\\"\",\"type\":\"SP.Data.6001C5110ListItem\"},\"Author\":{\"__metadata\":{\"id\":\"43c25e84-bf91-4d7d-951f-c480d9b2173f\",\"type\":\"SP.Data.UserInfoItem\"},\"Id\":5,\"Title\":\"SP USer\"},\"Title\":\"6001-C5-110\",\"Start1\":\"2018-11-14T15:00:00Z\",\"OData__x0045_nd1\":\"2018-11-14T17:00:00Z\",\"RecurrenceRule\":null,\"RecurrenceParentID\":null,\"CategoryDescription\":\"My Description\",\"IsAllDay\":null}]}}"

Added data: to the schema section of the datasource, thank you Sandun for pointing me in right direction, I defined the model for the scheduler without specifying the data.
schema: {
data: function (data) {
return data.d && data.d.results ? data.d.results : [data.d];
},
model: {
id: "ID",
fields: {
ID: { from: "ID", type: "number" },
title: { from: "Title", defaultValue: "No title", validation: { required: true } },
start: { type: "date", from: "Start1" },
end: { type: "date", from: "OData__x0045_nd1" },
recurrenceRule: { from: "RecurrenceRule" },
recurrenceId: { from: "RecurrenceParentID", type: "number" },
description: { from: "CategoryDescription" },
isAllDay: { type: "boolean", from: "IsAllDay" } //,
// startTimeZone: "Etc/UTC",
// endTimeZone: "Etc/UTC"
// description: { from: "Description" }
}
}
}

Related

KendoGrid: can't disable autosync + all other lines are disabled after "destroy"

I tried so solve this for a while now, but cannot find the solution.
I cannot disable autosync for some reason. Everytime I click on "destroy" for a single row, transport.submit is triggered (and would send data to the server). I actually only want to trigger submit once, when I click the "save" button.
Is this expected behaviour? Should I handle the server communications externaly and only save locally in transport.submit? Or am I doing something wrong?
Once I remove one item using the "destroy" button, all other items are disabled until I press the "cancel" button.
How can I avoid this?
Here is my Code:
$(document).ready(function () {
var myData = getDataSource();
var dataGrid = $("#divOverview").kendoGrid({
dataSource: myData,
sortable: true,
filterable: true,
pageable: true,
toolbar: ["save", "cancel"],
columns: [
// Dataworld
{ field: "Dataworld", width: "180px" },
// Servername
{ field: "Servername"},
// IPAddress
{ field: "IPAddress"},
// Commands
{ command: ["destroy"], title: " ", width: "250px" }
],
editable: {
mode: "inline",
confirmation: false
}
});
});
function getDataSource(){
var datasource = new kendo.data.DataSource({
transport: {
read: function(options) {
$.ajax({
url: "../AccountSyncConfig/GetAccountSyncConfig.erb",
dataType: "json",
data: {mandatorID: mandatorID},
success: function(result) {
options.success(result);
},
error: function(result) {
options.error(result);
}
});
},
submit: function(e) {
var data = e.data;
console.log(data);
},
parameterMap: function(data, type) {
if (type == "read") {
return { mandatorID: mandatorID};
} else if (type == "submit") {
//console.log( {models: JSON.stringify(data.models)} );
return {
data: kendo.stringify({
mandatorID: mandatorID,
models: data.models
})
};
} else {
return "";
}
}
},
schema: {
model: {
id: "EntryID",
fields: {
Dataworld: {
type: "string",
validation: {
required: true
}
},
Servername: {
type: "string",
validation: {
required: true
}
},
IPAddress: {
type: "string",
validation: {
required: true,
IPAddressvalidation: function (input) {
if (input.val() != "") {
input.attr("data-IPAddressvalidation-msg", "Ungültige IP-Adresse");
return /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/.test(input.val());
}
return true;
}
}
}
},
}
},
autoSync: false,
batch: true,
pageSize: 10
});
return datasource;
}

Kendo Grid UI transport.destroy is not firing the service in datasource

I am new to Kendo UI, While I am using the Kendo Grid UI which is consuming the service, the read operation is working fine and the Grid is populated with the data from services but the delete operation is not working
I have tested the delete service using the fiddler getting a perfect response,but I confused why the delete button in kendo grid is not firing the endpoint
I struggled for past one week but no improvement
This is my code,
var carsDataSource1 = new kendo.data.DataSource(
{
batch: true,
transport: {
read: {
url: "/DesktopModules/MyServicesTest/API/DropData/Drop",
dataType: "json",
type: "GET",
contentType: "application/json; charset=utf-8",
},
destroy: {
url: function(options)
{
return 'DesktopModules/MyServicesTest/API/DeleteCategory/
Delete' + options.models[0].id;
},
dataType: "json",
type: "DELETE"
},
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
var CategoryID = options.models[0].id;
console.log(CategoryID);
return CategoryID;
}
}
},
shema:
{
model: {
id: "CategoryID",
field: {
CategoryID:
{
editable: false,
nullable: true,
type: "number"
},
CategoryName:
{
editable: false,
nullable: false,
type: "string"
},
}
}
}
});
$("#grid1").kendoGrid({
dataSource: carsDataSource1,
height: "500px",
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [
{
field: "CategoryID",
title: "number "
},
{
field: "CategoryName",
title: "Name"
},
{ command:"destroy"}
],
toolbar: ["create"],
editable: "inline",
destroy:true,
});
});

Kendo UI Scheduler and ASP.NET MVC

Trying to make work Kendo UI with ASP.NET MVC.
I can use ready-to-work toolkit, but it will tie front-end to back-end; that's inappropriate, so I'm doing all manually.
I've bound datasource
dataSource: {
batch: true,
transport: {
read: {
url: "http://192.168.0.34/FRINGE/api/tasks",
dataType: "json"
},
modified schema
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" },
description: { from: "Description" },
ownerId: { from: "OwnerID", defaultValue: 1 },
isAllDay: { type: "boolean", from: "IsAllDay" }
}
},
parse: function (responce) { /*debugger;*/ }
},
and wrote a simple controller
[HttpGet]
public ActionResult Tasks(int? id)
{
//«data» type is List<Tasks>
if (id.HasValue)
return Json(data.SingleOrDefault(x => x.TaskID == id.Value), JsonRequestBehavior.AllowGet);
else
return Json(data, JsonRequestBehavior.AllowGet);
}
Which produces data like
[{"TaskID":1,"Title":"Action","Start":"\/Date(1425009600000)\/","End":"\/Date(1425013200000)\/","Description":"Action time","OwnerId":1,"IsAllDay":false},{"TaskID":2,"Title":"Dinner","Start":"\/Date(1425034800000)\/","End":"\/Date(1425038400000)\/","Description":"Dinner time","OwnerId":1,"IsAllDay":false}]
But nothing works. Checked schema and data on Telerik Kendo UI Dojo, and all good there. I think, problem in controller declaration due to some params lack.
What I've missed?
You're defining a parse method in your schema which does nothing. You have to remove it or return data from it:
parse: function(response) {
return response;
}

onChange function for a specific column in grid

Ok, so here is the thing... I have grid with 3 columns: Premises Order, Name and Postal Code
The first column Premises Order is editable(numericall). What I want to do is this: Make an onChange function to save the value of the new inserted number. I know I need a procedure for that I just want to know how to catch the value (in console), to know that I have it and than I'll do the procedure.
Here is the code
PremisesGrid2 = $("#assignedRoute").kendoGrid({
dataSource: {
type: "application/jsonp",
transport: {
read:
{
url: "http://" + servername + "/uBillingServices/Premise/Premise.svc/GetAllPremisesByRoute",
dataType: "json",
data: function () {
return {
Route_ID: selectedID,
UserName: userName,
WorkStation: workStation
}
}
}
}, pageSize: 10,
serverPaging: true,
schema: {
model: {
fields: {
ID: { type: "string", validation: { required: true }, editable: false },
PostalCode: { type: "string", validation: { required: true }, editable: false },
Latitude: { type: "string", validation: { required: true }, editable: false },
Longitude: { type: "string", validation: { required: true }, editable: false },
IsMember: { type: "string", validation: { required: true }, editable: false },
Name: { type: "string", validation: { required: true }, editable: false },
RouteOrderBy: { type: "number", validation: { required: true }, editable: true, nullable: false, format: "{0:n2}" }
}
},
data: function (result) {
return result.rows || result;
},
total: function (result) {
var data = this.data(result);
return result.totalRows || result.length || 0; ;
}
}
},
change: onChange,
dataBound: function (e) {
e.sender.select(e.sender.tbody.find(">tr:first"));
},
selectable: "multiple",
scrollable: true,
filterable: true,
editable: true,
groupable: false,
pageable: {
numeric: true,
pageSizes: true,
previousNext: false
},
sortable: {
mode: "single",
allowUnsort: false
},
height: 400,
columns: [
{ field: "RouteOrderBy", title: "Premise Order", headerAttributes: {
style: "font-size:small; text-align:center"
}, attributes: { style: "text-align:right" }
},
{ field: "PostalCode", title: "Assigned Premises", headerAttributes: {
style: "font-size:small; text-align:center"
}
},
{ field: "Name", title: "Customer", headerAttributes: {
style: "font-size:small; text-align:center"
}
}
]
});
Thank you.
Instead of using change event, you should use save. change is fired when there is a change in the selection of a row not in the value.
For displaying the edited value, the HTML element containing the edited value and the item in the model, you can use:
save : function (e) {
console.log("The values entered by the user.", e.values);
console.log("The jQuery element which is in edit mode.", e.container);
console.log("The edited model.", e.model);
},

Why is my Read Method being called when I click update on the inline editing of a grid row

Another frustrating day with the Kendo Grid. Anyway, my problem is this: When I click "Edit" on a grid row item, it goes into edit mode. Good. Then I modify a record, and click update. I would expect the "/Company/SaveAccountAdmin" method to be called.But no... The read method is called again. When I click "Cancel" the record just disappears! The $("#save") click event is just an attempt to force a save, but surely these events can be triggered off the grid command buttons? Any ideas anyone?
/// <reference path="../kendo.all-vsdoc.js" />
$(document).ready(function () {
var CompanyId = $("#CompanyId").val();
var dataSource = new kendo.data.DataSource(
{
batch: true,
pageSize: 10,
transport: {
create: {
url: "/Company/SaveAccountAdmin",
contentType: "application/json; charset=utf-8",
type: "POST",
dataType: "json",
url: "/Company/ReadAccountAdmin",
},
read: {
url: "/Company/ReadAccountAdmin"
},
update: {
url: "/Company/SaveAccountAdmin",
contentType: "application/json; charset=utf-8",
type: "POST",
dataType: "json",
url: "/Company/ReadAccountAdmin",
},
//destroy: {},
parameterMap: function (options, operation) {
if (operation !== "read" && options.model) {
return { model: kendo.stringify(options.model) };
}
}
},
schema: {
model: {
id: "ComanyContactId",
fields: {
CompanyId: { type: "number", editable: false, nullable: false, defaultVaue: CompanyId },
CompanyContactId: { type: "number", editable: false, defaultValue: 0 },
FirstName: { type: "string", nullable: false, validation: { required: true } },
LastName: { type: "string", nullable: false, validation: { required: true } },
Email: { type: "string", nullable: false, validation: { required: true } },
Phone: { type: "string", nullable: false, validation: { required: true } },
IsActive: { type: "boolean" }
}
}
}
});
$("#save").click(function (event) {
event.preventDefault();
var rows = $.map(dataSource.data(), function (value, index) {
return {
CompanyId: value["CompanyId"],
CompanyContactId: value["CompanyContactId"],
FirstName: value["FirstName"],
LastName: value["LastName"],
Email: value["Email"],
Phone: value["Phone"],
IsActive: value["IsActive"]
}
});
var jsonCompanyContacts = JSON.stringify(rows);
$.ajax({
url: '/Company/SaveAccountAdmin',
type: 'POST',
traditional: true,
data: { "jsonCompanyContacts": jsonCompanyContacts },
success: alert("Data Saved")
})
});
$("#AccountAdmins").kendoGrid({
dataSource: dataSource,
toolbar: ["create"],
editable: "inline",
sortable: true,
pageable: true,
navigatable: true,
editable: "inline",
columns: [
{ field: "CompanyId", title: "CompanyID", sortable: true },
{ field: "CompanyContactId", title: "Company ContactID", sortable: true },
{ field: "FirstName", title: "First Name", sortable: true },
{ field: "LastName", title: "Last Name" },
{ field: "Email", title: "Email", },
{ field: "Phone", title: "Phone", },
{ field: "IsActive", title: "Is Active" },
{ command: ["edit", "destroy"], title: " ", width: "210px" }]
});
});
My guess is that it is because you have the Read URL set for the Update command:
update: {
url: "/Company/SaveAccountAdmin", // <-- Not used because it is changed below
contentType: "application/json; charset=utf-8",
type: "POST",
dataType: "json",
url: "/Company/ReadAccountAdmin", // <-- Read URL set
},