I am working with kendo grid and now I want to show a third column in kendo grid by subtracting two other fields. Is this possible in kendo grid. For eg: I want to show the field
"Allocated"= "TotalAmount-TotalDepriciated"
Code:
$("#grid").kendoGrid({
dataSource: DataSource,
autoBind: false,
scrollable: false,
sortable: {
allowUnsort: false
},
filterable: { mode: "row", style: "max-width:100px;" },
groupable: true,
pageable: {
refresh: true,
buttonCount: 5,
pageSizes: GlobalPagingDDL
},
//rowTemplate: kendo.template($("#template").html()),
dataBound: gridDataBound,
columns:
[
//field: "Name", title: "Licensee", width: 200, filterable: { cell: { showOperators: false, suggestionOperator: "contains" } }, template: "<a href='javascript:void(0)' onclick='RedirectToOrgDetail("#:LicenseeId#" , "#:PublicName#" )' >#:LicenseeName# </a>" },
{ field: "AgreementName", title: "Agreement Name", width: 200, filterable: { cell: { showOperators: false, suggestionOperator: "contains" } } },
{
field: "Count", title: "Related Agreement", width: 150,
filterable: { cell: { showOperators: true, suggestionOperator: "contains" } }
},
{
field: "Status", title: "Status", width: 150, filterable: {
cell: {
template: function (args) {
args.element.kendoDropDownList({
dataSource: new kendo.data.DataSource({
data:
[
{ Status: "Approved" },
{ Status: "Pending" },
]
}),
dataTextField: "Status",
optionLabel: "All",
dataValueField: "Status",
valuePrimitive: true
});
}, showOperators: false, suggestionOperator: "contains"
}
}
},
{
field: "Type", title: "Type", width: 150, filterable: {
cell: {
template: function (args) {
args.element.kendoDropDownList({
dataSource: new kendo.data.DataSource({
data:
[
{ Type: "4" },
{ Type: "3" },
{ Type: "2" },
{ : "1" }
]
}),
dataTextField: "Type",
optionLabel: "All",
dataValueField: "Type",
valuePrimitive: true
});
}, showOperators: false, suggestionOperator: "contains"
}
}
},
{ field: "StartDate", title: "All Periods Start Date", width: 150, format: "{0:MM/dd/yyyy}", filterable: { cell: { showOperators: true } } },
{ field: "EndDate", title: "All Periods End Date", width: 150, format: "{0:MM/dd/yyyy}", filterable: { cell: { showOperators: true } } },
{ field: "TotalAmount", title: "Invoiced", format: "{0:c2}", footerTemplate: "$ #= sum # ", width: 200, filterable: { cell: { showOperators: false, suggestionOperator: "contains" } } },
{ field: "TotalDepriciated", title: "Allocated", format: "{0:c2}", width: 200, footerTemplate: "$ #= sum # " },
{ field: "Allocated", title: "Balance", format: "{0:c2}", filterable: { cell: { showOperators: false, suggestionOperator: "contains" } } },
//{ field: "LastUpdatedDate", title: "Last Updated Date", width: 150, format: "{0:MM/dd/yyyy}", filterable: { cell: { showOperators: true } } }
]
});
This code works for me. I hope that helps
{ field: "Allocated", title: "Allocated",
template: '<div>#= TotalAmount-TotalDepriciated#</div>'
}
I'am trying also to create a footerTemplate to show the sum of this result but i don't understand how ill achieve this for the moment
Please try with the below code snippet.
Below code adds a third column in kendo grid by subtracting two other fields
Allocated: function () {
return this.TotalAmount - this.TotalDepriciated;
},
.....
.....
{ field: "Allocated", title: "Allocated", template: "#= Allocated() #", footerTemplate: "<label id='sumAllocated'></label>" },
Full code:
<!DOCTYPE html>
<html>
<head>
<title>Jayesh Goyani</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.1.412/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.1.412/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.1.412/js/kendo.all.min.js"></script>
</head>
<body>
<div id="grid">
</div>
<script>
var products = [{
ProductID: 1,
ProductName: "Chai",
TotalAmount: 100,
TotalDepriciated: 10,
}, {
ProductID: 2,
ProductName: "Chang",
TotalAmount: 100,
TotalDepriciated: 10,
}, {
ProductID: 3,
ProductName: "Aniseed Syrup",
TotalAmount: 100,
TotalDepriciated: 10,
}, {
ProductID: 4,
ProductName: "Chef Anton's Cajun Seasoning",
TotalAmount: 100,
TotalDepriciated: 10,
}, {
ProductID: 5,
ProductName: "Chef Anton's Gumbo Mix",
TotalAmount: 100,
TotalDepriciated: 30,
}];
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: {
data: products,
schema: {
model: {
id: "ProductID",
fields: {
ProductName: {
type: "string"
},
TotalAmount: {
type: "number"
},
TotalDepriciated: {
type: "number"
}
},
Allocated: function () {
return this.TotalAmount - this.TotalDepriciated;
},
}
},
aggregate: [{ field: "TotalAmount", aggregate: "sum" },
{ field: "TotalDepriciated", aggregate: "sum" }],
pageSize: 10
},
sortable: true,
dataBound: function (e) {
var sumTotalAmount = parseFloat($("#sumTotalAmount").html());
var sumTotalDepriciated = parseFloat($("#sumTotalDepriciated").html());
$("#sumAllocated").html(sumTotalAmount - sumTotalDepriciated);
},
filterable: true,
pageable: {
input: true,
numeric: false
},
columns: [
{ field: "ProductID", title: "ProductID" },
{ field: "ProductName", title: "ProductName" },
{ field: "TotalAmount", title: "TotalAmount", aggregates: ["sum"], footerTemplate: "<label id='sumTotalAmount'> #=sum# </label>" },
{ field: "TotalDepriciated", title: "TotalDepriciated", aggregates: ["sum"], footerTemplate: "<label id='sumTotalDepriciated'> #=sum# </label>" },
{ field: "Allocated", title: "Allocated", template: "#= Allocated() #", footerTemplate: "<label id='sumAllocated'></label>" },
{ command: ["edit", "destroy"], title: " " }
],
editable: "inline"
});
});
</script>
</body>
</html>
Let me know if any concern.
Related
I am using kendo grid plugin to show data.
Have used the inbuilt functionality export to excel of kendo grid,to export grid data.
http://demos.telerik.com/kendo-ui/grid/excel-export
But I want to remove 2 columns before exporting the data to excel.
Please let me know how can I acheive it
Thanks,
Nupur
Please find the fiddle here, hope it will help to solve your issue.
You can read the documentation here.
<div id="grid" style="width: 900px"></div>
<script>
$("#grid").kendoGrid({
toolbar: ["Export"],
dataSource: {
type: "odata",
transport: {
read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
},
schema:{
model: {
fields: {
UnitsInStock: { type: "number" },
ProductName: { type: "string" },
UnitPrice: { type: "number" },
UnitsOnOrder: { type: "number" },
UnitsInStock: { type: "number" }
}
}
},
pageSize: 7,
group: {
field: "UnitsInStock", aggregates: [
{ field: "ProductName", aggregate: "count" },
{ field: "UnitPrice", aggregate: "sum"},
{ field: "UnitsOnOrder", aggregate: "average" },
{ field: "UnitsInStock", aggregate: "count" }
]
},
aggregate: [
{ field: "ProductName", aggregate: "count" },
{ field: "UnitPrice", aggregate: "sum" },
{ field: "UnitsOnOrder", aggregate: "average" },
{ field: "UnitsInStock", aggregate: "min" },
{ field: "UnitsInStock", aggregate: "max" }
]
},
sortable: true,
pageable: true,
groupable: true,
filterable: true,
columnMenu: true,
reorderable: true,
resizable: true,
columns: [
{ width: 300, locked: true, field: "ProductName", title: "Product Name", aggregates: ["count"], footerTemplate: "Total Count: #=count#", groupFooterTemplate: "Count: #=count#" },
{ width: 300, field: "UnitPrice", title: "Unit Price", aggregates: ["sum"] },
{ width: 300, field: "UnitsOnOrder", title: "Units On Order", aggregates: ["average"], footerTemplate: "Average: #=average#",
groupFooterTemplate: "Average: #=average#" },
{ width: 300, field: "UnitsInStock", title: "Units In Stock", aggregates: ["min", "max", "count"], footerTemplate: "Min: #= min # Max: #= max #",
groupHeaderTemplate: "Units In Stock: #= value # (Count: #= count#)" }
]
});
$(".k-grid-Export").on('click', function(e){
var grid = $("#grid").getKendoGrid();
var rows = [{
cells: [
{ value: "ProductName" },
{ value: "UnitPrice" }
]
}];
var trs = $("#grid").find('tr');
for (var i = 0; i < trs.length; i++) {
var dataItem = grid.dataItem(trs[i]);
rows.push({
cells: [
{ value: dataItem.ProductName },
{ value: dataItem.UnitPrice }
]
})
}
excelExport(rows);
e.preventDefault();
});
function excelExport(rows) {
var workbook = new kendo.ooxml.Workbook({
sheets: [
{
columns: [
{ autoWidth: true },
{ autoWidth: true }
],
title: "Orders",
rows: rows
}
]
});
kendo.saveAs({dataURI: workbook.toDataURL(), fileName: "Test.xlsx"});
}
</script>
[UPDATE]
To Export only filtered rows then use the following code. Refer the fiddle for working example
<div id="example">
<div id="grid" style="width: 900px"></div>
<script>
$("#grid").kendoGrid({
toolbar: ["Export"],
dataSource: {
type: "odata",
transport: {
read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
},
schema:{
model: {
fields: {
UnitsInStock: { type: "number" },
ProductName: { type: "string" },
UnitPrice: { type: "number" },
UnitsOnOrder: { type: "number" },
UnitsInStock: { type: "number" }
}
}
},
pageSize: 7,
group: {
field: "UnitsInStock", aggregates: [
{ field: "ProductName", aggregate: "count" },
{ field: "UnitPrice", aggregate: "sum"},
{ field: "UnitsOnOrder", aggregate: "average" },
{ field: "UnitsInStock", aggregate: "count" }
]
},
aggregate: [
{ field: "ProductName", aggregate: "count" },
{ field: "UnitPrice", aggregate: "sum" },
{ field: "UnitsOnOrder", aggregate: "average" },
{ field: "UnitsInStock", aggregate: "min" },
{ field: "UnitsInStock", aggregate: "max" }
]
},
sortable: true,
pageable: true,
groupable: true,
filterable: true,
columnMenu: true,
reorderable: true,
resizable: true,
columns: [
{ width: 300, locked: true, field: "ProductName", title: "Product Name", aggregates: ["count"], footerTemplate: "Total Count: #=count#", groupFooterTemplate: "Count: #=count#" },
{ width: 300, field: "UnitPrice", title: "Unit Price", aggregates: ["sum"] },
{ width: 300, field: "UnitsOnOrder", title: "Units On Order", aggregates: ["average"], footerTemplate: "Average: #=average#",
groupFooterTemplate: "Average: #=average#" },
{ width: 300, field: "UnitsInStock", title: "Units In Stock", aggregates: ["min", "max", "count"], footerTemplate: "Min: #= min # Max: #= max #",
groupHeaderTemplate: "Units In Stock: #= value # (Count: #= count#)" }
]
});
$(".k-grid-Export").on('click', function(e){
var grid = $("#grid").getKendoGrid();
var rows = [{
cells: [
{ value: "ProductName" },
{ value: "UnitPrice" }
]
}];
//var trs = $("#grid").find('tr');
var trs = grid.dataSource;
var filteredDataSource = new kendo.data.DataSource({
data: trs.data(),
filter: trs.filter()
});
filteredDataSource.read();
var data = filteredDataSource.view();
for (var i = 0; i < data.length; i++) {
var dataItem = data[i];
rows.push({
cells: [
{ value: dataItem.ProductName },
{ value: dataItem.UnitPrice }
]
})
}
excelExport(rows);
e.preventDefault();
});
function excelExport(rows) {
var workbook = new kendo.ooxml.Workbook({
sheets: [
{
columns: [
{ autoWidth: true },
{ autoWidth: true }
],
title: "Orders",
rows: rows
}
]
});
kendo.saveAs({dataURI: workbook.toDataURL(), fileName: "Test.xlsx"});
}
</script>
you can try the excelExport event of grid options.
excelExport: function(e) {
var sheet = e.workbook.sheets[0];
for (var i = 0; i < sheet.rows.length; i++) {
sheet.rows[i].cells.reverse();
for (var ci = 0; ci < sheet.rows[i].cells.length; ci++) {
sheet.rows[i].cells[ci].hAlign = "right";
}
}
},
http://docs.telerik.com/kendo-ui/controls/data-management/grid/excel-export#what-is-exported
I have a grid with filter row as this examble:
http://demos.telerik.com/kendo-ui/grid/filter-row
Because my grid have many columns, so i must to set width of input filter, i used filterable template to do that:
{
field: "CustomerName",
title: "CustomerName",
filterable: {
cell: {
template: function (input) {
input.width("60%");
input.keydown(preventPost);
}
}
}
},
And on date columns:
{
field: "DueDate",
title: "Modified",
format: "{0:MM-dd-yyyy}",
filterable: {
cell: {
template: function (input) {
input.width("60%");
input.keydown(preventPost);
}
}
}
},
It ok with number and string columns, but date columns occur problem.
Before i set width for columns, it show datepicker on date columns.
After i set width for columns, it show textbox on date columns.
So how to resolve it?
Simply define the width of the column and let Kendo UI compute it.
{
field: "OrderDate",
title: "Order Date",
format: "{0:MM/dd/yyyy}",
width: 150
}
Check the following code that is the example that you refer to in your post.
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
},
schema: {
model: {
fields: {
OrderID: { type: "number" },
Freight: { type: "number" },
ShipName: { type: "string" },
OrderDate: { type: "date" },
ShipCity: { type: "string" }
}
}
},
pageSize: 20,
serverPaging: true,
serverFiltering: true,
},
height: 550,
filterable: {
mode: "row"
},
pageable: true,
columns:
[
{
field: "OrderID",
width: 125,
filterable: {
cell: {
showOperators: false
}
}
},
{
field: "ShipName",
width: 200,
title: "Ship Name",
filterable: {
cell: {
operator: "contains"
}
}
},
{
field: "Freight",
width: 255,
filterable: {
cell: {
operator: "gte"
}
}
},
{
field: "OrderDate",
title: "Order Date",
format: "{0:MM/dd/yyyy}",
width: 180
}
]
});
});
html {
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
}
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.default.min.css" />
<script src="http://cdn.kendostatic.com/2014.3.1316/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1316/js/kendo.all.min.js"></script>
<div id="grid"></div>
I have following column header in the grid (see image below):
I would like to ask, how can i translate "is true", "is false" strings?
Many Thanks for any advice.
Columns:
{
field :"active",
title : $translate.instant('ACTIVE'),
width:150,
filterable: {
cell: {
operator: "contains"
}
}
},
Model:
active: {
editable: true,
nullable: false,
type: "boolean"
},
You should define in your filterable the following messages:
filterable: {
mode: "row",
messages: {
isFalse: "es falso",
isTrue: "es verdadero"
}
},
See it in action in the following snippet:
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: {
data: products,
schema: {
model: {
fields: {
ProductName: { type: "string" },
UnitPrice: { type: "number" },
UnitsInStock: { type: "number" },
Discontinued: { type: "boolean" }
}
}
},
pageSize: 20
},
height: 550,
scrollable: true,
sortable: true,
filterable: {
mode: "row",
messages: {
isFalse: "es falso",
isTrue: "es verdadero"
}
},
pageable: {
input: true,
numeric: false
},
columns: [
"ProductName",
{ field: "UnitPrice", title: "Unit Price", format: "{0:c}" },
{ field: "Discontinued", template: "#= Discontinued ? 'verdadero' : 'falso' #" }
]
});
});
<link href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.default.min.css" rel="stylesheet" />
<script src="http://cdn.kendostatic.com/2014.2.1008/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.1008/js/kendo.all.min.js"></script>
<script src="http://demos.telerik.com/kendo-ui/content/shared/js/products.js"></script>
<div id="grid"></div>
Based on kendoDocs you should do it like this:
...
filterable: {
cell: {
operator: "contains"
},
messages: {
isTrue: $translate.instant('YES'),
isFalse: $translate.instant('NO')
}
}
I have grid with locked (frozen) column and grouping like this:
demos.telerik.com/kendo-ui/grid/frozen-columns
But I have only one frozen column and small width.
And when I group by column with long string values (eg ship address), these group values in group header displayed in multiple lines.
Screen
How show group header in one line even if first part of grid (with locked columns) has small width?
Source
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
},
schema: {
model: {
fields: {
OrderID: { type: "number" },
ShipCountry: { type: "string" },
ShipName: { type: "string" },
ShipCity: { type: "string" },
ShipAddress: { type: "string" }
}
}
},
pageSize: 30,
group: { field: "ShipName" }
},
height: 540,
sortable: true,
reorderable: true,
groupable: true,
resizable: true,
filterable: true,
columnMenu: true,
pageable: true,
columns: [ {
field: "OrderID",
title: "Order ID",
locked: true,
lockable: false,
width: 50
}, {
field: "ShipCountry",
title: "Ship Country",
width: 300
}, {
field: "ShipCity",
title: "Ship City",
width: 300
},{
field: "ShipName",
title: "Ship Name",
width: 300
}, {
field: "ShipAddress",
width: 400
}
]
});
});
SOLUTION
Alexander Popov from telerik write this:
$(document).ready(function() {
$("#grid").kendoGrid({
dataBound: function(e){
var grid = this;
this.lockedTable.find(".k-grouping-row").each(function(index) {
var arrow = $(this).find("a");
grid.tbody.find(".k-grouping-row:eq("+index+") td").text($(this).text())
$(this).find("p").text(" ").append(arrow);
})
},
dataSource: {
type: "odata",
transport: {
read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
},
schema: {
model: {
fields: {
OrderID: { type: "number" },
ShipCountry: { type: "string" },
ShipName: { type: "string" },
ShipCity: { type: "string" },
ShipAddress: { type: "string" }
}
}
},
pageSize: 30
},
height: 540,
sortable: true,
reorderable: true,
groupable: true,
resizable: true,
filterable: true,
columnMenu: true,
pageable: true,
columns: [ {
field: "OrderID",
title: "Order ID",
locked: true,
lockable: false,
width: 50
}, {
field: "ShipCountry",
title: "Ship Country",
width: 300
}, {
field: "ShipCity",
title: "Ship City",
width: 300
},{
field: "ShipName",
title: "Ship Name",
width: 300
}, {
field: "ShipAddress",
lockable: false,
width: 400
}
]
});
});
I want to add Hierarchy (child) grid on button click event. By default on grid load, there is a child grid. I want it to bind on button click.
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,
pageable: true,
toolbar: [
"save",
"cancel",
{
name: "Add",
text: "Show Car Price",
click: function(e) {
return false;
}
},
{
name: "Delete",
text: "Hide Car Price",
click: function(e) {
return false;
}
}
],
columns:[
{
field: "carId",
title: "Car ID",
width: 150,
hidden:true
},
{
field: "vehicleId",
title: "Vehicle ID",
width: 100
},
{
field: "Percentage",
title: "Percentage",
width: 70
},
{
field: "Price",
title: "Price",
width: 250
},
{
field: "CarType",
title: "Car Type"
},
{
field: "CarSize",
title: "Car Size"
},
{
field: "CarPerCase",
title: "Car Per Case"
},
{
field: "Family",
title: "Family"
},
{
field: "ModelType",
title: "Model Type",
width: 100
},
{
field: "EPId",
title: "EP Id",
hidden: false
},
{
field: "Tax",
title: "Tax",
format: "{0:c}",
width: 100
}
],
editable:true,
groupable: true,
filterable: true,
sortable: true,
reorderable: true,
resizable: true,
columnMenu: true,
pageable: {
refresh: true,
pageSizes: [10, 20, 50],
buttonCount: 5
},
editable: "incell",
detailInit: detailInit
});
// hierarchy grid
function detailInit(e) {
var detailRow = e.detailRow;
codeDetailData = e.data;
$("<div/>").appendTo(e.detailCell).kendoGrid({
dataSource: e.data.ItemPrices.toJSON(),
editable:true,
navigatable: true,
scrollable: false,
sortable: true,
pageable: true,
columns: [
{
field: "Engine",
width: "200px",
editor: serviceItemAutoCompleteEditor
},
{
field: "TN",
title:"TN",
width: "110px"
},
{
field: "TaxApplied",
title:"Tax Applied"
},
{
field: "TaxChange",
title: "Tax Change",
width: "300px"
},
{
field: "StartDate",
title: "Start Date",
format:"{0:dd-MM-yyyy}",
editor: dateTimeEditor
},
{
field: "EndDate",
title: "End Date",
format:"{0:dd-MM-yyyy}",
editor: dateTimeEditor
}
]
});
}
Now the detailInit: detailInit configuration is set on load. I want that load without detailInit (responsible for child grid), and bind this setting on button click. Is it possible?
You will have to add a detail template to tell the grid there is going to be a detailinit grid
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",
click: function (e) {
return false;
}
}],
columns: [{
field: "carId",
title: "Car ID",
width: 150,
hidden: true
}, {
field: "vehicleId",
title: "Vehicle ID",
width: 100
}, {
field: "Percentage",
title: "Percentage",
width: 70
}, {
field: "Price",
title: "Price",
width: 100
}, {
field: "CarType",
title: "Car Type"
}, {
field: "CarSize",
title: "Car Size"
}, {
field: "CarPerCase",
title: "Car Per Case"
}, {
field: "Family",
title: "Family"
}, {
field: "ModelType",
title: "Model Type",
width: 100
}, {
field: "EPId",
title: "EP Id",
hidden: false
}, {
field: "Tax",
title: "Tax",
format: "{0:c}",
width: 100
}],
groupable: true,
filterable: true,
sortable: true,
reorderable: true,
resizable: true,
columnMenu: true,
pageable: {
refresh: true,
pageSizes: [10, 20, 50],
buttonCount: 5
},
editable: "incell",
detailTemplate: 'Item Prices: <div class="grid"></div>',
dataBound:function(e){
$(".k-hierarchy-cell").hide();
$(".k-hierarchy-col").hide();
}
});
then bind the detail event to the grid using a click button
$("#testbtn").click(function (e) {
$(".k-hierarchy-cell").show();
$(".k-hierarchy-col").show();
var grid = $("#grid").data("kendoGrid");
grid.unbind("detailInit");
grid.bind("detailInit", grid_detailInit);
grid.refresh();
});
Here is a Jsfiddle Example http://jsfiddle.net/ecotz69h/7/