1. Home
  2. Forum
  3. Angular - EJ 2
  4. Grid freeze columns not working

Grid freeze columns not working

Hi,

I am facing below issues with @syncfusion/ej2-angular-grids version 17.2.47, Can you please provide solutions?

1)  Grid freeze columns functionality is not working when grid property set to [enablePersistence]="true" or [enableVirtualization]="true", below are grid properties


 <ejs-grid #grid [height]='gridHeight()' width='100%' [dataSource]="joints" [allowPaging]="true" [allowSorting]="true" [allowMultiSorting]='false' 
    [allowFiltering]="true" [allowGrouping]="true" [pageSettings]="pageSettings" allowReordering="true"
    showColumnChooser="true" [toolbar]="toolbar" [filterSettings]="filterSettings" [allowResizing]="true"
    [enablePersistence]="false" [editSettings]="editSettings" (rowSelected)="selectionChanged($event)"
    (rowDeselected)="selectionChanged($event)" (dataBound)="dataBound()" [selectionSettings]="selectOptions"
     (beforeBatchSave)="batchSave($event)" (batchCancel)='batchCancel($event)' (toolbarClick)='clickHandler($event)'  [contextMenuItems]="contextMenuItems"
    (contextMenuClick)="contextMenuClick($event)">

2)  If i set grid properties to enableVirtualization=false and [enablePersistence]="false" freeze columns is working, but i am facing the issue with grid cellsSelectionMode='box', if i select one cell other cell is getting highlighted,  please find  below code and the attachment for reference.

this.grid.selectionSettings = {
        type: 'Multiple',
        mode: 'Cell',
        cellSelectionMode: 'Box'
      };

3) How to provide freeze columns options to end user in grid column header or column filter?

Attachment: grid_issue_deb0493c.zip

23 Replies
PS Pavithra Subramaniyam Syncfusion Team September 25, 2019 06:38 AM UTC

Hi Dayakar, 
 
Greetings from Syncfusion. 
 
Query: Grid freeze columns functionality is not working when grid property set to [enableVirtualization]="true" 
 
We have validated your query and currently we don’t have support for Virtualization with frozen rows and columns. We have already considered this as a feature request. You can now track the current status of this feature request here. 
 

Query: Grid freeze columns functionality is not working when grid property set to [enablePersistence]="true" 
 
We have checked and try to reproduce the reported problem at our end. But it works fine. Refer the below sample for your reference. 
 

Query: but i am facing the issue with grid cellsSelectionMode='box', if i select one cell other cell is getting highlighted 
 
We have checked your query and try to reproduce the reported problem. But we could not reproduce the reported problem. Refer the below sample for your reference. 
 
 
If you are still facing the same problem, could you please share the below details. It will be helpful to validate and provide a better solution. 
 
  • Share full grid code snippets.
  • Share Essential Studio JS 2 package version details.
  • Share exact replication procedure with video demonstration.
  • Reproduce the reported problem in the provided sample.
 
Query: How to provide freeze columns options to end user in grid column header or column filter? 
 
We are quite unclear about your requirement, could you please provide more information regarding your requirement. It will be helpful to validate further. 
 
Regards, 
Pavithra S. 


DR Dayakar Reddy September 26, 2019 08:34 AM UTC

Hi 

1) I want to provide freeze columns option within column header similar to ColumnChooser, so when user selects the columns those columns must be freezed in grid. Please find the attachment 1.png for reference

  this.toolbar = [
      'Update',
      'Cancel',
      'ColumnChooser',
      'Search',
      { text: 'Freeze', tooltipText: 'Freeze columns and rows', id: 'Freeze' },
      { text: 'Reset', tooltipText: 'Reset grid', id: 'Reset' }
    ];

2) Since i am unable to provide similar feature like ColumnChosser for freezing, i have added freeze buttion in grid header 
When user click freeze button(which is in grid header) i have provided columns selection option in popup, please find attachment 2.png for reference

3)after user selecting columns, i am unable to update column index and column isfrozen value using angular code. please find below code for reference

   const userSelectedColumns: string[] = ['jointId'];

      let index: number = 1;
      const columns = this.grid.columns as ColumnModel[];
      columns.forEach(column => {
        if (userSelectedColumns.indexOf(column.field) >= 0) {
          column.isFrozen = true;
          column.index = index;
          index = index + 1;
        }
      })


Attachment: freeze_34c319cc.zip

PS Pavithra Subramaniyam Syncfusion Team September 27, 2019 10:10 AM UTC

Hi Dayakar, 
 
Thanks for your update. 
 
Query: I want to provide freeze columns option within column header similar to ColumnChooser, so when user selects the columns those columns must be freezed in grid. 
 
We have validated your query and based on your requirement we have prepared a sample. Here, we have rendered a multiselect dropdown in the grid toolbar by using toolbar template. While selecting column fields in multiselect dropdown, we have added isFrozen property to the particular columns by using select event of multiselect dropdown and disable the isFrozen while removing the selected item using removed event. Refer the below code snippets and sample for your reference. 
 
[code snippets] 
<ejs-grid #grid [dataSource]='data' height='400' [frozenRows]='2' [frozenColumns]='1' [allowSelection]='false' [enableHover]='false' 
          [allowResizing]='true' [allowSorting]='true' [allowMultiSorting]='false' allowPaging='true'> 
    <ng-template #toolbarTemplate let-data> 
        <ejs-multiselect #multiselect id='multiselectelement' width='400' mode='checkbox' (created)="created($event)" (removed)="removed($event)" (select)="select($event)"></ejs-multiselect> 
    </ng-template> 
    <e-columns> 
        <e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right'></e-column> 
        ... 
   </e-columns> 
</ejs-grid> 
... 
export class AppComponent { 
  ... 
 
  created(args: any): void { 
    var mulData = []; 
    for (var i = 0; i < this.grid.columns.length; i++) { 
      if ((this.grid.columns[i] as any).index >= this.grid.frozenColumns) { 
        mulData.push((this.grid.columns[i] as any).field); 
      } 
    } 
    var multiselect = (document.getElementsByClassName("e-multiselect")[0] as any).ej2_instances[0]; 
    multiselect.dataSource = mulData;     //assign multiselect dropdown dataSource as grid column field names 
  } 
 
removed(args:any){ 
    this.grid.getColumnByField(args.itemData).isFrozen = false ; 
     this.grid.refreshColumns(); 
  } 
 
 
  select(args: any): void { 
   if(this.multiselect.getItems().length ==1){ 
      args.cancel =true; 
    }else{ 
    for (var i = 0; i < this.grid.getVisibleColumns().length; i++) { 
      if (args.itemData == this.grid.getVisibleColumns()[i].field) { 
        this.grid.getVisibleColumns()[i].isFrozen = true;        //added isFrozen property to corresponding columns 
      } 
    } 
    this.grid.refreshColumns(); 
  } 
} 
} 
 
                              https://ej2.syncfusion.com/angular/documentation/api/multi-select/#removed 
                              https://ej2.syncfusion.com/angular/documentation/api/grid#refreshcolumns 
                              https://ej2.syncfusion.com/angular/documentation/grid/tool-bar/#custom-toolbar 
 
 
Please get back to us if you need further assistance. 
 
Regards, 
Pavithra S. 


DR Dayakar Reddy September 30, 2019 03:04 AM UTC

Hi Getting errors in console, please find below code for reference


<ejs-grid #grid [height]='gridHeight()' width='100%' [dataSource]="jointDataManager" [allowPaging]="true"
    [allowSorting]="true" [allowFiltering]="true" [allowGrouping]="true" [pageSettings]="pageSettings"
    allowReordering="true" showColumnChooser="true" [toolbar]="toolbar" [filterSettings]="filterSettings"
    [allowResizing]="true" [enablePersistence]="false" [editSettings]="editSettings"
    (rowSelected)="selectionChanged($event)" (rowDeselected)="selectionChanged($event)" (dataBound)="dataBound()"
    [selectionSettings]="selectOptions" [enableVirtualization]="false" (beforeBatchSave)="batchSave($event)"
    (batchCancel)='batchCancel($event)' (toolbarClick)='clickHandler($event)' [contextMenuItems]="contextMenuItems"
    (contextMenuClick)="contextMenuClick($event)">
    <ng-template #toolbarTemplate let-data>
      <ejs-multiselect #multiselect id='multiselectelement' width='400' mode='checkbox' (created)="created($event)"
        (removed)="removed($event)" (select)="select($event)"></ejs-multiselect>
    </ng-template>

getting below errors in console

ng:///FbrModule/JointListDisplayComponent.ngfactory.js:17 ERROR TypeError: Cannot read property 'firstElementChild' of null at ColumnWidthService.push../node_modules/@syncfusion/ej2-grids/src/grid/services/width-controller.js.ColumnWidthService.setWidthToMovableTable (vendor.js:322074) at ColumnWidthService.push../node_modules/@syncfusion/ej2-grids/src/grid/services/width-controller.js.ColumnWidthService.setWidthToTable (vendor.js:322093) at ColumnWidthService.push../node_modules/@syncfusion/ej2-grids/src/grid/services/width-controller.js.ColumnWidthService.setColumnWidth (vendor.js:321933) at Resize.push../node_modules/@syncfusion/ej2-grids/src/grid/actions/resize.js.Resize.resizeColumn (vendor.js:300184) at vendor.js:300245 at Array.forEach (<anonymous>) at Resize.push../node_modules/@syncfusion/ej2-grids/src/grid/actions/resize.js.Resize.findColumn (vendor.js:300241) at Resize.push../node_modules/@syncfusion/ej2-grids/src/grid/actions/resize.js.Resize.autoFitColumns (vendor.js:300094) at GridComponent.push../node_modules/@syncfusion/ej2-grids/src/grid/base/grid.js.Grid.autoFitColumns (vendor.js:308480) at JointListDisplayComponent.push../src/app/fm/registers/register-display/joint-list-display/joint-list-display.component.ts.JointListDisplayComponent.select (main.js:11306) View_JointListDisplayComponent_2 @ ng:///FbrModule/JointListDisplayComponent.ngfactory.js:17 ng:///FbrModule/JointListDisplayComponent.ngfactory.js:17 ERROR CONTEXT DebugContext_ View_JointListDisplayComponent_2 @ ng:///FbrModule/JointListDisplayComponent.ngfactory.js:17 vendor.js:77185 ERROR TypeError: Cannot read property 'classList' of null at Scroll.push../node_modules/@syncfusion/ej2-grids/src/grid/actions/scroll.js.Scroll.onContentScroll (vendor.js:301469) at Scroll.push../node_modules/@syncfusion/ej2-grids/src/grid/actions/scroll.js.Scroll.wireEvents (vendor.js:301599) at Scroll.push../node_modules/@syncfusion/ej2-grids/src/grid/actions/scroll.js.Scroll.onPropertyChanged (vendor.js:301682) at Observer.push../node_modules/@syncfusion/ej2-base/src/observer.js.Observer.notify (vendor.js:182653) at GridComponent.push../node_modules/@syncfusion/ej2-base/src/component.js.Component.notify (vendor.js:177294) at GridComponent.push../node_modules/@syncfusion/ej2-grids/src/grid/base/grid.js.Grid.onPropertyChanged (vendor.js:307009) at GridComponent.push../node_modules/@syncfusion/ej2-base/src/base.js.Base.dataBind (vendor.js:176437) at GridComponent.push../node_modules/@syncfusion/ej2-base/src/component.js.Component.dataBind (vendor.js:177244) at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (polyfills.js:3320) at Object.onInvokeTask (vendor.js:78751) defaultErrorLogger @ vendor.js:77185 register:1 Failed to load resource: the server responded with a status of 404 (Not Found)

PS Pavithra Subramaniyam Syncfusion Team September 30, 2019 09:20 AM UTC

Hi Dayakar, 
 
Sorry for the inconvenience caused. 
 
We have now modified the sample by using toolbar item template and multiSelect with injection of “CheckBoxSelection” to overcome the error. Please refer to the below code example, documentation and sample link for more information. 
 
[component.html] 
<ejs-grid #grid [dataSource]='data' [frozenColumns]='1' [allowSelection]='false' [enableHover]='false' [allowResizing]='true' 
 [allowSorting]='true' [allowMultiSorting]='false' allowPaging='true'> 
    <ng-template #toolbarTemplate let-data> 
        <ejs-toolbar (created)="onCreate($event)"> 
            <e-items> 
                <e-item template='<input type="text" tabindex="1" id="ddlelement" />' type='Input'></e-item> 
            </e-items> 
        </ejs-toolbar> 
    </ng-template> 
    <e-columns> 
        .  .  . 
    </e-columns> 
</ejs-grid> 
 
 
[component.ts] 
import { MultiSelect, CheckBoxSelection } from '@syncfusion/ej2-dropdowns'; 
.   .    
 
MultiSelect.Inject(CheckBoxSelection); 
 
export class AppComponent { 
  @ViewChild('grid') 
  public grid: GridComponent; 
 
  public multiselect: MultiSelect = new MultiSelect({ 
    created :this.created.bind(this), 
    removed:this.removed.bind(this), 
    select:this.select.bind(this), 
    mode:"CheckBox", 
    width:400 
  }); 
  .  .  . 
onCreate(args:any){ 
this.multiselect.appendTo('#ddlelement'); 
}   
 
  removed(args:any){ 
    this.grid.getColumnByField(args.itemData).isFrozen = false ; 
    this.grid.refreshColumns(); 
  } 
 
  select(args: any): void { 
   if (this.grid.getColumns().length - 1 > this.grid.getFrozenColumns()) { 
      for (let i = 0; i < this.grid.getVisibleColumns().length; i++) { 
        if (args.itemData == this.grid.getVisibleColumns()[i].field) { 
          this.grid.getVisibleColumns()[i].isFrozen = true; 
        } 
      } 
      this.grid.refreshColumns(); 
    }else{ 
      args.cancel =true; 
    } 
  } 
} 
 
 
                              https://ej2.syncfusion.com/angular/documentation/toolbar/item-configuration/#radiobutton 

 
Please get back to us if you need any further assistance on this. 
 
Regards, 
Pavithra S. 


DR Dayakar Reddy October 1, 2019 01:32 AM UTC

Hi,

Thank you for providing me the solution but still i am facing issue, As per my requirement there will be no frozen columns in grid by default, so the frozenColumns value is set to 0.


In the above link in app.component.html please set frozenColumns to [frozenColumns]='0' and see grid behavior it is not working properly.

I am getting the below error in console

preview-0f1ca2a6aba8d8518701b.js:1 ERROR TypeError: Cannot read property 'firstElementChild' of null
    at e.setWidthToMovableTable (angular-ppnz6j-avf48e.stackblitz.io/turbo_modules/@syncfusion/[email protected]/dist/ej2-grids.umd.min.js:10)
    at e.setWidthToTable (angular-ppnz6j-avf48e.stackblitz.io/turbo_modules/@syncfusion/[email protected]/dist/ej2-grids.umd.min.js:10)
    at e.setColumnWidth (angular-ppnz6j-avf48e.stackblitz.io/turbo_modules/@syncfusion/[email protected]/dist/ej2-grids.umd.min.js:10)
    at eval (angular-ppnz6j-avf48e.stackblitz.io/turbo_modules/@syncfusion/[email protected]/dist/ej2-grids.umd.min.js:10)
    at Array.forEach (<anonymous>)
    at e.setWidthToColumns (angular-ppnz6j-avf48e.stackblitz.io/turbo_modules/@syncfusion/[email protected]/dist/ej2-grids.umd.min.js:10)
    at i.refreshUI (angular-ppnz6j-avf48e.stackblitz.io/turbo_modules/@syncfusion/[email protected]/dist/ej2-grids.umd.min.js:10)
    at GridComponent.o.refresh (angular-ppnz6j-avf48e.stackblitz.io/turbo_modules/@syncfusion/[email protected]/dist/ej2-grids.umd.min.js:10)
    at GridComponent.o.refreshColumns (angular-ppnz6j-avf48e.stackblitz.io/turbo_modules/@syncfusion/[email protected]/dist/ej2-grids.umd.min.js:10)
    at AppComponent.select (angular-ppnz6j-avf48e.stackblitz.io/~/app.component.ts:54)

Please provide me solution for this.

Thank you,
Dayakar.

DR Dayakar Reddy October 1, 2019 08:13 AM UTC

Hi ,

I am facing another problem with syncfusion grid , after first two columns are freezed, then i changed grid settings as below

this.grid.enableAutoFill = true;
this.grid.selectionSettings = { type: 'Multiple', mode: 'Cell', cellSelectionMode: 'Box' };

when i select grid cell of one column(ex Effort)  other column(ex PID) grid cell is getting selected, please find the attachment.


Please provide me solution for this.

When i use dev-express there was no issue, please solve this problem with syncfusion controls.


Thanks 
Dayakar.

Attachment: auto_b446751b.zip

DR Dayakar Reddy October 1, 2019 08:14 AM UTC

Please provide me solutions for two of the above problems.

PS Pavithra Subramaniyam Syncfusion Team October 3, 2019 12:55 PM UTC

Hi Ebi Torabi, 
 
Thanks for your patience. 
 
Query:  please set frozenColumns to [frozenColumns]='0' and see grid behavior it is not working properly. 
 
We have checked reported problem and we have logged “frozen rows and columns is not properly working when we dynamically updating frozen values” as a bug. Thank you for taking the time to report this issue and helping us improve our product. The fix for this issue will be included in our upcoming NuGet release which will be expected to be rolled out by mid of October , 2019. 

You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link.  

 
Query: when i select grid cell of one column(ex Effort)  other column(ex PID) grid cell is getting selected,  
 
We have checked reported problem and we have logged “cell selection action is not properly performed when enabling frozen columns with enableAutoFill property” as a bug. Thank you for taking the time to report this issue and helping us improve our product. The fix for this issue will be included in our upcoming NuGet release which will be expected to be rolled out by mid of October , 2019. 

You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link.  
 

Note: The above feedback links are in review state and will be visible once they are moved to validated state. 

Please get back to us if you need further assistance. 

Regards, 
Pavithra S. 


DR Dayakar Reddy October 4, 2019 02:25 AM UTC

Thank you , please let me know once it has been resolved.

PS Pavithra Subramaniyam Syncfusion Team October 4, 2019 05:50 AM UTC

Hi Dayakar,  
 
Sure, we will let you know once the release has been rolled out successfully. Until then we appreciate your patience.  
 
Regards, 
Pavithra S. 


PS Pavithra Subramaniyam Syncfusion Team October 17, 2019 08:53 AM UTC

Hi Dayakar, 
 
Sorry for the inconvenience. 
 
Due to some complexities while fixing this scenario, we have considered “need to provide support for frozen rows and columns with autoFill” as feature improvement and added to our feature request list. This feature will be available in any of our upcoming release. You can now track the current status of this feature request here.  
 

Regards, 
Pavithra S. 


DR Dayakar Reddy November 11, 2019 08:26 AM UTC


Hi Pavitra, is there any update on below issues?

1) frozen rows and columns is not properly working when we dynamically updating frozen values



PS Pavithra Subramaniyam Syncfusion Team November 12, 2019 10:21 AM UTC

Hi Dayakar, 
 
Query #1: cell selection action is not properly performed when enabling frozen columns with enableAutoFill property 
 
As updated in our previous update, we have considered “need to provide support for frozen rows and columns with autoFill” as feature improvement and added to our feature request list. This feature will be available in any of our upcoming release. You can now track the current status of this feature request here.   
 
 
Query#2:  frozen rows and columns is not properly working when we dynamically updating frozen values 
 
The reported issue has been fixed and available in our latest version. Please upgrade your Syncfusion package to the latest version(17.3.26). 
 
Regards, 
Pavithra S. 


DR Dayakar Reddy November 12, 2019 01:49 PM UTC

Thank you Pavitra ,

Can you help me on treegrid?


I am binding child data for treegrid using dataStateChange event of treegrid but Missing expand icon in child nodes even though  hasChildMapping property isParent is true, please set hasChildData: true to childData array objects in the below link in index.ts file and please check the UI expand icon is missing for child node.

https://codesandbox.io/s/eager-microservice-ydpq7

Please provide solution for this

Thanks,
Dayakar.

Attachment: treegrid_373087a5.zip

PS Pavithra Subramaniyam Syncfusion Team November 13, 2019 12:26 PM UTC

Hi Dayakar, 
 
Thanks for contacting Syncfusion Forums. 
 
QUERY1: Missing expand icon for child data in TreeGrid 
 
From your code we can see that you are using Custom Binding(using dataStateChage) to bind data to TreeGrid. Since you are using our DataManager, you need not to use the Custom Binding. Custom Binding is meant for custom logic data. In our data manager, we have did everything needed for binding child node by inbuilt. 
 
So we suggest you use our dataManager with webApi Adaptor.  
 
Please check the below sample, 
 
 
If you have further queries, please get back to us. 
 
Regards, 
Pavithra S. 


RR Rajapandi Ravi Syncfusion Team July 10, 2020 01:26 PM UTC

Hi Dayakar, 

We are glad to announce that our Essential JavaScript2 patch release (v 18.2.44) has been rolled out successfully. In this release we have include the feature “provide support for frozen rows and columns with autoFill” in our 18.1.44 release. So kindly upgrade to our package version (18.2.44) to achieve your requirement. 


We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance. 

Regards, 
Rajapandi R

AB Abhy July 22, 2020 09:53 AM UTC

Can you provide an example for column freeze on custom toolbar or right click of column and giving option to Pin/Freeze the Column.

RR Rajapandi Ravi Syncfusion Team July 23, 2020 02:06 PM UTC

Hi Abhy, 

We have analyzed your query and we could see that you like freeze the columns while clicking the toolbar button. Based on your query we have prepared a sample and achieved your requirement by using toolbarclick event of Grid. In this event, we have freeze the column by setting the isFrozen property as true. So we suggest you to use the below way to achieve your requirement. Please refer the below code example and sample for more information. 

In this below sample we have freeze the CustomerID column while clicking the toolbar button. 

App.component.ts 
 
export class AppComponent { 
  @ViewChild('grid') 
    public grid: GridComponent; 
    public data: Observable<DataStateChangeEventArgs>; 
    public pageOptions: Object; 
    public searchField: any; 
    public state: DataStateChangeEventArgs; 
    public columns: any; 
    public toolbar: object[]; 
 
    constructor( private service: OrdersService) { 
         
        this.data = service; 
    } 
 
    public dataStateChange(state: DataStateChangeEventArgs): void { 
        this.service.execute(state); 
    } 
 
    clickHandler(args) { 
      if (args.item.id === 'freeze') { 
        this.grid.getColumnByField('CustomerID').isFrozen = true;  //isFrozen property helps to freeze the columns 
        this.grid.refreshColumns(); 
        } 
    } 
 
    public ngOnInit(): void { 
      this.toolbar = [{ text: 'Freeze Column', tooltipText: 'Freeze Column', prefixIcon: 'e-expand', id: 'freeze' }]; 
        this.pageOptions = { pageSize: 10, pageCount: 4 }; 
        let state = { skip: 0, take: 10 }; 
        this.service.execute(state); 
    } 
} 


Regards,
Rajapandi R

AB Abhy July 24, 2020 08:33 AM UTC

Thanks for the resposne.
Actually I want it as a part of ColumnMenu, So every column can have Pin/Freeze on click it should move to left/right. After Pinning it should have UnPin/Freeze.

RR Rajapandi Ravi Syncfusion Team July 27, 2020 12:43 PM UTC

Hi Abhy, 

Thanks for the update 

We have analyzed your query and we could see that you like to freeze the column by using column menu feature of Grid. You can achieve your requirements by using the custom column menu items. In this below sample we have freeze the column by using columnMenuClick event. Please refer the below code example, sample and documentation for more information. 
 
 
export class AppComponent { 
    @ViewChild('ddsample') 
    public dropDown: DropDownListComponent; 
    @ViewChild('grid')  
    public grid: GridComponent; 
    public data: Object[]; 
    public editSettings: Object; 
    public columnMenuItems: any = [{ text: 'Freeze column', id: 'freezecolumn' },{ text: 'UnFreeze column', id: 'unfreezecolumn' }]; 

    columnMenuClick(args) { 
      if (args.item.id === 'freezecolumn') { 
        this.grid.getColumnByField(args.column.field).isFrozen = true;  //isFrozen property helps to freeze the columns  
        this.grid.refreshColumns(); 
        } 
         if (args.item.id === 'unfreezecolumn') { 
        this.grid.getColumnByField(args.column.field).isFrozen = false;  //isFrozen property helps to freeze the columns  
        this.grid.refreshColumns(); 
        } 
    } 

    public ngOnInit(): void { 
        this.data = orderDataSource; 
        this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true , newRowPosition: 'Top' }; 
        this.toolbar = ['Add', 'Edit', 'Delete', 'Update', 'Cancel']; 
        this.orderidrules = { required: true, number: true }; 
        this.customeridrules = { required: true }; 
        } 
} 
 




Regards, 
Rajapandi R

DR Dayakar Reddy July 12, 2022 02:11 AM UTC

Hi ,

After freezing any column if we group any of other unfreezed column the grid view collapsed. please provide me a soultion.


 https://stackblitz.com/edit/angular-5nsosm-ugbzrr?file=app.component.ts 


Thanks,

Dayakar Reddy B


RR Rajapandi Ravi Syncfusion Team July 12, 2022 02:38 PM UTC

Hi Dayakar,


Thanks for the update.


The frozen rows and columns functionality is not supported with the grouping feature. The EJ2 Grid has limitations for some features as it not compatible with those features. And the frozen Grid functionality is not compatible with the below features, 


  • Grouping 
  • Row Template 
  • Detail Template 
  • Hierarchy Grid 


Documentation: https://ej2.syncfusion.com/angular/documentation/grid/frozen/#limitations-of-frozen-grid


Regards,

Rajapandi R


Loader.
Up arrow icon