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

Grid - Cancel causes postback

2 Answers 171 Views

Grid

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

Phil H. asked on 06 May 2015, 10:25 PM

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>

Grid - Cancel causes postback

2 Answers, 1 is accepted