Questions on Kendo UI for jQuery Forum

4 answers

162 views

data-bind attr in a template returning undefined

Have a look at the fiddle

http://jsfiddle.net/stevescotthome/SgLsB/5/

So I data-bind attr on the h3, and it works fine...but if I move that same code down into the template, it returns class="undefined"

MVVM

answered on 09 May 2012

0 answers

84 views

add new record to a grid without inline edit

Hi all,

i have refered video(Get Started With The Kendo UI DataSource) provided 
by kendo team and i have tried to do the same, but on click of create-click button create: {} section of datasource is not called. as per video on click of create 
button create:{} section will be called automatically.
 please find the code example below. 

 $(document).ready(function () {
            // --------------------------------------------------------------------------------
            // DataTable Section
            // --------------------------------------------------------------------------------
            clinetDataSource = new kendo.data.DataSource({
                batch: true,
                editable:true,
                transport: {
                    create: {
                        url: _WebServiceAddress + "Client/Client",
                        contentType: "application/json; charset=utf-8", 
                        type: "POST" 
                    },
                    read: {
                        url: _WebServiceAddress + "Client/ClientTable", 
                        datatype: "odata"
                    },
                    parameterMap: function (data, operation) {
                        if (operation !== "read" && data.models) {
                                       return { models: kendo.stringify(data.models) };
                                   }
                                   else if (operation != "read") {
                                       // web service method parameters need to be send as JSON. The Create, Update and Destroy methods have a "products" parameter.
                                       return JSON.stringify(data)
                                   }
                    }
                },
                schema: {
                    model: clientModel
                },
                pageSize: 10,
                batch: true
            });
            var clientModel = kendo.data.Model.define({
                id: "RecId",
                fields: {
                    RecId: { editable: false, nullable: true },
                    ClientName: { type: "string" },
                    ResponsibleName: { type: "string" },
                    IsActive: { type: "boolean" }
                }
            });
             _Table=   $("#tableClientDetails").kendoGrid({
                    columns: [
                     {field: "RecId", title: "Action", width: 50,
                      template: '<img class="buttonEditTable" id="buttonEditTable_#=RecId#" alt="#= RecId #" src="/Desktop/Global/Images/DataTable/Edit.png"/> '
                     },
                    { field: "ClientName", title: "Name" },
                    { field: "ResponsibleName", title: "Contact Person" },
                    { field: "IActive", title: "Active", width:100,
                        template: '<input class="checkboxActive" id="checkbox_#=RecId#" type="checkbox" #= IsActive ? "checked=checked" : "" # ></input>'
                    }
                ],
                    dataSource: clinetDataSource,
                   groupable: true,
                     filterable: true,
                    sortable: true,
                    pageable: true,
                    scrollable:false,
                    editable: true
                });
              
            });
           
            $("#create-client").click(function () {
                clinetDataSource.add({
                    Address: $("#textareaAddress").val(),
                    ResponsibleEmailAddress: $("#fieldContactPersonEmailId").val(),
                    Telephone: $("#fieldTelephone").val(),
                    City: $("#fieldCity").val(),
                    State: $("#selectState").find(':selected').text(),
                    Country: $("#selectCountry").find(':selected').text()
                });
                clinetDataSource.sync();
               
            });
please advice. how create:{}/update:{} will be called.
Thanks,
Shankar

Data Source

asked on 09 May 2012

6 answers

494 views

How to fix the FOUCing menu?

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.1K+ 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

135 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

105 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

103 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

55 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

661 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

247 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