jQWidgets Forums
Forum Replies Created
-
Author
-
January 25, 2015 at 9:10 am in reply to: What is the right approach? What is the right approach? #65971
Hi – am I correct to understand that there is not a simple way to generate a tree view using arbitrary, valid JSON. I see other online tools that will generate trees with no upfront mappings. they just parse and visually represent the json as tree – ==
Maybe I am missing something?
Excellent. That did it. Thank you!
Robert
Hello Dimitar,
Thank you kindly for your response. I do not get any error from the data adapter. I have used the ‘COFFEE’ example from your site as follows</head> <body> <div id='content'> <script type="text/javascript"> $(document).ready(function () { var theme = ""; var url = 'coffee.json'; //toggle use of this ** see below var data = [ { "id": "2", "parentid": "1", "text": "Hot Chocolate", "value": "$5.2" }, { "id": "3", "parentid": "1", "text": "Peppermint Hot Chocolate", "value": "$4.0" }, { "id": "4", "parentid": "1", "text": "Salted Caramel Hot Chocolate", "value": "$2.4" }, { "id": "5", "parentid": "1", "text": "White Hot Chocolate", "value": "$2.5" }, { "text": "Chocolate Beverage", "id": "1", "parentid": "-1", "value": "$1.1" }, { "id": "6", "text": "Espresso Beverage", "parentid": "-1", "value": "$0.9" }, { "id": "7", "parentid": "6", "text": "Caffe Americano", "value": "$1.2" }, { "id": "8", "text": "Caffe Latte", "parentid": "6", "value": "$3.3" }, { "id": "9", "text": "Caffe Mocha", "parentid": "6", "value": "$2.5" }, { "id": "10", "text": "Cappuccino", "parentid": "6", "value": "$1.5" }, { "id": "11", "text": "Pumpkin Spice Latte", "parentid": "6", "value": "$1.6" }, { "id": "12", "text": "Frappuccino", "parentid": "-1" }, { "id": "13", "text": "Caffe Vanilla Frappuccino", "parentid": "12", "value": "$1.2" }]; // prepare the data var source = { datatype: "json", datafields: [ { name: 'id' }, { name: 'parentid' }, { name: 'text' }, { name: 'value' } ], id: 'id', localdata: data // ** when I use this it works //url: url // if I comment out 'localdata' and use the url it simply hangs }; // create data adapter. var dataAdapter = new $.jqx.dataAdapter(source); // perform Data Binding. dataAdapter.dataBind(); // get the treemap sectors. The first parameter is the item's id. The second parameter is the parent item's id. The 'items' parameter represents // the sub items collection name. Each jqxTreeMap item has a 'label' property, but in the JSON data, we have a 'text' field. The last parameter // specifies the mapping between the 'text' and 'label' fields. var records = dataAdapter.getRecordsHierarchy('id', 'parentid', 'items', [{ name: 'text', map: 'label'}]); $('#treemap').jqxTreeMap({ width: 600, height: 600, source: records, theme: theme, baseColor: '#0afaaa', renderCallbacks: { '*': function (element, data) { if (!data.parent) { element.css({ backgroundColor: '#fff', border: '1px solid #aaa' }); } else { var nThreshold = 105; var bgDelta = (data.rgb.r * 0.299) + (data.rgb.g * 0.587) + (data.rgb.b * 0.114); var foreColor = (255 - bgDelta < nThreshold) ? 'Black' : 'White'; element.css({ color: foreColor }); } } } }); }); </script> <div id='treemap'> </div> </div>I created a ‘coffee.json’ file that mirrors the data array (and is valid json)
[ { "id": "2", "parentid": "1", "text": "Hot Chocolate", "value": "$5.2" }, { "id": "3", "parentid": "1", "text": "Peppermint Hot Chocolate", "value": "$4.0" }, { "id": "4", "parentid": "1", "text": "Salted Caramel Hot Chocolate", "value": "$2.4" }, { "id": "5", "parentid": "1", "text": "White Hot Chocolate", "value": "$2.5" }, { "text": "Chocolate Beverage", "id": "1", "parentid": "-1", "value": "$1.1" }, { "id": "6", "text": "Espresso Beverage", "parentid": "-1", "value": "$0.9" }, { "id": "7", "parentid": "6", "text": "Caffe Americano", "value": "$1.2" }, { "id": "8", "text": "Caffe Latte", "parentid": "6", "value": "$3.3" }, { "id": "9", "text": "Caffe Mocha", "parentid": "6", "value": "$2.5" }, { "id": "10", "text": "Cappuccino", "parentid": "6", "value": "$1.5" }, { "id": "11", "text": "Pumpkin Spice Latte", "parentid": "6", "value": "$1.6" }, { "id": "12", "text": "Frappuccino", "parentid": "-1" }, { "id": "13", "text": "Caffe Vanilla Frappuccino", "parentid": "12", "value": "$1.2" } ]As I say, I see no errors in Firebug, but when I use URL it will not load treemap.
Any further help is greatly appreciated!
Thank you.
RobHi Peter,
Thank you. This worked well!I am trying to get the “raw” data from the jqxDataAdapter records so that I can display it in a [pre] tag. I set the url and successfully populate the dataAdatpter and subsequently the tree. I can ask the tree for its source $(“#treeGrid”).jqxTreeGrid(“source”) and I get the adapter. How do I get the “raw” data? -i.e. the data from the original url
I thought I could simply query dataAdapter.records and execute JSON.stringify to get the original data from the objects to populate my [pre].
Thank you.
RobertHi Peter,
Thank you. This worked well!I am trying to get the “raw” data from the jqxDataAdapter records so that I can display it in a
tag. I set the url and successfully populate the dataAdatpter and subsequently the tree. I can ask the tree for its source $("#treeGrid").jqxTreeGrid("source") and I get the adapter. How do I get the "raw" data? -i.e. the data from the original url I thought I could simply query dataAdapter.records and execute JSON.stringify to get the original data from the objects to populate my. Thank you. Robert
December 17, 2013 at 11:24 pm in reply to: Dynamic Adding to Validator Rules Dynamic Adding to Validator Rules #46666Hello,
Is there support to use the jqxValidator with the jqxGrid/ For example, if one were to auto-populate a grid from a JSON file and then wanted to validate each cell for a specific rule – e.g. email, integer with min 5 chars, etc. Ideally, the cell would highlight to indicate that there is a validation issue.Seems the jqxValidator works on forms but the grid is filled w/div elements so I’m not sure if this is feasible.
Any ideas?
Thanks.
RobHello Dimitar,
Thanks for your prompt response, however the suggestion above did not work. I also tried using the latest version (3.0.4) with the same results. Really not sure what the issue could be. I’ve attached a before/after for reference. Thank you, kindly.
Robert
Quick follow-up – my grid definition looks like this:
$("#jqxgrid").jqxGrid( { width: aWidth, altrows: true, source: dataAdapter, theme: theme, showstatusbar: true, statusbarheight: 60, enabletooltips: true, sortable: true, columnsresize: true, columnsreorder: true, columnsmenu: true, showaggregates: true, columns: [ ........ -
AuthorPosts