Related
I am trying to get the row item values of the first and second row and calculate a difference und display it as an custom aggregate. This should happen after every sort so it should check if there are only two rows showing. So for example if the turnover for the year 2017 is 10000€ and 5000€ for 2018 the result should be -50% .
my code:
$(document).ready(function() {
$("#grid").kendoGrid({
toolbar: ["excel"],
excel: {
fileName: "turnover.xlsx",
allPages: true
},
dataSource: {
transport: {
read: "data/turnovers.php",
dataType: "jsonp"
},
schema: {
data: "data",
total: function(result) {
var data = this.data(result);
return data ? data.length : 0;
},
model: {
fields: {
January: { type: "number" },
February: { type: "number" },
March: { type: "number" },
April: { type: "number" },
May: { type: "number" },
June: { type: "number" },
July: { type: "number" },
August: { type: "number" },
September: { type: "number" },
October: { type: "number" },
November: { type: "number" },
December: { type: "number" },
sum: { type: "number" },
jahr: { type: "string" }
}
}
},
pageSize: 50,
aggregate: [ { field: "January", aggregate: "sum" },
{ field: "February", aggregate: "sum" },
{ field: "March", aggregate: "sum" },
{ field: "April", aggregate: "sum" },
{ field: "May", aggregate: "sum" },
{ field: "June", aggregate: "sum" },
{ field: "July", aggregate: "sum" },
{ field: "August", aggregate: "sum" },
{ field: "September", aggregate: "sum" },
{ field: "October", aggregate: "sum" },
{ field: "November", aggregate: "sum" },
{ field: "December", aggregate: "sum" },
{ field: "sum", aggregate: "sum" }
]
},
height: 870,
scrollable: true,
sortable: true,
filterable: true,
pageable: {
refresh: true,
pageSizes: true
},
columns: [
{
field: "January",
title: "January",
filterable: false,
format: "{0:c2}",
footerTemplate: "sum: #: kendo.toString(sum, '\\#\\#,\\# €') #"
},
{
field: "February",
title: "February",
filterable: false,
format: "{0:c2}",
footerTemplate: "sum: #: kendo.toString(sum, '\\#\\#,\\# €') #"
},
{
field: "March",
title: "March",
filterable: false,
format: "{0:c2}",
footerTemplate: "sum: #: kendo.toString(sum, '\\#\\#,\\# €') #"
},
{
field: "April",
title: "April",
filterable: false,
format: "{0:c2}",
footerTemplate: "sum: #: kendo.toString(sum, '\\#\\#,\\# €') #"
},
{
field: "May",
title: "May",
filterable: false,
format: "{0:c2}",
footerTemplate: "sum: #: kendo.toString(sum, '\\#\\#,\\# €') #"
},
{
field: "June",
title: "June",
filterable: false,
format: "{0:c2}",
footerTemplate: "sum: #: kendo.toString(sum, '\\#\\#,\\# €') #"
},
{
field: "July",
title: "July",
filterable: false,
format: "{0:c2}",
footerTemplate: "sum: #: kendo.toString(sum, '\\#\\#,\\# €') #"
},
{
field: "August",
title: "August",
filterable: false,
format: "{0:c2}",
footerTemplate: "sum: #: kendo.toString(sum, '\\#\\#,\\# €') #"
},
{
field: "September",
title: "September",
filterable: false,
format: "{0:c2}",
footerTemplate: "sum: #: kendo.toString(sum, '\\#\\#,\\# €') #"
},
{
field: "October",
title: "October",
filterable: false,
format: "{0:c2}",
footerTemplate: "sum: #: kendo.toString(sum, '\\#\\#,\\# €') #"
},
{
field: "November",
title: "November",
filterable: false,
format: "{0:c2}",
footerTemplate: "sum: #: kendo.toString(sum, '\\#\\#,\\# €') #"
},
{
field: "December",
title: "December",
filterable: false,
format: "{0:c2}",
footerTemplate: "sum: #: kendo.toString(sum, '\\#\\#,\\# €') #"
},
{
field: "sum",
title: "sum",
format: "{0:c2}",
filterable: false,
footerTemplate: "sum: #: kendo.toString(sum, '\\#\\#,\\# €') #"
}
]
});
});
approach:
function calculatediff(){
var entityGrid = $("#grid").data("kendoGrid");
var data = entityGrid.dataSource.data();
var totalNumber = data.length;
if(totalNumber = 2) {
var currentDataItem = data[0];
var currentDataItem = data[1];
row1 = currentDataItem.January;
row2 = currentDataItem.January;
diff = ((row1-row2)/((row1+row2)/2))*100
}
}
Data source supported aggregate functions are only average, count, max, min, sum and does not have an framework for adding custom functions that work in the same manner.
The aggregates that are computed become available to the footerTemplate as a data object that is available at template resolution time. Thus, the footer can contain a function that is passed this object and perform the custom computation.
This dojo snippet demonstrates the technique.
The dataSource was tweaked to be two rows, and both count and sum (supported aggregate functions) aggregation is specified for each column.
data: [
{ January: 20, February: 30, March: 140, sum: 190 },
{ January: 30, February: 20, March: 50, sum: 100 }
],
pageSize: 50,
aggregate: [ { field: "January", aggregate: "count" }, { field: "January", aggregate: "sum" },
{ field: "February", aggregate: "count" }, { field: "February", aggregate: "sum" },
{ field: "March", aggregate: "count" }, { field: "March", aggregate: "sum" },
{ field: "sum", aggregate: "count" }, { field: "sum", aggregate: "sum" },
]
},
In the columns declaration all the footer templates were tweaked to invoke a custom function that is passed the aggregate data object and the field.
{
field: "January",
/* ... */
footerTemplate: "#= customFooter(data,'January') #"
},
{
field: "February",
/* ... */
footerTemplate: "#= customFooter(data,'February') #"
},
{
field: "March",
/* ... */
footerTemplate: "#= customFooter(data,'March') #"
},
{
field: "sum",
/* ... */
footerTemplate: "#= customFooter(data,'sum') #"
}
Code running inside the footerTemplates does not know the field, so you have to repeat the field name inside the template.
Finally, customFooter() function uses the field aggregates 1) to determine if the special result should be computed and 2) as a partial contribution to the computation. The difference is computed directly from the data source.
function customFooter (ds_agg, field) {
if (ds_agg[field].count == 2) {
var ds = $("#grid").data("kendoGrid").dataSource;
var diff = ds.view()[0][field] - ds.view()[1][field];
var ratio = ( diff / ( ds_agg[field].sum / 2 ) ) * 100;
return "diff: " + diff + "<br />sum: " + ds_agg[field].sum + "<br /> ratio: " + ratio;
}
}
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.
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 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/
Does anyone know how to showing page sizes drop down list and refresh button on the footer kendo grid MVVM likes this
Here is my view code:
<div id="customer-grid"
data-role="grid"
data-sortable="true"
data-selectable="true"
data-pageable="true"
data-pagesizes="[5, 10, 20]"
data-columns='[
{ field: "CustomerID", title: "ID", width: "75px" },
{ field: "CompanyName", title: "Company"},
{ field: "ContactName", title: "Contact" },
{ field: "ContactTitle", title: "Title" },
{ field: "Address" },
{ field: "City" },
{ field: "Region" },
{ field: "PostalCode" },
{ field: "Country" },
{ field: "Phone" },
{ field: "Fax" } ]'
data-bind="source: customerSource">
</div>
and here is my data source code:
var customerSource = new kendo.data.DataSource({
transport: {
read: {
async: false,
url: crudServiceBaseUrl,
dataType: "json"
}
},
serverPaging: true,
pageSize: 10,
schema: {
model: customerModel,
data: "data",
total: "count"
},
});
Thanks in advance.
You should define data-pageable as:
data-pageable="{ refresh: true, pageSizes: [5, 10, 20] }"
Please, note that the array of page sizes is defined in data-pageable and not in data-pagesizes.
So your grid definition would be:
<div id="customer-grid"
data-role="grid"
data-sortable="true"
data-selectable="true"
data-pageable="{ refresh: true, pageSizes: [5, 10, 20] }"
data-columns='[
{ field: "CustomerID", title: "ID", width: "75px" },
{ field: "CompanyName", title: "Company"},
{ field: "ContactName", title: "Contact" },
{ field: "ContactTitle", title: "Title" },
{ field: "Address" },
{ field: "City" },
{ field: "Region" },
{ field: "PostalCode" },
{ field: "Country" },
{ field: "Phone" },
{ field: "Fax" } ]'
data-bind="source: customerSource">
</div>
Check it here : http://jsfiddle.net/9zL6J/