JSGrid Img Field

HTML

<link rel="stylesheet" href="http://js-grid.com/css/jsgrid.min.css">
<link rel="stylesheet" href="http://js-grid.com/css/jsgrid-theme.min.css">
<script src="http://js-grid.com/js/jsgrid.min.js"></script>
<script src="http://underscorejs.org/underscore-min.js"></script>
<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>
<div id="jsgrid"></div>
<div id="dialog" title="Image Full Size View">
    <img id="imagePreview" />
</div>

JavaScript

var data = [
    { Name: "John", Img: "http://placehold.it/250x250" },
    { Name: "Jimmy", Img: "http://placehold.it/250x250" },
    { Name: "Tom", Img: "http://placehold.it/250x250" },
    { Name: "Frank", Img: "http://placehold.it/250x250" },
    { Name: "Peter", Img: "http://placehold.it/250x250" }
];

$("#dialog").dialog({
    modal: true,
    autoOpen: false,
    position: { 
        my: "center",
        at: "center",
        of: $("#jsgrid")
    }
});

$("#jsgrid").jsGrid({
    autoload: true,
    width: 350,
    filtering: true,
    inserting: true,
    editin:true,
    controller: {
        loadData: function(filter) {
            return !filter.Name 
                ? data
                : $.grep(data, function(item) { return item.Name.indexOf(filter.Name) > -1; });
            
            // use ajax request to load data from the server
            /*
            return $.ajax({
                method: "GET",
                url: "/YourUrlToAddItemFilteringScript",
                data: filter
            });
            */
        },
        insertItem: function(insertingItem) {
            var formData = new FormData();
            formData.append("Name", insertingItem.Name);
            formData.append("Img[]", insertingItem.Img, insertingItem.Img.name);
            
            return $.ajax({
                method: "post",
                type: "POST",
                url: "/YourUrlToAddItemAndSaveImage",
                data: formData,
                contentType: false,
                processData: false
            });
        }        
    },
    fields: [
        {
            name: "Img",
            itemTemplate: function(val, item) {
                return $("<img>").attr("src", val).css({ height: 50, width: 50 }).on("click", function() {
                    $("#imagePreview").attr("src", item.Img);
                    $("#dialog").dialog("open");
                });
            },
            insertTemplate: function() {
             ...