Questions on Kendo UI for jQuery Forum

1 answer

50 views

[Bug Report] 2013.2.716 DataViz widgits cause exception on input validation

Hi,

I found exception thrown if a DataViz widget is included in a validation div. The error thrown is:

Uncaught TypeError: Object #<SVGAnimatedString> has no method 'indexOf'

I tracked the source code: line 11448 in kendo.all.js:

if (element.className.indexOf(INVALIDMSG) > -1) {

For the SVG object representing chart, element.className does not have method of "indexOf".

I changed it to this to avoid the issue:

if (element.className.indexOf && element.className.indexOf(INVALIDMSG) > -1) {

Here is my test page (modified from online demo), also attached.

<!DOCTYPE html>

<html>

<head>

<title>Kendo UI Chart with Input Validation Issue</title>

<meta charset="UTF-8">

<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.common.min.css">

<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.default.min.css">

</head>

<body>

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

<div class="chart-wrapper">

<div id="chart"></div>

</div>

<label for="name">Name: </label>

<input type="text" id="name" required />

<span class="k-invalid-msg" data-for="name"></span>

<button id="test">Test</button>

</div>

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

<script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.web.min.js"></script>

<script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.dataviz.min.js"></script>

<script>

(function($){

function createChart() {

$("#chart").kendoChart({

title: {

text: "Site Visitors Stats /thousands/"

},

legend: {

visible: false

},

seriesDefaults: {

type: "bar"

},

series: [{

name: "Total Visits",

data: [56000, 63000, 74000, 91000, 117000, 138000]

}, {

name: "Unique visitors",

data: [52000, 34000, 23000, 48000, 67000, 83000]

}],

valueAxis: {

max: 140000,

line: {

visible: false

},

minorGridLines: {

visible: true

}

},

categoryAxis: {

categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],

majorGridLines: {

visible: false

}

},

tooltip: {

visible: true,

template: "#= series.name #: #= value #"

}

});

}

$(document).ready(function(){

var validator = $('#example').kendoValidator().data('kendoValidator');

createChart();

$(document).bind("kendo:skinChange", createChart);

$('#test').on('click', function(e){

alert('validation: ' + validator.validate());

});

})(jQuery);

</script>

<style scoped>

.chart-wrapper, .chart-wrapper .k-chart {

height: 350px;

}

</style>

</body>

</html>

Regards,

Gong

Charts

answered on 28 Aug 2013

1 answer

247 views

label for form elements

How do I have my form input elements "kendo styled" without having to add then to a <ul><li> element and how do I have the label on top?

http://docs.kendoui.com/getting-started/mobile/forms says that most form elements are supported and styled if added to a mobile view.
However, only if I add form input elements into a <ul><li> hierarchy are they styled automatically:

Styled:
<div data-role="view" data-layout="layout1" data-title="Sign in" id="signin-view">
<ul data-role="listview" data-style="inset">
<li>
<label>Username<input id="txtUsername" type="text" data-bind="value: username" /></label>
</li>

Not styled:
<div data-role="view" data-layout="layout1" data-title="Sign in" id="signin-view">
<input id="txtUsername" type="text" data-bind="value: username" />

General Discussions

answered on 28 Aug 2013

1 answer

233 views

Convert DateTime to Date for Listview group header

Hi,

I am binding a Listview to a service which has a datetime field through a DataSource. I'd like to use the date part of that field as the group header of the list view items so that items with same date value are grouped under the same header. How can I set the DataSource's group property to date part of this field only (group by date only) ?

Regards
Ron Farko

ListView

answered on 28 Aug 2013

1 answer

154 views

Is Data access to the server side synchronous or asynchronous?

Or can it be configured to be either? (We are just trialing the Kendo package at the moment)

This applies to both fetching data and posting back changes.

Thanks
Myles.

Data Source

answered on 28 Aug 2013

3 answers

1.6K+ views

How to attach custom parse and format functions to a grid column?

Hi,
I am new to Kendo.

We have different settings for parsing and formatting data types on the server irrespective of the browser locale(culture). I have custom parsing and formatting code to display the values on the UI.

I am not finding a way to hook up custom parse and format function to the grid column. I am wondering if this is possible?

If this is possible then please point me to the example or the documentation which describes how to do this?

Thanks in advance.

Regards
Vishwa Salgia

Grid

answered on 28 Aug 2013

1 answer

273 views

Problems linking Listview to Detail view

I have been at this for hours! Using the Sushi example as a reference im trying to link the from my list view to the details view by passing the "alert_ID" from my datasource. Please help, im sure it's something simple.

here is my code:

<!DOCTYPE html>
<html>
<head>
<title>IRIS Mobile</title>

<link href="styles/kendo.common.min.css" rel="stylesheet" />
<link href="styles/kendo.default.min.css" rel="stylesheet" />
<link href="styles/kendo.mobile.flat.min.css" rel="stylesheet" />
<link href="styles/IRISmobile.css" rel="stylesheet" type="text/css">

<script src="js/jquery.min.js"></script>
<script src="js/kendo.all.min.js"></script>
</head>
<body>

<div id="alerts_list" data-role="view" data-title="IRIS Alerts" style="background-color: #FFF">
<header data-role="header" >
<div data-role="navbar">
<span data-role="button" data-align="left" data-icon="home" href="#main-menu" data-rel="drawer"></span>
<span data-role="view-title"></span>
<a data-role="button" data-rel="drawer" href="#alert-menu" data-icon="info" data-align="right"></a>
</div>
</header>



<div class="head"> </div>
<ul id="list" data-role="listview" data-source="IRISalerts" data-click="listViewClick" data-template="tmp"></ul>

</div></div>


<div data-role="view" id="details" data-transition="slide" data-layout="default" data-show="showDetailsView" style="background-color: #FFF">
<header data-role="header">
<div data-role="navbar">
<a data-role="backbutton" data-align="left">Back</a>
<span data-role="view-title">Alert Details</span>
</div>
</header>

<div data-role="content">
</div>
</div>


<script id="tmp" type="text/x-kendo-template">
<a class="details-link" data-role="listview-link" href="\#details">
<img class="alertimage" src="http://s215821072.onlinehome.us/irismobile/images/#: degree #.png" />
<div class="listviewdiv">
<h3 class="item-info">#: title #</h3>
<p class="item-title">#: sentDT # <span class="AlertTitle"> :: #: sender # </span></p>

</div>
<a data-role="button" href="\#details" class="listviewbutton" data-icon="mostrecent"></a>
</a>
</script>


<script id="detailTemplate" type="text/x-kendo-template">
<aside>
<img src="http://s215821072.onlinehome.us/irismobile/images/#: degree #.png" />
</aside>
<h2>#: title #</h2>
<p>#: message #</p>

</script>


<script>

//var app = new kendo.mobile.Application();
var IRISalerts = new kendo.data.DataSource({
transport: {
read: {
url: "http://test.irisdispatch.com/public/mobilefunctions.cfc?method=getAlerts&returnformat=plain&user_id=3798559",
dataType: "json", // "jsonp" is required for cross-domain requests; use "json" for same-domain requests
}
},
schema: {
data: "results",
model: {
id: "alert_ID",
fields: {
//field description
}
}
}
});

//Get Details

ds.fetch();

var itemDetailsTemplate = kendo.template($("#detailTemplate").text());

function showDetailsView(e) {
var view = e.view;

ds.fetch(function() {
item = ds.get(view.params.alert_ID);
view.scrollerContent.html(itemDetailsTemplate(item));
kendo.mobile.init(view.content);
});
}
</script>




<div data-role="drawer" id="main-menu">
<div><img src="images/greylogo.png"></div>
<ul data-role="listview">
<li><a href="views/settings.html" data-transition="none">Settings</a></li>
<li><a href="index.html" data-transition="none">Log Out</a></li>
</ul>
</div>



<div data-role="drawer" id="alert-menu" data-position="right" style="width: 80px" data-title="Codes">
<div>
<header data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
</div>
</header>
<img src="images/alertlegend.png" width="100%"/>
</div>


<script>
var app = new kendo.mobile.Application(document.body);
</script>
</body>
</html>

ListView (Mobile)

answered on 28 Aug 2013

1 answer

50 views

# javascript code # in template from kendo.bind or kendo.view

Hi

Is it possible to write JavaScript code in a template - and instantiate the template implicitly by using kendo.Bind OR kendo.View?

<script type="text/x-kendo-template" id="mytemplate">

# for (int i ... ) #

</script>

kendo.bind(jQuery('#mytemplate'), cardsViewModel);

Likewise, as part of a view template:

var cards = new kendo.View('mytemplate', {

wrap: false,

model: cardsViewModel

});

jQuery('#targetelement').html(cards.render());

Because whenever I try and use #, #= or #:, it just renders as text :(
Leads me to believe it only works if you explicitly instantiate as a template:

var inlineTemplate = kendo.template($("#javascriptTemplate").html());

I've only been able to use this notation to successfully render items:

<div data-template="my-template" data-bind="source: myItems">

</div>

<script type="text/x-kendo-template" id="my-template">

<span data-bind="text: this"></span>

</script>

General Discussions

answered on 28 Aug 2013

4 answers

541 views

Changing the labels of x-axis in a scatter line chart

Hello,

I am using scatter line graph and i want to edit the labels of x-axis to name of months (Jan, Feb, March, Apr .... Dec) instead of numbers which are currently rendered. Below is the code and screenshot is attached.

function rceTime() {

$("#chart9").kendoChart({

theme: $(document).data("kendoSkin") || "default",

title: {

text: "Visa Expiry and Contract Expiry in Coming months"

},

dataSource: {

transport: {

read: {

url: "scripts/contractExpiry.json",

dataType: "json"

}

},

legend: {

visible: true,

position: "right"

},

seriesDefaults: {

type: "scatterLine",

},

series: [{

name: "Contract Expiry",

xField: "month",

yField: "day"

},{

name: "Visa Expiry",

xField: "month1",

yField: "day1"

}],

xAxis: {

title: {

text: "Month"

},

max: 12,

},

yAxis: {

title: {

text: "Date of Month"

},

min: 0,

max: 31,

labels: {

format: "{0}"

}

},

tooltip: {

visible: true,

template: "#= dataItem.name #"

}

});

}

Charts

answered on 28 Aug 2013

2 answers

279 views

Autocomplete using Suggest

I would appreciate advice on how to use autocomplete with "suggest" to meet the following user requirements:

key in enough data to cause the desired selection to be suggested in the autocomplete text box and hit enter to navigate to the selection
key in enough data to cause the desired selection to be suggested in the autocomplete text box and click a search buton to navigate to the selection
key in some data and pick one of the autocomplete selections from the list to navigate to the selection
key in data that does not autocomplete and hit enter causing a "not found" dialog to be displayed
key in data causing the drop down to display but then click somewhere else on the screen without any navigation happening

I have been working on this a while and am probably missing something simple. I feel my implementation is too complicated and there should be a simpler way to achieve the requirements above. My example below meets all of the requirements except the last one. I can't find a way to solve the last one and still meet the other requirements. In the example below, I pop an alert instead of navigating for demo purposes. Because of this in a few of the cases it appears to navigate twice but in reality it would only navigate once.

My example is in a jsbin at:
http://jsbin.com/oToy/1/edit?html,output

AutoComplete