stick column

[Edson Rodríguez]

Hi everyone

I need to fix some colums in a scrollable table, here is my code. I want to stick the first 4 columns and scroll the rest of the table, how can I do that?

<ejs-grid #grid [allowFiltering]='true' width=auto [dataSource]="ListValor" [filterSettings]='filtro' [toolbar]='toolbar' (toolbarClick)='toolbarClick($event)' [allowExcelExport]='true' >

          <e-columns>

            <e-column  [ngClass]="{'blue': (1==1)}" field='Maquina' headerText='Máq.' width='130' isPrimaryKey="true" ></e-column>

            <e-column field='Codigo' headerText='Codigo' width='200'></e-column>

            <e-column field='Descripcion' headerText='Descripción' width='200'></e-column>

            <e-column field='Fecha' headerText='Fecha' width='150'></e-column>

            <e-column field='H1' headerText='00:00-00:30' width='150'></e-column>

            <e-column field='H2' headerText='00:30-01:00' width='150'></e-column>

            <e-column field='H3' headerText='01:00-01:30' width='150'></e-column>

            <e-column field='H4' headerText='01:30-02:00' width='150'></e-column>

            <e-column field='H5' headerText='02:00-02:30' width='150'></e-column>

            <e-column field='H6' headerText='02:30-03:00' width='150'></e-column>

            <e-column field='H7' headerText='03:00-03:30' width='150'></e-column>

            <e-column field='H8' headerText='03:30-04:00' width='150'></e-column>

            <e-column field='H9' headerText='04:00-04:30' width='150'></e-column>

            <e-column field='H10' headerText='04:30-05:00' width='150'></e-column>

            <e-column field='H11' headerText='05:00-05:30' width='150'></e-column>

            <e-column field='H12' headerText='05:30-06:00' width='150'></e-column>

            <e-column field='H13' headerText='06:00-06:30' width='150'></e-column>

            <e-column field='H14' headerText='06:30-07:00' width='150'></e-column>

            <e-column field='H15' headerText='07:00-07:30' width='150'></e-column>

            <e-column field='H16' headerText='07:30-08:00' width='150'></e-column>

            <e-column field='H17' headerText='08:00-08:30' width='150'></e-column>

            <e-column field='H18' headerText='08:30-09:00' width='150'></e-column>

          </e-columns>

    </ejs-grid>

[Thiyagu Subramani]

Hi Edson, 

Thanks for contacting Syncfusion forum. 

We can achieve your requirement ”Stick column” using our default property as FrozenColumns. Here we have prepared sample based on your requirement.  

Please refer to the below code and sample. 

    <ejs-grid [dataSource]='data' allowPaging='true' width='1000' [pageSettings]='pageSettings' [frozenColumns]='4' [editSettings]='editSettings'  [toolbar]='toolbar'> 

        <e-columns> 

. . . .  

        </e-columns> 

    </ejs-grid> 

 

. . .  

import { EditService,FreezeService, ToolbarService, PageService } from '@syncfusion/ej2-angular-grids'; 

@Component({ 

    . . .   

    providers: [ToolbarService,FreezeService, EditService, PageService] 

}) 

export class AppComponent { 

. . . .  

} 

 

 

 

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

Demo Sample link : https://ej2.syncfusion.com/angular/demos/#/material/grid/column/frozen-rows 

Reference link : https://ej2.syncfusion.com/angular/documentation/api/grid/#frozencolumns 

Please get back to us, if you need any further assistance. 

Regards, 

Thiyagu S. 

[Edson Rodríguez]

Thanks for the assistance, it worked out. Is it possible to freeze the headers of the table too? Thanks

[Thiyagu Subramani]

Hi Edson, 

We are happy to hear that your issue has been resolved. 

Query : Is it possible to freeze the headers of the table too? 

 

Based on your reported information we suspect your requirement is to freeze the header of the table. By default the frozen columns will make the frozen column header also in freeze state.  

Please refer the below sample and video demonstration. 

Video link :  https://www.syncfusion.com/downloads/support/forum/153268/ze/video_demo-1829151881 

 

Sample link: https://stackblitz.com/edit/angular-s1kaek-kkigot?file=app.component.html 

Reference link : https://ej2.syncfusion.com/angular/documentation/api/grid/#frozencolumns 

https://ej2.syncfusion.com/angular/documentation/api/grid/#frozenrows 

If we misunderstood your query, please provide more information like video demonstration of your requirement it will help us to provide the proper solution. 

Regards, 

Thiyagu S