I am attempting to put together a grid with parent, child and grandchild data. To this point I am able to get the child grid working. I am unable to get the grandchild grid to load as it appears the query being sent to the API URL is incomplete.
The reason is that the grandchild data requires two key fields instead of just one. After reading through the forums I've tried various suggestions for getting this to work. Most recently I attempted to set an additional query param in the child grid's detailDataBound event but it still does not work.
The grid setup:
} else {
gridDataMgr2 = pjmDataManager(2);
sfChildGrid2 = {
dataSource: gridDataMgr2,
queryString: groupProp,
columns: gridColumns,
allowResizing: true,
allowSorting: true,
//allowGrouping: true,
allowFiltering: true,
filterSettings: { type: 'Excel' },
enableStickyHeader: true,
height: '100%',
width: '100%',
showColumnChooser: true
}
gridDataMgr1 = pjmDataManager(1);
sfChildGrid1 = {
dataSource: gridDataMgr1,
queryString: 'Line',
columns: gridColumns,
allowResizing: true,
allowSorting: true,
//allowGrouping: true,
allowFiltering: true,
filterSettings: { type: 'Excel' },
editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Dialog' },
enableStickyHeader: true,
height: '100%',
width: '100%',
showColumnChooser: true,
childGrid: sfChildGrid2,
detailDataBound: onGrandChildLoad,
toolbar: ['ColumnChooser'],
}
gridDataMgr = pjmDataManager(0);
sfGrid = new ej.grids.Grid({
dataSource: gridDataMgr,
columns: gridColumns,
allowResizing: true,
allowSorting: true,
allowGrouping: true,
allowFiltering: true,
filterSettings: { type: 'Excel' },
editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Dialog' },
enableStickyHeader: true,
height: 350,
width: '100%',
showColumnChooser: true,
childGrid: sfChildGrid1,
detailDataBound: onGridLoad,
allowPaging: true,
toolbar: ['ColumnChooser'],
});
}
sfGrid.appendTo('#SfDataGrid');
The datamanager setup:
function pjmDataManager(tier = -1) {
return (
new ej.data.DataManager({
offline: true,
adaptor: new ej.data.CustomDataAdaptor({
getData: function (option) {
readIDO(option, tier);
},
addRecord: function (option) {
insertIDO(option);
},
updateRecord: function (option) {
updateIDO(option);
},
deleteRecord: function (option) {
deleteIDO(option);
}
, batchUpdate: function (option) {
//readIDO(option);
}
})
})
)
}
The APIs I'm using require a specific query string URL and I'm using the option parameter to get the where params to build the API query with (this is a partial snippet of a larger function, but this is the pertinent part to this post):
if (option.data) {
let _optData = tryParseJSONObject(option.data);
if (_optData && _optData.where) {
for (let _w = 0; _w < _optData.where.length; _w++) {
if (_optData.where[_w]) {
if (_optData.where[_w].field == 'Line' && _optData.where[_w].value != null) {
_line = _optData.where[_w].value;
} else if (_optData.where[_w].field == groupProp && _optData.where[_w].value != null) {
_group = _optData.where[_w].value;
}
} else {
}
}
}
}
The grandchild grid's first key value is Line. The second is represented with the groupProp variable. If the queryString is set to 'Line' then I get the Line value. If set to groupProp then I get that value. I need both for the API query:
http://localhost:8088/IDORequestService/ido/load/PJM_JobDetailNoRecordCap?properties=Company,Job,LineType,Entity,Tag,Description,Quantity,ExtendedCost,ExtendedPrice,derAwardQtyOrdered,derAwardExtCost,derAwardExtPrice,derBilledInvQty,derBilledInvCost,derBilledInvPrice,derRemainingQty,derRemainingCost,derRemainingPrice,joinItemERPStatusType,Line,Group,PartsLine,Sequence,InWorkflow,NoteExistsFlag,RowPointer,_ItemId&filter=Company = N'1000' AND Job = '109-01' AND Line = AND Group = 2 AND PartsLine IS NOT NULL&orderby=Line, [Group], PartsLine, Sequence
Notice how the "Line = " predicate has no value. This is ultimately my issue.
How can I get a second value into the option.where array so I can use it in this API URL?
The last thing I have tried was attempting to set an additional query parm on the grandchild grid's query, but this did not work to add the Line value to the option.data.where array:
function onGrandChildLoad(args) {
args.childGrid.query.addParams('Line', args.data.Line);
args.childGrid.refresh();
}
I am open to any suggestion that can make this work, even rewriting what I have to do it differently.
