jQWidgets Forums
Forum Replies Created
-
Author
-
Hi Peter,
I think benitocas88 has a point. I am using spreadsheetgrid, and although I put validation as numberinput in grid if you paste strings from excel it will appear in grid. I made my custom validation an I need to remove validation messages one by one, after correcting input.
$(".jqx-grid-validation, .jqx-grid-validation-arrow-up, .jqx-grid-validation-arrow-down").remove();
this will remove all validation messages from grid after editing only one cell.
thanksHi Dimitar,
That is true, and that was the problem Thank you for that.
I have another question. I would like to create another dataAdapter with same json data as posted above, but I would like to get children data of technologies. I was able to populate dataAdapter but only for the first element od data.json filevar source2 = { root: "0>technologies>technology", datatype: 'json', url: 'data.json', async: false, datafields: [ { name: 'tech', map: 'tech', type: 'decimal' }, { name: 'InstalledPower', map: 'InstalledPower', type: 'decimal' }, { name: 'CF', map: 'CF', type: 'decimal' }, ], };How can I get elements (tec, InstalledPower, CF) for all tree elements of json (all three years)
Thank you againHi Dimitar,
This works fine but I am still not able to get what I want.
Is there a way to use dataAdapter’s records as stand-alone.
I just want to see records, simple example below.<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>This example shows how to display nested Grid plugins.</title> <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="scripts/jquery-1.11.3.min.js"></script> <script type="text/javascript" src="jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="jqwidgets/jqxdata.js"></script> <script type="text/javascript"> $(document).ready(function () { var source = { datafields: [ { name: 'year', type: 'int' }, { name: 'ED', type: 'int' }, { name: 'LF', type: 'decimal' }, { name: 'PMAX', type: 'decimal' } ], datatype: 'json', url: 'data.json', async: false, }; var adapter = new $.jqx.dataAdapter(source); adapter.dataBind(); var recordi = adapter.records; console.log(recordi); }); </script> </head> <body class='default'> </body> </html>data.json file is
[ { "year": "2000", "ED": "51", "LF": "1.21839", "PMAX": "8", "technologies": { "technology": [ { "tech": "Solar", "InstalledPower": "2.500000", "CF": "2.500000" }, { "tech": "Wind", "InstalledPower": "39.000000", "CF": "39.000000" }, { "tech": "Hydro", "InstalledPower": "35.000000", "CF": "39.000000" } ] } }, { "year": "2010", "ED": "92", "LF": "2.60137", "PMAX": "2", "technologies": { "technology": [ { "tech": "Solar", "InstalledPower": "32.000000", "CF": "45.000000" }, { "tech": "Wind", "InstalledPower": "14.000000", "CF": "30.000000" } ] } }, { "year": "2020", "ED": "62", "LF": "2.60137", "PMAX": "2", "technologies": { "technology": [ { "tech": "Solar", "InstalledPower": "32.000000", "CF": "45.000000" }, { "tech": "Wind", "InstalledPower": "14.000000", "CF": "30.000000" } ] } } ];sorry to bother you, but it seems like something very simple an if I use loacaldata with same code everything works great.
thank youHi Dimitar,
thank you for your prompt answer. I am not using it stand-alone, now I gor two get responses but still records are empty.
I will post shorter version of code with sample data.<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>This example shows how to display nested Grid plugins.</title> <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="scripts/jquery-1.11.3.min.js"></script> <script type="text/javascript" src="jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="jqwidgets/jqxdata.js"></script> <script type="text/javascript"> $(document).ready(function () { var source = { datafields: [ { name: 'year', type: 'int' }, { name: 'ED', type: 'int' }, { name: 'LF', type: 'decimal' }, { name: 'PMAX', type: 'decimal' } ], datatype: 'json', url: 'data.json', async: false, }; var adapter = new $.jqx.dataAdapter(source); adapter.dataBind(); var recordi = adapter.records; console.log(recordi); }); </script> </head> <body class='default'> <div id="jqxgrid"> </div> </body> </html>and Data sample data.json
[ { "year": "2000", "ED": "51", "LF": "1.21839", "PMAX": "8", "technologies": { "technology": [ { "tech": "Solar", "InstalledPower": "2.500000", "CF": "2.500000" }, { "tech": "Wind", "InstalledPower": "39.000000", "CF": "39.000000" }, { "tech": "Hydro", "InstalledPower": "35.000000", "CF": "39.000000" } ] } }, { "year": "2010", "ED": "92", "LF": "2.60137", "PMAX": "2", "technologies": { "technology": [ { "tech": "Solar", "InstalledPower": "32.000000", "CF": "45.000000" }, { "tech": "Wind", "InstalledPower": "14.000000", "CF": "30.000000" } ] } }, { "year": "2020", "ED": "62", "LF": "2.60137", "PMAX": "2", "technologies": { "technology": [ { "tech": "Solar", "InstalledPower": "32.000000", "CF": "45.000000" }, { "tech": "Wind", "InstalledPower": "14.000000", "CF": "30.000000" } ] } } ];Thank you.
best regardsApril 18, 2016 at 12:50 pm in reply to: jqx grid in jqxWindow takes too long to render jqx grid in jqxWindow takes too long to render #83593Hi Ivailo,
That is true. Now it works great and it was obvious, but it really did not cross my mind.
Thanks a lot!
Best
February 2, 2016 at 9:28 am in reply to: dropdownlist and dataapter dropdownlist and dataapter #81005Thanks Hristo!
Now it works!January 24, 2016 at 5:04 pm in reply to: line jqx chart with json data line jqx chart with json data #80719Ivailo thanks a lo for your help. Everything works great!!!
January 20, 2016 at 4:36 pm in reply to: line jqx chart with json data line jqx chart with json data #80593Hi Ivailo,
Thank you for your reply.
Actually I wanted to avoid “for loop” since I have 8760 rows in it (performace issue)…
May be I will create appropriate json before actual plotting chart…I have one small question. Since I am getting my json in dataAdapter, could you please help me coonvert it to array in LoadComple or shuold I use beforeLoadComplete…
var myURL ='chart.json'; var source = { url: myURL, datatype: 'json', cache: false, async: true, }; var dataAdapter = new $.jqx.dataAdapter(source, { autoBind: true, beforeLoadComplete: function(records) { var sampleData = []; var sampleLength = Object(records).length; for(var i=0; i<sampleLength; i++){ j="H" + (i+1); var k = {}; k.a = records[j]; k.b = j; sampleData.push(k); } return sampleData; } });then I use SampleData as my source for jqxChart.
Thank you very much
Hi,
Sorry to bother you again with same issue, but the chart is little bit different now. It losses nice color rounding in tooltips, and it gets black borders in stacked columns. Here is code, try it with latest jqxwidgets and jqxwidgets3.0.4 I think and you will see difference.
Thanks<script type="text/javascript"> $(document).ready(function () { //prepare chart data var sampleData = [ {"year":"1990","Electricity":"25.00","Coal":"22.00","Oil":"15.00","Gas":"17.00","Biofuels":"5.00","Heat":"5.00","Peat":"3.00","Waste":"3.00","Oil_shale":"5.00"}, {"year":"2000","Electricity":"22.00","Coal":"18.00","Oil":"13.00","Gas":"18.00","Biofuels":"6.00","Heat":"4.00","Peat":"4.00","Waste":"10.00","Oil_shale":"5.00"}, {"year":"2010","Electricity":"28.00","Coal":"20.00","Oil":"12.00","Gas":"22.00","Biofuels":"7.00","Heat":"5.00","Peat":"0.00","Waste":"6.00","Oil_shale":"0.00"}, {"year":"2020","Electricity":"27.00","Coal":"15.00","Oil":"10.00","Gas":"25.00","Biofuels":"10.00","Heat":"8.00","Peat":"0.00","Waste":"5.00","Oil_shale":"0.00"}, {"year":"2030","Electricity":"27.00","Coal":"10.00","Oil":"5.00","Gas":"23.00","Biofuels":"15.00","Heat":"10.00","Peat":"0.00","Waste":"10.00","Oil_shale":"0.00"}, {"year":"2040","Electricity":"27.00","Coal":"10.00","Oil":"5.00","Gas":"23.00","Biofuels":"15.00","Heat":"10.00","Peat":"0.00","Waste":"10.00","Oil_shale":"0.00"}, {"year":"2050","Electricity":"27.00","Coal":"10.00","Oil":"5.00","Gas":"23.00","Biofuels":"15.00","Heat":"10.00","Peat":"0.00","Waste":"10.00","Oil_shale":"0.00"} ]; var settings_chart = { title: 'Final energy demand by sectors', //description: final_energy_demand_fuel_shares + ' ' + sector, description: '', enableAnimations: true, showLegend: true, theme: theme, padding: { left: 5, top: 5, right: 5, bottom: 5 }, titlePadding: { left: 90, top: 0, right: 0, bottom: 10 }, source: sampleData, categoryAxis: { text: 'Category Axis', type: 'basic', textRotationAngle: 0, dataField: 'year', showTickMarks: true, tickMarksInterval: 1, tickMarksColor: '#888888', unitInterval: 1, showGridLines: false, gridLinesInterval: 1, gridLinesColor: '#888888', axisSize: 'auto' }, colorScheme: 'scheme01', seriesGroups: [ { type: 'stackedcolumn', columnsGapPercent: 100, seriesGapPercent: 5, valueAxis: { unitInterval: 20, minValue: 0, maxValue: 'auto', displayValueAxis: true, description: '%', axisSize: 'auto', tickMarksColor: '#888888' }, series: [ { dataField: 'Electricity', displayText: electricity, color: clElectricity}, { dataField: 'Coal', displayText: coal, color: clCoal}, { dataField: 'Oil', displayText: oil, color: clOil}, { dataField: 'Gas', displayText: gas, color: clGas}, { dataField: 'Biofuels', displayText: biofuels, color: clBiofuels}, { dataField: 'Heat', displayText: heat, color: clHeat}, { dataField: 'Peat', displayText: peat, color: clPeat}, { dataField: 'Waste', displayText: waste, color: clWaste}, { dataField: 'Oil_shale', displayText: oil_shale, color: clOil_shale}, ] // series: series_fuels } ] }; //kraj settinga za chart // setup the chart $('#jqxChart').jqxChart(settings_chart); }); </script> </head> <body style="background:white;"> <div id='jqxChart' style="width:600px; height: 400px"/> </body> </html>It works!!!
Thanks Peter!Yeah I did and it works now on tablet as well,but I just wanted to report to you that it is actually working on PC with SelectedIndex…???
Thanks a lot for your help!Thanks Peter.
I see your point, but this code works perfectly well on PC…$("#ddlyears").jqxDropDownList({ source: ddlYears, theme: theme, selectedIndex: -1, width: '260px', height: '25px', promptText: please_select_years, checkboxes: true }); $("#Submit").jqxButton({ width: '150', height: '25',theme: theme}); $('#Submit').on('click', function (event) { event.preventDefault(); $('#case').jqxValidator('validate'); }); $('#case').jqxValidator({ rules: [ { input: "#ddlyears", message: select_one_year, action: 'blur', rule: function (input, commit) { var index = $("#ddlyears").jqxDropDownList('getSelectedIndex'); return index != -1; return 1; } } ] });Hi Dimitar,
Are you planning to develop patch for this behavior?
Or can you suggest any workaround?
Thanks a lot!Hi,
Thank you Dimitar, but I did just like in your demo, but is not working.
Could you please check this page (years 2040 AND 2050)
http://www.gledajonline.com/index.php?page=PES_tpes.php
Thank you very much.Thank you Dimitar!
I downloaded new version of jQWidgets (3.2.1). and now it works!
Thanks again!
Best -
AuthorPosts