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.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • Grid does not render new data #76485

    elbnacht
    Participant

    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>
    
    Grid does not render new data #76498

    Vladimir
    Participant

    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,
    Vladimir

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

    Grid does not render new data #76541

    elbnacht
    Participant

    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

    Grid does not render new data #76553

    Vladimir
    Participant

    Hello elbnacht,

    Please try the following:

    reloadButton.click(function (event) {
         source.data.targetValue = targetValue.val();
         dataAdapter.dataBind();
         $("#jqxGrid").jqxGrid({ 'updatebounddata' });
    });

    Best Regards,
    Vladimir

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

    Grid does not render new data #76587

    elbnacht
    Participant

    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

    Grid does not render new data #76594

    Vladimir
    Participant

    Hello elbnacht,

    Just to be clear, what you want is to use the data in the grid, to populate a chart?

    Best Regards,
    Vladimir

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

    Grid does not render new data #76674

    elbnacht
    Participant

    Hello Vladimir,

    yes, I want to use the grid data and populate the chart. If I change grid data, than the chart should be updated to.
    A similar function is shown in the demo

    I just wonder whether there is a more elegant solution rather than accessing the same data with two source objects.

    Jens

    Grid does not render new data #76765

    Vladimir
    Participant

    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,
    Vladimir

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

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

You must be logged in to reply to this topic.