Freeze Custom rows Grid Component angular

[sreenath]

Hi,

I have a requirement in Grid Component, there is option to give the number of rows which you need to freeze but i need to freeze one particular row. I just go through the documents and didn't find any solution.

Eg: I need to freeze first and last row. Is there any option to achieve this in Grid Component angular.

Attaching sample page created in Html, have to achieve same using angular grid.

https://inbus-utilities.s3.amazonaws.com/RevenueWaterFall/index.html

[Joseph Christ Nithin Issack]

Hi Sreenath, 

  Greetings from Syncfusion support. 

  We regret to inform that we do not have support to freeze the one particular row in the grid, we only have support to freeze rows from the top of the grid. However your requirement can be achieved using the `foorterTemplate` property of the aggregate column and setting a static height for the parent element and the grid. 

  Please refer the below code example: 

[app.component.html] 

<div class="control-section" style="height:600px"> 

  <ejs-grid [dataSource]="data" enableStickyHeader="true" [height]="height"> 

    <e-columns> 

      <e-column 

        field="OrderID" 

        headerText="Order ID" 

        width="120" 

        textAlign="Center" 

        minWidth="10" 

      ></e-column> 

      <e-column headerText="Order Details" [columns]="orderColumns"></e-column> 

      <e-column headerText="Ship Details" [columns]="shipColumns"></e-column> 

    </e-columns> 

    <e-aggregates> 

      <e-aggregate> 

        <e-columns> 

          <e-column type="Sum" field="Freight" format="C2"> 

            <ng-template #footerTemplate let-data 

              >Sum: {{ data.Sum }}</ng-template 

            > 

          </e-column> 

        </e-columns> 

      </e-aggregate> 

    </e-aggregates> 

  </ejs-grid> 

</div> 

 

[app.component.ts] 

export class AppComponent { 

  public data: Object[] = []; 

  public orderColumns: ColumnModel[]; 

  public shipColumns: ColumnModel[]; 

  public height = '100%'; 

 

  public ngOnInit(): void { 

    this.data = orderDetails; 

 

    this.orderColumns = [ 

      { 

        field: 'OrderDate', 

        headerText: 'Order Date', 

        format: 'yMd', 

        width: 130, 

        textAlign: 'Right', 

        minWidth: 10, 

      }, 

      { 

        field: 'Freight', 

        headerText: 'Freight ($)', 

        width: 120, 

        format: 'C1', 

        textAlign: 'Right', 

        minWidth: 10, 

      }, 

    ]; 

 

    this.shipColumns = [ 

      { 

        field: 'ShippedDate', 

        headerText: 'Shipped Date', 

        format: 'yMd', 

        textAlign: 'Right', 

        width: 150, 

        minWidth: 10, 

      }, 

      { 

        field: 'ShipCountry', 

        headerText: 'Ship Country', 

        width: 150, 

        minWidth: 10, 

      }, 

    ]; 

  } 

} 

 

Sample: https://stackblitz.com/edit/angular-dyubwp?file=app.component.ts 

Please find the attached sample and revert for more queries. 

Regards, 

Joseph I.