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

Frozen specific columns.

Thread ID:

Created:

Updated:

Platform:

Replies:

145163 Jun 10,2019 09:13 PM UTC Jun 13,2019 10:33 AM UTC Angular - EJ 2 6
loading
Tags: Grid
Rolian Ruiz
Asked On June 10, 2019 09:13 PM UTC

Actually I have this columns configuration:

<e-columns>
<e-column type='checkbox' width='50'></e-column>
<e-column headerText='Information' [columns]='columns_1'></e-column>
<e-column headerText='Information_1' [columns]='columns_2'></e-column>
<e-column headerText='Information_2' [columns]='columns_3'></e-column>
<e-column headerText='Information_3' [columns]='columns_4'></e-column>
</e-columns>

And this configuration for one of the column

{
field: 'field_1',
headerText: 'Header Text',
width: 300,
minWidth: 100,
maxWidth: 300,
isFrozen: true, // With this option I try to frozen this column
template: 'My template',
},

But the applications show the error listed below:

ERROR TypeError: this.parent.headerModule.getMovableHeader is not a function at Scroll.push../node_modules/@syncfusion/ej2-grids/src/grid/actions/scroll.js.Scroll.setScrollLeft (scroll.js:125) at Observer.push../node_modules/@syncfusion/ej2-base/src/observer.js.Observer.notify (observer.js:89) at GridComponent.push../node_modules/@syncfusion/ej2-base/src/component.js.Component.notify (component.js:189) at HeaderRender.push../node_modules/@syncfusion/ej2-grids/src/grid/renderer/header-renderer.js.HeaderRender.renderTable (header-renderer.js:149) at Render.push../node_modules/@syncfusion/ej2-grids/src/grid/renderer/render.js.Render.render (render.js:54) at GridComponent.push../node_modules/@syncfusion/ej2-grids/src/grid/base/grid.js.Grid.gridRender (grid.js:2371) at GridComponent.push../node_modules/@syncfusion/ej2-grids/src/grid/base/grid.js.Grid.render (grid.js:700) at GridComponent.push../node_modules/@syncfusion/ej2-base/src/component.js.Component.appendTo (component.js:130) at component-base.js:100 at ZoneDelegate../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421) at Object.onInvokeTask (core.js:3662) at ZoneDelegate../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420) at Zone../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188) at ./node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask (zone.js:496) at ZoneTask.invoke (zone.js:485) at timer (zone.js:2054)

Thavasianand Sankaranarayanan [Syncfusion]
Replied On June 11, 2019 09:56 AM UTC

Hi Rolian,  

Thanks for contacting Syncfusion support.  

Query: “Freeze specific columns” 

From your query and code example we understand that you are facing issue while freezing a stacked header column. We have prepared a sample using your code example but unfortunately we are unable to reproduce the reported issue at our end. Kindly refer the below link for the sample.  


After referring the sample if you still facing the issue kindly share the following details.  

  1. Share the entire Grid rendering code.
  2. Share your essential studio version.
  3. Share the issue replication with help of screenshot or video demonstration.
  4. If possible try to reproduce the reported issue in provided sample.

Regards, 
Thavasianand S. 


Rolian Ruiz
Replied On June 11, 2019 04:27 PM UTC

Thank you for your quick answer, my problem was related to not including FreeService into my component.
Now I present another problem and it is related to the style that between the freeze column and the rest of the columns, in the image below I show the problem.


Look how the selected row it's misaligned between freezed column and the rest. Actually I'm using this styles:

<link rel='nofollow' href="//cdn.syncfusion.com/ej2/material.css" rel="stylesheet" />

Thavasianand Sankaranarayanan [Syncfusion]
Replied On June 12, 2019 12:09 PM UTC

Hi Rolian, 

Before proceeding to your query please provide the following details. 

  1. Share the complete Grid code example.
  2. Share the stack trace details, if you face any script error in console.
  3. Mentioned issue reproduced in initial render or after any operations performed.
  4. Do you have using any external CSS for Grid ? if so please share those details.
  5. If possible try to reproduce the issue in the previously attached sample.

Regards, 
Thavasianand S.  


Rolian Ruiz
Replied On June 12, 2019 01:47 PM UTC

Good morning in order to your requests, 

  1. Share the complete Grid code example.
<!-- ejs2 grid -->
<div class="mat-elevation-z1">
<ejs-grid #grid id='Grid'
[dataSource]='data'
allowGrouping='true'
allowSorting='true'
showColumnMenu='true'
[groupSettings]='groupOptions'
[contextMenuItems]="contextMenuItems"
[sortSettings]='sortOptions'
height={{gridHeight}}
[allowExcelExport]='true'
[toolbar]='toolbarOptions'
[selectionSettings]='selectionOptions'
[frozenColumns]='1'
(toolbarClick)='toolbarClick($event)'
(actionBegin)='actionHandler($event)'
(rowSelected)='rowSelected($event)'
(rowDeselecting)='rowDeselected($event)'>
<e-columns>
<e-column type='checkbox' width='50'></e-column>
<e-column headerText='Patient Information' [columns]='patientColumns'></e-column>
<e-column [columns]='demographicsColumns'></e-column>
<e-column headerText='Medical Economics' [columns]='medicalColumns'></e-column>
<e-column headerText='Utilization Information' [columns]='utilizationColumns'></e-column>
<e-column headerText='Chronic Condition (claims/encounter history)' [columns]='chronicColumns'></e-column>
<e-column headerText='Engagement Level' [columns]='engagementColumns'></e-column>
</e-columns>
</ejs-grid>
</div>

-------------------------------------------------
export const patientColumns: ColumnModel[] = [
{
field: 'patient.firstName',
headerText: 'Patient',
width: 300,
minWidth: 100,
maxWidth: 300,
isFrozen: true,
template: '<div class="member-link">' +
'<a id="drill-patient-${patient.patientId}" patientId="${patient.patientId}">' +
'${patient.firstName}</a>' +
'</div>',
},
];

  1. Share the stack trace details, if you face any script error in console.
      I not getting any console 

  1. Mentioned issue reproduced in initial render or after any operations performed.
     On initial render

  1. Do you have using any external CSS for Grid ? if so please share those details.
     Yes, I'm currently using too @swimlane/ngx-datatable but commenting those styles, the error persist.

  1. If possible try to reproduce the issue in the previously attached sample.
     I can't reproduce it in the example.

     I'm currently using this versions:

"@syncfusion/ej2-angular-base": "17.1.50",
"@syncfusion/ej2-angular-grids": "17.1.51",
"@syncfusion/ej2-angular-layouts": "17.1.51",
"@syncfusion/ej2-base": "17.1.49",



Rolian Ruiz
Replied On June 12, 2019 05:03 PM UTC

The problem was solved.
For some reason if you have a custom zoom on the browser, the style is broken.

Pavithra Subramaniyam [Syncfusion]
Replied On June 13, 2019 10:33 AM UTC

Hi Rolian, 

We are happy to hear that your problem has been solved. 

Currently we do not have support for automatically adopt the grid when applying browser zooming. And also we would like to inform you that this is a default behavior of HTML Table. By default the html table adjusts its pixels(based on the content available inside the td) with respect to the screen resolutions. 

Please get back to us if you need further assistance. As always, we are happy to assist you 
 
Regards, 
Pavithra S. 


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