Questions on Kendo UI for jQuery Forum

1 answer

235 views

[Solved] Binding Treeview with checkboxes

Hi!

Is it possible to bind treeview widget with checkboxes?

I try like this

<div id="products"  data-role="treeview" data-text-field="Name" data-value-field="Id" data-check-field="Checked" data-check="true" data-bind="source: SpecificationProducts" ></div>

but without success.

Kind regards,

Janez

MVVM

answered on 08 Nov 2012

24 answers

674 views

Pull down to refresh

When I pull down to refresh with only one item in the listview it does not seem to trigger the refresh. If I have two or more items the refresh works. Anyone else getting this?

Cheers,

Simeon

ListView (Mobile)

answered on 08 Nov 2012

1 answer

71 views

MVVM docs sample doesn't work with IE9

http://docs.kendoui.com/tutorials/mvvm-in-kendo-ui; see the sample at the bottom of the page. Under IE 9, cannot set Type or Amount (via spinner). Works fine on Chrome.

General Discussions

answered on 08 Nov 2012

3 answers

643 views

Update datasource?

I have a datasource/grid that I would like to update depending on selected in a TreeView.

I have my datasource created like so:

dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "/api/items",
dataType: "json",
data: { id: "1" }
}
}
});

When a user selected an item on the TreeView I want to update the datasource to change the id that defines its results. Can I just create a new dataSource with the new {data: {id: "newid"}}?

How would I then apply this to the grid that already exists?

Data Source

answered on 08 Nov 2012

1 answer

241 views

dropdownlist not rendering correctly with MVC4 standard template

Hi,
Just to make you aware that if you are using the standard out of the box ASP.NET MVC4 template an issue arises with the dropdownlist. The top section of the list that is displayed after clicking is cut off. This is due to the border-top css below clashing with the kendo dropdownlist styling. Is this something that can be fixed?

body {

background-color: #fff;

border-top: solid 10px #000;

color: #333;

font-size: .85em;

font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;

margin: 0;

padding: 0;

}

DropDownList

answered on 08 Nov 2012

3 answers

754 views

Numeric vs alphabetical sorting

I have a grid attached to a datasource with local sorting enabled.

One of the columns contains a list of numbers collected from an integer column of a database, so every value is definitely numeric.

What I would expect in this instance is numerical sorting but instead it is doing alphabetical as though it was text not numbers.
eg. 0, 1, 23, 3, 45, 54, 6, 76, 8

Does kendo automatically detect the datatype of a column to determine suitable sorting?
Or can we specify the datatype of individual columns ourselves?

Data Source

answered on 08 Nov 2012

10 answers

544 views

[Solved] 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.3K+ 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

559 views

[Solved] 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

546 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