
i want to use dataviz and web controls in the same page,so i add
<script src="kendo.web.min.js"></script>
<script src="kendo.dataviz.min.js"></script>
in my html page.
when i creating kendogrid with datasource such as
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "getOperatorsByOrg.do?format=json&orgid=2",
dataType: "json"
}
},
batch: true,
pageSize: 30,
schema: {
model: {
fields: {
userid: { editable: false, nullable: true },
operatorname: { editable: false },
password: { editable: false }
}
}
}
});
$("#"+divname).kendoGrid({
dataSource: dataSource,
pageable: true,
height: 300,
toolbar: ["create"],
columns: [
{ field:"userid",title:"userid" },
{ field: "operatorname",title:"operatorname", width: "150px" },
{ field: "password", title:"password", width: "150px" }]
});
a javascript error is showed:
message: 'undefined' is null or is not an object
row: 8
char: 45249
code: 0
URI: http://localhost:8080/reportproject/views/js/kendo/kendo.web.min.js
and the data in grid can't be showed
when i delete the "<script src="kendo.dataviz.min.js"></script>"
the data can be showed very good
how i can do?
<!DOCTYPE html><html> <head> <title>Test</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /> <meta charset="utf-8" /> <!-- ********** JS ********** --> <script src="js/cordova-2.0.0.js" type="text/javascript" charset="utf-8"></script> <script src="js/jquery.min.js"></script> <script src="js/kendo.all.min.js"></script> <!-- ********** CSS ********** --> <link rel="stylesheet" href="styles/kendo.mobile.all.min.css" type="text/css" /> </head> <body> <!-- ********** Login View ********** --> <div data-role="view" id="loginView" data-title="Login"> <div id="form" > <header data-role="header"> <div data-role="navbar"> <span data-role="view-title"></span> </div> </header> <ul data-role="listview" data-style="inset" data-type="group"> <li> <label for="txtLogin">Login</label><br/> <input id="txtLogin" name="txtLogin" maxlength="20" type="text"/> </li> <li> <a data-role="button" id="btnSubmit" data-icon="globe">Connect</a> </li> </ul> </div> </div> <!-- ********** Another View ********** --> <div data-role="view" id="otherView"> <header data-role="header"> <div data-role="navbar"> <span data-role="view-title" data-bind="text: userName"></span> </div> </header> <ul data-role="listview" data-style="inset" data-type="group"> <li> <span data-bind="text: userName"></span> </li> <li> <span>Displayed?</span> </li> </ul> </div> <script> var app = new kendo.mobile.Application($(document).body, { transition: 'slide' }); var viewModel = kendo.observable({ userName: null }); $("#btnSubmit").click(function() { viewModel.userName = $("#txtLogin").val(); app.navigate("#otherView"); kendo.bind($("#otherView"), viewModel); }); </script> </body></html><!DOCTYPE html><html> <head> <title>Test2</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /> <meta charset="utf-8" /> <!-- ********** JS ********** --> <script src="js/cordova-2.0.0.js" type="text/javascript" charset="utf-8"></script> <script src="js/jquery.min.js"></script> <script src="js/kendo.all.min.js"></script> <!-- ********** CSS ********** --> <link rel="stylesheet" href="styles/kendo.mobile.all.min.css" type="text/css" /> </head> <body> <!-- ********** Login View ********** --> <div data-role="view" id="loginView" data-title="Login"> <div id="form" > <header data-role="header"> <div data-role="navbar"> <span data-role="view-title"></span> </div> </header> <ul data-role="listview" data-style="inset" data-type="group"> <li> <label for="txtLogin">Login</label><br/> <input id="txtLogin" name="txtLogin" maxlength="20" type="text"/> </li> <li> <a data-role="button" id="btnSubmit" data-icon="globe">Connect</a> </li> </ul> </div> </div> <!-- ********** Another View ********** --> <div data-role="view" id="otherView"> <header data-role="header"> <div data-role="navbar"> <span data-role="view-title" data-bind="text: userName"></span> </div> </header> <span data-bind="text: userName"></span> <span>Displayed?</span> </div> <script> var app = new kendo.mobile.Application($(document).body, { transition: 'slide' }); var viewModel = kendo.observable({ userName: null }); $("#btnSubmit").click(function() { viewModel.userName = $("#txtLogin").val(); app.navigate("#otherView"); kendo.bind($("#otherView"), viewModel); }); </script> </body></html><!DOCTYPE html><html> <head> <title>Test</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /> <meta charset="utf-8" /> <!-- ********** JS ********** --> <script src="js/cordova-2.0.0.js" type="text/javascript" charset="utf-8"></script> <script src="js/jquery.min.js"></script> <script src="js/kendo.all.min.js"></script> <!-- ********** CSS ********** --> <link rel="stylesheet" href="styles/kendo.mobile.all.min.css" type="text/css" /> </head> <body> <!-- ********** Another View ********** --> <div data-role="view" id="otherView" data-title="other"> <header data-role="header"> <div data-role="navbar"> <span data-role="view-title"></span> </div> </header> <ul data-role="listview" data-style="inset" data-type="group"> <li> <span>Displayed?</span> </li> <li><a data-role="button" id="btnSubmit2" data-icon="globe">Connect</a></li> </ul> </div> <!-- ********** Login View ********** --> <div data-role="view" id="loginView" data-title="Login"> <div id="form" > <header data-role="header"> <div data-role="navbar"> <span data-role="view-title"></span> </div> </header> <ul data-role="listview" data-style="inset" data-type="group"> <li> <label for="txtLogin">Login</label><br/> <input id="txtLogin" name="txtLogin" maxlength="20" type="text"/> </li> <li> <a data-role="button" id="btnSubmit" data-icon="globe">Connect</a> </li> </ul> </div> </div> <script> var app = new kendo.mobile.Application($(document).body, { transition: 'slide' }); $("#btnSubmit").click(function() { app.navigate("#otherView"); }); $("#btnSubmit2").click(function() { app.navigate("#loginView"); }); </script> </body></html>data-role="listview" data-style="inset" blocks :(