Hi there,
I'm using latest release '12.2.20122.2176' and getting an error when trying to expand a row whose Primary Key contains SPACE ' ' or FORWARD SLASH '/' but it works in all other cases. An error shows as : "Unable to get property _injectGrid of undefined or null reference"
I'm binding the Grid in javascript using JSON data and below are shots of my data source: (MaterialRef is my Primary key and row in bold works fine whereas other two don't)
{"MaterialRef":"0/63MM","MaterialType":"2","Description":"0/63MM MATERIAL ","MaterialClassRef":"D02","WaterDiscount":"0.00","MixStrength":"","MixType":"","Certification":"","Inactive":false,"UserCreated":"Caroline Menzies","UserModified":"Bill Ramsay","DateTimeCreated":"23/08/2011","DateTimeModified":"04/04/2013","UnitSurcharge":false,"Items":[{"MaterialRef":"0/63MM","UnitRef":"QUAD","MaterialRight":false},{"MaterialRef":"0/63MM","UnitRef":"QUAR","MaterialRight":false},{"MaterialRef":"0/63MM","UnitRef":"QUAY","MaterialRight":false},{"MaterialRef":"0/63MM","UnitRef":"QUBB","MaterialRight":false},{"MaterialRef":"0/63MM","UnitRef":"QUBE","MaterialRight":false},{"MaterialRef":"0/63MM","UnitRef":"QUBG","MaterialRight":false},{"MaterialRef":"0/63MM","UnitRef":"QUBH","MaterialRight":false},{"MaterialRef":"0/63MM","UnitRef":"QUCL","MaterialRight":false},{"MaterialRef":"0/63MM","UnitRef":"QUCR","MaterialRight":false},{"MaterialRef":"0/63MM","UnitRef":"QUDU","MaterialRight":false},{"MaterialRef":"0/63MM","UnitRef":"QUGN","MaterialRight":false},{"MaterialRef":"0/63MM","UnitRef":"QUKI","MaterialRight":false},{"MaterialRef":"0/63MM","UnitRef":"QUKK","MaterialRight":false},{"MaterialRef":"0/63MM","UnitRef":"QUMW","MaterialRight":false},{"MaterialRef":"0/63MM","UnitRef":"QUPC","MaterialRight":false},{"MaterialRef":"0/63MM","UnitRef":"QUSL","MaterialRight":false},{"MaterialRef":"0/63MM","UnitRef":"QUSN","MaterialRight":false},{"MaterialRef":"0/63MM","UnitRef":"QUTL","MaterialRight":false},{"MaterialRef":"0/63MM","UnitRef":"QUTN","MaterialRight":false},{"MaterialRef":"0/63MM","UnitRef":"QUWH","MaterialRight":false}]},{"MaterialRef":"0-16MMGRAV","MaterialType":"2","Description":"0-16MM GRAVELs","MaterialClassRef":"D15","WaterDiscount":"0.00","MixStrength":"","MixType":"","Certification":"","Inactive":false,"UserCreated":"Caroline Menzies","UserModified":"Bill Ramsay","DateTimeCreated":"26/04/2012","DateTimeModified":"04/04/2013","UnitSurcharge":false,"Items":[{"MaterialRef":"0-16MMGRAV","UnitRef":"QUAD","MaterialRight":false},{"MaterialRef":"0-16MMGRAV","UnitRef":"QUAR","MaterialRight":false},{"MaterialRef":"0-16MMGRAV","UnitRef":"QUAY","MaterialRight":false},{"MaterialRef":"0-16MMGRAV","UnitRef":"QUBB","MaterialRight":false},{"MaterialRef":"0-16MMGRAV","UnitRef":"QUBE","MaterialRight":false},{"MaterialRef":"0-16MMGRAV","UnitRef":"QUBG","MaterialRight":false},{"MaterialRef":"0-16MMGRAV","UnitRef":"QUBH","MaterialRight":false},{"MaterialRef":"0-16MMGRAV","UnitRef":"QUCL","MaterialRight":false},{"MaterialRef":"0-16MMGRAV","UnitRef":"QUCR","MaterialRight":false},{"MaterialRef":"0-16MMGRAV","UnitRef":"QUDU","MaterialRight":false},{"MaterialRef":"0-16MMGRAV","UnitRef":"QUGN","MaterialRight":false},{"MaterialRef":"0-16MMGRAV","UnitRef":"QUKI","MaterialRight":false},{"MaterialRef":"0-16MMGRAV","UnitRef":"QUKK","MaterialRight":false},{"MaterialRef":"0-16MMGRAV","UnitRef":"QUMW","MaterialRight":false},{"MaterialRef":"0-16MMGRAV","UnitRef":"QUPC","MaterialRight":false},{"MaterialRef":"0-16MMGRAV","UnitRef":"QUSL","MaterialRight":false},{"MaterialRef":"0-16MMGRAV","UnitRef":"QUSN","MaterialRight":false},{"MaterialRef":"0-16MMGRAV","UnitRef":"QUTL","MaterialRight":false},{"MaterialRef":"0-16MMGRAV","UnitRef":"QUTN","MaterialRight":false},{"MaterialRef":"0-16MMGRAV","UnitRef":"QUWH","MaterialRight":false}]}{"MaterialRef":"1 TONNE AR","MaterialType":"2","Description":"1 TONNE ROCK ","MaterialClassRef":"D03","WaterDiscount":"0.00","MixStrength":"","MixType":"","Certification":"","Inactive":true,"UserCreated":"Caroline Menzies","UserModified":"Bill Ramsay","DateTimeCreated":"10/11/2008","DateTimeModified":"17/06/2012","UnitSurcharge":false,"Items":[{"MaterialRef":"1 TONNE AR","UnitRef":"QUAD","MaterialRight":false},{"MaterialRef":"1 TONNE AR","UnitRef":"QUAR","MaterialRight":false},{"MaterialRef":"1 TONNE AR","UnitRef":"QUAY","MaterialRight":false},{"MaterialRef":"1 TONNE AR","UnitRef":"QUBB","MaterialRight":false},{"MaterialRef":"1 TONNE AR","UnitRef":"QUBE","MaterialRight":false},{"MaterialRef":"1 TONNE AR","UnitRef":"QUBG","MaterialRight":false},{"MaterialRef":"1 TONNE AR","UnitRef":"QUBH","MaterialRight":false},{"MaterialRef":"1 TONNE AR","UnitRef":"QUCL","MaterialRight":false},{"MaterialRef":"1 TONNE AR","UnitRef":"QUCR","MaterialRight":false},{"MaterialRef":"1 TONNE AR","UnitRef":"QUDU","MaterialRight":false},{"MaterialRef":"1 TONNE AR","UnitRef":"QUGN","MaterialRight":false},{"MaterialRef":"1 TONNE AR","UnitRef":"QUKI","MaterialRight":false},{"MaterialRef":"1 TONNE AR","UnitRef":"QUKK","MaterialRight":false},{"MaterialRef":"1 TONNE AR","UnitRef":"QUMW","MaterialRight":false},{"MaterialRef":"1 TONNE AR","UnitRef":"QUPC","MaterialRight":false},{"MaterialRef":"1 TONNE AR","UnitRef":"QUSL","MaterialRight":false},{"MaterialRef":"1 TONNE AR","UnitRef":"QUSN","MaterialRight":false},{"MaterialRef":"1 TONNE AR","UnitRef":"QUTL","MaterialRight":false},{"MaterialRef":"1 TONNE AR","UnitRef":"QUTN","MaterialRight":false},{"MaterialRef":"1 TONNE AR","UnitRef":"QUWH","MaterialRight":false}]}
Please advise any help?
Regards,
Jasdeep
Hello Jasdeep,
What features do you use? The error is related to the grid features.
Thanks in advance,Martin PavlovInfragistics, Inc.
Hi Martin,
Thanks for your reply.
I got this error in all grid features, mainly the one appears first in list. If I comment that out then it shows on next one. Can you please create an sample at your side to see an error, using datasource from my previous post and below is my java script file. Error appears on row expanding.
function getMaterialPricesList() { try{ $.ig.loader(function () { $("#GridTable").igHierarchicalGrid({ columns: [ { headerText: "Price List Ref", key: "R", width: "200px", dataType: "string" }, { headerText: "Price List Name", key: "N", width: "600px", dataType: "string" }, { headerText: "Hide Quote Pricing", key: "H", width: "100px", dataType: "bool", format: "checkbox" }, { headerText: "Inactive", key: "Inactive", width: "50px", dataType: "bool", format: "checkbox" } ], width: "1100px", initialDataBindDepth: 1, dataSource: URL, responseDataKey: "Records", responseDataType: "json", responseTotalRecCountKey: "servertotalcount", renderCheckboxes: true, autoGenerateColumns: false, autoGenerateLayouts: false, defaultChildrenDataProperty: "Items", primaryKey: "R", //rowsRendered: rowsRenderedHierarchical, //rowExpanding: rowsRenderedHierarchicalChild, columnLayouts: [ { key: "Items", name: "Items", responseDataKey: "", childrenDataProperty: "Items", autoGenerateColumns: false, renderCheckboxes: true, primaryKey: "I", foreignKey: "R", features: [ { name: "Filtering", allowFiltering: true, caseSensitive: false, mode: "advanced" }, { name: 'Sorting', firstSortDirection: 'descending' }, { name: 'Paging', type: "local", pageSize: 10, }, { name: "Updating", startEditTriggers: "dblclick", editMode: editmode, enableAddRow: createAccess, enableDeleteRow: false, enableDataDirtyException: false, // editCellStarting: editCellStartingMaterialPrice, // editCellStarted: editCellStartedMaterialPrice, // editRowEnding: editRowEndingMaterialPrice, // rowDeleting: deletingRowMaterialPrice, columnSettings: [ { columnKey: "E", editorType: "datepicker", editorOptions: { required: false, validatorOptions: { required: false } } }, { columnKey: "M", editorType: "combo", editorOptions: { mode: "dropdown", dropDownWidth: "300px", dataSource: MaterialRefJSON, dataSourceType: "json", textKey: "Name", valueKey: "Value", readOnly: true, required: true, // selectionChanged: selectionChangedMaterialRef, validatorOptions: { required: true } } }, { columnKey: "C", editorType: 'numeric', validation: true, editorOptions: { required: true, maxLength: 5, decimalSeparator: "." } }, { columnKey: "F", editorType: 'numeric', validation: true, editorOptions: { required: true, maxLength: 5, decimalSeparator: "." } } ] }], columns: [ { key: "I", headerText: "ID", dataType: "number", width: "25px", hidden: true }, { key: "R", headerText: "Price List Ref", dataType: "string", width: "95px" }, { key: "M", headerText: "Material Ref", dataType: "string", width: "100px" }, { key: "D", headerText: "Description", dataType: "string", width: "150px" }, { key: "T", headerText: "Material Type", dataType: "string", width: "70px" }, { key: "C", headerText: "Current Price", dataType: "numeric", width: "50px" }, { key: "F", headerText: "Future Price", dataType: "numeric", width: "50px" }, { key: "E", headerText: "Effective Date", dataType: "date", format: "dd/MM/yy", width: "100px"}, { key: "Inactive", headerText: "Inactive", width: "50px", dataType: "bool", format: "checkbox" } ] }], features: [ { name: 'Selection', //rowSelectionChanged: rowSelectionChanged_handler }, { name: 'Paging', type: 'remote', pageSize: 5, recordCountKey: "servertotalcount", pageSizeUrlKey: "pageSize", pageIndexUrlKey: "page", pageSizeChanging: function(evt, ui) { page = 0; filterExpr = ""; groupExpr = ""; sortColumn = ""; } }, { name: 'Sorting', type: 'remote', firstSortDirection: 'descending', columnSorting: columnSorting_handler }, { name: "Filtering", allowFiltering: true, caseSensitive: false, type: "remote", mode: "advanced", dataFiltering: dataFiltering_handler, columnSettings: [ { columnKey: "Inactive", allowFiltering: false }, { columnKey: "H", allowFiltering: false } ] }, //{ // name: "GroupBy", // type: "remote", // emptyGroupByAreaContent: "Drag a column here to group by", // modalDialogHeight: 100, // groupedColumnsChanging: groupedColumnsChanging_handler, // columnSettings: [ // { columnKey: "R", allowGrouping: true }, // { columnKey: "H", allowGrouping: true }, // { columnKey: "Inactive", allowGrouping: true, condition: false } // ] //}, { name: "Updating", startEditTriggers: "dblclick", enableAddRow: createAccess, editCellStarted: function(evt, ui) { switch (ui.columnKey) { case 'R': if (ui.rowAdding) ui.editor.igEditor('option', 'readOnly', false); else ui.editor.igEditor('option', 'readOnly', true); break; default: } }, enableDeleteRow: false, enableDataDirtyException: false, // editRowEnding: editRowEndingMaterialPriceList, // rowDeleting: deletingRowMaterialPriceList, columnSettings: [ { columnKey: "R", editorType: "text", editorOptions: { required: true, validatorOptions: { required: true } } }, ] }] }); }); $("#GridTable").data("igGrid").dataSource.settings.urlParamsEncoded = function(owner, params) { Page = 0; params.filteringParams.Filter = filterExpr; params.filteringParams.Group = groupExpr; params.filteringParams.Sort = sortColumn; }; } catch (e) { alert('getMaterialPricesList() - An error has occurred: ' + e.message) }}
I can reproduce the issue.
When primary key is defined we use its value to create unique id for the child layout. The primary key values in your case contain characters which are not valid for HTML id attribute value. As a consequence the jQuery ID selector doesn't return the correct result.
This is a known issue which we'll add to our documentation.
One way to resolve it is to generate another column with valid characters and use it for an id.
Hope this helps,Martin PavlovInfragistics, Inc.
Hi All,
If you have any further questions or concerns with this, please feel free to let us know.
I dont know if this helps but I had the same type of issue. I just used underscores instead of a space and used CSS on that cell with font-size: 0px !important; for a visuals