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

Problems with DataSource - Incorrect Posts

1 Answer 194 Views

Data Source

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

John asked on 10 Apr 2012, 01:01 PM

UserInstallations.png

I am trying to make an application which adds rows to a sub-grid by selecting a row from another grid, and then programatically adding a row to the sub-grids datasource. Visually this works beautifully, but the datasource triggers some weird events which I can't explain. In the attached code, I am referring to the Grid and datasource generated from the detailInit function. So there are 2 situations which happen:
1. If I include the id in the model then the Create event doesn't fire.
2. If I dont include the id in the model then the datasource triggers Posts for all the existing rows in the subgrid.

I've attached an image of the page and the source below (sorry its a little massive). Any tip you can give would be greatly appreciated.

<!DOCTYPE html>
<html>
<head>
<link href="styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<link href="styles/SwitchMetro.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/kendo.web.min.js" type="text/javascript"></script>
<title>Installation Users</title>
</head>
<body >
<table style="width:100%;">
<tr>
<td>
<table id="Users">
<thead>
<tr>
<th data-field="UserID">ID</th>
<th data-field="UserName">Name</th>
<th data-field="ShortName">Short Name</th>
<th data-field="Email">Email</th>
</tr>
</thead>
<tbody>
<tr>
<td ></td>
<td >Isabella</td>
<td>Issy</td>
<td>IDarlington@SwitchAutomation.com</td>
</tr>
<tr>
<td ></td>
<td>Angus</td>
<td>Gus</td>
<td>GDarlington@SwitchAutomation.com</td>
</tr>
</tbody>
</table>
</td>
<td align="center" width="80">
<table width="80">
<tr>
<td style="vertical-align: center; horiz-align: center" >
<input id="AddInstallationButton" type="button" value="<<" onclick="return AddInstallationButton_onclick()" />
</td>
</tr>
<tr>
<td style="vertical-align: center; horiz-align: center">
<input id="RemoveInstallationButton" type="button" value=">>" onclick="return RemoveInstallationButton_onclick()" />
</td>
</tr>
</table>
</td>
<td >
<table id="Installations">
<thead>
<tr>
<th data-field="InstallationID" style="visibility: hidden">ID</th>
<th data-field="InstallationName">Name</th>
</tr>
</thead>
<tbody>
<tr>
<td ></td>
<td >The Rakey Tower 1</td>
</tr>
<tr>
<td ></td>
<td >The Rakey Tower 2</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>


<script>
var selectedInstallation = null;
var selectedUser = null;
$(document).ready(function () {

NewGuid();

$("#Users").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://localhost:17760/SwitchDataService.svc/Users",
//read: "http://odata-staging.switchautomation.com/OSwitch.svc/Users",
dataType: "jsonp"
},
schema: {
model: {
fields: {
UserID: { type: "guid", editable: false },
UserName: { type: "string", editable: true, validation: { required: true} },
ShortName: { type: "string", editable: true, validation: { required: true} },
Email: { type: "string", editable: true, validation: { required: true} }
}
}
},
batch: true,
serverPaging: true,
serverFiltering: true,
serverSorting: true,
filter: [
{ field: "UserName", operator: "ne", value: "Administrator" },
{ field: "UserName", operator: "ne", value: "Server" }
]
},
height: 600,
// toolbar: ["create", "save", "cancel"],
editable: true,
filterable: true,
sortable: true,
scrollable: { virtual: true },
selectable: "multiple",
detailInit: detailInit,
dataBound: function () {
this.expandRow(this.tbody.find("tr.k-master-row").first());
}
});

function detailInit(e) {
$("<div id='div_" + e.data.UserID + "' />").appendTo(e.detailCell).kendoGrid({
dataSource: {
type: "odata",
transport: {
read: {
url: "http://localhost:17760/SwitchDataService.svc/UserInstallations?$expand=Installation&$filter=UserID eq guid'" + e.data.UserID + "'",
dataType: "json"
},
create: {
url: "http://localhost:17760/SwitchDataService.svc/UserInstallations",
dataType: "json"
},
destroy: {
url: function (data) {
console.log(data);
return "http://localhost:17760/SwitchDataService.svc/UserInstallations" + "(" + data.UserInstallationID + ")";
}
},
parameterMap: function (options, type) {
var ret;
console.log(type);
switch (type) {
case "read":
ret = kendo.data.transports["odata"].parameterMap(options, type);
break;
case "destroy":
ret = kendo.data.transports["odata"].parameterMap(options, type);
break;
case "create":
{
ret = kendo.stringify(
{ UserInstallationID: options.UserInstallationID,
InstallationID: options.InstallationID,
UserID: options.UserID
});
console.log(options);
break;
}
default:
ret = kendo.data.transports["odata"].parameterMap(options, type);
break;
}
return ret;
}
},
schema: {
model: {
fields: {
UserInstallationID: { editable: false, type: "guid" },
InstallationID: { type: "guid" },
UserID: { type: "guid" }
}
}
},
serverSorting: true,
serverFiltering: true,
batch: false
},
scrollable: false,
selectable: "true",
columns: [
{ field: "Installation.InstallationName", title: "Installation Name", width: 100 },
{ field: "InstallationID", title: "Installation ID", width: 100 }
]
});
}

$("#Installations").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://localhost:17760/SwitchDataService.svc/Installations",
dataType: "json"
},
schema: {
model: {
fields: {
InstallationID: { type: "guid", editable: false, validation: { required: true} },
InstallationName: { type: "string", editable: false, validation: { required: true} }
}
}
},
batch: false,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
height: 600,
editable: true,
filterable: true,
sortable: true,
scrollable: { virtual: true },
selectable: "true"
});
});

function AddInstallationButton_onclick() {
var usersGrid = $('#Users').data('kendoGrid');
var selectedUserItem = usersGrid.select();
var selectedUser = usersGrid.dataItem(selectedUserItem);

var installationsGrid = $('#Installations').data('kendoGrid');
var selectedItem = installationsGrid.select();
var selectedInstallation = installationsGrid.dataItem(selectedItem);

if (selectedUser != undefined && selectedInstallation != undefined)
{
var detailDiv = $('#Users').find('tr.k-master-row.k-state-selected').next('tr.k-detail-row').find('div.k-grid.k-widget');
var detailGrid = detailDiv.data('kendoGrid');

var dataSource = detailGrid.dataSource;
dataSource.add({ UserInstallationID: nextGuid, InstallationID: selectedInstallation.InstallationID, UserID: selectedUser.UserID, Installation: { InstallationID: selectedInstallation.InstallationID, InstallationName: selectedInstallation.InstallationName} });
NewGuid();

dataSource.sync();
}

}

function RemoveInstallationButton_onclick() {
var detailDiv = $('#Users').find('tr.k-master-row.k-state-selected').next('tr.k-detail-row').find('div.k-grid.k-widget');
if (detailDiv != undefined) {
var detailGrid = detailDiv.data('kendoGrid');
var selectedRow = detailDiv.find('tr.k-state-selected');
if (selectedRow != undefined) {
detailGrid.removeRow(selectedRow);
detailGrid.saveChanges();
}
}
}

var nextGuid;
function NewGuid() {
$.get('http://localhost:17760/SwitchDataService.svc/NewGuid?$format=json', function(data) {
nextGuid = data.d.NewGuid;
});
}

</script>
</body>
</html>
Thanks

Problems with DataSource - Incorrect Posts

1 Answer, 1 is accepted