Hi:
The grid is just part of a detail form, and the data for the grid is in memory, so the postback from the cancel button is very bad.
Phil
<!DOCTYPE html>
<
html
xmlns
=
"http://www.w3.org/1999/xhtml"
>
<
head
>
<
title
>Author Design - snippet</
title
>
<
style
>
body {
font-family: Tahoma;
font-size: 18px;
color: navy;
margin: 0;
}
#grid .k-grid-toolbar
{
padding: .6em 1.3em;
}
.add-label
{
vertical-align: middle;
padding-right: .5em;
}
#existing
{
vertical-align: middle;
}
.toolbar {
float: right;
}
</
style
>
<
link
href
=
"../../content/kendo/kendo.common-bootstrap.min.css"
rel
=
"stylesheet"
/>
<
link
href
=
"../../content/kendo/kendo.blueopal.min.css"
rel
=
"stylesheet"
/>
<
script
src
=
"../../scripts/jquery-1.9.1.min.js"
></
script
>
<
script
src
=
"../../scripts/kendo/kendo.all.js"
></
script
>
</
head
>
<
body
>
<
script
type
=
"text/x-kendo-template"
id
=
"addTemplate"
>
<
div
class
=
"toolbar"
>
<
label
class
=
"add-label"
for
=
"existing"
>Add existing:</
label
>
<
input
type
=
"search"
id
=
"existing"
style
=
"width: 300px"
/>
</
div
>
</
script
>
<
div
style
=
"width: 600px;"
>
<
div
id
=
"AuthorsGrid"
></
div
>
</
div
>
<
script
type
=
"text/javascript"
>
//
//
var aData = [{ Id: 1, Name: "Joe" }, { Id: 2, Name: "Jane" }];
$(document).ready(function () {
//
$('#AuthorsGrid').kendoGrid({
dataSource: aData,
width: 400,
toolbar: [{ name: 'create', text: " Add " },
{ template: $("#addTemplate").html() }],
columns: [
{ field: 'Id', hidden: true },
{ field: 'Name', title: 'Name', width: '350px' },
{ command: 'destroy', title: ' ', width: 110 }
],
editable: 'popup'
});
//
var AuthorGrid = $('#AuthorsGrid').data('kendoGrid');
//
var authorData = [{ "Id": 11, "Name": "Andy Hunt" }, { "Id": 10, "Name": "Ben Albahari" },
{ "Id": 4, "Name": "Bill Wagner" }, { "Id": 1, "Name": "Bob Martin" },
{ "Id": 15, "Name": "Chad Fowler" }, { "Id": 12, "Name": "Dave Thomas" },
{ "Id": 6, "Name": "Fabrice Marguerie" }, { "Id": 2, "Name": "James Newkirk" },
{ "Id": 8, "Name": "Jim Wooley" }, { "Id": 3, "Name": "Jon Skeet" },
{ "Id": 9, "Name": "Joseph Albahari" }, { "Id": 5, "Name": "Joseph Rattz Jr." },
{ "Id": 16, "Name": "Julie Lerman" }, { "Id": 14, "Name": "Kent Beck" },
{ "Id": 17, "Name": "Rowan Miller" }, { "Id": 7, "Name": "Steve Eichert" },
{ "Id": 13, "Name": "Venkat Subramaniam" }];
$("#existing").kendoDropDownList({
dataTextField: "Name",
dataValueField: "Id",
dataSource: { data: authorData },
optionLabel: "Select an Author ...",
change: function (e) {
// handle selected event
var dataId = this.select() - 1;
if (dataId != -1) {
var dataItem = this.dataSource.at(dataId);
if (AuthorGrid.dataSource.get(dataItem.Id) === undefined) {
// alert(dataItem.Name + ' (' + dataItem.Id + ')' + dataId);
AuthorGrid.dataSource.add(dataItem);
}
}
//
e.preventDefault();
}
});
});
</
script
>
</
body
>
</
html
>