Cannot call methods on igEditor prior to initialization

1145

Pete Davis posted over 6 years ago

I'm handling the editRowStarted event in a grid and I want to hide the editor for a column if the row is being edited, but when it's added I want it to show.

if (ui.rowAdding === false) {
$TestSampleTypeColumnManager.$_itemGrid.igGridUpdating('editorForKey', $FSQATestSampleTypeColumnItem.fielD_TESTSAMPLETYPEID).igEditor('hide');
}
else {
$TestSampleTypeColumnManager.$_itemGrid.igGridUpdating('editorForKey', $FSQATestSampleTypeColumnItem.fielD_TESTSAMPLETYPEID).igEditor('show');
}

When the "show" or "hide" get called, I get the error:
Uncaught Error: cannot call methods on igEditor prior to initialization; attempted to call method 'show'

What do I need to do to initialize the editor?

I do this in other grids and it normally works, so I'm obviously failing to do something in this grid that's causing it to fail.

Parents

485

Offline Vasil Pavlov posted over 6 years ago

Hello Pete,

Thank you for posting in our forum.

If this code works in other grids, the reason might be the missing initialization of the “Updating” feature itself for this particular grid – this could easily happen if the handler is being attached to an already initialized grid, instead of during the initialization. Please check if this is missing in your code:

features: [

{

name: "Updating"

...some other features...

}

In case that doesn’t fix the problem, I would appreciate if you please provide some more details regarding the grid initialization configuration as well as the Ignite UI version being used when this behavior occurs.

On a side note, another possible approach would be to disable the editor for a given column by handling the editCellStarting event: the Updating feature iterates over each cell in the row that is being currently edited and initializes the appropriate editors one by one. If a given column shouldn’t be editable, then just return false in this event and the respective editor wouldn’t get initialized (the event would get cancelled). Here is a sample so that you have an idea of how it would look like when written in code:

<!DOCTYPE html>
<html>
<head>
    <title>Sample</title>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2018.1/latest/js/infragistics.loader.js"></script>
</head>
<body>
    <div style="margin: auto; width:1000px;">
        <table id="grid"></table>
    </div>
    <script>
        $.ig.loader({
			scriptPath: "http://cdn-na.infragistics.com/igniteui/2018.1/latest/js/",
			cssPath: "http://cdn-na.infragistics.com/igniteui/2018.1/latest/css/",
			resources: "igGrid.*",
            ready: function () {
                let ds = [
                    { "ProductID": 1, "ProductName": "Chai", "CategoryName": "Beverages", "InStock": 36 },
                    { "ProductID": 2, "ProductName": "Chang", "CategoryName": "Beverages", "InStock": 17 },
                    { "ProductID": 3, "ProductName": "Aniseed Syrup", "CategoryName": "Condiments", "InStock": 13 },
                    { "ProductID": 4, "ProductName": "Chef Anton\u0027s Cajun Seasoning", "CategoryName": "Condiments", "InStock": 53 },
                    { "ProductID": 5, "ProductName": "Chef Anton\u0027s Gumbo Mix", "CategoryName": "Condiments", "InStock": 0 },
                    { "ProductID": 6, "ProductName": "Grandma\u0027s Boysenberry Spread", "CategoryName": "Condiments", "InStock": 120 },
                    { "ProductID": 7, "ProductName": "Uncle Bob\u0027s Organic Dried Pears", "CategoryName": "Produce", "InStock": 15 },
                    { "ProductID": 8, "ProductName": "Northwoods Cranberry Sauce", "CategoryName": "Condiments", "InStock": 6 },
                    { "ProductID": 9, "ProductName": "Mishi Kobe Niku", "CategoryName": "Meat/Poultry", "InStock": 29 },
                    { "ProductID": 10, "ProductName": "Mishi Kobe Niku", "CategoryName": "Meat/Poultry", "InStock": 29 }
                ]

                $("#grid").igGrid({
                    dataSource: ds,
                    responseDataKey: "results",
                    primaryKey: "ProductID",
                    height: '400px',
                    autoCommit: true,
                    columns: [
                        { headerText: "Product ID", key: "ProductID", dataType: "number", width: "15%",},
                        { headerText: "Product Name", key: "ProductName", dataType: "string", width: "25%"},
                        { headerText: "Category", key: "CategoryName", dataType: "string", width: "25%"},
                        { headerText: "Units In Stock", key: "InStock", dataType: "number", width: "35%"},
                    ],
                    features: [
                        {
                            name: "Updating",
                            editCellStarting: function(evt, ui){
                                if (!ui.rowAdding) {
                                    if (ui.columnKey === "ProductName"){
                                        return false;
                                    }
                                }
                            }
                        }
                    ]  
                })
            }
        })
    </script>
</body>
</html>

If you need any additional assistance, feel free to contact me.

1145

Offline Pete Davis posted over 6 years ago in reply to Vasil Pavlov

Sorry, I never got the notification that this message posted (our support agreement had expired, so I thought I was going to have to wait until we got it before I could post.).

Thank you for your answer.

Here's a specific testable example of it failing. I am using the "updating" feature as you can see. It succeeds on the "hide" but then fails on the "show":

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Grid Test</title>
    <link href="Content/themes/infragistics2012/infragistics.theme.css" rel="stylesheet">
    <link href="Content/structure/infragistics.css" rel="stylesheet">
    <script type="text/javascript" src="Scripts/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="Scripts/jquery-ui-1.10.2.js"></script>
    <script type="text/javascript" src="Scripts/infragistics.core.js"></script>
    <script type="text/javascript" src="Scripts/infragistics.lob.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            var gridOptions = {
                "mergeUnboundColumns": false,
                "enableUTCDates": false,
                "width": "100%",
                "localSchemaTransform": false,
                "autoGenerateColumns": false,
                "autoCommit": false,
                "dataSource": [{
                    "SampleId": "88-PR0813201800595",
                    "PartId": 0
                }, {
                    "SampleId": "88-PR0813201800596",
                    "PartId": 0
                }, {
                    "SampleId": "88-PR0813201800597",
                    "PartId": 0
                }, {
                    "SampleId": "88-PR0813201800598",
                    "PartId": 0
                }, {
                    "SampleId": "88-PR0813201800599",
                    "PartId": 0
                }],
                "responseDataKey": "Records",
                "primaryKey": "Index",
                "columns": [{
                    "key": "Index",
                    "dataType": "number",
                    "headerText": "Index",
                    "hidden": true
                }, {
                    "key": "SampleId",
                    "dataType": "string",
                    "headerText": "Sample Id"
                }, {
                    "key": "PartId",
                    "dataType": "string",
                    "format": "combobox",
                    "headerText": "Part"
                }],
                "features": [{
                    "name": "Sorting",
                    "type": "local",
                    "caseSensitive": false
                }, {
                    "columnSettings": [],
                    "name": "Filtering",
                    "type": "local",
                    "caseSensitive": false,
                    "mode": "simple"
                }, {
                    "columnSettings": [{
                        "columnKey": "SampleId",
                        "required": false,
                        "editorType": "text",
                        "readOnly": false,
                        "validation": false
                    }, {
                        "columnKey": "PartId",
                        "required": true,
                        "editorType": "combo",
                        "editorOptions": {
                            "valueKey": "PartId",
                            "textKey": "DisplayName",
                            "dataSource": [{
                                "PartId": 1,
                                "DisplayName": "Neck"
                            }, {
                                "PartId": 2,
                                "DisplayName": "Drumstick"
                            }, {
                                "PartId": 3,
                                "DisplayName": "Wing"
                            }, {
                                "PartId": 4,
                                "DisplayName": "Drumette"
                            }]
                        },
                        "validation": false
                    }],
                    "name": "Updating",
                    "horizontalMoveOnEnter": true,
                    "validation": true,
                    "enableAddRow": true,
                    "enableDeleteRow": true,
                    "editMode": "row",
                    "showDoneCancelButtons": true,
                    "startEditTriggers": "dblclick,f2",
                    "editRowStarted" : function(evt, ui) {
                        $("#grid").igGridUpdating('editorForKey', "SampleId").igEditor('hide');
                        $("#grid").igGridUpdating('editorForKey', "PartId").igEditor('show');
                    }
                }, {
                    "name": "Selection",
                    "mode": "row",
                    "multipleSelection": false
                }, {
                    "showPageSizeDropDown": true,
                    "name": "Paging",
                    "type": "local",
                    "pageSize": 20
                }, {
                    "name": "Resizing",
                    "deferredResizing": false
                }]
            }
            grid = $("#grid").igGrid(gridOptions);
        });
    </script>
</head>
<body>
    <h1>Grid</h1>
    <div>
        <table id="grid"></table>
    </div>
</body>
</html>

Reply

485

Offline Vasil Pavlov posted over 6 years ago in reply to Pete Davis

Hello Pete,

I have made some modifications to the provided code sample so that the editors get created when a new row gets added, but when in edit mode only the combo gets initialized:

The primary key has to be valid in order for the “Updating” feature to work correctly. As your datasource has only 2 properties for each record and one of them is the same for all records – I have chosen SampleId for a primaryKey

I have removed the “Index” column definition from the “columns” array as it tries to bind to a non-existent key – Index.

The PartId dataType has been changed to “number” and the “format: combobox” has been removed (because the igGrid doesn't support such format)

I have removed the editRowStarted event handler and handled editCellStarting instead.
Please note that grid = $("#grid").igGrid(gridOptions); would initialize the grid, but would also create implied global variable, which is not recommended as it pollutes the global scope and might lead to naming collisions. I have dropped the “grid =” and have just initialized the igGrid with $("#grid").igGrid(gridOptions);

<!DOCTYPE html>
<html>
<head>
    <title>Grid Test</title>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2018.1/latest/js/infragistics.loader.js"></script>
  
</head>
<body>
    <h1>Grid</h1>
    <div>
        <table id="grid"></table>
    </div>

    <script>
        $.ig.loader({
        scriptPath: "http://cdn-na.infragistics.com/igniteui/2018.1/latest/js/",
        cssPath: "http://cdn-na.infragistics.com/igniteui/2018.1/latest/css/",
        resources: "igGrid.*, igCombo",
        ready: function () {
            var gridOptions = {
                "mergeUnboundColumns": false,
                "enableUTCDates": false,
                "width": "100%",
                "localSchemaTransform": false,
                "autoGenerateColumns": false,
                "autoCommit": false,
                "dataSource": [{
                    "SampleId": "88-PR0813201800595",
                    "PartId": 0
                }, {
                    "SampleId": "88-PR0813201800596",
                    "PartId": 0
                }, {
                    "SampleId": "88-PR0813201800597",
                    "PartId": 0
                }, {
                    "SampleId": "88-PR0813201800598",
                    "PartId": 0
                }, {
                    "SampleId": "88-PR0813201800599",
                    "PartId": 0
                }],
                "responseDataKey": "Records",
                "primaryKey": "SampleId",
                "columns": [
                //     {
                //     "key": "Index",
                //     "dataType": "number",
                //     "headerText": "Index",
                //     "hidden": true
                // }, 
                {
                    "key": "SampleId",
                    "dataType": "string",
                    "headerText": "Sample Id"
                }, {
                    "key": "PartId",
                    "dataType": "number",
                    "headerText": "Part"
                }],
                "features": [
                {
                    "name": "Sorting",
                    "type": "local",
                    "caseSensitive": false
                }, 
                {
                    "name": "Filtering",
                    "type": "local",
                    "mode": "simple"
                }, 
                {
                    "columnSettings": [
                    {
                        "columnKey": "PartId",
                        "required": true,
                        "editorType": "combo",
                        "editorOptions": {
                            "valueKey": "PartId",
                            "textKey": "DisplayName",
                            "dataSource": [{
                                "PartId": 1,
                                "DisplayName": "Neck"
                            }, {
                                "PartId": 2,
                                "DisplayName": "Drumstick"
                            }, {
                                "PartId": 3,
                                "DisplayName": "Wing"
                            }, {
                                "PartId": 4,
                                "DisplayName": "Drumette"
                            }]
                        },
                        "validation": false
                    }],
                    "name": "Updating",
                    "horizontalMoveOnEnter": true,
                    "validation": true,
                    "enableAddRow": true,
                    "enableDeleteRow": true,
                    "editMode": "row",
                    "showDoneCancelButtons": true,
                    "startEditTriggers": "dblclick,f2",
                    "editCellStarting": function(evt, ui){
                        if (!ui.rowAdding) {
                            if (ui.columnKey === "SampleId"){
                                return false;
                            }
                        }
                    }
                }, 
                {
                    "name": "Selection",
                    "mode": "row",
                    "multipleSelection": false
                }, 
                {
                    "showPageSizeDropDown": true,
                    "name": "Paging",
                    "type": "local",
                    "pageSize": 20
                }, 
                {
                    "name": "Resizing",
                    "deferredResizing": false
                }
                ]
            }
            $("#grid").igGrid(gridOptions);
        }
    });
</script>
</body>
</html>

If you need any additional assistance, feel free to contact me.

Children

No Data