Questions on Kendo UI for jQuery Forum

10 answers

481 views

MVVM, Grid, Paging - Doesn't work on 515 nor 601

I'm using MVVM to handle datasource to bind my grid with.

But I can't make paging work. Here is a brief description of everything I attempted to get it working.

I have added the "data-pageable=true" to the div markup. That shows the pager at the bottom, but only with a single page (I have at least 200 rows on the grid)
I have added the $('#grid').kendoGrid({ pageable: true }); js code, but I get the same behavior as before.
I did something on the lines of $('#grid').data('kendoGrid').dataSource.pageSize(10) once and it worked. But only if I did it by hand on the javascript console.
I have added a method to handle the dataBound event, and used the $('#grid').data('kendoGrid').dataSource.pageSize(10) idea, that crashed firefox repeatedly.

Is there any way I can make it work ? If not, is there a planned release to include this ?

I was surprised by this, as this is a major thing for any business app that deals with data. I really love using Kendo so far and it has been by far the best grid I have ever used. Using the MVVM framework made it even better...but this little problem is driving me nuts.

Thanks,

Alvaro Oliveira.

MVVM

answered on 07 Nov 2012

4 answers

1.2K+ views

Grid Edit: Date Format Input Verification

Looking into Kendo UI for a new web service, I found both code & documentation straightforward.

As always date formats make some trouble. While I don't see any problem to produce any required JSON input coming from my application server, I would like to have a notation like dd.mm.yyyy being displayed in my grid.

Of course, I added some '#=kendo.toString(mytime,"dd.mm.yyyy") #' to the column definition but then things start getting weird.

Although dates are being displayed that way, I am not allowed to enter exactly that format as it does't pass the input verification. Only by try and error, I found that "12/14/2011" is being accepted.

Even more weird, the datepicker inserts "Wed Dec 14 2011 00:00:00 GMT+0100 (CET)" which is also not accepted - can't submit with the toolbar button of the grid.

So, what is the most recommended date format for Kendo UI internal & external date representation?

And where sits the input format checker? Would be glad to know that, as also text fields need some input checks. For obvious reasons some {,: would otherwise crash the JSON parser.

Grid

answered on 07 Nov 2012

3 answers

519 views

How to switch off endless scrolling once you reach the end of a long dataset

Hi,

Fantastic to get endless scrolling working so easily. What a fantastic product.

However, imagine that the user is scrolling down through a dataset which could have hundreds of rows, but there is however a finite number or rows. The result is that the server is hit and it will continuously load the last 8 rows or whatever (In my example I get 68 rows back, so the 7th time you scroll to the end should be the last time it gets as far as the Rest API). So the 8th, 9th, and subsequent "pull-ups" to get more data loads the same rows... I throw up a message box to indicate you've hit the end at the moment.

So the question is, can I switch off endless scrolling at this point so the server doesn't get hit?
Or,
Do I have to implement handling on the server side which calculates if I need to throw back an empty result set that would in theory be appended? (i.e., nothing extra would appear).

Either solution is acceptable to me, but to prevent the server hit would be cool obviously.

Here is my javascript:

<script id="endless-scrolling-template" type="text/x-kendo-template">

<div class="resultline">

#= company_name #

<span class="sublink"> #=company_num #/#= company_bus_ind # </span>

</div>

</script>

<script>

function mobileListViewEndlessScrolling() {

var dataSource = new kendo.data.DataSource({

pageSize: 10,

serverPaging: true,

transport: {

read: {

url: "OpenServiceWrapper/customlist", // the remove service url

dataType: "json"

},

parameterMap: function (options) {

var parameters = {

//additional parameters sent to the remote service

company_name: "bank",

company_bus_ind: "c",

max: options.pageSize,

page: options.page, //next page -- this is automatically incremented as part of kendo

totalCount: $("#company-matches-found").html()

}

return parameters;

}

},

change: function (e) {

// console.log("Page = " + e.sender._page);

// console.log("Page size = " + e.sender._pageSize);

// console.log("Next page = " + dataSource._pristine.next_page);

// console.log("Previous page = " + dataSource._pristine.previous_page);

// console.log("Total count = " + dataSource._pristine.total_count);

var t = dataSource._pristine.total_count;

console.log($("#company-matches-found").html(t));

var m = e.sender._page * e.sender._pageSize;

if (m >= t) {

alert("That's it... no more matches");

// I want to flick off server side call back here

}

},

schema: { // describe the result format: this should correspond to class CustomCompany

total: "total_count",

page: "page",

data: "results", // the data which the data source will be bound to is in the "results" field

model: {

fields: {

company_num: {

type: 'number'

},

company_name: {

type: 'string'

},

company_bus_ind: {

type: 'string'

}

});

$("#endless-scrolling").kendoMobileListView({

dataSource: dataSource,

template: $("#endless-scrolling-template").text(),

endlessScroll: true,

scrollTreshold: 30 //treshold in pixels

});

}

</script>

ListView (Mobile)

answered on 07 Nov 2012

6 answers

497 views

ListView endlessScroll problem

Hi,
I have a problem with endlessScroll in mobile ListView. The problem is, when last page is loaded, if I scroll down it continue to load last page over and over again.

Here are the code snippets that show how list is defined and initialized:

<div id="view-list" data-role="view" data-layout="view-layout">

<div>

<ul id="list">

</ul>

</div>

var dataSource = new kendo.data.DataSource({

pageSize: 10,

page: 1,

serverPaging: true,

transport: {

read: {

url: url,

dataType: "jsonp"

},

parameterMap: function (options) {

var parameters = {

pageSize: options.pageSize,

page: options.page

}

return parameters;

}

},

schema: {

data: function (data) {

return data.result;

},

total: function (data) {

return data.count; // total number of items

}

},

error: function () {

onError("Communication error");

}

});

if ($("#list").data("kendoMobileListView") == undefined) {

$("#list").kendoMobileListView({

dataSource: dataSource,

template: $("#template").html(),

endlessScroll: true,

scrollTreshold: 30,

click: function (e) {

...

}

});

}

else {

$("#list").data("kendoMobileListView").dataSource = dataSource;

$("#list").data("kendoMobileListView").refresh();

}

Additional notes: List shows items based on selection in previous view. Data source is created every time from beginning. Upon first selection, list is initialized. Other selections change data source and refresh list.

I get same behaviour if I use loadMore option instead of endlessScroll.

Could you please help? If this is expected behaviour, is there an option to disable endless scroll using JavaScript (for example, when last page is loaded)?

ListView

answered on 07 Nov 2012

2 answers

1.2K+ views

How to display "no data message" when RemoteDataSource is empty?

I tried to display the no data message but failed.
Below is my try:

http://www.kendoui.com/forums/framework/data-source/best-way-to-handle-no-data-in-a-datasource.aspx
Tried above to use dataBound event to inject "no data message", but it seems there is no such event in mobile ListView
another approach is to use "change" event of dataSource, but things will get nasty if the data source is shared...
[Edit] This doesn't work. After the event is fired, you can insert html into the DOM, but it will be overwrriten by the empty view generated by the ListView

What's the best practice for doing this?

Thanks!

ListView (Mobile)

answered on 07 Nov 2012

3 answers

141 views

Kendo Chart iPad Series Click

Our users are having problems effecting the series click event on iPad, especially when the width of the bars on a column chart is particularly narrow. The Roadmap for Dataviz states that the Q3 2012 release will include new chart interactions that support touch "out of the box" - can anybody from Telerik confirm whether existing interactions (i.e. series click) will see improved functionality from touch based devices in the Q3 2012 release?

Charts

answered on 07 Nov 2012

0 answers

224 views

Bug in the focusout event handler when editing a grid cell

Inside of the Grid code, there is a handler function attached to the current cell's focusout event. This function grabs the current element that was clicked, and checks if it is a child of the current cell. If it is, then it keeps the cell in edit mode, and if it isn't, it knows the user clicked else where and so it closes the current cell's edit mode.

The bug that I'm seeing in IE is that you're grabbing the target element that was clicked by using document.activeElement. In IE, in some scenarios (not sure exactly which scenarios, nor do I have the time to figure it out or try to reproduce, sorry.), document.activeElement is set to the body element. The code then checks to see if the current cell contains the body, which of course it doesn't, so it closes the cell's edit mode.

I worked around this by passing the jquery event object to the handler, and then setting target equal to the event.target property. event.target *should* always be the same as document.activeElement, but of course in IE *should* and *is* are quite often miles apart.

Just wanted to bring this to your attention. Hopefully this is the right place to bring this up.

Thanks,
Bob

Grid

asked on 07 Nov 2012

0 answers

89 views

Having issues with dates

Hi, I'm trying to remotely bind a grid through json.

Here is a sample of my json:
[{"dateadded":"October, 29 2009 13:45:00"}]

my grid, with this as a template:
#= kendo.toString(dateadded,"MM/dd/yyyy") #

is displaying as this:
10/01/2029

I'm using coldfusion to serialize my json and its being pulled from a datetime format field. If I manipulate the data before it gets serialized to reflect mm/dd/yyyy then its ok. I still want to make sure it sorts correctly too.

any guidance to what I could be doing wrong?

Grid

asked on 07 Nov 2012

1 answer

583 views

Kendo Chart Bar Width

Is there any way of manage the bar width?. I need to set the bar width manually.

Thanks.

Charts

answered on 07 Nov 2012

3 answers

89 views

License with V1 release?

Has the KendoUI licensing changed at all with the V1 release?
On the pricing page it says that KendoUI Mobile is included. Does that mean we don't need to buy KendoUI Mobile separately?

General Discussions

answered on 07 Nov 2012