Questions on Kendo UI for jQuery Forum

1 answer

134 views

Is it possible to use the kendo Editor widget for editing a field in the grid popup? Tried without success to figure this out.

Thanks,
Gary

Templates

answered on 08 Apr 2014

13 answers

187 views

VirtualViewSize feature

So I was excited when I saw references to this on the forums, as It's been something I've wanted for a while now (pagination for local data). Unfortunately I've run into issues getting this working on an existing app.

Please correct me if I'm wrong but all I should need to do is add the property to the listview declaration and have the full results as the data property of the datasource no?

The result I'm getting it all the <LI>s are stacked on top of each other. (Yes i'm using the latest Kendo files)

Heres the HTML snippet of my view

<div id="items-view" data-role="view" data-title="Blocks & Items" data-layout="default-layout" data-init="app.items.init" data-show="app.items.showView">

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

<li>

<ul class="ul-content">

</ul>

</li>

</ul>

</div>

Heres the javascript for it:

var data = app.items.filterLimit(1000, app.items.data);

$("#items-view ul.ul-content").kendoMobileListView({

dataSource: new kendo.data.DataSource({

data: data

}),

template: "<li>#: name #</li>",

endlessScroll: true,

virtualViewSize: 50

});

data variable is a giant json array of items. somewhere in the 500 count range. It's correct, It's the same data i was using previous (looping over and manually appending LI's)

Is there another step that I am missing perhaps? Or am I crazy and this should be working? I'll attach a screenshot of what it's doing....

General Discussions

answered on 08 Apr 2014

4 answers

635 views

[Solved] Can't get total from datasource

I've been struggling with this all day, and I can't believe it's this hard to get the total number of records returned in a datasource! Very frustrating... I've read the documentation over and over and nothing seems to work for me. I've got a json response that is structured like this:

{ records: [], totalRecordCount: 20, queryRecordCount: 20 }

Here's my dataSource code:

return new kendo.data.DataSource({

transport: {

read: {

type: "POST",

data: request,

cache: false,

url: ServiceUri + "/Associates",

dataType: "json"

}

},

serverPaging: false,

pageSize: 25,

schema: {

data: "records",

total: "totalRecordCount",

model: {

fields: {

Id: { type: "number" },

Name: { type: "string" },

Sex: { type: "string" },

Race: { type: "string" },

Height: { type: "string" },

Weight: { type: "string" },

Age: { type: "number" },

DOB: { type: "date" },

LastChanged: { type: "date", field: "IdentifierDate" }

}

},

});

So when I want to get the total I pass a function to this dataSource (i.e. callback) and return it in the requestEnd event, like so:

requestEnd: function(e) {

callback(e);

},

I put this after the schema block in the dataSource, although I don't think it should matter...? This event never fires, or if it does I cannot break inside of it in Chrome. So I tried using the change event in a similar manner, that never fires either. Here's a complete function attempting to get the dataSource and retrieve the total (normally I would not include the events in the dataSource and then bind them again after the dataSource, but for brevity sake...):

GetAssociates: function (id, pgSize, callback) {

var request = {

"SearchParameters": {

ID: id

}

};

return new kendo.data.DataSource({

transport: {

read: {

type: "POST",

data: request,

cache: false,

url: ServiceUri + "/Associates",

dataType: "json"

}

},

serverPaging: false,

pageSize: pgSize,

schema: {

data: "records",

total: "totalRecordCount",

model: {

fields: {

Id: { type: "number" },

Name: {type: "string" },

Sex: {type: "string" },

Race: {type: "string" },

Height: {type: "string" },

Weight: {type: "string" },

Age: {type: "number" },

DOB: {type: "date" }

}

},

requestEnd: function(e) {

callback(e);

},

change: function(e) {

callback(e);

}

}).bind('change', callback).bind('requestEnd', callback);

}

I just want to do a dataSource.total() and find out if there's anything in my dataSource, and I CANNOT. It always returns 0! And I can see that my response is not zero, so why does it always say zero for the total?? I believe I'm following standard async methods to make sure the response has completed, so I'm stumped and completely frustrated, once again.

I know I sound pretty whiny in this message, but it's just been a long day. I sure would appreciate any help!

Thanks,

Eddie

Data Source

answered on 08 Apr 2014

4 answers

173 views

UTC conversion bug ?

Hi,

I'm using a webservice that returns me data that takes into account my local timezone (all their data is expressed in UTC, and they return me data adjusted to my timezone, so 2014-12-31T22:00:00.000Z for instance.

I'm using the "date" type for the category axis, but realized something strange, that depends on the actual interval (year, month, day...). It appears that for UTC dates, Kendo DataViz converts them to local dates. For instance, if I received hourly data, Kendo DataViz automatically shows them using an hourly format, and if I receive 2014-01-02T22:00:00.000Z, it's rendered as midnight on 03rd of january (I'm leaving in UTC+2). However, when dates are shown in monthly or yearly interval, it seems Kendo DataViz omits completely the conversion, so 2013-12-31T22:00:00.000Z is shown as 2013 year instead of 2014 (which is supposed to be the expected result in UTC+2).

Here is a simple gist that reproduces the issue: http://jsbin.com/mapif/4/

As you can see, the first graph that shows data on yearly basis, conversion is not done, while it's done in the other chart that shows data on hourly basis.

Thanks!

Charts

answered on 08 Apr 2014

6 answers

177 views

Android (Samsung Note 2) Device Orientation Change

I was going out of my mind trying to get the device orientation change to work on my (Verizon) Samsung Note 2.

I ended up with the attached code (that seems to work) and am posting to get feedback and help anyone else with the same struggle.

I started with the Kendo Mobile sample app, upgraded the files to 2014 Q1, added a NavBar to the header in the layout, and then added the following to the app.js:

01.(function (global) {

02. var mobileSkin = "",

03. app = global.app = global.app || {};

04.

05. document.addEventListener('deviceready', function () {

06. navigator.splashscreen.hide();

07. $(document.body).height(window.innerHeight);

08. }, false);

09.

10. kendo.onResize(function () {

11. setTimeout(function () {

12. $(document.body).height(window.innerHeight);

13. window.scrollTo(0, 0);

14. }, 400);

15. });

General Discussions

answered on 08 Apr 2014

1 answer

6.3K+ views

Kendo Grid add class to a column header

Hi,

I want to integrate Kendo grid with bootstrap responsive behavior. Below is my code, it did apply to the records column but did not apply to the column header.

In the below example I want the middle name column to be hidden when the screen size is Medium (Bootstrap breaks), the below code does make the columns invisible in case of resolution not large but it does not apply on the column header (Middle Name). Please let me know how I can achieve this.

HTML-
<div kendo-grid k-data-source="someDataSource" k-selectable="'row'"
k-pageable='{ "pageSize": 10, "refresh": true, "pageSizes": false }'
k-sortable="true", k-groupable="true", k-filterable="true" k-columns="gridColumns">
</div>
JS -
$scope.gridColumns = [
{ "field": "firstName", sortable: true, "title": "First Name" },
{ "field": "lastName", sortable: false, "title": "Last Name" },
{ "field": "middleName", sortable: false, "title": "Middle Name",
attributes: {
"class": "hidden-md visible-lg"
} }
];

Grid

answered on 08 Apr 2014

1 answer

71 views

Draging events from AllDaySlot

I am using Scheduler in Day view, horizontally grouped by Resource. Some events have time, some events are "all day" events. I need to able to drag event from All day slot to make them "timed" events and the other way around. How can I do that?

Scheduler

answered on 08 Apr 2014

4 answers

55 views

[Solved] Column filtering takes too many steps. Need simple contains filter in header.

I'm having trouble configuring the following:

Currently if the filter is turned on the user has to click the filter icon to show the filter options. I just need a "contains" filter but I would like the search box to appear by default( without having to click the filter icon). I'm hoping there's a configuration to make it appear below the header text. I also would like the contains filter to fire automatically after the user hits enter.

This seems pretty simple but I'm still having trouble finding the documentation. I'm using the html configurations in set up.

Grid

answered on 07 Apr 2014

9 answers

4.2K+ views

Login / LogOff example

Hi,

Is there a demo application that demonstrates a best practice for detecting unauthenticated users so the application can point to a Login view or external page, and how to handle logging off?

This seems like it should be straight forward, but I'm having problems redirecting to different views properly.

Thanks,

King Wilder

General Discussions

answered on 07 Apr 2014

1 answer

149 views

Automatic data-role="pane" in body can cause output to block?

In our project, we do not use classes or attributes in our <body> tag.
We see that kendoui adds data-role="pane" to it.

When running the app on certain devices, unclear what they have in common, the output can become a white screen in 2 cases of 3.
When tapping on the screen, the app reveals itself.

In such a deadlock occasion, we sent a string with the entire DOM to the server, having a timer in the app that could make that possible.
We used $('html').html().

The resulting webpage was then cleared from script tags and viewed in a computer web browser to see what the phone actually tried to render.
(We put the resulting html file in a directory were the styles are).

Most of the output was gray, except the title bar that showed up clipped. It seems like a style tag has been added that sais:

style>

.km-view { clip: rect(0 1000px 1000px 0); }

</style>

A funny thing was that when we used firebug to disable the rule position: relative from .km-pane the page showed the missing content.
The webpage also shows when we remove the class km-pane from body.

When looking on examples, it seems like km-pane is used mosly for divs, not body tags.
How do they apply to body? How does position: relative make sense for body?

Is it possible to supress the addition of the km-pane class to body?

General Discussions

answered on 07 Apr 2014