Hi
I need some assistance with something I'm working on. I have a kendo grid that's populated by a datasource that queries a view in a sql database. (I use a view as it contains a join between 2 tables, getting the latest status of the parent record that was added in a child table). The grid has a custom command column that launches a window that uses a template. That template contains a form that binds to another datasource that's filtered by the id of the selected row in it's parent grid. That form binds ok and the values appear as they should, but the datasource will not sync. I get a 400 bad request error when I click the save button. Could somebody please look at the code below and see if they can figure out why it won't sync. Any help would be greatly appreciated.
Regards
<
body
>
<
form
id
=
"form1"
runat
=
"server"
>
<
h2
>Incidents</
h2
>
<
div
id
=
"grid"
></
div
>
<
div
id
=
"details"
></
div
>
<
script
>
var wnd;
var detailsTemplate;
$(document).ready(function () {
// DECLARING DATASOURCES TO BE USED AS LOOKUPS
// Request Origins
var requestoriginsDataSource = new kendo.data.DataSource({
type: "odata",
transport: {
read: { url: "/DORAModelService.svc/lkupRequestOrigins", async: false }
},
serverSorting: true,
sort: { field: "text", dir: "asc" }
});
requestoriginsDataSource.read();
// Request Types
var requesttypeDataSource = new kendo.data.DataSource({
type: "odata",
transport: {
read: { url: "/DORAModelService.svc/lkupRequestTypes", async: false }
},
serverSorting: true,
sort: { field: "text", dir: "asc" }
});
requesttypeDataSource.read();
// Incident Source Type
var incidentsourceDataSource = new kendo.data.DataSource({
type: "odata",
transport: {
read: { url: "/DORAModelService.svc/lkupSources", async: false }
},
serverSorting: true,
sort: { field: "text", dir: "asc" }
});
incidentsourceDataSource.read();
// Managers
var managersDataSource = new kendo.data.DataSource({
type: "odata",
transport: {
read: { url: "/DORAModelService.svc/lkupUsers", async: false }
},
serverSorting: true,
sort: { field: "text", dir: "asc" }
});
managersDataSource.read();
// Incident DataSource - this uses a view that joins 2 tables.
// It's required to get the latest status of the incidents displayed
var dataSource = new kendo.data.DataSource({
type: "odata",
serverFiltering: true,
serverSorting: true,
sort: { field: "IncidentID", dir: "desc" },
transport: {
read: {
url: "/DORAModelService.svc/Vw_Incidents", async: false
}
},
schema: {
model: {
id: "IncidentID",
fields: {
IncidentID: { type: "number" },
}
}
}
});
dataSource.read();
$("#grid").kendoGrid({
dataSource: dataSource,
height: 550,
filterable: true,
sortable: true,
pageable: true,
editable: true,
toolbar: ["create", "save", "cancel"],
columns: [{
field: "IncidentID",
filterable: false,
width: 80
},
"Incident",
"LatestStatus",
{ command: { text: "View Details", click: showDetails }, title: " ", width: "180px" }
]
});
wnd = $("#details")
.kendoWindow({
title: "Incident Details",
modal: true,
visible: false,
resizable: false,
width: "98%",
open: function (e) {
this.wrapper.css({ top: 5 });
}
}).data("kendoWindow");
detailsTemplate = kendo.template($("#detailstemplate").html());
var selectedincidentDataSource
function showDetails(e) {
e.preventDefault();
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
wnd.content(detailsTemplate(dataItem));
wnd.center().open();
selectedincidentDataSource = new kendo.data.DataSource({
type: "odata",
serverFiltering: true,
transport: {
read: {
url: "/DORAModelService.svc/TblIncidents", async: false,
data: {
$expand: "TbIncidentStatus"
}
},
update: {
url: function (data) {
return "/DORAModelService.svc/TblIncidents" + "(" + dataItem.IncidentID + ")";
}
},
create: {
url: "/DORAModelService.svc/TblIncidents"
},
destroy: {
url: function (data) {
return "/DORAModelService.svc/TblIncidents" + "(" + dataItem.IncidentID + ")";
}
}
},
filter: {
logic: "and",
filters: [
{ field: "IncidentID", operator: "eq", value: dataItem.IncidentID }
]
},
batch: true,
schema: {
model: {
id: "IncidentID",
fields: {
IncidentID: { type: "number" },
Incident: { type: "string" },
ManagerID: { type: "number" },
LoggedDate: { type: "date", format: "{0:dd/MM/yyyy}" },
IncidentDate: { type: "date", format: "{0:dd/MM/yyyy}" },
SourceID: { type: "number" },
IncidentsTypeID: { type: "number" },
IncidentOriginID: { type: "number" },
Logger: { type: "string" }
}
}
}
})
selectedincidentDataSource.read();
kendo.bind($("#selectedincident"), selectedincidentDataSource.view()[0]);
$("#managers").kendoDropDownList({
dataSource: managersDataSource,
dataTextField: "text",
dataValueField: "value"
}).data("kendoDropDownList")
$("#origin").kendoDropDownList({
dataSource: requestoriginsDataSource,
dataTextField: "text",
dataValueField: "value"
}).data("kendoDropDownList")
$("#type").kendoDropDownList({
dataSource: requesttypeDataSource,
dataTextField: "text",
dataValueField: "value"
}).data("kendoDropDownList")
$("#source").kendoDropDownList({
dataSource: incidentsourceDataSource,
dataTextField: "text",
dataValueField: "value"
}).data("kendoDropDownList")
$("#hSave").click(function () {
selectedincidentDataSource.sync();
});
} // Finish ShowDetails
});
</
script
>
<
script
type
=
"text/x-kendo-template"
id
=
"detailstemplate"
>
<
div
id
=
"selectedincident"
class
=
"container"
>
<
div
class
=
"container"
>
<
div
class
=
"row spacer"
>
<
div
class
=
"col-md-5"
>
<
label
>ID</
label
><
span
data-bind
=
"text: IncidentID"
></
span
><
br
/>
<
label
>Name</
label
><
input
type
=
"text"
id
=
"incidents1"
class
=
"k-textbox w300"
data-bind
=
"value: Incident"
/><
br
/>
<
label
>Incident Date</
label
><
input
class
=
"w300"
type
=
"text"
id
=
"incidentdate"
data-bind
=
"value: IncidentDate"
data-role
=
"datepicker"
data-format
=
"dd/MM/yyyy"
/><
br
/>
<
label
>Logged Date</
label
><
input
class
=
"w300"
type
=
"text"
id
=
"loggeddate"
data-role
=
"datepicker"
data-bind
=
"value: LoggedDate"
data-format
=
"dd/MM/yyyy"
/><
br
/>
<
label
>Manager</
label
><
input
class
=
"w300"
type
=
"text"
id
=
"managers"
class
=
"input400"
data-bind
=
"value: ManagerID"
/><
br
/>
</
div
>
<
div
class
=
"col-md-5"
>
<
label
>Origin</
label
><
input
type
=
"text"
id
=
"origin"
class
=
"w300"
data-bind
=
"value: IncidentOriginID"
/><
br
/>
<
label
>Type</
label
><
input
type
=
"text"
id
=
"type"
class
=
"w300"
data-bind
=
"value: IncidentsTypeID"
/><
br
/>
<
label
>Source</
label
><
input
type
=
"text"
id
=
"source"
class
=
"w300"
data-bind
=
"value: SourceID"
/><
br
/>
<
a
href
=
"\\#"
class
=
"k-button"
id
=
"hSave"
>Save</
a
>
</
div
>
</
div
>
</
div
>
</
div
>
</
script
>
</
form
>
</
body
>