Questions on Kendo UI for jQuery Forum

3 answers

437 views

Full globalization, for all parts of UI?

I am using the "culture" resources for internationalization, but strings are not translated - only money, numbers, dates formats... but for example, grid filters dialogs stay in english. Is there a solution or work in progress on this?

Globalization

answered on 17 Jul 2012

1 answer

289 views

HTML5 Canvas or SVG

On the DataViz homepage (http://www.kendoui.com/dataviz.aspx) you state the visualizations are powered by HTML5, but then in the Line Charts samples area, it says "The Chart widget uses modern browser technologies to render high-quality data visualizations. All graphics are rendered on the client using SVG with a fallback to VML for legacy browsers."

So which is it? HTML5 using the Canvas, or SVG?

General Discussions

answered on 17 Jul 2012

1 answer

202 views

Error 500 on docs.kendoui.com

At the moment, I get error 500 from

http://docs.kendoui.com/Errors/Error.aspx?aspxerrorpath=/documentation/getting-started/using-kendo-with/aspnet-mvc/introduction

and the Getting Started link on the home page of the Kendo UI docs site also gives the following error

http://docs.kendoui.com/Errors/Error.aspx?aspxerrorpath=/documentation/getting-started/changes-and-backward-compatibility

General Discussions

answered on 17 Jul 2012

2 answers

250 views

Grid sort removes canvas elements created by jQuery Sparklines plug in

I have created a grid and after it is created I'm trying to loop over elements and generate a sparkline using the jQuery Sparklines open source plug-in. This works just fine but as soon as I sort the grid the sparklines disappear. The sparklines are canvas elements and they vanish from the DOM as soon as the grid is sorted. Here is my code...

function getLimitedKPIListCallback(result) {
$("#grid").kendoGrid({
dataSource: {
data: result.d,
schema: {
model: {
fields: {
ClientID: { type: "string" },
ClientName: { type: "string" },
RegionDisplay: { type: "string" },
ClientIndexRating: { type: "number" },
ChrgKPI: { type: "number" },
PymtKPI: { type: "number" },
RevKPI: { type: "number" }
}
}
}
},
navigatable: true,
scrollable: true,
sortable: {
mode: "multiple"
},
groupable: true,
resizable: true,
filterable: true,
reorderable: true,
selectable: "row",
columns: [
{
field: "ClientID",
title: "Client ID",
width: 100
},
{
field: "ClientName",
title: "Client Name",
width: 300
},
{
field: "RegionDisplay",
title: "Region",
width: 90
},
{
field: "ClientIndexRating",
title: "Rating",
width: 100
},
{
field: "ChrgKPI",
title: "Charges vs. KPI",
width: 100,
format: "{0:n2}"
},
{
title: "Charge History<br/>Last 30 Days",
sortable: false,
filterable: false,
groupable: false,
template: "<div id='chargeSum-${DataSourceID}-${ClientID}'></div>"
},
{
field: "PymtKPI",
title: "Payment vs. KPI",
width: 100,
format: "{0:n2}"
},
{
field: "RevKPI",
title: "Revenue vs. KPI",
width: 100,
format: "{0:n2}"
}
]
});

var kpiList = result.d;
$.each(kpiList, function (ii) {
getChargeTotalsByCreationDate(kpiList[ii].DataSourceID, kpiList[ii].ClientID);
});

}

function getChargeTotalsByCreationDate(dataSourceID, clientID) {
$.ajax({
type: "POST",
contentType: "application/json",
url: "Services/ChargeActive.asmx/GetChargeTotalsByCreationDate",
dataType: "json",
data: "{ 'dataSourceID' : '" + dataSourceID + "', 'clientID' : '" + clientID + "', 'lastXDays' : " + 30 + " }",
success: function (msg) {
getChargeTotalsByCreationDateCallback(msg, dataSourceID, clientID);
},
error: errorHandler
});
}

function getChargeTotalsByCreationDateCallback(result, dataSourceID, clientID) {
var ca = result.d;
if (ca.length > 0) {
var sparkVals = [];
$.each(ca, function(ii){
sparkVals.push(ca[ii].BaseFee);
});
$("#chargeSum-" + dataSourceID + "-" + clientID).sparkline(sparkVals);
}
}

Grid

answered on 17 Jul 2012

3 answers

92 views

Where Did My Topic Go?

Hi,

I got an email from Kendo because there was a new reply posted to my topic - http://www.kendoui.com/forums/dataviz/beta/documentation-for-q2-beta.aspx, but I can't find it anymore. It was in the 'Beta' forum, but it seems to be moved completely. Can you put it back?

Best regards,
Jacob Ras.

General Discussions

answered on 17 Jul 2012

3 answers

158 views

Menu Direction parameter not working

Hello,

I am using the menu control in version v2011.3.1129. When using this I cannot seem to get the direction parameter of the menu to work at all. No matter what I set it to it does not seem to obey that parameter. I have attached a file demonstrating this behavior.

Menu

answered on 17 Jul 2012

0 answers

105 views

Grid use checkbox for 0/1 value

I am trying to give my grid a column to display status like on/off. This is stored in my DB as 0/1.
A simple check mark for 1 or empty box for zero is perfect.
I feel sure this is simple and my google-fu is failing me.

Any help is appreciated.

PS: I am loving kendo, I have been tring to find a decent UI framework for a long time and have found that kendo is great.

Grid

asked on 17 Jul 2012

1 answer

107 views

What is equilvent of this

how to write this in kendo UI web ?

$.ajax({
  url: 'ajax/test.html',
  success: function(data) {
    $('.result').html(data);
    alert('Load was performed.');
  }
});

Data Source

answered on 17 Jul 2012

0 answers

358 views

A better MVVM example

I revised the MVVM example index.html that ships with Kendo UI Web. The form element is host to the kendo controls instead of the browser's controls. This example also includes sample validation logic. Hope this helps someone:

<!DOCTYPE html>
<html>
<head>
<title>Basic usage</title>
<script src="../../../js/jquery.min.js"></script>
<script src="../../../js/kendo.web.min.js"></script>
<script src="../../content/shared/js/console.js"></script>
<link href="../../../styles/kendo.common.min.css" rel="stylesheet" />
<link href="../../../styles/kendo.default.min.css" rel="stylesheet" />
</head>
<body>
<a href="../index.html">Back</a>
<div id="example" class="k-content">
<div class="current-state">
<h4>Current view model state:</h4>
<pre>
{
firstName: <span data-bind="text: ds.firstName"></span>,
lastName: <span data-bind="text: ds.lastName"></span>,
gender: <span data-bind="text: ds.gender.value"></span>,
agreed: <span data-bind="text: ds.agreed"></span>
}
</pre>
</div>
<div class="registration">
<form>
<ul>
<li><label for="fname">First Name:</label><input id="fname" name="fname" data-bind="value: ds.firstName" /></li>

<li><label for="lname">Last Name:</label><input type="text" id="lname" name="lname" required="required" pattern="^[S|s][A-Za-z].*$" validationmessage="Last name must begin with 'S'." data-bind="value: ds.lastName" /><span class="k-invalid-msg" data-for="lname"></span></li>
<li>
<label for="gender">Gender:</label>
<input id="gender" name="gender" type="text" required="required" data-bind="source: genders, value: ds.gender" validationmessage="Gender is required."></select><span class="k-invalid-msg" data-for="gender"></span>
</li>
</ul>

<div style="padding-top: 11px; margin: 0 auto;">
<input type="checkbox" id="agree" data-bind="checked: ds.agreed" /> <label for="agree">I have read the license agreement.</label><br />
<div style="padding-top: 4px; float: left;" >
<button id="btnRegister" data-bind="click: register, enabled: enableBasedOnAgree" class="k-button">Register</button>
</div>
</div>
</form>
</div>
<div class="confirmation" data-bind="visible: ds.confirmed">
Thank you for your registration, <span data-bind="text: ds.firstName"></span> <span data-bind="text: ds.lastName"></span>
<br />
<button data-bind="click: startOver">Start Over</button>
</div>
<script>
$(document).ready(function () {
var genderCollection = [{ description: "Guy", value: "Male" }, { description: "Girl", value: "Female"}];
var genderElement = ('input[id*="gender"]');

$(genderElement).width(($("#fname").width() + 2));
$(genderElement).css("margin-left", "-2px");
$(genderElement).kendoComboBox({ dataValueField: "value", dataTextField: "description" });

var viewModel = kendo.observable({
genders: genderCollection,
enableBasedOnAgree: function (e) {
if (this.get("ds.agreed") == true) {
$("#btnRegister").attr('class', 'k-button');
return true;
} else {
$("#btnRegister").attr('class', 'k-button k-state-disabled');
return false;
}
},
register: function (e) {
e.preventDefault();
this.set("ds.confirmed", true);
},
startOver: function () {
this.set("ds.confirmed", false);
this.set("ds.agreed", false);
this.set("ds.gender", { description: "Girl", value: "Female" });
this.set("ds.firstName", "Cyndi");
this.set("ds.lastName", "Watson");
},
ds: new kendo.data.DataSource({
schema: {
model: {
fields: {
firstName: {
type: "String",
defaultValue: "John"
},
lastName: {
defaultValue: "Doe",
type: "String"
},
gender: {
type: "String",
defaultValue: "Male"
},
agreed: {
defaultValue: false,
type: "Boolean"
},
confirmed: {
type: "Boolean",
defaultValue: false
}
}
}
}
})
});

kendo.bind($("#example"), viewModel);
viewModel.startOver();

// working example of how to get a viewModel value
//
// alert(viewModel.get("ds.firstName"));
var formValidator = $("#example").kendoValidator().data("kendoValidator");

// working custom validation rule inside of kendoValidator //
/*
var formValidator = $("#example").kendoValidator({
rules: {
lastName: function (input) {
var isValidated = true;
var lNameValue = input.val();

if ($(input).attr('name') == 'lname') {
if ((lNameValue != undefined) && (lNameValue.length > 0)) {
if (lNameValue.toLowerCase().indexOf("s") != 0) {
isValidated = false;
}
}
}

return isValidated;
}
}
}).data("kendoValidator");
*/

// working code required for validating kendoComboBox object input //
//
$("span.k-dropdown-wrap").focusout(function () {
console.log('Going to validate now upon focusout event ...');
formValidator.validate();
});

});
</script>

<div class="source code-sample">
<h4 class="code-title">View (old) source code:</h4>
<pre class="prettyprint">
<form>
<label>First Name: <input data-bind="value: firstName" /></label>
<label>Last Name: <input data-bind="value: lastName" /></label>
<label>Gender:
<select data-bind="source: genders, value: gender"></select>
</label>
<label><input type="checkbox" data-bind="checked: agreed" /> I have read the licence agreement</label>
<button data-bind="enabled: agreed, click: register">Register</button>
<div data-bind="visible: confirmed">
<h4>Confirmation</h4>
<div>
Thank you for your registration, <span data-bind="text: firstName"></span> <span data-bind="text: lastName"></span>
<br /><br />
<button data-bind="click: startOver">Start Over</button>
</div>
</div>
</form>
</pre>
</div>
<div class="source code-sample">
<h4 class="code-title">View model source code:</h4>
<pre class="prettyprint">
var viewModel = kendo.observable({
firstName: "John",
lastName: "Doe",
genders: ["Male", "Female"],
gender: "Male",
agreed: false,
confirmed: false,
register: function(e) {
e.preventDefault();

this.set("confirmed", true);
},
startOver: function() {
this.set("confirmed", false);
this.set("agreed", false);
this.set("gender", "Male");
this.set("firstName", "John");
this.set("lastName", "Doe");
}
});

kendo.bind($("form"), viewModel);
</pre>
</div>

<style scoped>
.current-state {
float: right;
width: 200px;
margin: 60px 85px 0 0
}

.current-state pre {
font-size: 12px;
}

.registration h3 {
font-size: 2.5em;
color: #787878;
border-bottom: 1px solid #ccc;
}

.registration {
float: left;
clear: left;
width: 500px;
height: 131px;
margin: 30px 0 30px 30px;
padding: 60px 0 30px 30px;
background: url('../../content/web/mvvm/regForm.png') transparent no-repeat 0 0;
}

.registration ul {
list-style: none;
margin: 0;
padding: 0;
}

.registration li {
height: 28px;
vertical-align: middle;
color: #000;
}

.registration ul label {
display: inline-block;
width: 100px;
text-align: right;
padding-right: 5px;
color: #000;
}

.registration label {
color: #000;
}

.registration ul input {
border: 1px solid #ddd;
}

.registration button {
float: right;
margin-right: 85px;
}

.confirmation {
float: left;
clear: left;
width: 274px;
height: 65px;
margin: 30px 0 30px 30px;
padding: 20px 30px;
background: url('../../content/web/mvvm/confirm.png') transparent no-repeat 0 0;
text-align: center;
}

.code-details > ul {
list-style: none;
margin: 0;
padding: 0;
}

.code-details li
{
height: 26px;
line-height: 22px;
vertical-align: middle;
}

.code-details {
padding: 1em;
}

.source {
clear: both;
}
</style>
</div>
</body>
</html>

Dan

MVVM

asked on 16 Jul 2012

1 answer

140 views

Q2 Upgrade Issues

We recently upgraded to the latest version of Kendo, and the app that we are working on seems to have some rendering issues when changing tabs. To rule out my code being the issue I took the tab demo and it is having the same issue, see attached image. Demo app also freezes on me when I click through the tabs. Thoughts?

Image displays what is first seen, and after page refresh.

General Discussions

answered on 16 Jul 2012