javascript - Why tree view not rendered in div is it DOM element positioning error? -
i trying render tree childs in div using javascript , html. wondering why not rendering given objects created , fine in read of tree , parent json (see "data" in code).
note:i have layout.cshtml , shares top menu "application name" @ top , http://prntscr.com/7czhas
could 1 please let me know why tree don't appear in div id:jqxtree
my code 2nd edit: trying render tree childs in div using javascript , html. wondering why not rendering given objects created , fine in read of tree , parent json (see "data" in code).
could 1 please let me know why tree don't appear in div id:jqxtree
my code 2nd edit:
@{ viewbag.title = "treecreation"; } <h2>treecreation</h2> <head> <title></title> <script src="~/bootstrap/js/livemap/ajax/jsonstringcarryingdata/jqx-all.js"></script> <link href="~/bootstrap/css/livemap/jqx.base.css" rel="stylesheet" /> <link href="~/bootstrap/css/livemap/jqx.energyblue.css" rel="stylesheet" /> </head> <body> <div id='jqxtree' style="background-color:green; height:400px;width:200px;"> </div> <script type="text/javascript"> var data = [ { "text": "chocolate beverage", "id": "1", "parentid": "-1" }, { "id": "2", "parentid": "1", "text": "hot chocolate" }, { "id": "3", "parentid": "1", "text": "peppermint hot chocolate" }, { "id": "4", "parentid": "1", "text": "salted caramel hot chocolate" }, { "id": "5", "parentid": "1", "text": "white hot chocolate" }, { "id": "6", "text": "espresso beverage", "parentid": "-1" }, { "id": "7", "parentid": "6", "text": "caffe americano" }, { "id": "8", "text": "caffe latte", "parentid": "6" }, { "id": "9", "text": "caffe mocha", "parentid": "6" }, { "id": "10", "text": "cappuccino", "parentid": "6" }, { "id": "11", "text": "pumpkin spice latte", "parentid": "6" }, { "id": "12", "text": "frappuccino", "parentid": "-1" }, { "id": "13", "text": "caffe vanilla frappuccino", "parentid": "12" }, { "id": "15", "text": "450 calories", "parentid": "13" }, { "id": "16", "text": "16g fat", "parentid": "13" }, { "id": "17", "text": "13g protein", "parentid": "13" }, { "id": "14", "text": "caffe vanilla frappuccino light", "parentid": "12" }] function run() { // alert('inside buidldata'); var source = []; var items = []; // build hierarchical source. alert('data length:' + data.length); (i = 0; < data.length; i++) { var item = data[i]; var label = item["text"]; var parentid = item["parentid"]; var id = item["id"]; if (items[parentid]) { var item = { parentid: parentid, label: label, item: item }; if (!items[parentid].items) { items[parentid].items = []; } items[parentid].items[items[parentid].items.length] = item; items[id] = item; } else { items[id] = { parentid: parentid, label: label, item: item }; source[id] = items[id]; } } return source; } // create jqxtree var source = run(); alert('source:' + source); $('#jqxtree').jqxtree( { source: source, width: '350px' }); </script> </body> it gives 2 errors http://prntscr.com/7czj92 , makes me feel there problem in jqx-all.js file copy , pasted link http://jqwidgets.com/public/jqwidgets/jqx-all.js . please me stuck here since last 4 days
add reference required js files. i.e http://jqwidgets.com/public/jqwidgets/jqx-all.js - contain source jq widgets.
the files required jqx-all.js, jqx.base.css , jqx.energyblue.css. add reference files shown below.
<script type='text/javascript' src="jqx-all.js"></script> <link rel="stylesheet" type='text/css' href='jqx.base.css'> <link rel="stylesheet" type='text/css' href='jqx.energyblue.css'> note : above code assuming required files in same folder current html.
if using jqxtree, specific files vendor.
please refer working fiddle here http://jsfiddle.net/sherin81/ccegq/274/ external resources section on left pane show references required run code.
Comments
Post a Comment