Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
1145
Cannot call methods on igEditor prior to initialization
posted

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.

  • 265
    Offline posted

    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.