Questions on Kendo UI for jQuery Forum

3 answers

132 views

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

99 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

102 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

52 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

643 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

242 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

362 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

answered on 09 May 2012

0 answers

99 views

c.ui.Selectable is not a constructor

If set the config param

selectable: "row"

for a grid it throws the error

c.ui.Selectable is not a constructor

(I have included the kendo.web.min.js) Am i supposed to do anything else to make the grid rows selectable?

Grid

asked on 09 May 2012

6 answers

318 views

full window layout

In RAD ASP controls there was a demo for full-browser window layout using Rad Splitter and panels etc. The nice thing about that demo was while resizing the browser, it allowed to automatically resize all panels within it.

We need similar type of feature in Kendo UI - how do we achieve that? For example, I need such feature using TabStrip so that the Tab Panel resizes according to the browser size and other items like menu and call remain fix size.

General Discussions

answered on 09 May 2012

1 answer

171 views

Destination node during drag event?

In a TreeView I can add the following:

.bind("drag", function(e) {

})

Which allows me to access the dropTarget, which is a DomElement. How can I go about both determining if this is a tree node, and getting said tree node?

TreeView

answered on 09 May 2012