jQWidgets Forums
jQuery UI Widgets › Forums › Grid › Grid does not render new data
This topic contains 7 replies, has 2 voices, and was last updated by Vladimir 9 years, 9 months ago.
-
Author
-
I have a standard grid gathered from your website.
I added a field in the status bar sending a value to server.
The returned are correct, but not changed in the grid.
I also added the line
$("#jqxGrid").jqxGrid({ 'updatebounddata' });
just below the line
$("#jqxGrid").jqxGrid({ source: dataAdapter });
–> no change of behavior.Any idea?
Jens
<!DOCTYPE html> <html lang="de"> <head> <link rel="stylesheet" href="jqwidgets/jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="jqwidgets/jqwidgets/styles/jqx.classic.css" type="text/css" /> <link rel="stylesheet" href="jqwidgets/jqwidgets/styles/jqx.metrodark.css" type="text/css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script> <script type="text/javascript" src="jquery-validation/dist/jquery.validate.js"></script> <script type="text/javascript" src="jquery-validation/src/localization/messages_de.js"></script> <script type="text/javascript" src="jquery-validation/src/localization/methods_de.js"></script> <script type="text/javascript" src="jqwidgets/jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="jqwidgets/jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="jqwidgets/jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="jqwidgets/jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="jqwidgets/jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="jqwidgets/jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="jqwidgets/jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="jqwidgets/jqwidgets/jqxgrid.js"></script> <script type="text/javascript" src="jqwidgets/jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="jqwidgets/jqwidgets/jqxgrid.selection.js"></script> <script type="text/javascript" src="jqwidgets/jqwidgets/jqxgrid.edit.js"></script> <script type="text/javascript" src="jqwidgets/jqwidgets/jqxgrid.pager.js"></script> <script type="text/javascript" src="jqwidgets/jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="jqwidgets/jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="jqwidgets/jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="jqwidgets/jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="jqwidgets/jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="jqwidgets/jqwidgets/jqxnotification.js"></script> <script type="text/javascript" src="jqwidgets/jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="jqwidgets/jqwidgets/jqxchart.core.js"></script> <script type="text/javascript" src="jqwidgets/jqwidgets/jqxchart.rangeselector.js"></script> <style> .jqx-notification-container { z-index:99999; } .jqx-chart-axis-text, .jqx-chart-label-text, .jqx-chart-legend-text, .jqx-chart-axis-description, .jqx-chart-title-text, .jqx-chart-title-description { fill: #ffffff; color: #ffffff; } html, body { height: 100%; } #jqxSeite { display: block; } #jqxMenu { width: 120px; height:490px; float: left; } #jqxGrid { float: left; height:490px; margin-left: 2px; } #jqxChart { width:850px; height:592px; float: left; margin-left: 1px; } </style> <script type="text/javascript"> $(document).ready(function () { var theme = 'metrodark'; // Create a jqxMenu $("#jqxMenu").jqxMenu({ width: '120', height: '589', mode: 'vertical', theme: theme}); $("#jqxMessage").jqxNotification({ width: 250, position: "top-right", opacity: 0.7, autoOpen: false, animationOpenDelay: 800, autoClose: true, autoCloseDelay: 20000}); var getLocalization = function () { var localizationobj = {}; localizationobj.percentSymbol = " %"; localizationobj.currencySymbol = " €"; localizationobj.currencySymbolPosition = "after"; localizationobj.decimalSeparator = ","; localizationobj.thousandsSeparator = "."; patterns: {d: "dd.MM.yyyy"} return localizationobj; } // prepare the data var data = {}; var source = { datatype: "json", datafields: [ { name: 'Datum', type: 'date'}, { name: 'Betrag', type: 'float' }, { name: 'Ziel', type: 'float' } ], data: {targetValue: '0.3'}, id: 'Datum', url: 'entwicklung_connect_01.php', root: 'Rows', sortcolumn: 'Datum', sortdirection: 'desc', beforeprocessing: function (data) { source.totalrecords = data[0].TotalRows; }, updaterow: function (rowid, rowdata, commit) { // synchronize with the server - send update command data = "update=true&Datum=" + rowdata.Datum.toISOString() + "&Betrag=" + rowdata.Betrag; $.ajax({ dataType: 'json', url: 'entwicklung_connect_01.php', data: data, error: function(error_msg){ $("#jqxMessage").jqxNotification({template: "error"}); $("#jqxMessageContent").html(error_msg); $("#jqxMessage").jqxNotification("open"); }, success: function(success_msg){ $("#jqxMessage").jqxNotification({template: "info"}); $("#jqxMessageContent").html(success_msg); $("#jqxMessage").jqxNotification("open"); } }); }, addrow: function (rowid, rowdata, commit) { // synchronize with the server - send add command var data = "add=true"; $.ajax({ dataType: 'json', url: 'entwicklung_connect_01.php', data: data, error: function(error_msg){ $("#jqxMessage").jqxNotification({template: "error"}); $("#jqxMessageContent").html(error_msg); $("#jqxMessage").jqxNotification("open"); }, success: function(success_msg){ $("#jqxMessage").jqxNotification({template: "info"}); $("#jqxMessageContent").html(success_msg); $("#jqxMessage").jqxNotification("open"); } }); }, deleterow: function (rowid, commit) { // synchronize with the server - send delete command var data = "delete=true&Datum=" + rowdata.Datum.toISOString() + "&Betrag=" + rowdata.Betrag; $.ajax({ dataType: 'json', url: 'entwicklung_connect_01.php', data: data, error: function(error_msg){ $("#jqxMessage").jqxNotification({template: "error"}); $("#jqxMessageContent").html(error_msg); $("#jqxMessage").jqxNotification("open"); }, success: function(success_msg){ $("#jqxMessage").jqxNotification({template: "info"}); $("#jqxMessageContent").html(success_msg); $("#jqxMessage").jqxNotification("open"); } }); } }; var dataAdapter = new $.jqx.dataAdapter(source); // initialize jqxGrid $("#jqxGrid").jqxGrid( { width: 400, selectionmode: 'singlecell', source: dataAdapter, theme: theme, editable: true, autoheight: true, localization: getLocalization(), pageable: true, pagermode: 'simple', pagerButtonsCount: 5, pagesize: 20, virtualmode: true, rendergridrows: function () { return dataAdapter.records; }, showstatusbar: true, renderstatusbar: function (statusbar) { // appends buttons to the status bar. var container = $("<div style='overflow: hidden; position: relative; margin: 3px;'></div>"); var addButton = $("<div style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;'src='jqwidgets/images/add.png'/><span style='margin-left: 4px; position: relative; top: -3px;'>Add</span></div>"); var deleteButton = $("<div style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;'src='jqwidgets/images/close.png'/><span style='margin-left: 4px; position: relative; top: -3px;'>Delete</span></div>"); var reloadButton = $("<div style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;'src='jqwidgets/images/refresh.png'/><span style='margin-left: 4px; position: relative; top: -3px;'>Reload</span></div>"); //var searchButton = $("<div style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;'src='jqwidgets/images/search.png'/><span style='margin-left: 4px; position: relative; top: -3px;'>Find</span></div>"); var targetValue = $("<div style='float: left; margin-left: 70px; '><input value='0.3' id='input'/><span style='float: left; margin-left: 2px;'> %</span></div>"); container.append(addButton); container.append(deleteButton); container.append(reloadButton); container.append(targetValue); statusbar.append(container); addButton.jqxButton({ width: 60, height: 20, theme: theme }); deleteButton.jqxButton({ width: 65, height: 20, theme: theme }); reloadButton.jqxButton({ width: 65, height: 20, theme: theme }); targetValue.jqxInput({ width: 65, height: 20, theme: theme }); // add new row. addButton.click(function (event) { $('#jqxGrid').jqxGrid('addrow', null, {}); $("#jqxGrid").jqxGrid({ source: dataAdapter }); }); // delete selected row. deleteButton.click(function (event) { var selectedRowIndex = $("#jqxGrid").jqxGrid('getselectedrowindex'); var id = $("#jqxGrid").jqxGrid('getrowid', selectedRowIndex); $("#jqxGrid").jqxGrid('deleterow', id); $("#jqxGrid").jqxGrid({ source: dataAdapter }); }); // reload grid data. reloadButton.click(function (event) { var data = "targetValue: " + targetValue.val(); var dataAdapter = new $.jqx.dataAdapter(source, { processData: function (data) { data.targetValue = targetValue.val(); } }); $("#jqxGrid").jqxGrid({ source: dataAdapter }); }); targetValue.on('change', function (event) { var data = "targetValue: " + targetValue.val(); var dataAdapter = new $.jqx.dataAdapter(source, { processData: function (data) { data.targetValue = targetValue.val(); } }); $("#jqxGrid").jqxGrid({ source: dataAdapter }); }); }, columns: [ { text: 'Datum', editable: false, datafield: 'Datum', width: 140, cellsAlign: 'center', cellsFormat: 'dd.MM.yyyy' }, { text: 'Betrag', datafield: 'Betrag', width: 130, cellsAlign: 'center', cellsFormat: 'c2' }, { text: 'Ziel', datafield: 'Ziel', width: 130, cellsAlign: 'center', cellsFormat: 'c2' } ] }); }); </script> </head> <body class="default" style='background: #222222'> <div class="jqxSeite"> <div id="jqxMenu"> <?php include("navigation.html"); ?> </div> <div id="jqxGrid"> </div> <div id="jqxChart"> </div> </div> <div id="jqxMessage"> <div id="jqxMessageContent"> </div> </div> </body> </html>
Hello elbnacht,
You are probably using the PHP CRUD demo as your starting point.
However you have removed the commit(true) and commit(false) statements from the ajax requests on addrow and updateRow and deleteRow. The commit function tells the grid whether the server command was successful or not, so in order for it to update its data you need to keep them. This way the grid should update properly without the need of additional reloading of the grid source.
Best Regards,
VladimirjQWidgets team
http://www.jqwidgets.com/Thanks for quick replay.
I added the commits as in the example – no change of behavior.
I forgot to mention, that the refresh of data works for add / delete row or changing cells.
It does not work while changing the value of targetValue (“targetValue.val();”). If I enter a new value, the server gives the changed values back, but the grid does not show the new values.
And it does not work anymore going to the next pages.Any other idea?
Jens
Hello elbnacht,
Please try the following:
reloadButton.click(function (event) { source.data.targetValue = targetValue.val(); dataAdapter.dataBind(); $("#jqxGrid").jqxGrid({ 'updatebounddata' }); });
Best Regards,
VladimirjQWidgets team
http://www.jqwidgets.com/Thank you, that works perfectly.
One question in addition:
I want to have grid and chart at one site (grid left, chart right).
It seems, that I can’t access the same source from grid and chart.
How can I solve this?Jens
Hello elbnacht,
Just to be clear, what you want is to use the data in the grid, to populate a chart?
Best Regards,
VladimirjQWidgets team
http://www.jqwidgets.com/Hello elbnacht,
You could try something like bind to ‘cellvaluechanged’ event and use the ‘getRows’ function to get the grid data and populate the chart from the data there.
Best Regards,
VladimirjQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.