Questions on Kendo UI for jQuery Forum

16 answers

532 views

We're currently testing the KendoUI Grid to see what is the maximum number of row that can be handled (with an OData Service).

To run our tests, we did create a table with 1 000 000 records. After displaying 553 385 records, the grid starts to struggles... only half of the row #553 386 is displayed, and then we can't scroll any further in the list.

Did someone else noticed bugs with the grid when displaying more than 500 000 rows?

Grid

answered on 17 Dec 2012

3 answers

93 views

Pager issue when at going over boundry.

I've got an application that uses custom onclick events in the pager controls to redraw html elements in the grid upon paging. This works great for everything except going past the boundries. I haven't been able to figure out a way to prevent the First and Previous buttons from firing the onclick event when the currently selected page is in the first page and preventing the Next and Last buttons from firing onclick events when the currently selected page is the last page.

I've also noticed that once a paging event occurs the numerical links 1, 2, 3.... are rewritten and any custom events assigned to them get removed. How can I tell that a paging event is has just occured and re-bind the onclick events to the paging numerical links?

Thanks!

Grid

answered on 15 Dec 2012

1 answer

89 views

Annoying flash when switching mobile app from portrait to landscape (or back)

I have created my first Kendo UI Mobile application using Icenium. The app only has a login page at the moment with a couple of fields and a button. When I rotate the phone and switch from portrait to landscape, I get a very annoying flash (black to white to black) as the background adjusts. How to I correct this?

General Discussions

answered on 15 Dec 2012

3 answers

574 views

Dynamically creating tabs on a tabstrip with datasource?

I've been trying to figure out how I'd dynamically create tabs on a tabstrip (and consequently, views) and I thought that trying a hand with a datasource and template might be the way to go, after seeing that it works with listviews. The way I currently have it set up is as of the following:

<div data-role="footer">

<div id="crewlistTab" data-role="tabstrip" data-source="catDataSource" data-template="departmentTabs">

</div>

<script type="script/x-kendo-template" id="departmentTabs">

<a href="#" data-icon="contacts">#: AccountDepartmentId#</a>

</script>

<script type="text/Javascript">

var catDataSource = new kendo.data.DataSource({

transport: {

read: {

url: "../Server-Side/connectDP.php",

type: "GET",

dataType: "json"

}

},

schema: {

data: "categories"

}

});

</script>

But nothing generates.
Is there a way to fix this or another way to go about dynamically creating tabs & views altogether?

TabStrip (Mobile)

answered on 15 Dec 2012

4 answers

698 views

[Solved] Grid inside ListView Row

I have a kendo listview where I need to embed a kendo grid inside each listview row (the listview row uses a defined template) ... how can this be accomplished?

Thanks!
Doug

ListView

answered on 15 Dec 2012

1 answer

474 views

[Solved] MVVM Visible binding

I am trying to follow along with the sample at http://docs.kendoui.com/getting-started/framework/mvvm/bindings/visible. I am using Icenium to build a mobile app, my index page consists of:

<!DOCTYPE html>

<html>

<head>

<title></title>

<meta charset="utf-8" />

<script src="cordova.js"></script>

<script src="kendo/js/jquery.min.js"></script>

<script src="kendo/js/kendo.mobile.min.js"></script>

<link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />

</head>

<body>

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

<div data-bind="visible: isVisible">some content</div>

<button data-bind="click: hide">Hide</button>

</div>

<script>

var app = new kendo.mobile.Application(document.body, { transition: "slide" });

var viewModel = kendo.observable({

isVisible: true,

hide: function() {

this.set("isVisible", false);

}

});

kendo.bind($("#div"), viewModel, kendo.ui.mobile);

</script>

</body>

</html>

Yet when I click the button in the simulator, the content is not hidden ... is this a bug in the version of kendo UI mobile that icenium uses, or am I doing something wrong? According to the kendo.mobile.min.js it appears to be v2012.2.913.

MVVM

answered on 15 Dec 2012

1 answer

212 views

How to get members of a Json object

Hi,

Pretty sure this is my lack of Json knowledge but how can I get a member in a Json object returned?

I am also using a DataSource here is there any other suggested way to get data that will not be bound to a control?

test: function () {

var dataSource = new kendo.data.DataSource({

transport: {

read: {

url: "http://search.twitter.com/search.json?q=anton",

dataType: "jsonp"

}

},

requestStart: function (e) {

$('#loadingMain').show();

},

requestEnd: function (e) {

alert(dataSource.data().completed_in);

},

error: function (e) {

alert(e.status);

}

});

dataSource.read();

}

If you guys can add more simple non-bound examples to your documentation please.

Thanks,
Anton

Data Source

answered on 15 Dec 2012

1 answer

593 views

MVVM source data-bind to list view for detail view

I'd like to display the detail of a record inside a list view within my detail view. I'm trying to use an MVVM source binding and a data-template attribute to specify the list items and how they should look. Like this:

<script>

var model = kendo.observable({

user: {

firstName: 'Jonathan',

lastName: 'Marston',

age: 29,

isSubscribed: true,

subscriptionType: 'monthly'

subscriptionDate: new Date(2012, 12, 12)

}

});

</script>

<script id="detailTemplate" type="text/html">

<li><label>First Name</label>#: data.firstName #</li>

<li><label>Last Name</label>#: data.lastName #</li>

<li><label>Age</label>#: age #</li>

# if (data.isSubscribed) {

if (data.subscriptionType == 'monthly') { #

<li>Monthly subscription</li>

# } else { #

<li>Yearly subscription</li>

# } #

<li><label>Subscribed</label> #: kendo.format(data.subscriptionDate, 'MM/dd/yyyy') #</li>

# } else { #

<li>Not subscribed</li>

# } #

</script>

<div data-role="view" data-model="model">

<ul data-role="listview" data-template="detailTemplate" data-bind="source: user">

</ul>

</div>

Unfortunately it appears that the Kendo ListView component is interfering with the source binding because it expects to be bound to an array and have the data-template point to a template for each element in the array.

Is there any way to bind a list view to a flat structure like I'm trying to do here? I'd do <span>s with data-bind="text: ..." bindings, but the display logic is a bit too complicated for simple data bindings...

Thanks,
Jonathan

ListView (Mobile)

answered on 15 Dec 2012

2 answers

753 views

Your kendo mobile application element does not contain any direct child elements with data-role="view" attribute set. Make sure that you instantiate the mobile application using the correct container.

In my mobile application, I got the above error when i replace Q2 kendo.mobile.min.js into Q3 kendo.mobile.min.js.
Thanks in advance.

Application

answered on 14 Dec 2012

1 answer

94 views

[Solved] Size should be same for both Kendo List Views

Hi All,

In my mvc view, I have 2 List-views. In one of the List-view, only 2 or 3 items will displayed when another List-view will have 10 items per page simultaneously. Even though, first list-view display only 1 or 2 or 3.., list-view size should be same along with second list-view which is displaying 10 items in the page. Currently, what is happening is first list-view size is reducing. How to overcome this problem? I am attaching screen shot. Immediate help will be appreciated.

Below is my code

@(Html.Kendo().ListView<Model>()
        .Name("sites")
        .Events(events => events.DataBound("OnDataBound"))
        .TagName("div")
        .ClientTemplateId("template")
        .DataSource(source =>
        source.Read(read => read.Action("Action", "Controller"))
        .PageSize(10))
        .Selectable(selection =>
        {
            selection.Enabled(true);
            selection.Mode(ListViewSelectionMode.Multiple);
        })
        .Pageable(pager => { pager.PageSizes(true);})
        )
Regards,
Partha.

ListView

answered on 14 Dec 2012