Hi,
I found exception thrown if a DataViz widget is included in a validation div. The error thrown is:
I tracked the source code: line 11448 in kendo.all.js:
For the SVG object representing chart, element.className does not have method of "indexOf".
I changed it to this to avoid the issue:
Here is my test page (modified from online demo), also attached.
Regards,
Gong
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'
if (element.className.indexOf(INVALIDMSG) > -1) {
I changed it to this to avoid the issue:
if (element.className.indexOf && element.className.indexOf(INVALIDMSG) > -1) {
<!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