Individual Expand and collapse Functionality Expected..

[khadervali]

I'm submitting a ... (check one with "x")

[ ] bug report => search github for a similar issue or PR before submitting
[X] feature request
[ ] support request => Please do not submit support request here, post on Stackoverflow or Gitter

Hi,

I have request or requirement I can say, If we have individual expand and collapse functionallity will be vert useful. Current behavior

Currently we have only three methods regarding expand rows are- toggleExpandRow,expandAllRows and collapseAllRows that's it. My expectations are to have a expandRow and collapseRow methods also required to expand or collapse perticular row.

NOTE: I am new to ngx-datatable if the above mentioned feature already exists in ngx-datattable please let me know I am in need..Thanks in advance. Expected behavior

Reproduction of the problem

What is the motivation / use case for changing the behavior?

Please tell us about your environment:

• Table version: 0.8.x

• Angular version: 2.0.x

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

• Language: [all | TypeScript X.X | ES6/7 | ES5]

[canpan14]

Does toggleExpandRow not suit your needs? It allows you to open and close one row as seen in the demo below. http://swimlane.github.io/ngx-datatable/#row-details

Source code: https://github.com/swimlane/ngx-datatable/blob/master/demo/basic/row-detail.component.ts

[khadervali]

Hi @canpan14 , Thanks for reply, I have some scenarios for my requirement, those functionalities I need separately so.

[rauwebieten]

I need the same functionality in a project of mine.

I worked around for now by keeping track of the expanded rows myself. Depending on the tracked-rows I can choose to expand or collapse when needed.

[markus-heinisch]

Does toggleExpandRow not suit your needs? It allows you to open and close one row as seen in the demo below. http://swimlane.github.io/ngx-datatable/#row-details

Source code: https://github.com/swimlane/ngx-datatable/blob/master/demo/basic/row-detail.component.ts

Hi @canpan14, no sorry. toggleExpandRow does not suit my needs because the table is reload every 10 secs and all expaned rows are collapsed after reload. Therefore, I have written code to expand the rows that has been expanded before the reload. A simple rowDetail.expand(row) and rowDetail.collapse(row) would help me! Please, can you add these two methods? Thanks, Markus

[marco-solare]

Hi there, we have come to a simlilar situation where we have to "re-toggle" one row after re-visiting a certain component that contains an ngx-datatable. Any news on the subject or did you fix / implement it some other way? We are also looking into finding a solution for this, will post here if we find one

[ali9itani]

any updates on this?

[jayakrishnadevarapu]

I have worked similar to that with a situation i have rows and each row has children and each child is component which is getting rendered after click on each row and when i cancel the child component i want just togglecollapse that row which is in parent component so when ever i click on cancel in child component i do an eventemitter with row details as am passing when expanded i used the method as rowDetail. "toggleExpandRow(row)" to toggleCollapseExpand to just that particular row.

I hope this helps someone if any one trying that.

[chanchaldhingra]

I have worked similar to that with a situation i have rows and each row has children and each child is component which is getting rendered after click on each row and when i cancel the child component i want just togglecollapse that row which is in parent component so when ever i click on cancel in child component i do an eventemitter with row details as am passing when expanded i used the method as rowDetail. "toggleExpandRow(row)" to toggleCollapseExpand to just that particular row.

I hope this helps someone if any on

I have worked similar to that with a situation i have rows and each row has children and each child is component which is getting rendered after click on each row and when i cancel the child component i want just togglecollapse that row which is in parent component so when ever i click on cancel in child component i do an eventemitter with row details as am passing when expanded i used the method as rowDetail. "toggleExpandRow(row)" to toggleCollapseExpand to just that particular row.

I hope this helps someone if any one trying that.

this works!!!

Just add another method like this, and call toggleExpandRow(row):

      <div *ngIf="row.address.length>1"> 
        <a
          *ngIf="!expanded"
          href="javascript:void(0)"
          (click)="toggleExpandRow(row)">

          
            <i class="fa fa-plus" ></i>
        </a>
        <a
          *ngIf="expanded"
          href="javascript:void(0)"
          (click)="toggleCollaspeRow(row)">
            <i class="fa fa-minus"> </i>
        </a>  
          
      </div>
      </ng-template>

in component : toggleExpandRow(row) { this.table.rowDetail.toggleExpandRow(row); }

toggleCollaspeRow(row) { console.log('Toggled Collapse Row!', row); this.toggleExpandRow(row);

}

[raju10281]

Hi @khadervali, If you mean Expand one row at a time & collapse all other rows. Yes, you are right no built function is available to do it. But it can be done easily,

Add these lines to .html

         <ng-template let-row="row" let-expanded="expanded" ngx-datatable-cell-template>
            <a 
              [hidden]='expanded'
              [class.datatable-icon-right]="!expanded"
              title="Expand Row"
              (click)="expandRow(row)"
            >
            </a>
            <a
              [hidden]='!expanded'
              [class.datatable-icon-down]="expanded"
              title="Collapse Row"
              (click)="collapseRow()"
            >
            </a>
          </ng-template>

And these lines to .ts

expandRow(row){
    this.tableRowDetails.rowDetail.collapseAllRows(row);
    this.tableRowDetails.rowDetail.toggleExpandRow(row);
    console.log(row);
    //Your code goes here - calling API 
  }

  collapseRow(){
    this.tableRowDetails.rowDetail.collapseAllRows();
  }

Hope, This helps someone :) Thank You !

[nacered]

Hi @khadervali, If you mean Expand one row at a time & collapse all other rows. Yes, you are right no built function is available to do it. But it can be done easily,

Add these lines to .html

         <ng-template let-row="row" let-expanded="expanded" ngx-datatable-cell-template>
            <a 
              [hidden]='expanded'
              [class.datatable-icon-right]="!expanded"
              title="Expand Row"
              (click)="expandRow(row)"
            >
            </a>
            <a
              [hidden]='!expanded'
              [class.datatable-icon-down]="expanded"
              title="Collapse Row"
              (click)="collapseRow()"
            >
            </a>
          </ng-template>

And these lines to .ts

expandRow(row){
    this.tableRowDetails.rowDetail.collapseAllRows(row);
    this.tableRowDetails.rowDetail.toggleExpandRow(row);
    console.log(row);
    //Your code goes here - calling API 
  }

  collapseRow(){
    this.tableRowDetails.rowDetail.collapseAllRows();
  }

Hope, This helps someone :) Thank You !

This work perfect! after fixing a minor typo you had in this.tableRowDetails.rowDetail.collapseAllRows(row) it should be this.tableRowDetails.rowDetail.collapseAllRows() instead

[DaveJD58]

I learned that you can expand rows programmatically by calling "toggleExpandRow" with the data for that row as the argument.
For instance: in my case, I wanted to expand only rows which have some text in the "Notes" field:

`rows:any = []; @ViewChild('dataTable') table!: DatatableComponent;

expandAllRows():void { this.table.rowDetail.collapseAllRows(); this.rows.forEach((o:any)=>{ if (o.Notes!="") { this.table.rowDetail.toggleExpandRow(o); } }); }`

I hope that this is helpful to someone.

D