Questions on Kendo UI for jQuery Forum

6 answers

603 views

The menu has a flash of unstyled content (FOUC) before it renders, how do I fix that? Ideally, I'd have the menu fade-in after the render is complete.

Thanks.

General Discussions

answered on 09 May 2012

2 answers

1.2K+ views

Input Password Type

Hi,

I am using password input in my application, the problem that sometimes a white text box is displayed next to the input (where I type in) to show the written characters for a second then turns the characters to starts.

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

<li>

<input name="signinEmail" type="email" id="signinEmail" value="" placeholder="Email Address"/>

</li>

<li>

<input name="signinPassword" type="password" id="signinPassword" value="" placeholder="Password"/>

</li>

</ul>

I attached a screenshot with the described issue.

Amr.

Application

answered on 09 May 2012

3 answers

172 views

ObservableArray.splice broken in MVVM

When you call the splice method of ObervableArray on an array that contains objects that have a field of "isNew" the following error is thrown:
Property 'isNew' of object [object Object] is not a function

Here is a jsFiddle demonstrating the behavior:
http://jsfiddle.net/nbove/HgVEK/

MVVM

answered on 09 May 2012

0 answers

123 views

mobile - accessing and updating datasource from another view

I need to get access a datasource from another mobile view but am unsure how.

For example, the listmessages view has a listView widget to display all the messages (the datasource), when one is selected, they are directed to the viewmessage remote view which will display all the data for the selected ID.

When in this view I want to initiate the update and destroy on the datasource in the previous view (listmessages ).

I currently use PHP to display the data on viewmessage view and would prefer to access the relevant dataSource id to display the selected data.

Hope this makes sense. Please see my updated code for a better idea of what I am trying to achieve.

<div data-role="view" data-title="Mobile" id="listmessages" data-init="listMessagesInit">

<h2>Customer Messages</h2>

<p><?php echo $unread_messages . ' - unread messages'; ?></p>

<ul id="message_list"></ul>

</div>

<script id="message_list_template" type="text/x-kendo-template"><a href=""><div style="float:left; width:150px; height: 50px" class="isnew_#= isnew #">#= customer_name #<br />#= created #</div><div style="height: 50px"id="message_#= id #" class="isnew_#= isnew #">#= message #</div></a></script>

<script>

function listMessagesInit(){

var dataSource = new kendo.data.DataSource({

transport: {

read: "/messages/data",

dataType: "json",

update: {

url: function() {

//where id is a global variable

var url = "/messages/markasread/" + id + "/" + read;

return url;

},

type: "POST",

dataType: "json"

//other configurations

},

destroy: {

url: function() {

//where id is a global variable

var delurl = "/messages/delete/" + id;

return delurl;

},

type: "DELETE",

dataType: "json"

}

},

schema: {

model: {

id: "id",

fields: {

created: { type: "string" },

message: { type: "string" },

customer_name: { type: "string" },

isnew: { type: "string" }

}

});

$("#message_list").kendoMobileListView({

dataSource: dataSource,

//pullToRefresh: true,

//appendOnRefresh: true,

style: "inset",

click: function(e) {

var id = e.dataItem.id;

var selected = dataSource.get(id);

window.kendoMobileApplication.navigate("/messages/view/" + id);

},

template: $("#message_list_template").text()

});

}

</script>

<style>

#listmessages div.isnew_1 {font-weight:bold}

#listmessages div.isnew_0 {font-weight:normal}

</style>

<div data-role="view" data-title="Mobile" id="viewmessage" data-init="viewMessageInit">

<h2>Message</h2>

<p>Date: <?=$message->message->created?></p>

<p>From: <?=$message->message->customer_name?></p>

<p>Email: <a href="mailto:<?=$message->message->email?>" target="_blank"><?=$message->message->email?></a></p>

<p>Telephone: <?=$message->message->customer_telephone?></p>

<p>Location IP:<?=$message->message->ip?></p>

<div data-role="scroller">

<p><?=$message->message->message?></p>

</div>

<?php $read_text = ($message->message->isnew == 1 ? 'Mark as read' : 'Mark as unread'); ?>

<?php $read = ($message->message->isnew == 1 ? 0 : 1); ?>

<p><a data-align="left" data-role="button" id="markasread" ><?=$read_text?></a>

<a data-align="right" data-role="button" id="delete">Delete</a></p>

</div>

<script>

function viewMessageInit(){

//var selected is defined in previous view - how to access this?

$("#markasread").click(function(){

selected.set("isnew", read);

dataSource.sync();

});

$("#delete").click(function(){

dataSource.remove(selected);

dataSource.sync();

});

}

</script>

Many thanks,

Data Source

asked on 09 May 2012

1 answer

128 views

Bug: Undefined data not handled in DataReader

In Kendo.all.js line 5123, call to get the data from the datasource is performed, but there is no check to see if the data returned is undefined.

I put in a temporary fix, but it may not be the proper way, but at least it stops Kendo from crashing. I am posting it here to let someone know:

that.data = function(data) {

var record,

getter,

idx,

length,

modelInstance = new that.model();

data = dataFunction(data);

if( isEmptyObject(data) ) // Added this fix to prevent errors if no data was returned

return {};

if (!isEmptyObject(getters) ) {

for (idx = 0, length = data.length; idx < length; idx++) {

record = data[idx];

for (getter in getters) {

record[getter] = modelInstance._parse(getter, getters[getter](record));

}

return data;

}

Data Source

answered on 09 May 2012

0 answers

67 views

Setting DropDownList back to blank programatically

Is there any combination of calls I can use to make a dropdownlist's text+value blank again after the first time it has been selected? The reason being that I am using a data source to change the options available to the list, and I want the user to know that they have to select a new option when the list's contents change. Currently, it keeps the text of the last selection, even if its option is no longer present in the list.

Does anyone have any possible solutions to this problem?

DropDownList

asked on 09 May 2012

6 answers

706 views

How to have a ListView to bind the selected item in another template using MVVM?

Hi,

I have a listview that it's something like this:

<ul id="items" data-bind="source: items"></ul>

and that has selection, is bounded to a observable datasource, so i can add new items etc.
When I select an existent item I would like to bind the item details in adiv outside of the listview.

I'me doing the following in the listview change event:

var data = activitiesSource.view(),

selected = $.map(this.select(), function (item) {

return data[$(item).index()];

});

viewModel.set("selectedItem", selected);

The 'selectedItem' is a member of my obersable viewModel. My item details div is something like:
(i've also tried to add a data-source prop to the outside div with 'value: selectedItem' but also doesn't work)

<div class="js-item-details">

<h2 data-bind="text: selectedItem.Title"></h2>

<h3 data-bind="text: selectedItem.Descritpion"></h3>

</div>

In debug I see that the selected Item is correctly setted but when the div shows all fields ara with undefined an no errors.

Am I in the wrong path?

ListView

answered on 09 May 2012

1 answer

278 views

Change row template for a grid and refresh

Is it possible to do this? I have this jsfiddle....http://jsfiddle.net/6yJkM/32/

I'm adding an extra column in and I've tried to modify the row template and refresh the grid but I don't see the template being applied. Can anyone see a way of making that work please?

Thanks
Matt

Grid

answered on 09 May 2012

5 answers

389 views

kendoComboBox into Template

I have a ListView that render this template:

<script type="text/x-kendo-tmpl" id="template_token_list">
<div id="token" class="k-header">
<h3>${codice}</h3>
<div id='token_status' class='${colore}'></div>
<img src="/upload/token/${codice}_small.jpg"><br>
<button class="k-button info"><span class="k-icon k-warning"></span></button>
<input style="display:none;" class="comboAction" />
</div>
</script>

<script>
...
$("#listView").kendoListView({
dataSource: dataSource,
template: kendo.template($("#template_token_list").html())
});

$(".comboAction").kendoComboBox({
dataTextField: "text",
dataValueField: "value",
dataSource: items,
placeholder: "Action..."
});
...

but, when I call the listView refresh

var listView = $("#listView").data("kendoListView");
listView.refresh();

all the kendoComboBox return to normal input

Please help me

Templates