Questions on Kendo UI for jQuery Forum

1 answer

92 views

Does Kendo support me somehow with touch gestures (on tablets like iPad)?
I want in my Single Page Application use the flick left and flick right gestures to go to another view in my application.
In fact I need the swipeleft and swiperight events like jQuery mobile has: http://jquerymobile.com/demos/1.0a4.1/docs/api/events.html
Any hint on how to work with that?

Regards, Jaap

General Discussions

answered on 15 Mar 2012

3 answers

510 views

Problem Binding to Remote Data

I'm implementing a sample app using Kendo UI with Django (Python) and am getting the following error in Firebug when I attempt to bind to remote data:

url is not defined
return new Function(paramName, functionBody); kendo.core.js (line 246)

However, when I use jQuery.ajax to get the data and then bind to the response from the jQuery.ajax call as local data, everything works fine.

Here are the Request Headers:

Host 127.0.0.1:8000

User-Agent Mozilla/5.0 (X11; Linux i686; rv:8.0.1) Gecko/20100101 Firefox/8.0.1

Accept */*

Accept-Language en-us,en;q=0.5

Accept-Encoding gzip, deflate

Accept-Charset ISO-8859-1,utf-8;q=0.7,*;q=0.7

Connection keep-alive

X-Requested-With XMLHttpRequest

Referer http://127.0.0.1:8000/widgets/

Cookie csrftoken=c5bf8586527ebfb8802391168634cfdf; sessionid=aafd686e68f8e4069c84e8412ee98e65

Here are the Response Headers:

Date Tue, 29 Nov 2011 13:35:58 GMT

Server WSGIServer/0.1 Python/2.7.2

Content-Type application/javascript

Here is the Response:

[{"url": "http://demos.kendoui.com/autocomplete/index.html", "id": 1, "name": "AutoComplete"}, {"url": "http://demos.kendoui.com/calendar/index.html", "id": 2, "name": "Calendar"}, {"url": "http://demos.kendoui.com/chart/index.html", "id": 3, "name": "Chart"}, {"url": "http://demos.kendoui.com/combobox/index.html", "id": 4, "name": "ComboBox"}, {"url": "http://demos.kendoui.com/datepicker/index.html", "id": 5, "name": "DatePicker"}, {"url": "http://demos.kendoui.com/dropdownlist/index.html", "id": 6, "name": "DropDownList"}, {"url": "http://demos.kendoui.com/grid/index.html", "id": 7, "name": "Grid"}, {"url": "http://demos.kendoui.com/menu/index.html", "id": 8, "name": "Menu"}, {"url": "http://demos.kendoui.com/panelbar/index.html", "id": 9, "name": "PanelBar"}, {"url": "http://demos.kendoui.com/splitter/index.html", "id": 10, "name": "Splitter"}, {"url": "http://demos.kendoui.com/tabstrip/index.html", "id": 11, "name": "TabStrip"}, {"url": "http://demos.kendoui.com/treeview/index.html", "id": 12, "name": "TreeView"}, {"url": "http://demos.kendoui.com/upload/index.html", "id": 13, "name": "Upload"}, {"url": "http://demos.kendoui.com/window/index.html", "id": 14, "name": "Window"}]

And finally, here is the grid definition:

$('#widgetsGrid').kendoGrid({

dataSource: {

type: 'json',

transport: {

read: '/widgets/widgetsList/'

},

pageSize: 10

},

columns: [

{

field: 'name',

title: 'Name'

},

{

field: 'url',

title: 'Url'

}

]

});

This is what I needed to do to get it to work:

$(document).ready(function() {

$.ajax({

url: '/widgets/widgetsList/',

contentType: 'application/json; charset=utf-8',

type: 'GET',

dataType: 'json',

success: function(response) {

// console.log(response);

$('#widgetsGrid').kendoGrid({

dataSource: {

data: response,

pageSize: 10

},

columns: [

{

field: 'name',

title: 'Name'

},

{

field: 'url',

title: 'Url'

}

]

});

},

error: function(xhr, status) {

console.log(status);

}

})

});

I would prefer to bind to the data remotely by setting the dataSource.transport configuration setting. Any ideas?

Regards,

John DeVight

Complete source code and explanation of this sample project can be found here

Grid

answered on 15 Mar 2012

2 answers

115 views

Listview remote navigation problem

Hi,
I have a listview set up to display the data as below:

template: "<a href='details.htm?id=${data.id}'>${data.subject}</a>",

but all I get is the actioning page with #details.htm?id=5 tacked on the end.

It seems to think that i am calling a local view when I want to call a remote one...how can I get this to work.

ListView (Mobile)

answered on 15 Mar 2012

3 answers

266 views

Grid Control with Twitter's Bootstrap

I'm trying to use the KendoUI Grid within a site that also utilizes Twitter's Bootstrap framework. Unfortunately, the header for the grid is distorted (it's taller than it should be), and the rows are not visible. I suspect there is a CSS conflict with Bootstrap--anybody experience this as well, and have a workaround?

Grid

answered on 14 Mar 2012

1 answer

103 views

Datasource Filtering for Between

Trying to get a column filtered to be between two ranges, but it only applies the first filter.

Half borrowed jsfiddle:

http://jsfiddle.net/BmGHB/1/

You can see that if you click the button, then examine the filter using the filter icon on the grid itself, only the first filter has been applied.

Any suggestions?

Data Source

answered on 14 Mar 2012

2 answers

97 views

3rd value on bar chart

Hello,

Is it possible to include a 3rd value for a bar chart to provide a different value on click through?

Here is my scenario...I'm passing in Employee Name (category) and Number of Requests (value) as my data points for a bar chart. I've setup a click through on the chart, but I'd like to pass the Employee ID instead of the Employee Name. I'm bringing in the Employee ID into my model and creating a local data source. Is there anything I can assign the Employee ID value to so that I can use it with the click through?

Thanks!

Charts

answered on 14 Mar 2012

5 answers

1.8K+ views

Pageable bar showing, page number buttons not showing.

I have run into a problem where when I set pageable = true on the KendoGrid, it shows the pageable tool area beneath the grid, but there are no page number buttons. However, if groupable is set to true, then I can drag a column header to the grouping area which forces the grid to re-draw itself and then the page number buttons are visible. I have a demo of this behavior here:

http://jsfiddle.net/jkappel/njR79/

Thanks for whatever help anyone can provide :)

PS - I am using the Chrome browser. It has different behavior in IE (also not correct).

Grid

answered on 14 Mar 2012

0 answers

67 views

Close picture

The "close" picture in my IE8 browser has a bad look, see screenshot attached.

Window

asked on 14 Mar 2012

1 answer

130 views

Disable Editing for Grid at Runtime

I need to disable Grid editing dynamically via Jquery/javascript. How can I get access to those properties at runtime??

Grid

answered on 14 Mar 2012

1 answer

151 views

Updating the total number of rows with virtual scrolling and serverPaging

We have a continuously changing data set on the server, with the total number of rows usually increasing but occasionally being reduced. We return the total number of rows in each json response, and use the datasource schema to dynamically update the total.

This works most of the time, but when reducing the number of rows while the grid is scrolled down causes a stack oveflow in the grid component. This only happens for some page sizes and row counts.

This example emulates a server initially offering 125 rows. When the button is clicked the total number of rows on the server is reduced to 47. The grid crashes with a stack overflow if the grid is scrolled down to the last page before clicking the button:

http://jsfiddle.net/GrhJg/

Grid

answered on 14 Mar 2012