JSGrid Popup with Details

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="dlgDetails" title="Details">
    <p><label>Name: <span id="name"></span></label></p>
    <p><label>Description: <span id="description"></span></label></p>
</div>

CSS

.ui-widget {
    font-size: 12px;
}

JavaScript

var data = [
    { Name: "John", Description: "long long long long long long long long description here" },
    { Name: "Jimmy", Description: "long long long long long long long long description here" },
    { Name: "Tom", Description: "long long long long long long long long description here" },
    { Name: "Frank", Description: "long long long long long long long long description here" },
    { Name: "Peter", Description: "long long long long long long long long description here" }
];

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

$("#jsgrid").jsGrid({
    autoload: true,
    width: 200,
    controller: {
        loadData: function() {
            return data;
        }
    },
        rowClick: function(e) {
            showDetailsDialog("Edit", e.item.Name);
        },
    
    fields: [
        { type: "text", name: "Name" }
    ]
});