javascript - KendoUI grid not showing up with the data on the screen -


hi developing angular 2 application kendo ui controls. following example of kendo ui site set kendo grid. reason there no errors nothing showing on screen. data stored in local products.js file referred in application , bound datasource. please see code below

product.html

    <!doctype html>     <html>        <head>         <title></title>          <link href="../../assets/css/kendo/2016.3.1028/kendo.common.min.css" rel="stylesheet" />         <link href="../../assets/css/kendo/2016.3.1028/kendo.default.min.css" rel="stylesheet"/>         <link href="../../assets/css/kendo/2016.3.1028/kendo.default.mobile.min.css" rel="stylesheet" />         <script src="../../scripts/kendo/2016.3.1028/jquery.min.js"></script>         <script src="../../scripts/kendo/2016.3.1028/kendo.all.min.js"></script>      </head>     <body>          <script src="../../scripts/shared/products.js"></script>         <div id="example">                  <div id="grid"></div>              <script>                 $(document).ready(function () {                     $("#grid").kendogrid({                         datasource: {                             data: products,                             schema: {                                 model: {                                     fields: {                                         productname: { type: "string" },                                         unitprice: { type: "number" }                                      }                                 }                             },                             pagesize: 20                         },                         height: 550,                         scrollable: true,                         sortable: true,                         filterable: true,                         pageable: {                             input: true,                             numeric: false                         },                         columns: [                             { field: "productname", title: "units in stock", width: "130px" },                             { field: "unitprice", title: "unit price", format: "{0:c}", width: "130px" },                          ]                     });                 });             </script>          </div>       </body>      </html>

products.js

var products = [{     productid : 1,     productname : "chai",     supplierid : 1,     categoryid : 1,     quantityperunit : "10 boxes x 20 bags",     unitprice : 18.0000,     unitsinstock : 39,     unitsonorder : 0,     reorderlevel : 10,     discontinued : false,     category : {         categoryid : 1,         categoryname : "beverages",         description : "soft drinks, coffees, teas, beers, , ales"     } }, {     productid : 2,     productname : "chang",     supplierid : 1,     categoryid : 1,     quantityperunit : "24 - 12 oz bottles",     unitprice : 19.0000,     unitsinstock : 17,     unitsonorder : 40,     reorderlevel : 25,     discontinued : false,     category : {         categoryid : 1,         categoryname : "beverages",         description : "soft drinks, coffees, teas, beers, , ales"     } }];

i have verified references javascript , css files , seem right. have tried check if there errors in console window using developer tools.

i don't see problem code.

could please provide info browser using , file structure of project? using complicated paths js , css files.

anyway i've setup 2 working examples you.

  1. codepen: http://codepen.io/xszaboj/pen/xnnkev
  2. github project github link

i doesn't answer question why don't see errors on page. hope help.

code same yours:

$(document).ready(function () {     $("#grid").kendogrid({         datasource: {             data: products,             schema: {                 model: {                     fields: {                         productname: { type: "string" },                         unitprice: { type: "number" }                      }                 }             },             pagesize: 20         },         height: 550,         scrollable: true,         sortable: true,         filterable: true,         pageable: {             input: true,             numeric: false         },         columns: [             { field: "productname", title: "units in stock", width: "130px" },             { field: "unitprice", title: "unit price", format: "{0:c}", width: "130px" },          ]     }); });

here firefox network capture. please include yours github project compare? firefox network


-

Comments

Post a Comment

Popular posts from this blog

java - SSE Emitter : Manage timeouts and complete() -

i writing web app multiple listeners(evcentsource sse clients js) connected server . want store sse emitter per connected listener : can done in memory or other means assigning id each client able achieve far now question ; how send response/event specific client connected web app ? while doing sseemmiters stored either getting completed or timed out. how prevent ? how keep sseemmiter available open infinite time (till client closes) , send events selectively .
Read more

jquery - uncaught exception: DataTables Editor - remote hosting of code not allowed -

i'm trying implement crud operation using datatableseditor using datatables.but i'm getting error messages: 1)uncaught exception: datatables editor - remote hosting of code not allowed. please see http://editor.datatables.net details on how purchase editor license 2)typeerror: a.editor undefined 3) $.fn.datatable.editor not constructor" what reason? here configuration: <%@ page language="java" contenttype="text/html; charset=iso-8859-1" pageencoding="iso-8859-1"%> <!doctype html public "-//w3c//dtd html 4.01 transitional//en" "http://www.w3.org/tr/html4/loose.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <title>insert title here</title> <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.12/css/jquery.datatables.min.css"> <link re...
Read more

java - How to resolve error - package com.squareup.okhttp3 doesn't exist? -

i trying convert json java object use of gson in maven, following youtube video guidance - https://www.youtube.com/watch?v=vqgghm9pwe0 , theres error occurs when in main class error - package com.squareup.okhttp3 doesn't exist. code below: java package com.codebeasty.json; import com.squareup.okhttp3.okhttpclient; public class main { private static okhttpclient client = new okhttpclient(); public static void main (string [] args) { } } i put in dependency in pom.xml: <dependencies> <dependency> <groupid>com.squareup.okhttp3</groupid> <artifactid>okhttp</artifactid> <version>3.4.2</version> </dependency> <dependency> <groupid>com.google.code.gson</groupid> <artifactid>gson</artifactid> <version>2.8.0</version> </dependency> </dependencies> i dont understand why doesn't recognize com.squareup. there may need download? have downl...
Read more