Hi,
First off, new to a lot of this though I've made a lot of progress on my own. Unfortunately I'm maxed out with my limitations/lack of knowledge around several things. GREATLY appreciate some assistance.
Looking to create a Hierarchical Grid with CRUD functions (for both the parent and the child grid). Have not seen a demo/example anywhere or from anyone with a Hierarchy that has CRUD. That's the 1st half of the issue. 2nd half, I've been working on getting the CRUD functions (popup editing) to work in just a regular Grid but having trouble. Main trouble is I need to use not one, but two different Sharepoint lists (via REST) as the data source (one for the parent, one for the child). But even trying to just use one list for a standard grid, I cannot get the CRUD functions to work. Doing this all strictly through HTML/JS/CSS. No ASP.NET or C#. It's an internal sharepoint subsite.
The grid will populate from the list but the "Add New", "Edit", and "Delete" functions will not work correctly/save. Upon clicking "Add New Record" the popup opens and fill it out, but when I click "update" it does nothing and the window just remains opens. Screen shot is attached and posted code below. Greatly appreciate any assistance!
<title></title>
<link rel="stylesheet" href="https://home.hitachiconsulting.net/learning/PublishingImages/Dashboard/Kendo/kendo.common.min.css" />
<link rel="stylesheet" href="https://home.hitachiconsulting.net/learning/PublishingImages/Dashboard/Kendo/kendo.default.min.css" />
<script src="https://home.hitachiconsulting.net/learning/PublishingImages/Dashboard/Kendo/jquery.js"></script>
<script src="https://home.hitachiconsulting.net/learning/PublishingImages/Dashboard/Kendo/kendo.all.min.js"></script>
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function () {
var crudServiceBaseUrl = "https://home.hitachiconsulting.net/learning/curriculumdevelopers/_vti_bin/listdata.svc/EventsCourses",
dataSource = new kendo.data.DataSource({
type: "odata",
transport: {
read: {
url: crudServiceBaseUrl,
type: "GET",
dataType: "json",
contentType: "application/json;odata=verbose",
headers: {
"accept": "application/json;odata=verbose"
}
},
create: {
url: crudServiceBaseUrl,
type: "POST",
dataType: "json",
contentType: "application/json;odata=verbose",
headers: {
"accept": "application/json;odata=verbose",
"X-RequestDigest": $("#__REQUESTDIGEST").val(),
}
},
update: {
url: function (data) {
return crudServiceBaseUrl + "(" + data.ID + ")";
},
beforeSend: function (jqXhr, options) {
var data = JSON.parse(options.data);
jqXhr.setRequestHeader("If-Match", data.__metadata.etag);
},
type: "POST",
dataType: "json",
contentType: "application/json;odata=verbose",
headers: {
"accept": "application/json;odata=verbose",
"X-RequestDigest": $("#__REQUESTDIGEST").val(),
"X-HTTP-Method": "MERGE"
},
},
destroy: {
url: function (data) {
return crudServiceBaseUrl + "(" + data.ID + ")";
},
type: "POST",
dataType: "json",
contentType: "application/json;odata=verbose",
headers: {
"accept": "application/json;odata=verbose",
"X-RequestDigest": $("#__REQUESTDIGEST").val(),
"X-HTTP-Method": "MERGE",
"If-Match": "*"
}
},
parameterMap: function(data, type){
if (type === "update" && data["__deferred"]){
delete data["__deferred"];
}
return kendo.stringify(data);
}
},
batch: true,
pageSize: 10,
schema: {
data: "d.results",
model: {
id: "ID",
fields: {
ID: {editable: false, nullable: false },
Event: { type: "string", validation: { required: true } },
GlobalID: { type: "string" },
TrainingHours: { type: "number", validation: { required: true } },
Description: { type: "string", validation: {required: true } },
Objectives: { type: "string", validation: {required: true } },
DeliveryMethod: { type: "string", validation: { required: true } },
PrimarySubject: { type: "string", validation: { required: true } },
SecondarySubject: { type: "string", validation: { required: true } },
KeyWords: { type: "string", validation: { required: true } },
Curriculums: { type: "string", validation: { required: true } },
CourseDeveloper: { type: "string", validation: { required: true } },
SME: { type: "string", validation: { required: true } },
AddedToSensei: { type: "string", validation: { required: true } },
DateLastUpdated: { type: "string", validation: { required: true } },
Staus: { type: "string", validation: { required: true } },
SourceFiles: { type: "string", validation: { required: true } },
Notes: { type: "string", validation: {required: true } }
}
}
},
});
$("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
height: 550,
toolbar: ["create" ],
columns: [
{ field: "Event", title: "Event Name" },
{ field: "GlobalID", title:"Event No./Global ID", width: "120px" },
{ field: "TrainingHours", title:"Training Hours", width: "120px" },
{ field: "Description", width: "120px" },
{ field: "Objectives" },
{ field: "DeliveryMethod", title: "Delivery Method" },
{ field: "PrimarySubject", title: "Primary Subject" },
{ field: "SecondarySubject", title: "Secondary Subject" },
{ field: "KeyWords", title: "Key Words" },
{ field: "CurriculumLibrary" },
{ field: "CourseDeveloper", title: "Curriculum Developer" },
{ field: "SME" },
{ field: "AddedToSensei", title: "Added to Sensei" },
{ field: "DateLastUpdated", title: "Date Last Updated" },
{ field: "Status" },
{ field: "SourceFiles", title: "Source Files" },
{ field: "Notes" },
{ command: ["edit", "destroy"], title: " ", width: "250px" }],
editable: {
mode:"popup",
update: true
}
});
});
dataSource.add( { Event: "New Event" });
datasource.sync() ;
</script>
</div>