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
15
Unable to bind child layout to the dataset that is loaded on demand in igHierarchicalGrid
posted

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' }
]
}
]
});

Parents Reply
  • 660
    Offline posted in reply to Alex Wang

    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

Children
No Data