Questions on Kendo UI for jQuery Forum

5 answers

406 views

[Solved] Endless Scroll with local SQL Lite

Hi,

I've some problems to make the endless scroll work with a local sql lite db (edit: in fact it's not sql lite, but web sql, but at the end the problem is the same ;-)).

The first 10 items are well loaded, but the "read: " function is not called when I scroll down to the last item of the view. I think I'm missing something...

I don't think I need the transport->parameterMap nor the datasource->schema, but maybe I'm wrong.

Thanks for your help!

Here is my view:

<!DOCTYPE html>

<html>

<head>

<title>Activities</title>

</head>

<body>

<div data-role="view" data-layout="default" data-init="initTask">

<h1>Tasks</h1>

<ul id="tasks"></ul>

</div>

<script>

var ds = new kendo.data.DataSource({

pageSize: 10,

serverPaging: true,

transport: {

read: function(options) {

writeLog('DataSource READ');

_db.transaction(function(tx) {

writeLog('Reading from DB');

var sql = 'SELECT name, date FROM testtable LIMIT ' + options.data.pageSize * (options.data.page - 1) + ',' + options.data.pageSize;

tx.executeSql(sql, [], function(tx, results) {

writeLog('Results found: ' + results.rows.length);

var data = [];

for (var i=0; i<results.rows.length; i++) {

data[i] = results.rows.item(i);

}

options.success(data);

});

}, transaction_error);

}

});

function initTask() {

writeLog('init');

$("#tasks").kendoMobileListView({

dataSource: ds,

template: kendo.template($("#tmpl-post").html(), {useWithBlock:true}),

endlessScroll: true,

scrollTreshold: 30 //treshold in pixels

});

}

</script>

</body>

</html>

ListView (Mobile)

answered on 17 Jan 2013

1 answer

439 views

Change combobox height using CSS

What is the proper way to change the combobox height using CSS? Note that I am talking about the combobox itself, not the dropdown popup.

ComboBox

answered on 17 Jan 2013

1 answer

89 views

Javascript erro thrown when attemping to use the application on an iPad

Hi,

I have created what I think is a relatively simple application. I have started testing on an iPad but whenever I touch the screen to either scroll or hit a button I get a javascript error:

TypeError: 'null' is not an object
url: http://<url here>/js/kendo.mobile.min.js
line #: 10

I am not sure if you can help me with that information or if I would need to try and send you more. Is it possible to get unminified versions of the js files so I can debug and see what is happening or alternatively if you can tell me this is a common problem and how to fix it :)

Thanks
Robert.

Application

answered on 17 Jan 2013

1 answer

103 views

row templates, event-listeners, and garbage collection

Knowing next to nothing about javascript garbage-collection, I ask the following:

If a row template attaches a function to a cell's click-event:

<td onclick='foo(event)'> ${population} </td>

are there any memory-management issues for the developer to be concerned about? Does binding (and rebinding) of data from repeated sorting and grouping potentially cause such listeners to accumulate in memory, or are they automatically disposed of?

Grid

answered on 17 Jan 2013

3 answers

322 views

Deselecting a date in month view of Kendo Calendar

I have a calendar control which is made to display the dates for the month but none of the dates are selected/highlighted. Whenever we click on a date, it gets selected and highlighted. Now if I want to deselect any date selected, what can I do that ? (Means I want none of the dates selected without refreshing the page.)

Calendar

answered on 17 Jan 2013

3 answers

305 views

How to perform case-insensitive sort in Tree view?

I am using the below code to sort the value of the tree, it seems like the sorting happens based on case. I am trying to figure out a way to perform case insensitive sorting, can you please help me with that?

if(sortValue == 'Ascending')
{
$("#groupTree").data("kendoTreeView").dataSource.sort({ field: "text", dir: "asc" });
} else if(sortValue == 'Descending')
{
$("#groupTree").data("kendoTreeView").dataSource.sort({ field: "text", dir: "desc" });
}
}

Thanks,
Barani

TreeView

answered on 17 Jan 2013

3 answers

251 views

Calendar Duplicate Display Bug

Hi,

I've only recently started using Kendo and I encountered a rather peculiar bug that a teammate of mine has not encountered using the same context.

Attached to this thread is a picture of this bug and below is the code snippet I used to display the calendar.

<div id="calendarDiv">

@(Html.Kendo().Window()

.Name("calendarWindow")

.Title("")

.Content(@<div>

@(Html.Kendo().Calendar().Name("calendar"))<br /><br />

<strong>Choose calendar:</strong><br /><br />

<strong>Physician:</strong><br /><br />

@(Html.Kendo().ComboBox().Name("doctors").HtmlAttributes(new { style = "width:200px" }))<br /><br />

or<br /><br /><strong>Department:</strong><br /><br />

@(Html.Kendo().ComboBox().Name("departments").HtmlAttributes(new { style = "width:200px" }))

</div>)

.Actions(actions => actions

.Minimize()

.Custom("custom")

)

.Draggable()

.Resizable()

)

</div>

Your support is greatly appreciated.

Calendar

answered on 17 Jan 2013

5 answers

1.0K+ views

Grid changes not reflected in datasource when using templates

Hey,

I've recently started working with the grid component and have the need for custom templates for columns (checkboxes for booleans instead of true/false, slider for certain integer values etc).

When I set up a template for a column e.g. template: '<div style="text-align: center"><input type="checkbox" #= is_included ? checked="checked" : "" # /></div>' it displays as expected but any changes to the column are not reflected back in the datasource.

I've seen mention of this before in the forum and was wondering if it has been fixed and I'm missing a step and if it currently is something that's missing is it going to be added at some point.

Thanks for your help

Grid

answered on 17 Jan 2013

5 answers

402 views

ToggleClass

How do I change the transition on a kendoToggleClass? e.g
function toggle_button(e) {
e.button.kendoToggleClass('not-complete', {transition:'linear'});
};
Can't work out the syntax...

General Discussions

answered on 17 Jan 2013

1 answer

272 views

Is it possible to bind a ListView to an ObservableArray of <li> elements?

Hi,

Is it possible to bind a ListView to a collection of HTML elements?

If items is an ObservableArray of <li> elements, what goes into the template? Or is a template necessary?

???? WHAT GOES HERE if items is a collection of <li> elements

</script>

Incidentally, the reason the items collection contains HTML elements (<li>) rather than data objects is because the list-items wrap Seadragon.Viewer objects. The constructor for a Seadragon.Viewer object takes a container HTML element as its parameter. At this point, I’m merely exploring ways to convert this section of code to an MVVM approach using declarative bindings. Toward that end, binding to the ObservableArray of <li> elements would be a first step. But if there is a better approach – I suspect there is – then I would certainly like to hear about it.

Thanks!

ListView

answered on 16 Jan 2013