Forums Ignite UI for jQuery
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
Close
Alex Wang
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
No Data
Reply
  • 700
    Offline posted

    Hello 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.

    This could look similar to the following:

    $(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;
});

    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