1. Home
  2. Forum
  3. Angular - EJ 2
  4. Tree Grid problems with virtualization and reloading rows

Tree Grid problems with virtualization and reloading rows

Hi! We are testint the tree grid for our evaluation to buy this product. I have encountered some problems

1. When I edit a value in the data.dataSourceName column (attached code) a method is fired (angular output) that re create al the rows (data Source of the grid). 
The problem is that the grid is not showin any row after that and this error appears when a click on the grid:

core.js:6014 ERROR TypeError: Cannot read property 'getBoundingClientRect' of undefined
    at ej2-grids.es2015.js:6098
    at Matrix.get (ej2-grids.es2015.js:5856)
    at FocusStrategy.onFocus (ej2-grids.es2015.js:5376)
    at ZoneDelegate.invokeTask (zone-evergreen.js:391)
    at Object.onInvokeTask (core.js:39680)
    at ZoneDelegate.invokeTask (zone-evergreen.js:390)
    at Zone.runTask (zone-evergreen.js:168)
    at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:465)
    at invokeTask (zone-evergreen.js:1603)
    at HTMLDivElement.globalZoneAwareCallback (zone-evergreen.js:1629)

The first time the rows load it build perfectly the grid. The problem comes from the ng-template in data.dataSourceName column (if a remove that it works). I need this template to change text color is value is editable and to translate the value. 

2. Enabling virtualization doesn't work, I'm don't know why. When I add [enableVirtualization] to true in the tree gird (setting the height) and erros appears and the grid stuck in the progress circle. I need virtualization because when a have more than 100 rows the grid is very slow when I enter edit mode.
The error:

core.js:6014 ERROR TypeError: Cannot read property 'getBoundingClientRect' of undefined
    at TreeInterSectionObserver.observes (ej2-treegrid.es2015.js:7407)
    at VirtualTreeContentRenderer.fn (ej2-treegrid.es2015.js:7300)
    at Observer.notify (ej2-base.es2015.js:1888)
    at Grid.notify (ej2-base.es2015.js:5480)
    at ej2-grids.es2015.js:2239
    at ej2-grids.es2015.js:14518
    at ZoneDelegate.invokeTask (zone-evergreen.js:391)
    at Object.onInvokeTask (core.js:39680)
    at ZoneDelegate.invokeTask (zone-evergreen.js:390)
    at Zone.runTask (zone-evergreen.js:168)


Could be this problems something about the imports? IEditCell for example I'm importing the the datagrid not the treegrid package (because it doesnt exist) or something about dependencies?


Attachment: baselinegridsync_bedf03a.zip

6 Replies
PK Padmavathy Kamalanathan Syncfusion Team April 21, 2020 01:14 PM UTC

Hi Cesar,

Thanks for contacting Syncfusion Forums.

From your query and code snippet, we could see that you are using Editing with Virtualization. Currently we do not have support for Editing with Virtualization. We have already logged improvement task for providing support for the same. This feature will be rolled out in our upcoming Volume 2 release at the end of June 2020.

You have also mentioned a script error in your query. This is a known issue and is has already been fixed in v(18.1.36-beta). We request you to update to the latest version (18.1.36-beta or greater than that) in order to resolve this issue.

Regards,
Padmavathy Kamalanathan


CS Cesar Smerling April 21, 2020 01:59 PM UTC

Thanks.

So virtualization doesn't work with editing. Can I use the ng-template #template to create the components for edition? because editing is very slow on more than 100 rows.

The other script error, I have update to the latest package (18.1.43) and the error persiste when I enable the ng-template #template in the propertyValue column (when the input rows is updated, dataSource in the grid) no records are displayed and the error appears:

ERROR TypeError: Cannot read property 'getBoundingClientRect' of undefined
    at ej2-grids.es2015.js:6184
    at Matrix.get (ej2-grids.es2015.js:5942)
    at FocusStrategy.onFocus (ej2-grids.es2015.js:5445)
    at ZoneDelegate.invokeTask (zone-evergreen.js:391)
    at Object.onInvokeTask (core.js:39680)
    at ZoneDelegate.invokeTask (zone-evergreen.js:390)
    at Zone.runTask (zone-evergreen.js:168)
    at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:465)
    at invokeTask (zone-evergreen.js:1603)
    at HTMLDivElement.globalZoneAwareCallback (zone-evergreen.js:1629) 

When I used queryCellInfo method to template the rows it works, but I have problems in formatting the number values of them. I have to try if templating and disabled editing works for us.

PK Padmavathy Kamalanathan Syncfusion Team April 22, 2020 03:03 PM UTC

Hi Cesar,

Thanks for your update.

QUERY1: Can i use ng template to create component for ng edition

Yes. You can create and use ng template for edition. We have created sample with your code (having ng template) and shared you below. You can check editing in that sample.

QUERY2: when I enable the ng-template #template in the propertyValue column, no records are displayed and the error appears

We have validated the reported issue with your code. We have used your ng template of propertyValue column in our "Progress" column. We are unable to reproduce the reported issue at our end.

Please check the below sample,

We request you to share us the below details, so that we could proceed further,
  1. Please share us issue reproducible sample(with dummy data and style sheet) or reproduce the issue in the above sample and share us with replication procedure
  2.  Video demonstrating the issue
QUERY3: When I used queryCellInfo method to template the rows it works, but I have problems in formatting the number values of them.

We could not find code related to querCellInfo event and formatting. Please share your code related to this issue and explain us your requirement so that we can proceed further.
Regards,
Padmavathy Kamalanathan


CS Cesar Smerling April 22, 2020 07:31 PM UTC

Hi, it's seems that I have big problems with data grid and tree grid. Most of all are about performance.

First, the example code that you have me doesn't work correclty. When you edit the task name and then you click in the column to sort the records dissapear, with no error. This is something similar happening to me as I mentioned.

I will try to strat fresh so you can understand all the test that I have done and then I have more question about the problems I'm facing now.

1. I started used the DataGrid first because we were using another grid that you can group by column and template those groups so that empty values are not show. This I asked in this post: https://www.syncfusion.com/forums/153313/data-grid-hide-empty-or-undefined-group-templates. 
The awnser that you gave me was that group with empty values cannot be hidden like we want so I moved to the Tree Grid.

2. Tree Grid, I create the rows in herarchical mode (with subRows attribute to childMapping for using a Tree Grid. I templated my columns with template and with editTemplate with edit mode in cell mode. I had problems with combo box in edit mode, like I asked here: https://www.syncfusion.com/forums/153287/data-grid-edit-template-with-combo-box-finish-edit-value-as-object. 
With this started to have performance issues with edit mode on more that 100 rows. So, I use virtualization. And when the rows refreshed (changed all the rows) the grid show empty records (like the example you gave me). So you told me than virtualization doens't work with edit mode.

3. Tree Grid,so I replace all the templates (editTemplates, and queryInfoCell tempaltes) to simple template in the cell, disabling virtualization. Now I have perfomarnce issues when are many rows that have to be drawn, and our "edition" do it in a method of the components created in the cell template, are replacing all the rows and this take to much when I have many rows.

4. Tried to enable virtualization again, but when scrolling some up and downs appears, so I disable it.

5. Now I'm trying not to update the rows with the field changed, so I don't have to re create the grid all the grid with the "new rows" but I cannot get it working. I tried used the updateCell and updateRow methods of the grid and update the dataSource and refresh but the data is not updated. Only is update when I replace all the datasource with the a new array. Like a two way binding of the data fields.

Now I'll try to explain the requeriments that we need:
1. A grid that we can update some values that are re calculated in the server for any user action (so refresh fast of the changes).
2. Template cell colors for editable and not editable rows depending on some values of other columns (conditional depending on user selections) (example: we have a column data source if that column is not set to Manual the property column is not editable)
3. Template to translate the values of the property name values, with filter like excel on that column.
4. User sorting.
5. Grouping or Herarchical Mode of the rows. This groups shold be templated too depending on the deep in the tree.
6. Many rows created in a perfomant way (we cannot use pagination, or is not convienent for the user experience, because is like a big data editable grid to compare and edit simultaneous values at one time), virtualization works on Wijmo Grid

I attach the code with a data test with the 5 step mentioned before in bold. I'm not user anymore which is the best way to attack all my requeriments now, feels like when I solve one I have problems with other and I have to go back what I donde.
I hope I make my self clear but everytime I go one step forward I have to backward two or three. I still want to give it a try to the grid in syncfusion but I'm thinking that our requeriments are to complex for this and we already have a wijmo grid that works with this so we don't want to lose any functionalitty.

Thanks so much! I hope there is a clean solution for this requeriments.


Attachment: baselinegridsync_261c09bd.zip

PK Padmavathy Kamalanathan Syncfusion Team April 23, 2020 02:34 PM UTC

Hi Cesar,

Thanks for the details.

QUERY1: edit task name and then you click in the column to sort the records disappears

We are able to reproduce the reported issue at our end. We are validating the issue further. And we will get back to you with further details.

QUERY2: Issues related to performance of Tree Grid

In order to discuss the reported performance issues and achieve your requirement, we have created new incident. 

Please check the below link,

Note: To view the incident , kindly login into your account.

Regards,
Padmavathy Kamalanathan





PK Padmavathy Kamalanathan Syncfusion Team April 24, 2020 01:43 PM UTC

Hi Cesar,
 

 
We appreciate your patience. 
  
QUERY: edit task name and then you click in the column to sort the records disappears 

 
We have validated the issue and logged it as bug. The fix for the issue will be rolled out in our patch release which is expected to be rolled out on 6th May 2020 
 
  
You can track the current status of your request, review the resolution timeline and contact us for any further inquiries through this link.  
  
For the 2nd query, as we have mentioned in our last update you can have follow up in the incident. 

 
Note: To view the above feedback, kindly login into your account. 
  
Disclaimer: The feedback link is in review state and you can check it once it is validated 
 
 
Regards, 
Padmavathy Kamalanathan
 


Loader.
Up arrow icon