Questions on Kendo UI for jQuery Forum

1 answer

113 views

Internationalization of grid column names

Hi
Do you have any suggestions or best-practices for internationalization of the column names in the Kendo Grid?

I thought of creating a RESTservice that would give a JSON mapping for the language in question.

/Thomas

Grid

answered on 02 May 2012

1 answer

213 views

Grid popup editor doesn't update

Hi,
I'm using the grid with the popup editor. All is well but when I click the update button the grid doesn't call the update url given to my datasource. I have the latest 2012.1.322 version of kendo. Is there a specific configuration I need to give to my grid for this to work?!!

gridContainer

.kendoGrid({

dataSource : dataSource,

pageable : false,

height : 400,

sortable : true,

toolbar : [ "create" ],

columns : [

{

field : "firstName",

title : "First Name"

},

{

field : "lastName",

title : "Last Name"

},

{

field : "email",

title : "Email"

},

{

field : "status",

title : "Status",

editor : statusEditor

},

{

field : "telephone",

title : "Telephone"

},

{

field : "jobTitle",

title : "Job"

},

{

field : "newsSubscription",

title : "Subscribe to news?"

} ],

editable : "popup"

});

var grid = gridContainer.data("kendoGrid");

}

});

function createDataSource(readUrl, updateUrl, destroyUrl, createUrl){

return new kendo.data.DataSource({

transport : {

read : {

url : readUrl,

dataType : "json"

},

update : {

url : updateUrl,

dataType : "json"

},

destroy : {

url : destroyUrl,

dataType : "json"

},

create : {

url : createUrl,

dataType : "json"

},

parameterMap : function(options, operation) {

debugger;

if (operation !== "read" && options.models) {

return {

models : kendo.stringify(options.models)

};

}

},

batch : true,

pageSize : 30,

schema : {

model : {

id : "id",

fields : {

firstName : {

validation : {

required : true

}

},

lastName : {

validation : {

required : true

}

},

email : {

validation : {

required : true

}

},

telephone : {

validation : {

required : false

}

},

jobTitle : {

validation : {

required : false

}

},

newsSubscription : {

validation : {

required : false

},

type : "boolean"

},

status : {

validation : {

required : false

},

type : "text"

}

},

data : function(data) {

return data.users;

}

});

}

Thank you,
Valanto

Grid

answered on 02 May 2012

1 answer

149 views

Errors binding DataSource to WCF service

I have a WCF RESTful service (http://localhost:8000/AccountService/GetAccounts) outputting valid JSON data:

[
{"Department":"Manager","ID":"1","Name":"Alexandre Heuze","Position":"General Manager"},
{"Department":"Accouting","ID":"2","Name":"Pengli Liu","Position":"Accounting Manager"},
{"Department":"Human Resources","ID":"5","Name":"Jie Wu","Position":"HR Administrator"},
{"Department":"Sales and Purchasing","ID":"6","Name":"Fei He","Position":"Sales Manager"},
{"Department":"R and D Department","ID":"10","Name":"Jun Zuo","Position":"R and D Engineer"}
]

The following code does not bind the JSON output to the Grid Widget:

var wcfDS = new kendo.data.DataSource({
transport: {
read: {
url: "http://localhost:8000/AccountService/GetAccounts",
dataType: "json"
}
},
error: function(e) {
alert(e.toString());
}
});
$("#grid").kendoGrid({
dataSource: wcfDS,
columns: [...]
});

The most relevant error message I can see is e.errorThrown = "No Transport". Your thoughts?

Data Source

answered on 02 May 2012

1 answer

147 views

Kendo.common.css Firefox Button Padding

We have a page where we have included the kendo.common.css stylesheet. When we view this page in Firefox, we notice that all of our buttons are really tall. We've tracked this issue down and it is due to the following style in kendo.common.css:

/* Override the important default line-height in Firefox 4+ */

:-moz-any(input[type="submit"], input[type="button"], input[type="reset"]) {

padding-bottom: 0.37em;

padding-top: 0.37em;

}

This applies top and bottom padding to any button on our page. This seems wrong, should this not be something more specific than any button, maybe something like (or some variation thereof):

/* Override the important default line-height in Firefox 4+ */

input.k-button:-moz-any(input[type="submit"], input[type="button"], input[type="reset"]) {

padding-bottom: 0.37em;

padding-top: 0.37em;

}

Thanks,
Sara

General Discussions

answered on 02 May 2012

3 answers

1.5K+ views

Grid calling function from template

This should be simple but it appears that the local function cannot be found from a template.
What's missing?

See http://jsfiddle.net/JVPa5/2/

...
template: '#= Simple(OffDuty,OnDuty); #'
...
function Simple(a,b){
return a + b * 100
}

Grid

answered on 02 May 2012

1 answer

257 views

Swipe to right on list view item

Hi,

In our application we need a swipe function in a listview, that behaves similarly to that of the iphone messages inbox. So when you swipe to the right (on a item in the listview) it shows a button that allows you to delete the item.

Please advise if there is such a feature available or if it will be available in the future? Otherwise would it be possible to implement our own using the html 5 touchstart and touchmove events? We've had issues trying to implement these side by side with kendo ui mobile...

Thanks

General Discussions

answered on 02 May 2012

1 answer

135 views

Cannot call method 'pullHandled' of undefined

Testing in Chrome, using Twitter feed, I am trying to test the 'pullToRefresh' functionality but get this error in Chrome developer tools when I try to pull the list down. :

Uncaught TypeError: Cannot call method 'pullHandled' of undefined
1. g.extend.refreshkendo.mobile.min.js:2346
2. e.extend.proxy.gjquery.min.js:538
3. y.extend.triggerkendo.mobile.min.js:136
4. o.extend._processkendo.mobile.min.js:1681
5. o.extend.successkendo.mobile.min.js:1664
6. e.extend.proxy.gjquery.min.js:538
7. p.extend.read.c.successkendo.mobile.min.js:1503
8. f.Callbacks.njquery.min.js:590
9. f.Callbacks.o.fireWithjquery.min.js:635
10. wjquery.min.js:2495
11. f.ajaxTransport.send.d.onload.d.onreadystatechange

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>My Open Cal</title>

<link href="styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />

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

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

<script>

$( //jQuery page load

function ()

{

var app = new kendo.mobile.Application($(document.body), { layout: "layout", icon: "/images/xboxavatar.png" });

$("#ulMyCal").kendoMobileListView({

appendOnRefresh: true,

pullToRefresh: true,

pullTemplate: "Pull to refresh",

refreshTemplate: "Loading...",

dataSource: new kendo.data.DataSource(

{

transport:

{

read:

{

url: "http://search.twitter.com/search.json",

contentType: "application/json; charset=utf-8",

type: "GET",

dataType: "jsonp",

data:

{

q: "#tampa"

}

},

schema: {

data: "results"

}

}),

template:"<p>${text}</p>"

});

})

</script>

</head>

<body>

<div data-role="layout" data-id="layout">

<div data-role="header" >

<div data-role="navbar">

<span data-role="view-title">My Test</span>

</div>

<div data-role="footer">

<div data-role="tabstrip">

<a href="#index" data-icon="organize">My Calendar</a>

<a href="#search" data-icon="search">Search</a>

<a href="settings.htm" data-icon="settings">Settings</a>

</div>

<div data-role="view" id="index" data-title = "My Calendar">

<div style="text-align:center">

<ul id="ulMyCal" data-style="inset">

</ul>

</div>

<div data-role="view" id = "search" data-title = "Search">

</div>

</body>

</html>

ListView (Mobile)

answered on 02 May 2012

0 answers

191 views

dropdown animation set to false but not working

i used write this:
var lpDpt = $("#LpDepth").kendoDropDownList({
optionLabel: "--Select--",
dataTextField: "Depth",
dataValueField: "Depth",
index: 0,
dataSource: dsLpDpt,
animation: false ,
change: function () {
var value = this.value();
}
}).data("kendoDropDownList");

but still i'm getting animation. i followed this :http://www.kendoui.com/forums/ui/tabstrip/setting-tab-animation.aspx
if i used the old version js files i'm getting no effects and optional label not displaying so upgraded to latest "kendoui.complete.2012.1.322.trial", then i'm getting optional label and effects by default,i want to disable effects by animation set to 'false' but this was not working.

DropDownList

asked on 02 May 2012

3 answers

99 views

Remote view button error with phonegap and android

I've created a simple application with phonegap which consists in 2 html files (index.html and about.html)
Each of these files contains a single <div data-role="view">.
The index.html contains a button (<a href="about.html" data-role="button">)

If I put these files in a webserver they work correctly (the button when clicked navigates to the about.html page). However if I deploy these files through a phonegap application I get the following error message in LogCat (Android 2.2 emulator): TypeError: Result of expression 'd' [undefined] is not an object. at kendo.mobile.min.js:8

The sushi sample application suffered from the same error with it's "About" button when I deployed it through phonegap.

Is there a workaround this issue or any patch available?

Thanks

General Discussions

answered on 02 May 2012

2 answers

279 views

2 Bugs: Fractional percentage handling

Having dug around in the code, there appear to be two bugs in the kendo core relating to the handling of percentages.

Bug 1: Parsing percentages to floats
The first bug is fairly simple: percentages are mapped to a number between 0 and 1 for percentages 0% to 100%. The bug appears to be in the method kendo.parseFloat(value, culture). When the value is something like "12%" it correctly identifies it as a percentage here:

} else if (value.indexOf(percentSymbol) > -1) {

number = percent;

symbol = percentSymbol;

}

however, it subsequently just removes the percentage symbol but doesn't scale the value down by dividing by 100:

value = value.replace("-", "")

.replace(symbol, "")

.replace(nonBreakingSpaceRegExp, " ")

.split(number[","].replace(nonBreakingSpaceRegExp, " ")).join("")

.replace(number["."], ".");

value = parseFloat(value);

if (isNaN(value)) {

value = null;

} else if (negative) {

value *= -1;

}

return value;

This results in a value such as "12%" being changed to "1,200%" when using the percentage formatting such as:

kendo.toString(value, 'P')

Bug 2: Entering fractional percentages
The second problem I've found relates to using fractional percentage values. In my application I need to display percentages to 10dp and have therefore overridden the culture settings as such:

kendo.cultures["en-US"].numberFormat.percent.decimals = 10;

For reference, here's a stripped down version:

$("#grid").kendoGrid({

autoBind: false,

dataSource: {

schema: {

model: {

id: "Title",

fields: {

Title: { editable: false },

Percentage: { editable: true, type: "number" }

}

},

columns: [{

title: "TITLE",

field: "Title"

}, {

title: "PERCENTAGE",

field: "Percentage",

format: "{0:P}"

}],

editable: true,

scrollable: false

});

When providing the original model, a value such as 0.003425 is displayed as "0.3425000000%".
When clicking the cell to edit, the number editor simply displays "0".
If I then enter a fractional value such as "0.012345678912", the expected new value in the model should be "1.2345678912%" but is actually rounded to "1.0000000000%" and the value in the underlying model is saved as 0.01

Is there any way we can get more accurate values working in kendo or is there something else limiting us to 2 d.p. in the model?

Thanks in advance,

Daniel

Grid

answered on 02 May 2012