igGrid with combo editor find editor

by georgianastasov

HTML

<script src="https://igniteui.com/js/modernizr.min.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
<script src="https://igniteui.com/js/apiviewer.js"></script>
<script src="https://igniteui.com/js-data/northwind"></script>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>
<link href="https://igniteui.com/css/apiviewer.css" rel="stylesheet" type="text/css"></link>

<table id="grid"></table>

JavaScript

$(function () {
    var apiViewer = new $.ig.apiViewer();

    var titles = ["Sales Representative", "Sales Manager", "Inside Sales Coordinator", "Vice President, Sales"];
    var countries = ["UK", "USA"];

    $("#grid").igGrid({
        virtualization: false,
        autoGenerateColumns: false,
        renderCheckboxes: true,
        primaryKey: "EmployeeID",
        columns: [
            { headerText: "Employee ID", key: "EmployeeID", dataType: "number" },
            { headerText: "First Name", key: "FirstName", dataType: "string" },
            { headerText: "Last Name", key: "LastName", dataType: "string" },
            { headerText: "Title", key: "Title", dataType: "string" },
            { headerText: "Country", key: "Country", dataType: "string" }
        ],
        dataSource: northwind,
        dataSourceType: "json",
        responseDataKey: "results",
        height: "400px",
        width: "100%",
        features: [
            {
                name: "Updating",
                enableAddRow: true,
                editMode: "row",
                enableDeleteRow: true,
                rowEditDialogContainment: "owner",
                showReadonlyEditors: false,
                enableDataDirtyException: false,
                columnSettings: [
                    { columnKey: "EmployeeID", readOnly: true },
                    { columnKey: "FirstName", editorType: "text" },
                    { columnKey: "LastName", editorType: "text" },
                    { columnKey: "Title", editorType: "text" },
                    { columnKey: "Country", editorType: "combo", editorOptions: { dataSource: countries } }
                ],
                editRowStarted: function (evt, ui) {
    								var editors = ui.owner._editors;
    								var columnSettings = ui.owner.options.columnSettings;

    								$.each(editors, function (columnKey, editorInstance) {
        								var $editorEl = $(editorInstance[0]);

        								var columnSetting =...