title: EditableGrid+mysql with add/delete
body: <p>Soo.. i got an example of EditableGrid (<a href="http://www.editablegrid.net/" rel="nofollow">http://www.editablegrid.net/</a>) a pretty cool grid that lets me load data from mysql table to a html grid with sorting, inline editing + mysql database updates. I added filtering functionality from another example but am struggling with adding delete row and add row functionality.</p>
  
  <p>I found an example of how to delete by adding a new column and i could call an update function from there.. but i'm struggling with syntax and where to place it .. javascript has me bretty boggled so far.. <a href="http://www.editablegrid.net/editablegrid/examples/simple/index.html" rel="nofollow">http://www.editablegrid.net/editablegrid/examples/simple/index.html</a></p>
  
  <p>The output is loaded on to a div in a simple html file and works very well.. nice and fast and updated great. I just want to add 'new' and 'delete' functions to the table.</p>
  
  <p>Any assistance appreciated.</p>
  
  <pre><code>function DatabaseGrid()
  {
          this.editableGrid = new EditableGrid("plan_customerid", {
          enableSort: true,
          editmode: "absolute",
          editorzoneid: "edition",
          tableLoaded: function() {
            datagrid.initializeGrid(this);
          },
          modelChanged: function(rowIndex, columnIndex, oldValue, newValue, row) {
              updateCellValue(this, rowIndex, columnIndex, oldValue, newValue, row); },
          });
          this.fetchGrid();
  }
  
  DatabaseGrid.prototype.fetchGrid = function()  {
          // call a PHP script to get the data
          this.editableGrid.loadXML("loaddata.php");
  };
  
  DatabaseGrid.prototype.initializeGrid = function(grid) {
          grid.renderGrid("tablecontent", "testgrid", "tableid");
          tableRendered = function() { this.updatePaginator(); };
          _$('filter').onkeyup = function() { grid.filter(_$('filter').value); };
   };
  </code></pre>
  
  <p>the output from loaddata.php is such:</p>
  
  <pre><code>&lt;table&gt;
  &lt;metadata&gt;
  &lt;column name="customer_id" label="UID" datatype="string" editable="true"&gt;&lt;/column&gt;
  &lt;column name="customer" label="Customer" datatype="string" editable="true"&gt;&lt;/column&gt;
  &lt;column name="lastchange_by" label="Editor" datatype="string" editable="true"&gt;&lt;/column&gt;
  &lt;column name="ts" label="Timestamp" datatype="date" editable="true"&gt;&lt;/column&gt;
  &lt;/metadata&gt;
  &lt;data&gt;
  &lt;row id="1"&gt;
  &lt;column name="customer_id"&gt;
  &lt;![CDATA[ 5000 ]]&gt;
  &lt;/column&gt;
  &lt;column name="customer"&gt;
  &lt;![CDATA[ Foo ]]&gt;
  &lt;/column&gt;
  &lt;column name="lastchange_by"&gt;
  &lt;![CDATA[ Bar ]]&gt;
  &lt;/column&gt;
  &lt;column name="ts"&gt;
  &lt;![CDATA[ 2013-10-17 00:00:00 ]]&gt;
  &lt;/column&gt;
  &lt;/row&gt;
  &lt;/data&gt;
  &lt;/table&gt;
  </code></pre>