First of all I have seen SO many answers to a question like this, without sample code that seems to apply to me. I went through the examples on the project wiki page, and none seem to be applicable to me that I can see. I'm not asking this to be lazy, but after three days, I really am at a loss...
I instantiate a grid inside a form, then on submit, I need to save the form data to a serialized hidden input field (or convert it to modal, but have NO idea how to do this, although it sounds like the perfect solution...
HTML
<form id="myGridForm" action="" method="post">
<div style="position:relative; overflow:visible; margin:25px 0 0 0;">
<div id="loader" style="position:absolute; z-index:997;top: 62px; left:200px;"><img src="images/loading.gif" border="0" /></div>
<div id="dateInput" style="position:relative;z-index:997;visibility:hidden;"><p><label for="datepicker">Date: </label><input type="text" id="datepicker" name='datepicker'size="30"/></p>
<!-- jQuery DatePicker shows here -->
</div>
<div id="myGrid" style="height:400px;width:902px; float:left;" >
<!-- #myGrid.slickGrid goes here -->
</div>
</div>
<div class="options-panel">
<h2>Instructions:</h2>
<ul>
<li>Select the date by clicking the date image above the table</li>
<li>Enter your event data (you can enter multiple events for that date)</li>
<li>To add another event, hit your <em>TAB</em> key and a new row will be created</li>
<li>When you're all done for this date, click the <em>Commit Changes</em> button to have your events saved to the site</li>
</ul>
<h2>Options:</h2>
<input type="hidden" name="p" id="p" value="<?=$_POST['p']?>" />
<input type="hidden" name="k" id="k" value="<?=$_POST['k']?>" />
<input type="hidden" name="i" id="i" value="<?=$_POST['i']?>" />
<input type="hidden" name="d" id="d" value="<?=$_POST['d']?>" />
<input type="hidden" name="gridData" id="gridData" />
<div id="submitButton" style="visibility:hidden;"> <button type="submit">Submitter</button></div>
<a href="javascript: submitform()">Search</a>
</div>
</form>
.js scripts being loaded
js/slickGrid/lib/firebugx.js
js/jquery-ui-1.8.20.custom.min.js.php
js/json2.js.php
js/slickGrid/plugins/slick.cellrangedecorator.js
js/slickGrid/plugins/slick.cellrangeselector.js
js/slickGrid/plugins/slick.cellselectionmodel.js
js/slickGrid/slick.formatters.js
js/slickGrid/slick.editors.js
Code to instantiate the grid, and then make it visible (nested to resolve dependencies)
<script>
var grid; // initalize grid globally so it can be accessed outside of this function
$.getScript("js/slickGrid/jquery.event.drag-2.0.min.js",function(){
$.getScript("js/slickGrid/slick.core.js",function(){
$.getScript("js/slickGrid/slick.grid.js",function(){
$.holdReady(false);
var columns = [
{ id: "VisitDate", name: "VisitDate", field: "VisitDate", width: 120, cssClass: "cell-title", editor: Slick.Editors.Text },
{ id: "VisitTime", name: "VisitTime", field: "VisitTime", width: 100, editor: Slick.Editors.Text },
{ id: "PrimaryComplaint", name: "PrimaryComplaint", field: "PrimaryComplaint", width: 100, cssClass: "cell-right", editor: Slick.Editors.Text },
];
var data = [
{
"VisitDate": "11/30/2009",
"VisitTime": "0117",
"PrimaryComplaint": "General malaise "
},
{
"VisitDate": "02/08/2010",
"VisitTime": "0930",
"PrimaryComplaint": "General malaise "
}
];
var options = {
editable: true,
enableAddRow: true,
enableCellNavigation: true,
asyncEditorLoading: false,
forceFitColumns: true
};
// grid = new Slick.Grid($("#acs-work"), returnObj.source, columns, options);
//var $tabs = $('#tabset').tabs();
//var selected = $tabs.tabs('option', 'selected') + 1; // => 0[edit]
//var panelstr = "#panel" + selected;
//to load dynamic data
// PROTO: grid = new Slick.Grid($(panelstr), returnObj.source, columns, options);
grid = new Slick.Grid("#myGrid", data, columns, options);
$('#loader').hide();
$('#dateInput').css({opacity: 0.0, visibility: "visible"}).animate({opacity: 1.0},"slow");
$('#myGrid').css({opacity: 0.0, visibility: "visible"}).animate({opacity: 1.0},"slow");
$('#submitButton').css({opacity: 0.0, visibility: "visible"}).animate({opacity: 1.0},"slow");
}).fail(function(jqxhr, settings, exception) { document.write('FAILED: '+exception); });
}).fail(function(jqxhr, settings, exception) { document.write('FAILED: '+exception) });//console.log( textstatus );
}).fail(function(jqxhr, settings, exception) { document.write('FAILED: '+exception) });//console.log( textstatus );
$.getScript("js/jquery.calendarPicker.js");
</script>
Final scripts at end of page (footer)
<script>
$.holdReady(true);
console.log('json2 Loadstatus: '+json2Loaded);
</script>
<? //Instantiate slickGrid jQueryUI widget ?>
<script>
$(document).ready(function(){
$(function() {
$( "#datepicker" ).datepicker({ numberOfMonths: [2, 3] });
$( "#datepicker" ).datepicker( "option", "showAnim", "clip");
});
});
//Hide loading image div and show loaded jQuery modules
$('#myGridForm').submit(function() {
//var gridDtaHolder = $('#myGrid').getData();
//alert ($('input').val( $('myGridForm').serialize() ) );
//alert ($('#myGrid').serialize() );
//gridDtaHolder = JSON.stringify();
//grid.getEditController().commitCurrentEdit();
//$('#myGridData').val( $('grid-canvas').serialize() );
console.log ( ' myGrid data1: '+ $('grid').data() );
console.log ( ' myGrid data2: '+ $('#myGrid').data() );
var datum = $('#myGrid').data();
console.log ( ' myGrid data3: '+ $('datum').serialize() );
//$("#myGridData").val( $('datum').serialize() );
$("input[name='gridData']").val($.JSON.encode(data));
// stops submit ie. return false;
});
</script>
As you can see, I have been trying for a while to get data out of the grid what with all the alerts and console log tests trying to implement the various answers I have found on SO. However, noone has posted final code samples of a working application of this. Once I get it working, I plan on submitting it to mbielman's exxamples page to try and help what so many users are running into. Also if someone can show me how to instantiate the grid as a modal, that would be great information too :)
Currently, my logs reply the following, see the commands to write to the log in the submit functionality at end of script. It appears I can get an object from console.log ( ' myGrid data2: '+ $('#myGrid').data() );, I just can't seem to do anything with it, or else it is null, not even sure how to display it to the screen to see the contents for debug...
firebug console output
myGrid data1: null
myGrid data2: [object Object]
myGrid data3:
data is undefined
Note, while I am a fairly advanced programmer in many languages, some of the syntax/properties of javascript/jQuery are very confusing to me. So any additional time you could spend on explaining what is going wrong, how to do it better, reference links, would be fantastic as I really want to get better at working with this language. Again, sorry about the really long post, if you got here, I really appreciate your time. I'm trying to be as thorough as possible so others have a thorough reference point when they are having as much trouble as I am...
You are trying the data from the grid. Don't. The data is in your data JavaScript variable (though you can also get it via grid.getData()). Use whatever mechanism you like to serialize all or parts of that data and send it to the server.
Also, don't try working with SlickGrid as if it were a jQuery widget - it isn't. All of SlickGrid's API is exposed via the JavaScript object you created var grid = new Slick.Grid(...) and not through the jQuery widget semantics (e.g. $("#myGrid").xxx()).