hi,

I use Kendo UI  /Grid /detail template ,the purpose is to pop up a sub-grid,but  can not pop up the sub grid when I bind to remote data.This phenomenon happened irregularly ,it means that sometimes it can pop up ,but sometimes can not.  why?

Greeting,

I am having an issue using the multi select inside a gird cell. I have the <select> control being generated inside a kendo.template and am binding the class of that <select> to the multi select on the dataBound event of the grid.

The is initially empty and gets populated base on a choice from a list view. When the grid is populated, everything shows up fine. BUT, when i click inside the multi select it looses its kendo...ness and reverts to an html multi select. I have noticed that there is a very small area that I can click (right next to  an already selected item or at the very end) but other than that it will loose it.

I wasn't sure if this was a bug or how I was creating it.

Thanks in advance.

GRID:

After trying to find a work-around myself and opening a support ticket with Kendo UI (#709522), it seems that Kendo UI is not compatible with Cordova 2.7.  This is potentially due to the location.hashchange-related bug in Cordova (https://issues.apache.org/jira/browse/CB-2602?page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel).  Initializing the Kendo UI Application after deviceready does not seem to fix it either.  If anyone comes up with a work-around that works on Android and iOS, I'd love to know about it.  Until then, Kendo UI Mobile users seem stuck on Cordova 2.4.

 Hi,

This looks like a bug in Kendo UI Grid. Please try the following:

a) On the hierarchy example, turn off paging and turn on scrolling, but set the Employees grid to be scrollable. The scroll bar will then correctly take account of the child (orders) grid.

b) Now set .Scrollable(scrollable => scrollable.Virtual(true)) in the parent grid. The vertical scroll bar is no longer active, making scrolling in the child grid impossible.

This really needs to be fixed. It is quite common to have very large ( over 10000 row) grids, requiring row virtualisation to preserve stable behaviour. This feature effectively makes it impossible to reliably implement a deep hierarchy, as far as I can see. It looks as though, when row virtualisation is turned on on the parent, it fails to refresh the vertical scrollbar when the child grid is expanded. If there is an event trap I can put in to force the issue that would be much appreciated. Note that I am not prepared either a) to put pagination in the child grid or b) put scrolling, as it messes up the child geometry (pushing all the columns over). As I say, if you turn off virtualisation, it works ok, until the row number becomes large, at which point the whole thing starts to become unstable (load failures or very long load times).

At the very least, if you can give me a script to turn on the parent scrollbar on detail expand, that would do for now.

Thanks,
George

Hi, I'm trying to implement a grid hierarchy with batch operations and the child grid Add New Record is not displaying.  All other operations (update, destroy, read) are working in the child grid.  The parent grid Add New Record does display and works fine, any help is much appreciated.  Here's my code:


// Grid contents
$(document).ready(function () {
var crudServiceBaseUrl = "http://localhost:8080/task-scheduler",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + "/retrieve/tasks",
type: "GET",
dataType: "json"
},
update: {
url: crudServiceBaseUrl + "/update/task",
type: "PUT",
dataType: "json",
contentType: "application/json"
},
destroy: {
url: crudServiceBaseUrl + "/remove/task",
type: "DELETE",
dataType: "json",
contentType: "application/json"
},
create: {
url: crudServiceBaseUrl + "/create/task",
type: "POST",
dataType: "json",
contentType: "application/json"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
var json = kendo.stringify(options.models);
console.log("JSON Task to Server:", json);
return json;
}
}
},
batch: true,
pageSize: 5,
schema: {
model: {
id: "id",
fields: {
id: { type: "number", editable: false },
name: { type: "string", defaultValue: "Task " },
description: { type: "string", validation: { required: true } },
datatype: { type: "string" },
destination: { type: "string" }
}
}
}
});

$("#tasklist").kendoGrid({
dataSource: dataSource,
pageable: true,
filterable: true,
navigatable: true,
resizable: true,
selectable: "row",
height: 400,
detailInit: detailInit,
dataBound: function() {
this.expandRow(this.tbody.find("tr.k-master-row").first());
},
toolbar: [{ name: "create", text: "Create Task" }],
columns: [
//{ field: "id", title: "ID", width: "60px" },
{ field: "name", title: "Name", width: "120px" },
{ field: "description", title:"Description", width: "150px" },
{ field: "datatype", title:"Datatype", width: "100px", editor: datatypeDropDownEditor },
{ field: "destination", title:"Destination", width: "100px", editor: destinationDropDownEditor },
{ command: ["edit", "destroy"], title: "Option", width: "160px" }],
editable: "inline"
});

var datatypeItems = [ { datatypeId: 0, datatypeName: "entity" },
{ datatypeId: 1, datatypeName: "event" },
{ datatypeId: 2, datatypeName: "metric" },
];

function datatypeDropDownEditor(container, options) {
$('<input required data-text-field="datatypeName" data-value-field="datatypeName" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
dataSource: datatypeItems,
dataTextField: "datatypeName",
dataValueField: "datatypeId",
optionLabel: "simple/entity",
change: function () {
dataItem = this.dataItem(this.selectedIndex);
options.model.datatypeId = dataItem.id;
}

});
}

var destinationItems = [ { destinationId: 0, destinationName: "resource" },
{ destinationId: 1, destinationName: "reference" },
{ destinationId: 2, destinationName: "correlate" }
];

function destinationDropDownEditor(container, options) {
$('<input required data-text-field="destinationName" data-value-field="destinationName" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
dataSource: destinationItems,
dataTextField: "destinationName",
dataValueField: "destinationId",
optionLabel: "resource",
change: function () {
dataItem = this.dataItem(this.selectedIndex);
options.model.destinationId = dataItem.id;
}

});
}

function detailInit(e) {
incrementId();
var crudServiceBaseUrl = "http://localhost:8080/task-scheduler",
datasource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + "/retrieve/tasks",
type: "GET",
dataType: "json"
},
update: {
url: crudServiceBaseUrl + "/update/schedule",
type: "PUT",
dataType: "json",
contentType: "application/json"
},
destroy: {
url: crudServiceBaseUrl + "/remove/schedule",
type: "DELETE",
dataType: "json",
contentType: "application/json"
},
create: {
url: crudServiceBaseUrl + "/create/schedule",
type: "POST",
dataType: "json",
contentType: "application/json"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
var json = kendo.stringify(options.models);
console.log("JSON Schedule to Server:", json);
return json;
}
}

},
batch: true,
pageSize: 5,
schema: {
model: {
id: "id",
schedules: {
fields: {
//id: { type: "number", editable: false },
startDateTime: { type: "date" },
endDateTime: { type: "date" },
interval: { type: "string", validation: { required: true }},
event: { type: "string", validation: { required: true }},
status: { type: "string", editable: false }
}
}
}
},
filter: { field: "id", operator: "eq", value: e.data.id }
});

$("<div id='" + id + "'/>").appendTo(e.detailCell).kendoGrid({
dataSource: datasource,
height: 250,
pageable: true,
//filterable: true,
navigatable: true,
resizable: true,
selectable: "row",
toolbar: [{ name: "create", text: "Create Schedule" }],
columns: [
{ field: "schedules[0].startDateTime", title:"Start Date", width: "120px" },
{ field: "schedules[0].endDateTime", title:"End Date", width: "120px" },
{ field: "schedules[0].interval", title: "Interval", width: "120px" },
{ field: "schedules[0].event", title: "Event", width: "120px" },
{ field: "schedules[0].status", title: "Status", width: "120px" },
{ command: ["edit", "destroy"], title: "&nbsp;", width: "160px" }],
editable: "inline"
});
}

var id=0;
function incrementId () {
id += 1;
console.log("Id:", id);
}

});

Hi there,

I've created a TreeView with checkboxes and CheckChildren set to true. When I check one of the higher level nodes (with around 100 children total) it takes several seconds to check them. Am I doing something wrong or is the JavaScript for this not very performant? I've managed to replicate the problem by simply increasing the number of nodes in the demo cshtml. A very simple jQuery command to check all of the checkboxes is lightning fast, so it doesn't look like a browser performance issue.

Many thanks,
Chris

Hi,

This looks like a bug in Kendo UI Grid. Please try the following:

a) On the hierarchy example, turn off paging and turn on scrolling, but set the Employees grid to be scrollable. The scroll bar will then correctly take account of the child (orders) grid.

b) Now set .Scrollable(scrollable => scrollable.Virtual(true)) in the parent grid. The vertical scroll bar is no longer active, making scrolling in the child grid impossible.
Please advise,

George

When I add the className property to a command in a grid I no longer receive the confirmation dialog. It seems the clicking is broken.

Here is the jsBin

Jon

Update:
The class on the anchor tag that received the className is "k-button k-button-icontext unassign k-grid-destroy k-grid-destroy"
The class on the anchor tag without the className is "k-button k-button-icontext k-grid-delete".

Why did k-grid-delete change to k-grid-destroy?

I'm using IE9 on Win7.

Does the Kendo UI team plan on adding support for more of the Android Holo theme, for example the Action Bar and the Navigation Drawer?  Also, any chance for a pre-build "Holo Light" theme?  Thanks.

Never mind.  Visual Studio issue -- working outside of VS.