Questions on Kendo UI for jQuery Forum

2 answers

306 views

View scrolling locks up, unlocks on drawer show+hide

I've distilled the problem into a jsfiddle here: http://jsfiddle.net/dTBN6/6/

You can reproduce the problem by doing the following steps :

Click the "To page 2" button
Resize your window so content is long enough to allow scrolling
Scroll down a bit
Open drawer and go back to page 1
Click the "To page 2" button again
Attempt to scroll - the view's scrolling is locked
Open drawer. Then close it.
Attempt to scroll - it works
Repeat from step 4

If you access page 2 via the link in the drawer, scrolling does not lock up.

What gets triggered when the drawer is shown / hidden that causes the scrolling to unlock?
Can I trigger this manually in page two's "show" event handler?
Is there anyway to fix this?

General Discussions

answered on 11 Oct 2013

1 answer

274 views

Append HTML on any Kendo control appears without design

Hello
I have the following drawer

<div data-role="drawer" id="left-drawer" data-title="Global Menu">

<header data-role="header">

<div data-role="navbar">

<span data-role="view-title"></span>

</div>

</header>

<ul data-role="listview" data-type="group">

<li>Global Menu

<ul>

<li data-icon="share"><a href="#drawer-home" data-transition="none">Inbox</a></li>

<li data-icon="share"><a href="#drawer-starred" data-transition="none">Starred Items</a></li>

</ul>

</li>

<li>Sub Menu

<ul id="ResultDiv2">

</ul>

</li>

</ul>

</div>

<div data-role="view" id="about" data-layout="drawer-layout" data-title="About">

about dummy text

</div>

<script>

new kendo.mobile.Application();

</script>

When you bind the drawer from inside Document.Ready everything is working fine and the design appears correctly, but if you bind the drawer on any event like click then the design will not appear correctly.

Here is my code

$(document).ready(function () {

After();

});

function After() {

var template = kendo.template('<li data-icon="share" onclick="After();"><a href="#:url#" data-transition="none"><span></span>#:name#</a></li>');

var data = [

{ url: '#about', name: 'Menu' },

{ url: '#about', name: 'Customer' },

{ url: '#about', name: 'Generate again'}];

var result = kendo.render(template, data);

//alert(result);

$("#ResultDiv2").append(result);

}

you can check that on the following website
IN4ELECTRONICS

Regards

General Discussions

answered on 11 Oct 2013

4 answers

78 views

Using Knockout templates in Kendo UI Mobile Control Templates

We've got quite a significant investment in Knockout templates and I'm wondering if anyone had figured out a way to be able to use Knockout templates in place of the regular Kendo templates? I know we can re-do them, but we want to re-use if at all possible, and would like to be able to stick with knockout for elsewhere in the UI.

In case no-one has any solid experience on this, whacky ideas would also be gratefully received - we're willing to experiment.

General Discussions

answered on 11 Oct 2013

1 answer

93 views

Series in columns of datasource

I have been reading a number of posts here and still am struggling with the proper method for binding series to the "columns" of a datasource.

The issue I am running up against is that I don't have control over the datasource (generic webservice call), but I need to be able to put it into the proper chart structure.

Assume my web service call returns the following:

rows: [
{ Dept: "Shoes", Q1: 100, Q2: 200, Q3: 220, Q4: 180 },
{ Dept: "Shirts", Q1: 140, Q2: 160, Q3: 390, Q4: 200 },
{ Dept: "Pants", Q1: 180, Q2: 190, Q3: 400, Q4: 320 },
{ Dept: "Tops", Q1: 520, Q2: 600, Q3: 425, Q4: 570 }
]

What I am looking for is to create a line chart where the each department is a category and the series is Q1 - Q4. The problem is, I don't know in advance that I will get for the "columns" (i.e Q1 - Q4). It might be a range of years from 2005 - 2013, or it may be a set of months Jan - Dec.

Is there a way to do this generically?

Charts

answered on 11 Oct 2013

7 answers

1.0K+ views

How to display a Table as the results of the AutoComplete

Using the template property of the AutoComplete, I would like to somehow display a table that contains the results of the json query.

Like in your standard ComboBox control. Is there an easy way to accomplish this.

Thanks

AutoComplete

answered on 11 Oct 2013

3 answers

264 views

How do i use the multi-select control in the Grid?

I am using the kendo grid to display data. It also needs to be editable (inline editing).
I know how to add other controls to the grid using templates when it is in inline edit mode.
How do I add the multi-select control to the Grid in inline edit mode/

This is the multi-select control I need to have in the Grid:

http://demos.kendoui.com/web/multiselect/index.html

Thanks,
Anthony

Grid

answered on 11 Oct 2013

5 answers

846 views

Shared DataSource between multiple controls and filter in one

Hello Kendo community,
this is my first post on this forum, so please be understanding :)

I'm building simple application that will display Gantt like data. To display it in that form I'm building custom Grid-like control.
But before I get further in development I would like to build sample using normal grid.
On my page I need to have 2 grids to display data.
Top one must display all data and must be read only, bottom must display filtered data.
For example I must have orders for all customers, but on bottom only for specific user id, so user will be able to edit only his orders.

I build simple jsfiddle: http://jsfiddle.net/Misiu/Fnsja/ that has 2 Grids and every time I update bottom grid top one is auto-updated.
What I need to do now is to apply filter on bottom grid.
Can this be done without having 2 data sources?

Hope my question in understandable :)

General Discussions

answered on 11 Oct 2013

3 answers

138 views

List View and Drawer issues

I have a listview being populated by some json data. I have the elements in the listview linking to a details page. All is working fine.
when i add drawers to the page thats when it breaks. when i swipe it thinks im clicking so it tries to open the drawer and the details view at the same time making for some interesting behaviour.

how can i combat this?


<script id="alertlist" type="text/x-kendo-template">
<a class="details-link" data-role="listview-link" href="\#details?alert_ID=#=alert_ID#">
<img class="alertimage" src="/images/#: degree #.png" />
</a>
<div class="listviewdiv">
<h3 class="item-info">#: title #</h3>
<p class="item-title">#: sentDT # <span class="AlertTitle"> :: #: sender # </span></p>
</div>
<a data-role="button" href="\#details?alert_ID=#=alert_ID#" class="listviewbutton" data-icon="mostrecent"></a>
</script>

<ul id="alert-list-scroll" data-role="listview" data-source="IRISalerts" data-click="listViewClick" data-template="alertlist"></ul>

ListView (Mobile)

answered on 11 Oct 2013

1 answer

577 views

Grid date formatting from json input

I am looking to format my incoming dates but don't see a suitable way without changing my incoming JSON (which I have standardized on passing as 'time since epoch', new Date().valueOf() ).

Sample Grid Row JSON segment:

{"received_date":1381331366000},

Columns list object:

{ "format": "{0: yyyy-MM-dd HH:mm:ss}", "field": "received_date", "title": "Received" },

My understanding is that the format attribute defined above will specify the output format, however I don't know how to specify a way to accept the incoming milliseconds from epoch as a date object without some interceptor layer injecting itself into the consumption of the JSON.

I would be fine to have a event attached to the datasource in use here and have it mutate the long value into a date object if there isn't a more elegant way to achieve this.

Grid

answered on 11 Oct 2013

1 answer

74 views

endlessScroll is invalid or DataSource is invalid.

Hi.
I try your listview step by step, when i learn "endlessScroll": http://docs.kendoui.com/api/mobile/listview#configuration-endlessScroll
I found it is invalid when use DataSource's filter. may this is DataSource's bug.
Below is the code: also can run below code in: http://jsbin.com/AdItib/5/edit
////////////////////////////////////////////////Begin/////////////////////////////////////////////
<div data-role="view">
<ul data-role="listview" data-source="foo" data-endless-scroll="true" data-template="foo-template">
</ul>
</div>

<script type="text/x-kendo-template" id="foo-template">
#: name # - #: modified #
</script>

<script>
var i = 0, pageSize = 20;

var max = 1000;
var data = [];
for (; i < max; i ++) {
data.push({ name: i, modified: +new Date() });
}

var foo = new kendo.data.DataSource({data:data, pageSize: pageSize});

foo.filter({ field: "name", operator: "gt", value: "200" });

new kendo.mobile.Application();
</script>
////////////////////////////////////////////////End/////////////////////////////////////////////
Below code show no results, if i remove foo.filter({ field: "name", operator: "gt", value: "200" }); then listview will show result.
So ListView's endlessScroll is invalid when DataSource has filter.

Thanks!

ListView (Mobile)

answered on 11 Oct 2013