Questions on Kendo UI for jQuery Forum

2 answers

117 views

I want to implement traditional anchor names to allow the user to jump down the page to view navigation below the primary content, and from there to jump back to top - this appears to be in conflict with the way view navigation works, however - i.e. whether via KUI button or vanilla link, it results in "loading..." while the page tries to move to a non-existent view - is there a workaround, or am I missing something, or ? Thanks! :)

General Discussions

answered on 09 May 2012

1 answer

3.7K+ views

Template column with an anchor tag or other hyperlink example

Do anyone have an example of template column that uses a data field to build a url?

Grid

answered on 09 May 2012

3 answers

98 views

Very Simple Qustion about binding

Hi to all :

All I need to learn is : Is that possible to make chart of a log which comes with separate sheet and updates itself every lets say 30 sec.?
If yes , can you please provide a example ?
lets say my log has these information and keeping in document named " try.json" (this file updates itself ever 30 sec.)

[ { "year": "2000", "sales": 200 },
{ "year": "2001", "sales": 450 },
{ "year": "2002", "sales": 300 },
{ "year": "2003", "sales": 125 }
]

Data Source

answered on 09 May 2012

1 answer

177 views

How to use CRUD in MVVM form?

and also Data Source assigning...

give me any example

Thanks for your reply...

MVVM

answered on 09 May 2012

4 answers

175 views

[Solved] 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

90 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

520 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

153 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

109 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