infragistics igGrid in a dialog box does not take user's input

Question

I have an application using infragistics asp.net web grid. In the main page, Grid is displayed no problem. user can select a row from main grid, from there a dialog box pops up where a second grid is. The second grid just display the details of user-selected grid one's row. Now I have a problem in the second grid, where user couldn't modify any existing values. I counld't find out anything I did differently in the second grid from first grid. see my code:

<script type="text/javascript">
 $(document).ready(function () {
        $.ig.loader({
            scriptPath: "js/",
            cssPath: "css/",
            resources: "igGrid.*"
        });

        $.ajax({
            type: "POST",
            url: "Default.aspx/LoadA",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: OnSuccess,
            error: function (result) {
                alert(result.d);               }
        });

        function OnSuccess(result) {
        $.ig.loader(
        function () {
        var jsonLocal = new $.ig.JSONDataSource({ dataSource: result.d, responseDataKey: "d" });

                    $("#tblMain").igGrid({
                        dataSource: jsonLocal,
                        autoGenerateColumns: false,
                        renderCheckboxes: true,
                        width: "100%",
                        height: "100%",
                        primaryKey: "ColA",
                        columns: [
      { key: "ColA", headerText: "ColA", dataType: "number" },
      { key: "ColB", headerText: "ColB",ataType: "string" }],
                        features: [
                        { name: "Updating",
                            editMode: "row",
                            columnSettings: [
                                { columnKey: "ColA", readOnly: true }                                       ]
                        },
                        { name: "Resizing",
                            deferredResizing: false,
                            allowDoubleClickToResize: true
                        },
                        {
                            name: "Filtering",
                            allowFiltering: true,
                            caseSensitive: false,
                            type: "local"
                        },
                        {
                        name: "Selection",
                        mode: "row",
                        cellSelectionChanging: igGridCellSelectionChanged
                    }
                        ]  //end feature
                }) //end igGrid

            } //end function
            ) //end loader


        } //end onSuccess

        $("#tblMain").on("iggridselectionrowselectionchanged", igGridCellSelectionChanged);

        function igGridCellSelectionChanged(event, ui) {
            var ColA = ui.row.element[0].cells[0].innerText;
             $.ajax({
                type: "POST",
                url: "Default.aspx/LoadB",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                data: '{ColA:"' + ColA+ '"}',
                success: OnAttachments,
                error: function (result) {
                    alert(result.d);
                }
            });

        };

        function OnAttachments(result) {
            $.ig.loader(function () {
               $.ig.loader(function () {
        var jsonLocal = new $.ig.JSONDataSource({ dataSource: result.d, responseDataKey: "d" });
                    $("#tblAttachment").igGrid({
                        dataSource: jsonLocal,
                        width: "800",
                        height: "80%",
                        autoGenerateColumns: false,
                        primaryKey: "UId",
                        columns: [
                        { key: "Col1", headerText: "Col1", dataType: "number", width: "50px" },
                        { key: "Col2", headerText: "Col2", dataType: "string", width: "100px" }
                    ],
                        fixedHeaders: true,
                        showHeader: true,
                        features: [{ name: "Updating"}]
                    });
                });
            });
        };


        $('#dialog').dialog({
            modal: true,
            autoOpen: false,
            closeOnEscape: false,
            width: 800,
            height: 500,
            buttons: [{ text: "OK",
                click: function () {
                    $("#dialog").dialog("close");
                }
            }] //end buttons 
        }); //end dialog


    })

</script>

<body>
<div class="page">
        <table>
        <tr><td>
        <table id="tblMain" border="1" align="center"></table>
        </td></tr>
        <tr><td>
        <table>
            <tr>
                <td align="right">
                    <button id="btnAttach" class="button">
                        Additional Info</button>
                </td>
            </tr>
        </table>
        </td></tr></table>

        <div id="dialog" title="Attach Contracts">
        <table><tr><td>
        <table id="tblAttachment" border="1" align="center">
                <tr><td></td></tr>
        </table>
        </td></tr></table>

        </div>          
</div>
</body>

Answer 1

I think the problem is caused by changing the focus from input to that dialog. Just set trackFocus property to false.

//Initialize
$(".selector").igDialog({
    trackFocus: false
});