Develop Reference

Kendo UI grid export excel and pdf export, no file created

I am trying to create a kendo grid with excel export. My data is shown precisely as I want it and the grid works fine. However, the saveAsExcel function triggers the excelExport event, but no file is created. Same problem with the pdf export.
Here is my grid options:
grid = $("#grid").kendoGrid({
toolbar:["excel","pdf"],
height: 500,
scrollable: true,
groupable: true,
sortable: true,
filterable: false,
excel: {
allPages:true,
filterable:true
},
excelExport: function(e) {
console.log('Firing Export');
console.log(e.workbook);
console.log(e.data);
},
pdfExport: function(e){
console.log('PDF export');
},
columns: [
{ field: "date", title: "Time", template: "#= kendo.toString(kendo.parseDate(date), 'MM/dd/yyyy') #", width: '120px'},
{ field: "customer", title: "Customer" },
{ field: "amount", title: "Total", format: "{0:c}", width: '70px', aggregates: ["sum"]},
{ field: "paid_with", title: "Payment", width: '130px'},
{ field: "source", title: "Source" },
{ field: "sale_location", title: "Sale Location" }
]
}).data("kendoGrid");
This ajax is called whenever the search parameters for the data is changed. Where I refresh the datasource.
$.ajax({
'url':'/POS/ajax/loadTransactionsDetailsForDay.php',
'data':{
filters
},
'type':'GET',
'dataType':'json',
'success':function(response) {
var dataSource = new kendo.data.DataSource({
data: response.data.invoices,
pageSize: 100000,
schema: {
model: {
fields: {
date: {type: "string"},
customer: { type: "string" },
amount: { type: "number" },
paid_with: {type: "string"},
source: {type:"string"},
sale_location: {type:"string" }
}
}
}
});
grid.setDataSource(dataSource);
grid.refresh();
}
});
The output from my console log is.
Firing Export.
A worksheet object.
Object {sheets: Array[1]}sheets: Array[1]0: Objectlength: 1__proto__: Array[0]__proto__: Object
and and array with these objects for every row in the grid:
0: o
_events: Object
_handlers: Object
amount: 40.45
customer: "customer 1"
date: "2015-11-25T00:00:00-08:00"
dirty: false
employee: 23
paid_with: "Check"
parent: ()
sale_location: "Main"
source: "POS"
uid: "70b2ba9c-15f7-4ac3-bea5-f1f2e3c800d3"
I have the latest version of kendo, I am loading jszip. I am running it on the latest version of chrome.
I have tried all kinds of variations of this code I can think of, including removing my schema, initializing the kendo anew every time in the callback.
Anyone got any idea why this would not work?
Every example on this I can find make it look super simple, just create the grid and call export... So I have to have overlooked something.
I am grateful for any ideas about this.
Thanks.

It could be because the filename is missing.
Here the part with the filename added:
excel: {
allPages:true,
filterable:true,
fileName: "Kendo UI Grid Export.xlsx"
},
You can take a look here : Grid Excel Export
And here for the pdf: Grid Pdf Export

I have some following suggestion.
Can you add kendo deflate pako script file into your code and try.
Then remove the pdf export event and just try to export a pdf with toolbar default functionality..check whether its working or not.
try to add a data-source ajax call with in a grid option using kendo-transport technique with read method. http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-transport

Display image along with text in a cell when in non-edit mode

I'm evaluating the Kendo UI Gantt chart to see if it fits our project requirements.
One particular requirement is to display a status column which would be a drop down in edit mode and has three statuses
Red 2. Green 3. Yellow, along with an image indicator something like what is shown in the image below
I am able to achieve the above effect when i edit a cell after using a custom editor for the drop down
function statusDropDownEditor(container, options) {
$('<input data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
dataTextField: "Status",
dataValueField: "StatusId",
valueTemplate: '<img class="selected-value" src="#:data.Url#" alt="#:data.Status#" /><span>#:data.Status#</span>',
template: '<img class="selected-value" src="#:data.Url#" alt="#:data.Status#" /><span>#:data.Status#</span>',
dataSource: {
transport: {
read: function (e) {
// on success
e.success([{ Status: 'Not Started', StatusId: '0', Url: 'Image/red.png' }, { Status: 'Red', StatusId: '1', Url: 'Image/red.png' }, { Status: 'Green', StatusId: '2', Url: 'Image/red.png' }, { Status: 'Yellow', StatusId: '3', Url: 'Image/red.png' }]);
// on failure
//e.error("XHR response", "status code", "error message");
}
}
}
})
}
The Gantt Column for Status looks like the below snippet
{ field: "status", title: "Status", editable: true, width: 150, editor: statusDropDownEditor, template: '<img class="selected-value" src="#:data.Url#" alt="#:data.Status#" /><span>#:data.Status#</span>' }
However when done with selecting a particular item from drop down and on exiting the edit mode this is how the cell looks like
Seems like the default cell template in read only mode does not render html and the invokes the toString of the object bound to the cell, is there a way to fix this in the kendo UI Gantt

I have been trying to solve the same issue today and it looks like gantt columns do not support the template properties.
I have created a new feature suggestion on the Kendo user feedback site. If enough people vote for it maybe they will implement this.
The only work around I found was to prepend an image tag onto the field column like this. But this solution is not conditional.
<div id="gantt"></div>
<script>
$(document).ready(function() {
var gantt = $("#gantt").kendoGantt({
dataSource: [
{
id: 1,
title: "apples",
orderId: 0,
parentId: null,
start: new Date("2015/1/17"),
end: new Date("2015/10/17"),
summary:false,
expanded:false
},
{
id: 2,
orderId: 1,
parentId: null,
title: "banana",
start: new Date("2015/1/17"),
end: new Date("2015/3/17"),
summary:false,
expanded:true
}
],
views: [
{ type: "year", selected: true }
],
columns: [
{ field: "title", title: "fruit", width: 220 },
{ field: "start", title: "start", width: 80 }
],
}).data("kendoGantt");
$(".k-grid-content tbody[role='rowgroup'] tr[role='row'] td:first-child").prepend("<img href='#' alt='image here'></img>");
});
</script>
The sample page is on git.

Kendo UI Grid - Binding to navigation properties

I am using the Kendo UI grid and am display a role of models. Each model has a navigation property, and I am trying to display a field that exists in this navigation property.
//schema for my kendo data source
schema: {
data: function (data) {
return data || [];
}
}
......................................................
$("#FAAFreqGrid").kendoGrid({
dataSource: FAADS,
columns: [
{ field: "Id", title: "Freq ID", format: "{0:c}", width: "120px" },
{ field: "Frequency", title: "Frequency Test" format: "{0:c}", width: "120px" },
{ field: "FREQ_POOL", title: "FAATEST", format: "{0:c}", width: "120px" },
{ command: ["edit", "destroy"], title: " ", width: "250px" }
],
toolbar: ["create"],
editable: "inline",
pageable: true
});
If I go to my Web API Url, I get a json response of:
[{"$id":"1","Frequency":"164.1375","FREQ_POOL":{"$id":"2","IsAM":true,......etc}
FREQ_POOL is my navigation property, and it has the data I want. Frequency exists and displays in my grid properly. But my FREQ_POOL field says [object Object], and if I try to say "FREQ_POOL.IsAM", it says IsAM is not defined. I cannot get it to bind to any property I can bind to any other non-navigation field. How do I make this work? The data exists in the JSON object that is returned, but the binding just isn't working correctly. Thanks.

You could set a template for the column in question, like this:
$("#grid").kendoGrid({
columns: [ {
field: "name",
template: "<strong>#: name.first#, #: name.last# </strong>"
}],
dataSource: [ { name: { first: 'Jane', last: 'Doe' } }, { name: { first: "John", last: 'Doe' } } ]
});
the template can then be used to show object in the dataset
more info, you could find here
For the editing, you could then also define the cell editor, with an extra template or function, more info about that, you could find here.

validations on input fields using GetOrgChart

How to apply validations on input fields using GetOrgChart? i have used the following code..
json_data = $.rails.ajax
url: "/organization_units.json"
async: false
dataType: "json"
$("#organization").getOrgChart
gridView: false
zoomable: true
printable: true
editable: true
color: "neutralgrey"
primaryColumns: ["Title", "Role","Members"]
dataSource: json_data.responseJSON.tree_data

I have created an example for you, hit "Run Code Snippet" and try to update the Phone with invalid phone number.
$("#people").getOrgChart({
primaryColumns: ["Name", "Title"],
dataSource: [
{ id: 1, parentId: null, Name: "Amber McKenzie", Title: "ESL teacher", Phone: "05454545454"},
{ id: 2, parentId: 1, Name: "Ava Field", Title: "Bricklayer", Phone: "08888888888"},
{ id: 3, parentId: 1, Name: "Evie Johnson", Title: "Nursing aide", Phone: "077777777"}]
});
$("#people").on("updateEvent", function( event, sender, args ) {
if (!/^\d+$/.test(args.data.Phone)){
event.preventDefault();
args.returnValue = false;
alert(args.data.Name + ' cannot be updated because Phone number field is not in correct format!');
}
});
html, body {margin: 0px; padding: 0px;height: 100%; overflow: hidden; }
#people {width: 100%;height: 100%; }
<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'></script>
I have created an example for you, hit "Run Code Snippet" and try to update the Phone with invalid phone number.
<link rel="stylesheet" type="text/css" href="//www.getorgchart.com/GetOrgChart/getorgchart/getorgchart.css">
<script type='text/javascript' src="//www.getorgchart.com/GetOrgChart/getorgchart/getorgchart.js"></script>
<div id="people"></div>

Having trouble refreshing Gridx using JsonRest

When an account is chosen, I would like to show all related contacts in contactGrid.
I can do this with XhrGet, but I would like to be using JsonRest.
Here is how I setup the Grid:
function contactTabSetup() {
var structure = [{ field: 'id', name: 'Id', width: '5em' },
{ field: 'firstName', name: 'First Name', width: '12%' },
{ field: 'lastName', name: 'Last Name', width: '12%' },
{ field: 'email', name: 'Email', width: '12%' },
{ field: 'description', name: 'Description' },
{ field: 'mobileNumber', name: 'Mobile Phone', width: '12%' }];
var contactGrid = new Grid({
id: 'contactGrid',
pageSize: 20,
cacheClass: Cache,
structure: structure,
noDataMessage: "No contacts found",
modules: [SingleSort]}, contactTab);
contactGrid.startup();
}
Here is how I want to populate the grid:
function contactLoad(acctIds) {
var grid = registry.byId("contactGrid");
grid.model.clearCache();
grid.setStore(JsonRest({target:"//localhost:8080/program/contacts/byAccount/" + acctIds}));
grid.body.refresh();
}
The correct Json response is being returned (as viewed on console):
{
"description": "Mike is a cool guy",
"email": "mike#mike.net",
"firstName": "Mike",
"id": 1503,
"lastName": "Smith",
"mobileNumber": "555-555-5555"
}
... but I can't get the grid to show the new data.
Any help would be appreciated!
Thank you
I tried many additional ways, without success...
This is where I am stuck - not sure what else to try.
I make the JsonRest call, get back the Json Object, and print it out to console.
Seeing that the json response looks good I try to setStore and this error is thrown: "s.query is not a function in dojo.js" (line 382). Is this a bug, or am I missing something? Thank you.
// s.query is not a function in dojo 10.0.1
grid.model.clearCache();
var store = new JsonRest({target:"//localhost:8080/program/contacts/byAccount"});
store.get(acctIds).then(function(items){
console.log(items);
grid.setStore(items);
});
grid.body.refresh();
I found it. Change:
grid.setStore(items);
to
grid.setStore(new ItemFileReadStore({data: {items : result}}));
Does anyone know how to just use JsonRest and not also include ItemFileReadStore?
Thank you,
Chris

My little piece of advice is to try to set store up once and use filter instead.
grid.filter({"acctId":"..."});
The second thing is that store sometimes requires idAttribute definition i.e.
JsonRestStore({target:"...", idAttribute:"id"});