Kendo Grid Detail Init with Click
HTML
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2012.1.322/js/kendo.all.min.js"></script>
<input type="button" name="" id="testbtn" value="Click me" />
<br/>
<div id="grid"></div>
<div id="tgrid" class="grid">Item Prices: </div>
JavaScript
// Code goes here
var Output = [{
carId: "1",
vehicleId: "1",
Percentage: 5,
Price: "20",
CarType: "test",
CarSize: "20",
CarPerCase: 50,
Family: "ii",
ModelType: "hh",
EPId: "gg",
Tax: "gg"
}];
var people = new kendo.data.DataSource({
data: Output,
batch: true,
schema: {
model: {
fields: {
carId: {
type: "string"
},
vehicleId: {
type: "string",
editable: false
},
Percentage: {
type: "number",
editable: false
},
Price: {
type: "string",
editable: false
},
CarType: {
type: "string",
editable: false
},
CarSize: {
type: "string",
editable: false
},
CarPerCase: {
type: "number",
editable: false
},
Family: {
type: "string",
editable: false
},
ModelType: {
type: "string",
editable: false
},
EPId: {
type: "string"
},
Tax: {
type: "string"
}
}
}
},
pageSize: 20,
sort: {
field: "vehicleId",
dir: "asc"
}
});
var element = $("#grid").kendoGrid({
dataSource: people,
navigatable: true,
toolbar: [
"save",
"cancel", {
name: "Add",
text: "Show Car Price",
click: function (e) {
return false;
}
}, {
name: "Delete",
text: "Hide Car Price",
...