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.
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:
<!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.
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>
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>