jQWidgets Forums

Tagged: data, data table, datatable, jqxdatatable, local storage, LocalStorage, update, updatebounddata

This topic contains 5 replies, has 2 voices, and was last updated by Michael Gross 9 years, 11 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)

Author

updateBoundData with local Array is not working Posts
May 28, 2015 at 3:29 pm updateBoundData with local Array is not working #71746

Michael Gross
Participant

Hello,
i have a datatable bound to a local array which is build out of a localStorage. A timer is looking after changes in the localstorage. If I update the localStorage, the local Array is rebuild correctly, but the datatable is not refreshed – I put it into a fiddle:

https://jsfiddle.net/jqwidgets/Awb44/

whats going wrong?

Thank you for your assistance,
michael

May 29, 2015 at 5:06 am updateBoundData with local Array is not working #71760

Dimitar
Participant

Hello Michael,

The fiddle you have posted is our own – in it, the updateBoundData method is correctly executed, but there is no visible change to the data table, because the data itself has not been changed.

Please provide us with your own fiddle demonstrating the reported issue.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

May 29, 2015 at 6:14 am updateBoundData with local Array is not working #71764

Michael Gross
Participant

Hello Dimitar,
sorry, the code:
The datatable shows the data correctly after staring the app, after pressing one of the buttons, the localdata are changed. The timer fired the event correctly, but the datatable does no update:

<!DOCTYPE html>
<html lang=”en”>
<head>
<title id=’Description’>Mobile Notification Viewer</title>
<link rel=”stylesheet” href=”/gw/stylesheets/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”/js/jqwidgets-ver3.8.0/scripts/jquery-1.11.1.min.js”></script>
<script type=”text/javascript” src=”/js/jqwidgets-ver3.8.0/jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”/js/jqwidgets-ver3.8.0/jqwidgets/jqxvalidator.js”></script>
<script type=”text/javascript” src=”/js/jqwidgets-ver3.8.0/jqwidgets/jqxexpander.js”></script>
<script type=”text/javascript” src=”/js/jqwidgets-ver3.8.0/jqwidgets/jqxcheckbox.js”></script>
<script type=”text/javascript” src=”/js/jqwidgets-ver3.8.0/jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”/js/jqwidgets-ver3.8.0/jqwidgets/jqxmaskedinput.js”></script>
<script type=”text/javascript” src=”/js/jqwidgets-ver3.8.0/jqwidgets/jqxinput.js”></script>
<script type=”text/javascript” src=”/js/jqwidgets-ver3.8.0/jqwidgets/jqxtooltip.js”></script>
<script type=”text/javascript” src=”/js/jqwidgets-ver3.8.0/jqwidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”/js/jqwidgets-ver3.8.0/jqwidgets/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”/js/jqwidgets-ver3.8.0/jqwidgets/jqxdatatable.js”></script>

<script type=”text/javascript”>
var gettimer = 0;
var localdata = new Array();
$(document).ready(function () {
localStorage.actual = ‘{“msgid”:400,”feld1″:”05:33″,”feld2″:”20:40″,”feld3″:”18″}’;
localdata = getlocaldata();
var localsource =
{
datatype: “array”,
localdata: localdata,
datafields: [
{ name: ‘nr’, type: ‘num’ },
{ name: ‘bez’, type: ‘string’ },
{ name: ‘inhalt’, type: ‘string’ }
]
};
var localAdapter = new $.jqx.dataAdapter(localsource);
$(“#dataTable”).jqxDataTable(
{
autoShowLoadElement: true,
showHeader: false,
columnsHeight: 20,
width: 300,
source: localAdapter,
altRows: true,
pageable: false,
pageSize: 3,
scrollBarSize: 0,
columns: [
{ text: ”, dataField: ‘bez’, width: 100 },
{ text: ”, dataField: ‘inhalt’, width: 200 }
]
});
if (gettimer == 0) {
gettimer = setInterval(function () {
localdata = getlocaldata();
localAdapter.dataBind();
$(“#dataTable”).jqxDataTable(‘updateBoundData’);
alert(‘Update done’);
}, 10000);
};
$(‘#Button1’).on(‘click’, function () {
localStorage.actual = ‘{“msgid”:401,”feld1″:”10:14″,”feld2″:”19:30″,”feld3″:”44″}’;
});
$(‘#Button2’).on(‘click’, function () {
localStorage.actual = ‘{“msgid”:402,”feld1″:”10:19″,”feld2″:”19:40″,”feld3″:”60″}’;
});
$(‘#Button3’).on(‘click’, function () {
localStorage.actual = ‘{“msgid”:403,”feld1″:”10:45″,”feld2″:”19:50″,”feld3″:”89″}’;
});

});
function getlocaldata() {
var records = {};
records = JSON.parse(localStorage.actual);
if (records !== undefined) {
var data = new Array();
var row = {};
row[‘nr’] = 0;
row[‘bez’] = ‘Feld 1’;
row[‘inhalt’] = records[‘feld1’];
data[0] = row;
row = {};
row[‘nr’] = 1;
row[‘bez’] = ‘Feld 2’;
row[‘inhalt’] = records[‘feld2’];
data[1] = row;
row = {};
row[‘nr’] = 2;
row[‘bez’] = ‘Feld 3’;
row[‘inhalt’] = records[‘feld3′];
data[2] = row;
};
return (data);
};

</script>
</head>
<body>

<table bgcolor=’#FFFFFF’ border=’1′>
<tr><td height=’380′ valign=’bottom’>
<div id=”dataTable”>
</div></td></tr>
<tr><td height=’30’ style=”text-align: center;”>
<input type=”button” value=”Update1″ id=”Button1″ />
<input type=”button” value=”Update2″ id=”Button2″ />
<input type=”button” value=”Update3″ id=”Button3″ /></td>
</tr>

</table>
</body>

May 29, 2015 at 6:46 am updateBoundData with local Array is not working #71765

Michael Gross
Participant

I have build my own fiddle – hopefully it works for you: http://jsfiddle.net/drmikegross/rf0rwjLs/

Best Regards
Michael

June 1, 2015 at 7:16 am updateBoundData with local Array is not working #71827

Dimitar
Participant

Hi Michael,

You just need to change:

localdata = getlocaldata();

in the setInterval function to:

localsource.localdata = getlocaldata();

and your example should work as expected.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

June 2, 2015 at 9:12 am updateBoundData with local Array is not working #71897

Michael Gross
Participant

Thank you Dimitar it works perfect in the application!
Author

Posts

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.