This is a migrated thread and some comments may be shown as answers.

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

1 Answer 57 Views

Charts

This is a migrated thread and some comments may be shown as answers.

Lei asked on 27 Aug 2013, 07:10 PM

chart.zip

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

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

1 Answer, 1 is accepted