jQWidgets Forums
jQuery UI Widgets › Forums › Grid › Grid Updated by Calendar Event
This topic contains 1 reply, has 1 voice, and was last updated by Hop 11 years, 5 months ago.
Viewing 2 posts - 1 through 2 (of 2 total)
-
Author
-
How would I go about loading a grid with mysql data from a query based on a date from a calendar widget? I have been able to do all these things separately, but for some reason, I cannot get my head around how to update a grid with new query data, or even how to call or trigger that from a calendar (or any widget) event.
I was able to load the returned data into a panel for viewing. I studied the code that I wrote (from example and research) and the work is done in a function. Pretty simple with a panel though.
I am embarrassed for asking this. I guess what I need is to look at a repeatable loading of data into a grid that is returned from an ajax process. I get how ajax works I think, just not on demand with a grid.
I have googled this for hours, looking for an example on how it might be done. Any help would be so much appreciated!! Thank you for your time.
Never mind, I got it to work this morning. I rebuilt the source variable and dataAdapter, and reinitialized the grid from inside a calendar event and all is good. I didn’t think about doing it this way because I thought it would result in grids stacked on each other until my browser crashed. Actually, I still do not know if that is happening, but I clicked on many different dates, causing several grid updates with the new query data from my database, and never noticed any slowdown or increase in size of the page/process in chrome.
Thank you for your time! I will post the code below for anyone who is curious. I searched for hours for this and came up empty. It’s messy and not commented because I haven’t cleaned it up yet. My apologies.
data.php
<?php#Include the connect.php fileinclude('connect.php');#Connect to the database//connection String$connect = mysql_connect($hostname, $username, $password)or die('Could not connect: ' . mysql_error());//select databasemysql_select_db($database, $connect);//Select The database$bool = mysql_select_db($database, $connect);if ($bool === False){ print "can't find $database";}// get data and store in a json array$limit = $_GET['limit']; $qdate = $_GET['qdate']; $query = "SELECT transaction,date,description,memo,amount_debit,amount_credit FROM budget_bank_statements_sfcu where date between '".$qdate."' and curdate() order by date asc";$to = 20;$query .= " LIMIT 0,".$limit;$result = mysql_query($query) or die("SQL Error 1: " . mysql_error());while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) { $bankrecords[] = array( 'transaction' => $row['transaction'], 'date' => $row['date'], 'description' => $row['description'], 'memo' => $row['memo'], 'amount_debit' => $row['amount_debit'], 'amount_credit' => $row['amount_credit'], );}echo json_encode($bankrecords);?>
index.php
<!DOCTYPE html><html lang="en"><head> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.shinyblack.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.10.2.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" src="../../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../../jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="../../scripts/gettheme.js"></script> <script type="text/javascript" src="generatedata.js"></script> <script type="text/javascript"> $(document).ready(function () { // prepare the data var source = { datatype: "json", datafields: [ { name: 'transaction', type: 'string'}, { name: 'date', type: 'date'}, { name: 'description', type: 'string'}, { name: 'memo', type: 'string'}, { name: 'amount_debit', type: 'number'}, { name: 'amount_credit', type: 'number'} ], url: 'data.php', data: { limit: 30, qdate: '2013-01-17' }, cache: false }; var cr1 = function (row, column, value) { if(value=='DEPOSIT') { return '<div style="text-align: center; margin-top: 2px; bgcolor: #58FA58;">' + value + '</div>'; } else { return '<div style="text-align: center; margin-top: 2px;">' + value + '</div>'; } } var cr2 = function (row, column, value) { var column = $("#jqxgrid").jqxGrid('getcolumn', column); if (column.cellsformat != '') { if ($.jqx.dataFormat) { if ($.jqx.dataFormat.isDate(value)) { value = $.jqx.dataFormat.formatdate(value, column.cellsformat); } } } return '<div style="text-align: center; margin-top: 2px;">' + value + '</div>'; } var cr3 = function (row, column, value) { if(value=='DEPOSIT') { return '<div style="text-align: center; margin-top: 2px; background: #58FA58;">' + value + '</div>'; } else if (value=='PURCHASE'){ return '<div style="text-align: center; margin-top: 2px; background: #A9BCF5;">' + value + '</div>'; } else { return '<div style="text-align: center; margin-top: 2px;">' + value + '</div>'; } } var cr4 = function (row, column, value) { return '<div style="margin-left: 3px; margin-top: 2px;">' + value + '</div>'; } var cr5 = function (row, column, value) { if(value!=0){ if(value>0){ value = $.jqx.dataFormat.formatnumber(value, 'c2'); return '<div style="text-align: right; margin-right: 3px; margin-top: 2px; color: darkgreen"><strong>' + value + '</strong></div>'; } else{ value = $.jqx.dataFormat.formatnumber(value, 'c2'); return '<div style="text-align: right; margin-right: 3px; margin-top: 2px;">' + value + '</div>'; } } else { return ''; } } var cr6 = function (row, column, value) { return '<div style="margin-left: 3px; margin-top: 2px;">' + value + '</div>'; } var dataAdapter = new $.jqx.dataAdapter(source); // events $("#jqxgrid").on('cellbeginedit', function (event) { var args = event.args; $("#cellbegineditevent").text("Event Type: cellbeginedit, Column: " + args.datafield + ", Row: " + (1 + args.rowindex) + ", Value: " + args.value); }); $("#jqxgrid").on('cellendedit', function (event) { var args = event.args; $("#cellendeditevent").text("Event Type: cellendedit, Column: " + args.datafield + ", Row: " + (1 + args.rowindex) + ", Value: " + args.value); }); // initialize jqxGrid $("#jqxgrid").jqxGrid( { width:900, height:496, rowsheight: 16, columnsheight: 20, source: dataAdapter, theme: 'shinyblack', editable: true, autoloadstate: true, selectionmode: 'multiplecellsadvanced', columns: [ { text: 'Xact', datafield: 'transaction', width: 50, cellsrenderer: cr1, cellsformat: 'c1',cellsalign: 'middle'}, { text: 'Date', columntype: 'datetimeinput', datafield: 'date', width: 80, cellsformat:'MM/dd/yy',cellsalign: 'middle', cellsrenderer: cr2}, { text: 'Description', columntype: 'dropdownlist', datafield: 'description', cellsrenderer: cr3, width: 100,cellsalign: 'middle'}, { text: 'Memo', datafield: 'memo', cellsrenderer: cr4, width: 490}, { text: 'DEBIT', datafield: 'amount_debit', cellsformat: 'c2', cellsrenderer: cr5, width: 80}, { text: 'CREDIT', datafield: 'amount_credit', cellsrenderer: cr5, width: 80} ] }); // Create jqxCalendar $("#jqxcalendar").jqxCalendar({ width: '240px', height: '220px'}); $('#jqxcalendar').on('change viewChange', function (event) { var date = event.args.date; var fdate=date.getFullYear()+'-'+('0' + (date.getMonth()+1)).slice(-2)+'-'+('0' + date.getDate()).slice(-2); var view = event.args.view; var viewFrom = view.from; var viewTo = view.to; var source = { datatype: "json", datafields: [ { name: 'transaction', type: 'string'}, { name: 'date', type: 'date'}, { name: 'description', type: 'string'}, { name: 'memo', type: 'string'}, { name: 'amount_debit', type: 'number'}, { name: 'amount_credit', type: 'number'} ], url: 'data.php', data: { limit: 30, qdate: fdate }, sortcolumn: 'date', sortdirection: 'asc', cache: false }; var dataAdapter = new $.jqx.dataAdapter(source); $("#jqxgrid").jqxGrid( { width:900, height:496, rowsheight: 16, columnsheight: 20, source: dataAdapter, theme: 'shinyblack', editable: true, sortable: true, autoloadstate: true, selectionmode: 'multiplecellsadvanced', columns: [ { text: 'Xact', datafield: 'transaction', width: 50, cellsrenderer: cr1, cellsformat: 'c1',cellsalign: 'middle'}, { text: 'Date', columntype: 'datetimeinput', datafield: 'date', width: 80, cellsformat:'MM/dd/yy',cellsalign: 'middle', cellsrenderer: cr2, sortable: true}, { text: 'Description', columntype: 'dropdownlist', datafield: 'description', cellsrenderer: cr3, width: 100,cellsalign: 'middle'}, { text: 'Memo', datafield: 'memo', cellsrenderer: cr4, width: 490}, { text: 'DEBIT', datafield: 'amount_debit', cellsformat: 'c2', cellsrenderer: cr5, width: 80}, { text: 'CREDIT', datafield: 'amount_credit', cellsrenderer: cr5, width: 80} ] }); }); }); </script></head><body class='default'> <div id="jqxgrid" style="font-size: 15px; font-family: Verdana; float: left;"></div> <div id='jqxcalendar'></div></body></html>
-
AuthorPosts
Viewing 2 posts - 1 through 2 (of 2 total)
You must be logged in to reply to this topic.