We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Hierarchical grid after grid data changes exapand child

Hi I have worked out how to store a hierarchical grid expanded row and I do this when my datasource updates from firebase database. And I would like to once the grid has been updated with new data expand the stored row. Problem is that it seems that I am always too early, is there a way to detect that the datasource has been updated and I should trigger the expand stored row function this.expandedIndexes(); .


My code:

export class MainComponent {
parentKey: any;

constructor(
public firebase: AngularFireDatabase,
private fns: AngularFireFunctions,
private firebasedb: FirebaseService,
private toast: HotToastService
) {
firebase
.list('/main')
.valueChanges()
.subscribe((users) => {
this.storeExpandedIndexes();
this.mainGrid.dataSource = users; //intial data binding to grid
this.expandedIndexes();
});

firebase
.list('/main')
.snapshotChanges()
.subscribe((users) => {
this.storeExpandedIndexes();
this.mainGrid.dataSource = users; // sync server data changes to grid
this.expandedIndexes();
});
}

@ViewChild('mainGrid')
public mainGrid: GridComponent;
public editSettings: EditSettingsModel;
public toolbar: ToolbarItems[];
public filterOption: FilterSettingsModel = { type: 'Excel' };
sortOptions: { columns: { field: string; direction: string }[] };
public commandsInvoice: CommandModel[];

public dropdownRates: object[] = [
{ value: '1', text: 'Hourly' },
{ value: '0', text: 'Flat' },
];
public dropdown2: object[] = [
{ uid: 'Waiting', countryId: '1' },
{ uid: 'In Progress', countryId: '2' },
{ uid: 'Finished', countryId: '3' },
];
public dropdownParams2 = {
params: {
allowFiltering: true,
dataSource: new DataManager(this.dropdown2),
fields: { text: 'uid', value: 'uid' },
query: new Query(),
actionComplete: () => false,
},
};
public userparams = {
params: {
allowFiltering: true,
fields: { text: 'email', value: 'email' },
query: new Query(),
actionComplete: () => false,
},
};

public childGrid: GridModel = {
toolbar: ['Add', 'Delete'],
queryString: 'key',
allowResizing: true,
editSettings: {
allowEditing: true,
allowAdding: true,
allowDeleting: true,
mode: 'Dialog',
},
columns: [
{
field: 'jobTitle',
headerText: 'Job Title',
textAlign: 'Right',
allowEditing: true,
width: 120,
},
{
field: 'worker',
headerText: 'Worker Name',
width: 100,
editType: 'dropdownedit',
edit: this.userparams,
},
{
field: 'rateType',
headerText: 'Rate Type',
width: 50,
allowEditing: true,
foreignKeyValue: 'text',
foreignKeyField: 'value',
dataSource: this.dropdownRates,
},
{
field: 'rateQty',
headerText: 'Rate Qty',
width: 50,
allowEditing: true,
},
{ field: 'ebay', headerText: 'Ebay', width: 50, allowEditing: true },
{
field: 'euroCarParts',
headerText: 'EuroCarParts',
width: 50,
allowEditing: true,
},
{ field: 'sdl', headerText: 'SDL', width: 50, allowEditing: true },
{ field: 'imex', headerText: 'IMEX', width: 50, allowEditing: true },
{ field: 'dawmac', headerText: 'Dawmac', width: 50, allowEditing: true },
{
field: 'salvageYard',
headerText: 'SalvageYard',
width: 50,
allowEditing: true,
},
{ field: 'oil', headerText: 'Oil', width: 50 },
{
field: 'priceMulti',
headerText: 'Price Multi',
width: 50,
allowEditing: true,
},
{ field: 'time', headerText: 'Spent Time', width: 50 },
{
field: 'date',
headerText: 'Date',
width: 70,
type: 'date',
format: 'dd/MM/yyyy',
editType: 'datepickeredit',
},
{ field: 'cof', headerText: 'Cof', width: 50, allowEditing: true },

{
field: 'price',
headerText: 'Final Price',
width: 50,
allowEditing: false,
},
{
field: 'salary',
headerText: 'Worker Salary',
width: 50,
allowEditing: false,
},
{ field: 'profit', headerText: 'Profit', width: 50, allowEditing: false },
],



actionComplete: (args: any) => {

switch (args.requestType) {
case 'save':
this.firebasedb.updateJobs(JSON.parse(JSON.stringify(args.data)),this.parentKey);
break;
case 'delete':

args.data.forEach((row: any) => {
this.firebasedb.removeJob(row.key, this.parentKey);
});
break;
}
},
};

public actionCompleteMain(args: any): void {
switch (args.requestType) {
case 'save':
this.firebasedb.updateMain(JSON.parse(JSON.stringify(args.data)));
break;
case 'delete':
args.data.forEach((row: any) => {
this.firebasedb.removeMain(row.key);
});

break;
}
}



public indexes;
public expandFlag = false;
// Function for storing expanded parent row indexes
storeExpandedIndexes() {
// Retrieves the expanded row elements
var expandedElements = this.mainGrid.element.querySelectorAll('.e-detailrowexpand');
this.indexes = [];
// // Parent row indexes of the expanded child Grid are pushed to global variable – “indexes”
expandedElements.forEach(ele => this.indexes.push(parseInt(ele.closest('.e-row').getAttribute("aria-rowindex"))))

}
expandedIndexes() {
this.mainGrid.detailRowModule.expand(this.indexes[0]-1)
}


detailDataBound(e: any) {
this.parentKey = e.data.key;

this.firebase
.list(`/main/${this.parentKey}/children`)
.snapshotChanges()
.subscribe((users) => {
e.childGrid.query = new Query();
e.childGrid.dataSource = users; // sync server data changes to grid
});

this.firebase
.list(`/main/${this.parentKey}/children`)
.valueChanges()
.subscribe((users) => {
e.childGrid.query = new Query();
e.childGrid.dataSource = users; //intial data binding to grid
});

}

onLoad(e): void {
// event capturing used

this.mainGrid.element.addEventListener(
'click',
this.collapseAll.bind(this),
true
);
}
collapseAll(args): void {

let tgt = args.target;
if (
tgt.closest('.e-grid').getAttribute('id') !==
this.mainGrid.element.getAttribute('id')
) {
// for child grid
if (
tgt.classList.contains('e-dtdiagonalright') ||
tgt.classList.contains('e-detailrowcollapse')
) {
tgt.closest('.e-grid').ej2_instances[0].detailRowModule.collapseAll();
}
} else if (
tgt.classList.contains('e-dtdiagonalright') ||
tgt.classList.contains('e-detailrowcollapse')
) {
// for Parent Grid Alone
this.mainGrid.detailRowModule.collapseAll();
}

}



All the datasourcechange / changed  and dataStatechange events seem to trigger too early as well.



<ejs-grid  #mainGrid (dataSourceChanged)='expandedIndexes()' (dataStateChange)='expandedIndexes()' (actionComplete)='actionCompleteMain($event)' [childGrid]='childGrid'  (commandClick)='commandClickInvoice($event)'  (load)='onLoad($event)' (detailDataBound)='detailDataBound($event)'  height="700" allowResizing="true"  [allowSorting]="true" [editSettings]='editSettings' [toolbar]='toolbar' [allowFiltering]='true' [filterSettings]="filterOption">
    <e-columns >
        <e-column field='carReg' headerText='Car Reg' width='120'    ></e-column>
        <e-column field='carMake' headerText='Car Make/Model' width='150'    ></e-column>
        <e-column field='clientName' headerText='Client Name' width='120'    ></e-column>
        <e-column field='address' headerText='Address' width='150'    ></e-column>
        <e-column field='mobile' headerText='Mobile' width='100'    ></e-column>
        <e-column field='email' headerText='Email' width='150'    ></e-column>
        <e-column field='milage' headerText='Milage' width='100'    ></e-column>
        <e-column field='vat' headerText='Vat' width='80'  foreignKeyValue='text' foreignKeyField='value' [dataSource]='dropdownVAT'   ></e-column>

        <e-column field='status' headerText='Status' width='100' editType= 'dropdownedit'  [edit]='dropdownParams'   ></e-column>
        <e-column field='workers' headerText='Workers' width='150'    [allowEditing]="false"   ></e-column>
        <e-column headerText='' width=110 [commands]='commandsInvoice'></e-column>

    </e-columns>

</ejs-grid>

1 Reply

PS Pavithra Subramaniyam Syncfusion Team April 24, 2023 10:02 AM UTC

Hi Frank Alberts,


Thanks for contacting Syncfusion support.


From your query, we suspect that you want to call a function once the Grid data binding is completed. If yes, then we suggest the “dataBound” event to achieve your requirement. This event will be triggered every time the Grid data is changed, data actions like refreshing, filtering, paging, sorting, etc. Please refer to the below API for more information.


https://ej2.syncfusion.com/documentation/api/grid/#databound


Regards,

Pavithra S


Loader.
Live Chat Icon For mobile
Up arrow icon