How to open a jquery dialog on iggridupdating editor focus with row edit template

For http://stackoverflow.com/questions/20371992/how-to-open-a-jquery-dialog-on-iggridupdating-editor-focus

by damyanpetev

HTML

<script src="http://cdn-na.infragistics.com/jquery/20131/latest/js/infragistics.loader.js"></script>
<script src="http://cdn-na.infragistics.com/jquery/20131/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/jquery/20131/latest/js/infragistics.lob.js"></script>
<link rel="stylesheet" href="http://cdn-na.infragistics.com/jquery/20131/latest/css/structure/infragistics.css">
<div id="grid1"></div>
<div id="dialog" style="display:none">
    <input type="text" />
</div>

JavaScript

$.ig.loader({
    scriptPath: 'http://cdn-na.infragistics.com/jquery/20131/latest/js/',
    cssPath: 'http://cdn-na.infragistics.com/jquery/20131/latest/css/',
    theme: 'metro'
});

var updcolsettings = [{
    columnKey: "ProductID",
    editorOptions: {
        id: "ProductID",
        type: 4
    }
}, {
    columnKey: "Name",
    editorOptions: {
        id: "Name",
        type: 0,
        focus: function (evt) {
            $("#dialog").dialog({ zIndex: 20002 }).children("input").focus();
        }
    }
}, {
    columnKey: "ProductNumber",
    editorOptions: {
        id: "ProductNumber",
        type: 4
    }
}];

$.ig.loader(function () {
    $("#grid1").igGrid({
        primaryKey: "ProductID",
        columns: [{
            headerText: "Product ID",
            key: "ProductID",
            dataType: "number"
        }, {
            headerText: "Product Name",
            key: "Name",
            dataType: "string"
        }, {
            headerText: "Product Number",
            key: "ProductNumber",
            dataType: "string"
        }],
        features: [{
            name: 'Updating',
            editMode: 'rowedittemplate',
            columnSettings: updcolsettings
        }],
        width: "100%",
        height: "200px"
    });
});