Develop Reference

How to expand a kendo grid on clicking a column value using angular js

I am trying to use Kendo UI Grid with angular js. I need to expand the grid to further level when user clicks a link given in one of the columns of the grid.
I used following code to expand the grid on click of an tag inside a kendo grid column.
$scope.mainGridOptions = {
dataSource: {
data: $scope.data,
schema: {
model: {
fields: {
fieldA: { type: "string" },
fieldB: { type: "string" },
fieldC: { type: "string" },
fieldT: { type: "numeric" }
}
}
},
pageSize: 10
},
filterable: true,
sortable: true,
resizable: true,
pageable: true,
scrollable: true,
columns: [
{ field: "fieldA", title: "FieldA", width: 90},
{ field: "fieldB", title: "FieldB", width: 90},
{ field: "fieldC", title: "FieldC", width: 90},
{ field: "fieldT", title: "FieldT", width: 90, template: "<a onclick='expand(this)'href='\\#'>#=mydata#</a>"}
]
};
But on running the code it just gives me an error in the browser console window.
Uncaught ReferenceError: expand is not defined at
HTMLAnchorElement.onclick
I researched and found that Kendo doesn't supports onclick event inside an tag. Therfore tried to use tag instead of tag. But it still does not work.
{ field: "fieldT", title: "FieldT", width: 90, template: "<span ng-click='showFileLevel(this)>{{mydata}}</span>"}
Can anyone please guide me in the right direction or let me know how can I expand a Kendo grid to further levels on clicking text inside a certain column of the grid using Angular JS.

you write expand(this) method out of the controller in your js.

Populate a column in Kendo Grid based on separate Datasource

I have a kendo grid like what I've posted below. I'm populating the grid based on the data in the url I provided for it. However, there is one column on the grid, the flag column, which I would like to be a separate datasource to populate that column, based on the id. The datasource for that column would look something like:
[{id:1234, flag: 'N'}, {id:5678, flag:'Y'}]
Is there a way where I can populate just 1 column in the grid based on a completely different datasource from the rest of the grid? The flag would need to be placed on the row of its corresponding id. If so, how can I implement this? Any help would be appreciated.
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: url
},
pageSize: 30
},
height: 400,
groupable: true,
sortable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [{
field: "id",
title: "ID",
width: 240
}, {
field: "FirstName",
title: "First Name"
}, {
field: "LastName",
title: "LastName"
}, {
field: "flag",
title: "Flag",
width: 150
}]
});

Consider using a foreign key column.
http://demos.telerik.com/kendo-ui/grid/foreignkeycolumn

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.

How to filter dojo enhanced grid by external textbox

In my scenario, I am maintain a grid that need to be filter a particular column by the onchange event in a textbox. According to the text change grid should be filtered. I already able to use filter capability provided by the enhancedgrid and want to do it externally.
already imported 'dojox/grid/EnhancedGrid','dojo/data/ItemFileWriteStore', dojox/grid/enhanced/plugins/Pagination', 'dojox/grid/enhanced/plugins/Filter',
This is in the external js file. A.js
grid = new EnhancedGrid({
store: new ItemFileWriteStore({
data: gridObject
}),
// "username, firstName, lastName, email, userGroupName, lastLoginValue, phoneNo, organization, status"
structure: [
{
name: "User Login Name",
field: "username",
width: "84px"
},
{
name: "First Name",
field: "firstName",
width: "84px"
},
{
name: "Last Name",
field: "lastName",
width: "70px"
},
{
name: "Email",
field: "email",
width: "70px"
}
],
rowSelector: '20px',
minRowsPerPage: 5,
rowsPerPage: 5,
plugins: {
pagination: {
pageSizes: ["10", "25", "50", "100", "All"],
description: true,
sizeSwitch: true,
pageStepper: true,
gotoButton: true,
/*page step to be displayed*/
maxPageStep: 4,
/*position of the pagination bar*/
position: "bottom"
},
filter: {
closeFilterbarButton: false,
ruleCount: 2
//itemsName: "rows"
}
}
}, "gridee");
console.log(grid);
/*append the new grid to the div*/
grid.placeAt("gridView");
grid.startup();
--------------- function end ----------------
UsersCtrl.prototype.filterGrid = function () {
var filterText = document.getElementById("txtFilter").value, innerDiv = document.getElementById("gridView").firstChild.getAttribute("id");
// innerDiv gave the grid id to be filtered.
dijit.byId(innerDiv).filter("username", filterText);// Dont no this is correct or not.
};
-----------html file-----------------
Here angular and dojo both used. angular function also called successfully and able to get into the filterGrid function.
grid === UsersCtrl
<input type="search" placeholder="Filter by Keywords" data-column="all" data-ng- model="grid.searchText" data-ng-change="grid.filterGrid()" data-dojo-type="dijit/form/TextBox" id="txtFilter">
<div id="gridView" style="width:100%; height:300px" align="center" class="claro"></div>
I am getting this error TypeError: object is not a function. Please help to overcome this.

Gladly I was able to get an idea after referring this Set query to search all fields of a dojo datagrid
import dijit/registry
grid = registry.byId("grid");
if (filterText) {
grid.setQuery({"username": filterText + "*"});
} else {
grid.setQuery({"username": "*"});
}
//dijit.byId("grid").store.fetch(query: {username: filterText});