Hi,
We are trying to implement late binding for child layout of parent in igHierarchicalGrid when the parent row is expanded. We have some hard time to get it to work. The child rows are simply not showing. Please help!!!
Example code:
$('#SalesforceProcessesGrid').igHierarchicalGrid({ initialDataBindDepth: 0, dataSource: vm.Processes, height: "600px", autoGenerateColumns: false, autofitLastColumn: false, primaryKey: 'sf_process_master_id', autoCommit: true, renderCheckboxes: true, caption: 'Processes', columns: [ { headerText: "Process ID", key: "sf_process_master_id", dataType: 'number', hidden: true }, { headerText: "Process", key: "sf_process_ty", dataType: "string", width: "14%" }, { headerText: "Start Dt", key: "process_start_dt", dataType: "string", width: "12%" }, { headerText: "User", key: "process_start_user", dataType: "string" },
{ headerText: "Workorder", key: "crit_workorder", dataType: "string" }, { headerText: "Job IDs", key: "crit_job_ids", dataType: "string" }, { headerText: "Account Ty", key: "crit_account_ty", dataType: "string" }, { headerText: "Kill Process ID", key: "crit_process_id", dataType: "number" }, { headerText: "Has Error", key: "error_ind", dataType: "bool" }, { headerText: "Error Message", key: "error_msg", dataType: "string" },
{ headerText: "Retry #", key: "process_attempt_cnt", dataType: "number", format: '###,###,###', columnCssClass: 'alignR' }, { headerText: "Completed", key: "sf_batch_completed_ind", dataType: "bool" }, { headerText: "Completed Dt", key: "sf_batch_completed_dt", dataType: "string", width: "12%" }
], features: [ { name: 'ColumnMoving', moveType: 'render' }, { name: 'Resizing' }, { name: 'Hiding' }, { name: 'Sorting' }, { name: 'Paging', type: "local", pageSize: 50, pageSizeDropDownLocation: 'inpager' }, { name: "Selection" }, { name: "Filtering", allowFiltering: true, caseSensitive: false }, ], rowExpanding: function (evt, ui) { var parentRow = ui.parentrow; var parentRowId = parentRow.attr("data-id");
var res = GetSalesforceProcessesByProcessMasterId(parentRowId); var processItems = res.Items; //??? not working parentRow.childrenData = processItems; },
columnLayouts: [ { key: 'Items', autoGenerateColumns: false, primaryKey: 'sf_process_item_id', autofitLastColumn: false, renderCheckboxes: true,//caption: 'Items', columns: [ { headerText: 'sf_process_item_id', key: 'sf_process_item_id', dataType: 'number', hidden: true, headerCssClass: 'xSmallFont' }, { headerText: 'Start Dt', key: 'sf_process_item_created_dt', dataType: 'string', width: "10%", headerCssClass: 'xSmallFont' }, { headerText: "User", key: "sf_process_item_created_user", dataType: 'string', headerCssClass: 'xSmallFont' }, { headerText: 'Process Key', key: 'sf_process_item_key', dataType: 'string', width: "10%", headerCssClass: 'xSmallFont' }, { headerText: 'SF Object Name', key: 'sf_object_nm', dataType: 'string', width: "12%", headerCssClass: 'xSmallFont' }, { headerText: "SQL Retreived", key: "sql_records_retrieved", dataType: 'number', format: '###,###,###', columnCssClass: 'alignR', headerCssClass: 'xSmallFont' }, { headerText: 'SQL-Records Retreived Dt', key: 'sql_records_retrieved_dt', dataType: 'string', width: "10%", headerCssClass: 'xSmallFont' }, { headerText: 'SF Total Pushed', key: 'sf_total_processed', dataType: 'number', format: '###,###,###', columnCssClass: 'alignR', headerCssClass: 'xSmallFont' },// { headerText: "SF Total Pushed Dt", key: "sf_total_processed_dt", dataType: 'string', width: "10%", headerCssClass: 'xSmallFont' }, { headerText: 'SF Total Success', key: 'sf_total_success', dataType: 'number', format: '###,###,###', columnCssClass: 'alignR', headerCssClass: 'xSmallFont' }, { headerText: 'SF Total Failed', key: 'sf_total_failed', dataType: 'number', format: '###,###,###', columnCssClass: 'alignR', headerCssClass: 'xSmallFont' }, { headerText: "SF Ids Returned", key: "sf_ids_returned", dataType: 'number', format: '###,###,###', columnCssClass: 'alignR', headerCssClass: 'xSmallFont' }, { headerText: 'SF Ids Returned Dt', key: 'sf_ids_returned_dt', dataType: 'string', width: "10%", headerCssClass: 'xSmallFont' },
{ headerText: "SQL-SF IDs Updated", key: "sql_ids_updated", dataType: 'number', format: '###,###,###', columnCssClass: 'alignR', headerCssClass: 'xSmallFont' },// { headerText: 'SQL-SF IDs Updated Dt', key: 'sql_ids_updated_dt', dataType: 'string', width: "10%", headerCssClass: 'xSmallFont' } ] } ] });
Hello Alex,
Thank you for following up!
After an investigation, an approach I could suggest is using the rowExpanding event and the allChildrenWidgets method which returns a flat list of all child grid widgets. Then, you should filter this list in order to get the grid which has options.foreignKeyValue equal to the parentRowId, set its dataSource to the desired data, and use the dataBind method.
This could look similar to the following:
rowExpanding: function (evt, ui) { var parentRow = ui.parentrow; var parentRowId = parentRow.attr("data-id"); var childGrids = $("#grid").igHierarchicalGrid("allChildrenWidgets"); var targetGrid = childGrids.filter(function (index, grid) { return grid.options.foreignKeyValue === parseInt(parentRowId); })[0]; // set desired data here targetGrid.options.dataSource = []; targetGrid.dataBind(); },
Please test it on your side and let me know if you need any further assistance regarding this matter.
Looking forward to your reply.
Sincerely, Riva Ivanova Software Developer
Hi Riva,
Your solution works great! But what if I want the behavior that every time a row is expanded even the same row, the API needs to be called in order to get the latest process items. Please let me know how to implement that.
Thanks,
Alex
Thank you for posting in our community!
I have been looking into your question and what I would suggets is using the childGridCreating event instead of the rowExpanding event. The reason is that the childGridCreating event is fired only once for each child grid when being created and allows the developer to override the child grid creation, for example, set the dataSource, whereas the rowExpanding event is fired every time a row is expanded.
$(document).on("igchildgridcreating", "#SalesforceProcessesGrid", function (evt, ui) { var idParams = ui.id.split(':'); var parentRowId = idParams[1]; var res = GetSalesforceProcessesByProcessMasterId(parentRowId); var processItems = res.Items; ui.options.dataSource = processItems; });