Expanded grid row extends horizontally to the size of the rows

[babuborgo]

Hello,

I am attempting to implement a simple flex layout in the expand template of a mtx-grid row. However, no matter what styles or classes I try, it seems that the expansion container always tracks the rest of the rows, for both width and scrolling.

Is it possible to have a flex layout in that container, so that the width tracks the visible space and the horizontal scrolling does not move the contents?

I hope the issue is clear enough.

Repeatability steps:

1. Create a mtx-grid with a lot of columns
2. implement an expand template on one column
3. in the template create a simple flex layout (i am on matero 17 so i used row and col-x)
4. Attempt scrolling the rows horizontally
   The result should be that the expand template flex layout extends beyond the visible area of the table and is scrollable along with the rows.

Is there some kind of workaround? I have tried to imitate the style from pinned column cells, but it hasn't worked out so far.

[nzbin]

Can you provide an online example?

[babuborgo]

Hello,

I don't know how to provide an online example, I will share my code and a video of the behavior.

trim.mp4

   <div #gridHost class="col-12">

    <mtx-grid #devicesGrid class="mat-elevation-z1"
      [data]="dataList"
      [columns]="columns"
      [cellTemplate]="{'lastActivity':lastActivityCellTemplate}"
      [pageOnFront]="true"
      [showToolbar]="true"
      [columnHideable]="true"
      [columnSortable]="true"
      (sortChange)="onExpandedLineChanged(null)"
      [expandable]="true"
      [expansionTemplate]="testTemplate"
      (expansionChange)="onExpandedLineChanged($event)"
      [rowHover]="true"
      [pageIndex]="0"
      [pageSize]="20"
      [pageSizeOptions]="[5,10,20]">
      </mtx-grid>
      </div>

      <ng-template #testTemplate>
          <div class="row " [style.height]="'150px'">
            <div class="bg-red-50 col-6" >
              <p>my first column</p>
            </div>
            <div class="bg-blue-50 col-6">
              <p>my second column</p>
            </div>
          </div>
      </ng-template>

As you can see from the attachment, the width of the content of the expansion panel always matches the width of the row, so as I add more columns, the expansion content extends past the visible boundaries and requires horizontal scrolling to be seen completely.

My objective is:

1. for it to behave like a pinned column, so that the horizontal scrolling of the row doesn't affect it, and
2. that it matches the visible width of the expansion panel

For 2. I have seen that manually setting the width of my template to the desired size works, but the container remains as wide as the rows, so when scrolling the row horizontally, my content still moves out to the left:

fixwidth.mp4

I would like to make it so that whatever the selected columns or the screen size, I always want to see the full columns when I expand a row.

In the following attachment, I simulated the desired behavior by using position:absolute;width:100%, which unfortunately messes with the table's animation behavior:

absolute.mp4

I hope this clarifies what I am trying to do, thanks for the reply.

[marcelimati]

Don't know if this is exactly what you want to achieve, but I'm using ngx-resize-observer.

I'm adding:
(onResize)="onResize($event)"

to the mtx-grid component

and implementation of the method:

onResize($event: any) {
    let expandedRow = document.querySelector(".mtx-grid-expansion.expanded > td > div") as HTMLElement;
    if (expandedRow) {
      expandedRow.style.width = $event.contentRect.width - 20 + "px";
    }
  }