Expand Specific Row & Column

Question

I have implemented editable Pivot-View as defined in this example: https://stackblitz.com/edit/angular-iqe2sr-qkaerq?file=app.component.ts

And I'm using expandAll: false On DataSource setting to collapse all Rows on Initial Load.

this.dataSource = {
      dataSource: data,
      expandAll: false
}

Is there any way, I can expand only a Specific Row & Column after this configuration?

Sivamathi Natarajan · Answer

Hi Shreekumar, 
 
Thanks for contacting Syncfusion support. 
 
You can expand the specific members by using the property drilledMembers in code-behind. Kindly check the below code example. 
 
Code Example: 
 
Here we have expanded the members France, United Kingdom and FY 2015. 
 




 this.dataSourceSettings = { 
      enableSorting: true, 
      drilledMembers: [{ name: 'Country', items: ['France','United Kingdom'] },{ name: 'Year', items: ['FY 2015'] }], 
      columns: [{ name: 'Year' }, { name: 'Quarter' }, { name: 'Order_Source', caption: 'Order Source' }], 
      rows: [{ name: 'Country' }, { name: 'Product_Categories', caption: 'Product Categories' }, { name: 'Products' }], 
      formatSettings: [{ name: 'In_Stock', format: 'N0' },{ name: 'Amount', format: 'N0' }], 
      dataSource: Pivot_Data, 
      expandAll: false, 
      values: [{ name: 'In_Stock', caption: 'In Stock' }, 
      { name: 'Amount', caption: 'Sold Amount' }], 
      filters: [] 
    }; 
 
 
Meanwhile, we have prepared a sample for your reference. Kindly check the below sample and documentation link for your reference. 
 
Sample link: https://stackblitz.com/edit/angular-iqe2sr-mr6pir?file=app.component.ts 
Documentation link: https://ej2.syncfusion.com/angular/documentation/pivotview/drill-down/?no-cache=1#expand-specific-members 
 
We hope the above sample meets your requirements.  
 
Regards, 
Sivamathi.

Shreekumar · Answer

This one is cool. But, Is there any way I can expand by Index (Row / Column) instead of Member Names?

Sivamathi Natarajan · Answer

Hi ShreeKumar, 
 
We were unable to understand the exact requirement from the last query. Kindly provide more details about your requirement with screenshots/video (if possible) which would be helpful for us to proceed further.   
 
Regards, 
Sivamathi.

Shreekumar · Answer

I wanted to set the drilled-members dynamically.

<ejs-pivotview #pivotview id='PivotView' 
  ....... (load)='load($event)'>
</ejs-pivotview>

load(args) {
    args.dataSourceSettings = {
      drilledMembers: [
        // Setting members dynamically based on existing data source.
        // So that I can expand only one set of data initially and all are collapsed
      ]
    };
}

Sivamathi Natarajan · Answer

Hi ShreeKumar, 
 
Could you please provide me the below details, 
 

Will you change the data source dynamically?
Are you want to change the drilledMembers using external button click?
 
Please let us know if you have concern. 
 
Regards, 
Sivamathi.

Shreekumar · Answer

Yes, data source will change based on external click event.

On that time, I want to set the Drilled Members.

Here drilled members will change based on the data-source.

I always extract drilled-members from first object of an array objects data source.

Sivamathi Natarajan · Answer

Hi ShreeKumar, 
 
You can set the drilled members based on the data source using following code example. Here we have modified data source and validated the drilled member field in data source. And added row, column and value fields based on the data source. 
 
Code Example: 
 




  change(e: Event): void { 
    this.pivotObj.dataSourceSettings.dataSource = Pivot_Data1; 
    var dataKeys = Object.keys(this.pivotObj.dataSourceSettings.dataSource[1]); 
    if ((dataKeys as any).includes("Year")) { 
      this.pivotObj.dataSourceSettings.drilledMembers = [{ name: 'Year', items: ['FY 2015'] }] 
    } 
    this.pivotObj.dataSourceSettings.rows = [{ name: 'Year' }, { name: 'Quarter' }]; 
    this.pivotObj.dataSourceSettings.columns = [{ name: 'Country' }]; 
    this.pivotObj.dataSourceSettings.values = [{ name: 'Sold' }]; 
    this.pivotObj.dataSourceSettings.formatSettings = [{ name: 'Sold', format: 'N0' }]; 
  } 
 
 
 
Meanwhile, we have prepared a sample for your reference. Please check the below sample link. 
 
Sample Link: https://stackblitz.com/edit/angular-iqe2sr-wqrn3y?file=app.component.ts 
 
We hope the above sample meets your requirements. 
 
Regards,Sivamathi.

Shreekumar · Answer

It is working only for 1 level members. Not for nested members

this.pivotGridObj.dataSourceSettings.drilledMembers = [
      { name: 'year', items: ['2021']},
      { name: 'departmentName', items: ['Hierarchy for Men'] },
      { name: 'className', items: ['Footwear'] }, // This is nested under departmentName
      { name: 'quarterDescription', items: ['quarterDescription'] } // This is nested under year
    ];

Refer attached images:
Capture-1 : Actual
Capture-2: Expected

Attachment: Desktop_8d0c5b67.zip

Sivamathi Natarajan · Answer

Hi ShreeKumar, 
 
Please check the below documentation to drill the nested members. 
 
UG Link: https://ej2.syncfusion.com/javascript/documentation/pivotview/drill-down/#expand-specific-members 
 
Meanwhile, we have prepared a sample for your reference. Please check the below sample link. 
 
Sample Link: https://stackblitz.com/edit/angular-iqe2sr-eaxgif?file=app.component.ts 
 
Please let us know if you have concern. 
 
Regards, 
Sivamathi.