Questions on Kendo UI for jQuery Forum

1 answer

305 views

remote xml datasource (prestashop webservice)

Hi, i'm new to this forums, and i'm testing your fantastic jquery library.
i've looking for a solution in the forums, but no one found.
I'm using prestashop webservices and i have this code:(modified from one sample)

<!DOCTYPE html>

<html>

<head>

<title>Binding to remote data</title>

<link href="../../content/shared/styles/examples-offline.css" rel="stylesheet">

<link href="../../../styles/kendo.common.min.css" rel="stylesheet">

<link href="../../../styles/kendo.default.min.css" rel="stylesheet">

<script src="../../../js/jquery.min.js"></script>

<script src="../../../js/kendo.web.min.js"></script>

<script src="../../content/shared/js/console.js"></script>

</head>

<body>

<a class="offline-button" href="../index.html">Back</a>

<div id="example" class="k-content">

<div id="grid"></div>

<script type="text/javascript">

$(document).ready(function() {

$("#grid").kendoGrid({

dataSource: new kendo.data.DataSource({

transport: {

// specify the XML file to read. The same as read: { url: "books.xml" }

read: "http://mykey@localhost/orion/api/customers/1"

},

schema: {

// specify the the schema is XML

type: "xml",

// the XML element which represents a single data record

data: "/prestashop/customer",

// define the model - the object which will represent a single data record

model: {

// configure the fields of the object

fields: {

// the "title" field is mapped to the text of the "title" XML element

elid: "id/text()",

// the "author" field is mapped to the text of the "author" XML element

nombre: "firstname/text()",

// the "url" field is mapped to the text of the "url" XML element

apellidos: "lastname/text()",

}

}),

scrollable: false,

sortable: true

});

</script>

</div>

</body>

</html>

and does not work, the screen is blank, but if i change:

read: "http://mykey@localhost/orion/api/customers/1"

with:

read: "1.xml"

that contains de content of "http://mykey@localhost/orion/api/customers/1", that's:

<prestashop>

<customer>

<id>1</id>

<id_default_group xlink:href="http://localhost/orion/api/groups/1">1</id_default_group>

<newsletter_date_add/>

<ip_registration_newsletter/>

<last_passwd_gen readonly="true">2012-06-09 09:05:45</last_passwd_gen>

<secure_key readonly="true">47ce86627c1f3c792a80773c5d2deaf8</secure_key>

<deleted>0</deleted>

<passwd>6f9c2e625d0cc6fe573231821c23859b</passwd>

<lastname>DOE</lastname>

<firstname>John</firstname>

<email>pub@prestashop.com</email>

<note/>

<id_gender>1</id_gender>

<birthday>1970-01-15</birthday>

<newsletter>1</newsletter>

<optin>1</optin>

<active>1</active>

<is_guest>0</is_guest>

<date_add readonly="true">2012-06-09 02:05:45</date_add>

<date_upd readonly="true">2012-06-09 02:05:45</date_upd>

<associations>

<groups node_type="group">

<group xlink:href="http://localhost/orion/api/groups/1">

<id>1</id>

</group>

</groups>

</associations>

</customer>

</prestashop>

it shows one row in the grid.

What can be wrong?. the server is on and the requested page is served in form of xml, but i don't know how to make it work. help me.

Thanks

Data Source

answered on 17 Jul 2012

3 answers

439 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

291 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

254 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

93 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

162 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

106 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

363 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