Problems with Frozen Columns in a grid with declared height

Question

Hello Syncfusion team, I am having some problems with frozen columns in combination with a grid of which I declared a height.In short, I am having a grid that should take up all the remaining vertical space. I achieved this with this template:

So, I put my grid inside a container with height: 0px and flex-grow:1 and set the grid height to 100%. That works without frozen columns as you can infer from the following sample:https://stackblitz.com/edit/angular-ugn5vn-uev2jx?file=app.component.html But when I click the toggle button to add a frozen column in the beginning, I dont have access on the sidebars anymore. I can still scroll horizontally with mouse scrolling, but I cannot scroll vertically at all. Is this fixable somehow, so that I can 1) keep the grid that fills the remaining space and2) Access both toolbars?Thanks in regardJonas

Pavithra Subramaniyam · Answer

Hi Jonas Czeslik,Thanks for contacting Syncfusion support.The vertical scrollbar is rendered properly with the latest Syncfusion
package. So we suggest updating your package to overcome the reported issue.
Please refer to the below sample land documentation link for the npm package upgrade.Sample               : https://stackblitz.com/edit/angular-joxzbn-wpc3sv?file=app.component.ts,index.htmlDocumentation : https://ej2.syncfusion.com/angular/documentation/common/how-to/update-npm-package/Please get back to us if you need further assistance on
this.Regards,Pavithra S

Jonas Czeslik · Answer

Got it! This is working now, thank you.

But I have a follow-up question. I added the typical CRUD mechanics to the grid, but whenever I add, edit or delete a row, the freezing mechanic does not work anymore and my grid is unusable afterwards.

I get the following error:

ERROR TypeError: Cannot read properties of null (reading 'querySelector')

at o.getFrozenLeftContentTbody

Have a look at the modified sample: https://stackblitz.com/edit/angular-joxzbn-phx7dz?file=app.component.ts

Do a CRUD operation and try to toggle in the frozen column with the top button to reproduce the error.

Why is that happening? Are frozen columns restricted to read-only grids?

Pavithra Subramaniyam · Answer

Hi Jonas Czeslik,We could reproduce the reported scenario “Script error
while setting frozen column if the Grid rows are selected” and We are
validating this in our source currently. So, we will update the further details
on Sep 5th, 2022. Until then we appreciate your patience.Regards,Pavithra S

Pavithra Subramaniyam · Answer

Hi Jonas Czeslik,Thanks for your patience.You can overcome the reported issue by calling the “clearSelection”
method before you toggle the frozen columns. Please refer to the below code
example for more information.

toggleFrozenColumn() {
    if (this.add === true) {
      this.grid.clearSelection();
      this.columns.push({
        .  .  .
      });
    } else {
      this.columns.pop();
    }
    .  .  .
  }

https://ej2.syncfusion.com/angular/documentation/api/grid/#clearselectionPlease get back to us if you need further assistance on this.Regards,Pavithra S

Jonas Czeslik · Answer

This fixes the Display Error, but I still run into other problems.

Here's the Stackblitz: https://stackblitz.com/edit/angular-joxzbn-phx7dz?file=app.component.ts

2 Issues:
1) Please try to edit a row and add the frozen column afterwards. You will see that the edited value is gone. The grid refreshes with the pre-edit value.

2) Try to toggle in and out the frozen column and do a CRUD operation afterwards. It lets you do the operation, but it always throws the error:

ERROR TypeError: Cannot read properties of undefined (reading 'querySelector')

That can also lead to consequential errors as if there is no access to specific grid attributes anymore.

Pavithra Subramaniyam · Answer

Hi Jonas Czeslik,Query#1: Please try to edit a row and add the frozen
column afterwards. You will see that the edited value is gone. The grid
refreshes with the pre-edit value.By default, when a Grid detects a property change, it will refresh
the Grid. So, the edited value will be removed while refreshing which is the default
behavior. In your sample, invoking the “refreshColumns” method refreshed the grid
and so the changes are removed. If you want to save the changes before refreshing
we suggest the “endEdit” method to achieve your requirement. Please
refer to the below code example for more information.

toggleFrozenColumn() {
      this.grid.endEdit();
     
  this.grid.clearSelection();
      .  .  .
     
  this.grid.refreshColumns();
    }

https://ej2.syncfusion.com/angular/documentation/api/grid/#endeditQuery#2: Try to toggle in and out the frozen column and
do a CRUD operation afterwards. It lets you do the operation, but it always
throws the error:We have confirmed this as an issue and logged the defect
report “Script error while editing after removing the frozen columns from
Grid” for the same. Thank you for taking time to report this issue and
helping us to improve our product. At Syncfusion, we are committed to fix all
validated defects (subject to technological feasibility and Product Development
Life Cycle) and this fix will be included in our upcoming patch release which
is expected to be rolled out on or before 21st
  September, 2022. 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.        https://www.syncfusion.com/feedback/37576/script-error-while-editing-after-removing-the-frozen-columns-from-gridDisclaimer: “Inclusion of this solution in the weekly
release may change due to other factors including but not limited to QA checks
and works reprioritization”Until then we appreciate your patience.Regards,Pavithra S

Jonas Czeslik · Answer

Hi, I again dared to try implementing the frozen columns for my grid. I updated the packages, which indeed leads to the second error not appearing anymore.

But still, the first issue is not resolved.
"1) Please try to edit a row and add the frozen column afterwards. You will see that the edited value is gone. The grid refreshes with the pre-edit value."

You mentioned that I have to add a this.grid.endEdit statement before the header refresh, which I did, but like you can see in the following updated example, the error is not gone:

https://stackblitz.com/edit/angular-joxzbn-qul6we?file=app.component.ts

Pavithra Subramaniyam · Answer

Hi Jonas Czeslik,In your sample, we could see that there is no primary key
column that is essential for EJ2 Grid editing. So we suggest adding “isPrimaryKey”
property as true for a column that has unique values based on which the
changes will be updated to the rows. Please refer to the below sample link for
more information.

{
    field: 'OrderID',
    headerText: 'Order ID',
    isPrimaryKey: true,
    width: '140px',
  },

https://stackblitz.com/edit/angular-joxzbn-zedq1e?file=app.component.tsRegards,Pavithra S