This is a migrated thread and some comments may be shown as answers.

Datasource in template not syncing

6 Answers 317 Views

Templates

This is a migrated thread and some comments may be shown as answers.

Steven asked on 16 Apr 2015, 10:59 PM

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>

</script>

</form>

</body>

6 Answers, 1 is accepted

answered on 21 Apr 2015, 09:13 AM

Hi Alexander

Thanks for your reply. I managed to get it to work yesterday. I took out the "batch: true" option in the 2nd datasource and the request works.

Oddly enough, the code that works puts double quotes around the number fields in the request to update when the batch option is taken out (maybe there's a reason for that?). Here is part of the request that creates the error:

Incident: "Bugs in rice! They were found when cooking."

IncidentDate: "2015-03-03T17:41:17.000Z"

IncidentID: 2517

IncidentOriginID: 5

IncidentsTypeID: 1

LoggedDate: "2015-03-04T17:41:17.000Z"

Logger: "Webster, Steven"

And here is the request that works. Note the quotation marks around the number fields:

Incident: "Bugs in rice! They were found when cooking."

IncidentDate: "2015-03-04T17:41:17.000Z"

IncidentID: "2517"

IncidentOriginID: "5"

IncidentsTypeID: "1"

LoggedDate: "2015-03-04T17:41:17.000Z"

Logger: "Webster, Steven"