We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Grid freeze columns not working

Thread ID:

Created:

Updated:

Platform:

Replies:

147816 Sep 25,2019 03:42 AM UTC Jul 27,2020 12:43 PM UTC Angular - EJ 2 21
loading
Tags: Grid
Dayakar Reddy
Asked On September 25, 2019 03:42 AM UTC

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

Pavithra Subramaniyam [Syncfusion]
Replied On 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. 


Dayakar Reddy
Replied On 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 userSelectedColumnsstring[] = ['jointId'];

      let indexnumber = 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

Pavithra Subramaniyam [Syncfusion]
Replied On 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. 


Dayakar Reddy
Replied On 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)

Pavithra Subramaniyam [Syncfusion]
Replied On 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 { MultiSelectCheckBoxSelection } 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. 


Dayakar Reddy
Replied On 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/ej2-grids@17.2.51/dist/ej2-grids.umd.min.js:10)
    at e.setWidthToTable (angular-ppnz6j-avf48e.stackblitz.io/turbo_modules/@syncfusion/ej2-grids@17.2.51/dist/ej2-grids.umd.min.js:10)
    at e.setColumnWidth (angular-ppnz6j-avf48e.stackblitz.io/turbo_modules/@syncfusion/ej2-grids@17.2.51/dist/ej2-grids.umd.min.js:10)
    at eval (angular-ppnz6j-avf48e.stackblitz.io/turbo_modules/@syncfusion/ej2-grids@17.2.51/dist/ej2-grids.umd.min.js:10)
    at Array.forEach (<anonymous>)
    at e.setWidthToColumns (angular-ppnz6j-avf48e.stackblitz.io/turbo_modules/@syncfusion/ej2-grids@17.2.51/dist/ej2-grids.umd.min.js:10)
    at i.refreshUI (angular-ppnz6j-avf48e.stackblitz.io/turbo_modules/@syncfusion/ej2-grids@17.2.51/dist/ej2-grids.umd.min.js:10)
    at GridComponent.o.refresh (angular-ppnz6j-avf48e.stackblitz.io/turbo_modules/@syncfusion/ej2-grids@17.2.51/dist/ej2-grids.umd.min.js:10)
    at GridComponent.o.refreshColumns (angular-ppnz6j-avf48e.stackblitz.io/turbo_modules/@syncfusion/ej2-grids@17.2.51/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.

Dayakar Reddy
Replied On 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

Dayakar Reddy
Replied On October 1, 2019 08:14 AM UTC

Please provide me solutions for two of the above problems.

Pavithra Subramaniyam [Syncfusion]
Replied On 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. 


Dayakar Reddy
Replied On October 4, 2019 02:25 AM UTC

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

Pavithra Subramaniyam [Syncfusion]
Replied On 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. 


Pavithra Subramaniyam [Syncfusion]
Replied On 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. 


Dayakar Reddy
Replied On 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



Pavithra Subramaniyam [Syncfusion]
Replied On 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. 


Dayakar Reddy
Replied On 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

Pavithra Subramaniyam [Syncfusion]
Replied On 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. 


Rajapandi Ravi [Syncfusion]
Replied On 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

Abhy
Replied On 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.

Rajapandi Ravi [Syncfusion]
Replied On 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


Abhy
Replied On 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.

Rajapandi Ravi [Syncfusion]
Replied On 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

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon