Questions on Kendo UI for jQuery Forum

4 answers

883 views

[Solved] ListView not working with data-bind? Help...

When I use the **** data-bind="source: datasource" **** setting on a ListView within a Mobile View, I end up with all of my data on one long, single list item, instead of separate items. What a I doing wrong? Is this an inappropriate use of data-bind?

If I instead initiate the ListView separately in Javascript then it properly displays the items... though we were trying to pass all of this through MVVM. Is this not the right way to do this?

<!DOCTYPE html>

<html>

<head>

<script src="jquery.min.js" type="text/javascript"></script>

<script src="kendo.all.min.js" type="text/javascript"></script>

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

type="text/css" />

<link href="kendo.common.min.css" rel="stylesheet"

type="text/css" />

<link href="kendo.default.min.css" rel="stylesheet"

type="text/css" />

</head>

<body>

<div data-role="view" data-title="Home" id="vHome" data-transition="slide">

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

<li><a href="#vMyDatabase">This Breaks</a></li>

<li><a href="#vMyDatabase2">This Works</a></li>

</ul>

</div>

<div data-role="view" data-title="My Database" id="vMyDatabase">

<ul id="lMyDatabase" data-role="listview" data-style="inset" data-template="tMyDatabase"

data-bind="click: ShowCustomer, source: MyDatabase">

</ul>

</div>

<div data-role="view" data-title="My Database" id="vMyDatabase2" data-init="initTest">

<ul id="lMyDatabase2" data-role="listview" data-style="inset" data-template="tMyDatabase"

>

</ul>

</div>

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

<div style="font-weight:bold;">#= Name #</div>

<div style="font-weight:normal;font-size:smaller">#= City #, #= State #</div>

<div style="font-weight:normal;font-size:smaller">ID: #= ID #</div>

</script>

<script type="text/javascript">

var TestData = [

{ Name: "Company A", City: "Phoenix", State: "AZ", ID: "00000001" },

{ Name: "Company B", City: "Los Angeles", State: "CA", ID: "00000002" },

{ Name: "Company C", City: "Santa Fe", State: "NM", ID: "00000003" },

{ Name: "Company D", City: "Boulder", State: "CO", ID: "00000004" },

{ Name: "Company E", City: "Seattle", State: "WA", ID: "00000005" },

{ Name: "Company F", City: "Portland", State: "OR", ID: "00000006" },

{ Name: "Company G", City: "San Diego", State: "CA", ID: "00000007" },

{ Name: "Company H", City: "Boise", State: "ID", ID: "00000008" },

];

var app = new kendo.mobile.Application($(document.body), {

initial: "vHome"

});

var viewModel = kendo.observable({

ShowCustomer: function(e) {

// something here for drilldown

},

MyDatabase: new kendo.data.DataSource.create({ data: TestData })

});

kendo.bind($("#vMyDatabase"), viewModel);

// And this way works

var dsMyDatabase = new kendo.data.DataSource.create({ data: TestData })

function initTest() {

$("#lMyDatabase2").kendoMobileListView({

dataSource: dsMyDatabase,

template: $("#tMyDatabase").text(),

style: "inset",

click: function (e) {

// something here for drilldown

}

});

}

</script>

</body>

</html>

ListView (Mobile)

answered on 06 Jul 2012

6 answers

248 views

Attempting to use the Editor as an MVC EditorTemplate

Hello,

I am attempting to use the Editor control as an EditorTemplate for HTML fields in my MVC4 application. The editor will display fine, but for some reason the code will never update and the value always comes back up the Model as null. Any ideas what I am doing wrong?

Here is the code for Html.cshtml:

@model System.String

@Html.AntiForgeryToken()

<textarea id="@Html.DisplayNameFor(c => c)" rows="10" cols="30" style="width:500px;height:250px">@Model</textarea>

<script>

$(document).ready(function () {

$("#@Html.DisplayNameFor(c => c)").kendoEditor();

});

</script>

Thanks!

Editor

answered on 06 Jul 2012

1 answer

182 views

[Solved] Changing text of the Loading popup

I need to change the text of the loading popup. I have tried the following configuration:

<script>
     new kendo.mobile.Application($(document.body), {
         loading: "myNewLoadingText"
     });
</script>

but then I specify a 'loading' parameter, the popups omit the text completely. Is the above code incorrect or is this a bug with Kendo UI?

Application

answered on 06 Jul 2012

0 answers

178 views

categoryAxis label text wrap

Hi,

How to set automatically wrap text for labels on the categoryAxis if they are too long.Please find the attached

Please find the attached sample graph.

Thanks!
Rajesh

Charts

asked on 06 Jul 2012

0 answers

63 views

upload

Hi,
i think you cannot do that.i have search but some content have missing..you can see on that kendo code is scrap.

attorneys
www.attorneysmax.com/

Editor

asked on 06 Jul 2012

0 answers

71 views

series label text wrap using br tag

Hi,

   I have rquirement to show series label text in two lines.
   Is it possiable to give html template format for series label text..?

   Please find the attached sample graph.

thanks,
Rajesh

Charts

asked on 06 Jul 2012

2 answers

229 views

[Solved] Dragging Tabs to different TabControl

Hi everyone,

i want to ask the kendo team if there are any plans to implement

a) reordering tabs by dragging a tabHeader
b) being able to move a tab to a different tabControl by dragging a tabHeader.

Much the same functionality as fro instance in your WPF Dockmanager.
Alternatively, will there be (or is there already) any support for drag/drop with the tabHeaders?

Thanks a lot for a great framework which saves me so much time and the logic of which is even a thing of beauty!

Greetings
Kai

TabStrip

answered on 06 Jul 2012

4 answers

1.8K+ views

[Solved] Format a tooltip template

Hello,

I'm using a template for my tooltip, and I'd like to format the ${value} part of the template. Can you let me know how the syntax would look to format as say currency? Thanks

tooltip: {

visible: true,

template: "${category}<br />Claim Cost: ${value}"

}

Charts

answered on 05 Jul 2012

1 answer

154 views

Grid and extended detail templates

$(document).ready(function(){

var localDataSource = new kendo.data.DataSource({

data: [ {

name: "Dmitry",

year: 1987,

id: 1

}, {

name: "Dash",

year: 1994,

id: 2

}, {

name: "Sam",

year: 1954,

id: 3

}

]

});

var detailsSource = new kendo.data.DataSource({

data:[

{

name: "Dmitry",

year: 1987,

id: 1,

address:'Luga',

phnom:'+380995668745'

},

{

name: "Dash",

year: 1994,

id: 2,

address:'Brest',

phnom:'+380955569874'

},

{

name: "Sam",

year: 1954,

id: 3,

address:'Praha',

phnom:'+380679964382'

}

]

});

$("#grid").kendoGrid({

dataSource: localDataSource,

selectable: "multiple, row",

sortable: true,

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

detailInit: details,

columns: [

{

field: "name",

title: "Name"

},

{

field: "year",

title: "Home address",

}]

});

function details(e){

// @todo get details by id e.data.id

detailsSource.read();

}

})

Template:

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

<div>

<ul>

<li><label>Name:</label>#= name #</li>

<li><label>Year:</label>#= year #</li>

<li><label>Address:</label>#= address #</li>

<li><label>Phone:</label>#= phnom #</li>

</ul>

</div>

</script>

When I try get details I was get an error: Uncaught ReferenceError: address is not defined.
How to solve this problem?

Grid

answered on 05 Jul 2012

1 answer

124 views

Resizing issue under Facebook mobile app

Hi,
I have a trouble with the kendo mobile resizing under the facebook app on ios(not sure about other environments).
The trouble is the kendo mobile view's height doesn't resize well under the Facebook app where it has the top navigation strip of it's own, it actually overflows the screen height so my tabstrip down the bottom is half-shown until I drag it up the screen with my finger.

Here goes the steps to reproduce the issue.

1. Go to Facebook app on iPhone.
2. in the search, type in "bookingbay" to search for the app I am developing. Make sure you are clicking on the Bookingbay App, not Bookingbay Page.
3. On Next screen, click on install.
4. The bookingbay appears within your Facebook app and you will see the bottom tabstrip is clipped until your drag it up.

The workaround is to keep dragging it up to access the bottom tabstrip, or clicking on the Facebook app's action button and select "Open in Safari", however, this redirects the user outside the Facebook app whereas I would like my app used embeded within the Facebook app for the Facebook app users at least.

I can see why it behaves that way,, perhaps that's because the kendo mobile view detects that we are in the App mode and resizes the view as the full screen resolution without knowing that the Facebook app chews up some space on the top for its own navigation strip.

Would this be classified as a bug or a limitation of the app? Or is there already a fix(configuration?) on this?

By the way, the Bookingbay app searched on the Facebook mobile search can also be located on http://www.bookingbay.net on your mobile devices. It's basically a free online booking web app developed in Kendo mobile. and I am trying to use the facebook mobile search as one of my distribution channels and I also want to give the user best experience (not that they have to jump out of the app to use my app..)

Thanks for your help!!

General Discussions

answered on 05 Jul 2012