Databases
StackOverflow2013
Postsdbo
POslickgrid is adding new row when ANY field has data and tab is clicked
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POslickgrid is adding new row when ANY field has data and tab is clicked
    text
    copied!<p>I have an odd problem, that I can find no reference to in SO or otherwise. My grid appears to be working great in all ways except for two critical issues, and two things I would like to do. When replying, I don't expect responses for all concerns, even if you have info for one of them, please post it as an answer. Please see images below for visuals on my problem.</p> <p>First issue:<br /> Whenever data is placed into ANY field of an empty row and tab is clicked a new row is generated. I only want this behaviour if the selected cell is in the last column of this row</p> <p>Second issue:<br /> Whenever a new row is added that extends past the edge of my defined div, and the vertical scrollbar appears,an additional non-selectable column is added which creates a horizontal scrollbar at the bottom of my grid. This bar hides part of the bottom row. How do I prevent this horizontal bar from appearing.</p> <p>Third request: When the grid creates a new row, how to I validate to ensure each cell in the current last row has data in it before allowing the tab effect to add the new row.</p> <p>Final request: After clicking a cell and it receives focus, it cannot lose focus unless another cell is selected. I need to lose focus if user clicks on anything outside of the grid.</p> <p><strong><em>Showing adding of new row even though not all cells filled, and selector is in first cell</em></strong> <img src="https://i.stack.imgur.com/BQArS.gif" alt="Adds new row even though other columns are empty and first cell in row is selected (should be last cell)"></p> <p><strong><em>Showing issues presented by bottom scrollbar</em></strong> <img src="https://i.stack.imgur.com/pFJnr.gif" alt="Issues presented when bottom scrollbar appears"></p> <p><strong><em>HTML</em></strong></p> <pre><code>&lt;link type="text/css" rel="stylesheet" href="css/slickGrid/slick.grid.css" /&gt; &lt;link type="text/css" rel="stylesheet" href="css/cupertino/jquery-ui-1.8.20.custom.css" /&gt; &lt;link type="text/css" rel="stylesheet" href="css/slickGrid/slick.grid.darren1.css" /&gt; &lt;form id="myGridForm" action="" method="post"&gt; &lt;div style="position:relative; overflow:visible; margin:25px 0 0 0;"&gt; &lt;div id="loader" style="position:absolute; z-index:997;top: 62px; left:200px;"&gt;&lt;img src="images/loading.gif" border="0" /&gt;&lt;/div&gt; &lt;div id="dateInput" style="position:relative;z-index:990;visibility:hidden;"&gt; &lt;!-- jQuery DatePicker shows here --&gt; &lt;p&gt;&lt;label for="datepicker"&gt;Click to change date:&lt;/label&gt;&lt;input type="text" id="datepicker" name='datepicker'size="30" readonly="readonly"/&gt;&lt;/p&gt; &lt;/div&gt; &lt;div id="myGrid" style="height: 177px; width: 902px; float: left; overflow: hidden; position: relative; visibility: hidden;" &gt; &lt;!-- #myGrid.slickGrid goes here --&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="options-panel" style=" -moz-border-radius: 6px; -webkit-border-radius: 6px; border: 1px solid silver; background: #f0f0f0; padding: 4px; margin: 0 0 220px 0; width: 880px;position: absolute; top: 315px; left: 280px;"&gt; &lt;h2&gt;Instructions:&lt;/h2&gt; &lt;ul&gt; &lt;li&gt;Select the date by clicking the date image above the table&lt;/li&gt; &lt;li&gt;Enter your event data (you can enter multiple events for that date)&lt;/li&gt; &lt;li&gt;To add another event, hit your &lt;em&gt;TAB&lt;/em&gt; key and a new row will be created&lt;/li&gt; &lt;li&gt;When you're all done for this date, click the &lt;em&gt;Commit Changes&lt;/em&gt; button to have your events saved to the site&lt;/li&gt; &lt;/ul&gt; &lt;input type="hidden" name="p" id="p" value="&lt;?=$_POST['p']?&gt;" /&gt; &lt;input type="hidden" name="k" id="k" value="&lt;?=$_POST['k']?&gt;" /&gt; &lt;input type="hidden" name="i" id="i" value="&lt;?=$_POST['i']?&gt;" /&gt; &lt;input type="hidden" name="d" id="d" value="&lt;?=$_POST['d']?&gt;" /&gt; &lt;input type="hidden" name="gridData" id="gridData" /&gt; &lt;div id="submitButton" style="visibility:hidden;"&gt; &lt;button type="submit"&gt;Commit Changes&lt;/button&gt;&lt;/div&gt; &lt;/div&gt; &lt;/form&gt; &lt;script&gt; console.log('json2 Loadstatus: '+json2Loaded); &lt;/script&gt; &lt;script type="text/javascript" language="javascript" src="js/slickGrid/lib/firebugx.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="js/jquery-ui-1.8.20.custom.min.js.php"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="js/json2.js.php"&gt;&lt;/script&gt; &lt;script src="js/slickGrid/plugins/slick.cellrangedecorator.js"&gt;&lt;/script&gt; &lt;script src="js/slickGrid/plugins/slick.cellrangeselector.js"&gt;&lt;/script&gt; &lt;script src="js/slickGrid/plugins/slick.cellselectionmodel.js"&gt;&lt;/script&gt; &lt;script src="js/slickGrid/slick.formatters.js"&gt;&lt;/script&gt; &lt;script src="js/slickGrid/slick.editors.js"&gt;&lt;/script&gt; &lt;script src="js/slickGrid/jquery.event.drag-2.0.min.js"&gt;&lt;/script&gt; &lt;script src="js/slickGrid/slick.core.js"&gt;&lt;/script&gt; &lt;script src="js/slickGrid/slick.grid.js"&gt;&lt;/script&gt; &lt;script&gt; function requiredFieldValidator(value) { if (value == null || value == undefined || !value.length) { return {valid: false, msg: "This is a required field"}; } else { return {valid: true, msg: null}; } } 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 }; var grid = new Slick.Grid("#myGrid", data, columns, options); grid.onAddNewRow.subscribe(function (e, args) { var item = args.item; grid.invalidateRow(data.length); data.push(item); grid.updateRowCount(); grid.render(); }); $('#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"); $.getScript("js/jquery.calendarPicker.js"); $.getScript("js/jquery.json-2.3.min.js"); &lt;/script&gt; &lt;script&gt; console.log('json2 Loadstatus: '+json2Loaded); &lt;/script&gt; &lt;? //Instantiate datepicker jQueryUI widget ?&gt; &lt;script&gt; $(document).ready(function(){ $(function() { $( "#datepicker" ).datepicker({ numberOfMonths: [1, 3] }); $( "#datepicker" ).datepicker( "option", "showAnim", "clip"); $( ".selector" ).datepicker( "option", "showOn", "both" ); }); // end function() }); // end doc.ready $('#myGridForm').submit(function() { console.log ( ' myGrid data1: '+ $('grid').data() ); console.log ( ' myGrid data2: '+ $('#myGrid').data() ); var datum = $('#myGrid').data(); console.log ( ' myGrid data3: '+ $('datum').serialize() ); console.log ( ' myGrid data4: '+ JSON.stringify(data) ); $("input[name='gridData']").val(JSON.stringify(data)); // stops submit /ie. return false; }); &lt;/script&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload