JSGrid Custom Editing Row

HTML

<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/redmond/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.1/jsgrid.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.1/jsgrid-theme.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.js"></script>
<div id="jsGrid"></div>

CSS

.jsgrid-cell { 
    overflow: hidden; 
}

.jsgrid-pager { text-align: center; }

JavaScript

var data = [
    {
        "Name": "Test Test",
        "Married": false
    },
    {
        "Name": "Connor Johnston",
        "Married": false
    },
    {
        "Name": "Lacey Hess",
        "Married": false
    },
    {
        "Name": "Timothy Henson",
        "Married": false
    }
];

$("#jsGrid").jsGrid({
        height: 300,
        width: "100%",
 
        autoload: true,
        editing: true,
 
        controller: {
        	loadData: function() {
          	return data;
          }
        },
        
        rowRenderer: function(item, itemIndex) {
          var grid = this;
    			var $editButton = $("<input>").attr("type", "button").addClass("jsgrid-button jsgrid-edit-button");
          
          var $deleteButton = $("<input>").attr("type", "button").addClass("jsgrid-button jsgrid-delete-button");
          
          $editButton.on("click", function() {
          	grid.editItem(item);
          });
           
          $deleteButton.on("click", function() {
          	grid.deleteItem(item);
          });
          
          return $("<tr>")
            .append($("<td>").append(item.Name))
            .append($editButton)
            .append($deleteButton);
				},

        editRowRenderer: function(item, itemIndex) {
            alert();
            var grid = this;
            var $nameEditor = $("<input>").attr("type", "text").attr("name", "FirstName").val(item.Name);

            var $updateButton = $("<input>").attr("type", "button").addClass("jsgrid-button jsgrid-update-button");
            var $cancelButton = $("<input>").attr("type", "button").addClass("jsgrid-button jsgrid-cancel-button");
            
						$updateButton.on("click", function() {
            	grid.updateItem(item, { Name: $nameEditor.val() });
            });

						$cancelButton.on("click", function() {
            	grid.cancelEdit();
            });

            return $("<tr>")
              .append($("<td>").append($nameEditor))
             ...