# Improve rendering strategy on tree view on Sao

**URL:** https://discuss.tryton.org/t/improve-rendering-strategy-on-tree-view-on-sao/1481
**Category:** Feature
**Created:** [June 16, 2019, 2:27pm UTC](https://discuss.tryton.org/t/improve-rendering-strategy-on-tree-view-on-sao/1481 "2019-06-16T14:27:08Z")
**Posts on this page:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![dabada83](https://discuss-cdn.tryton.org/user_avatar/discuss.tryton.org/dabada83/32/67_2.png) [@dabada83](https://discuss.tryton.org/u/dabada83)
#### Post date: [June 16, 2019, 2:27pm UTC](https://discuss.tryton.org/t/improve-rendering-strategy-on-tree-view-on-sao/1481/1 "2019-06-16T14:27:09Z")

</div>

**Rational**  
Rendering strategy of tree views on desktop client allow to show views with a big number of records.  
This is due to not render all records at a time, but on the contrary render records that appear on  
screen.

I think it would be a good idea try to imitate desktop client behavior on rendering trees,  
as long as this does not affect the current operation of Sao.

**Proposal**  
I think, we can use a library that allow to know what records are in viewport of screen or xxx2many  
widget. Render only this records, and detect scroll on view trees to redraw only records inside viewport.

**Implementation**

- [Improve rendering stragegy on tree views (#8437) · Issues · Tryton / Tryton · GitLab](https://bugs.tryton.org/issue8437)
- [Support alternative payees on invoice (#11646) · Issues · Tryton / Tryton · GitLab](https://bugs.tryton.org/issue11646)

Videos:  
[Actual rendering strategy sample](https://vimeo.com/342566351)  
[Proposed rendering strategy sample](https://vimeo.com/342566505)

---

<div class="post-metadata">

### Author: ![dabada83](https://discuss-cdn.tryton.org/user_avatar/discuss.tryton.org/dabada83/32/67_2.png) [@dabada83](https://discuss.tryton.org/u/dabada83)
#### Post date: [August 14, 2019, 3:34pm UTC](https://discuss.tryton.org/t/improve-rendering-strategy-on-tree-view-on-sao/1481/2 "2019-08-14T15:34:19Z")

</div>

On our company, we will try to solve this feature using IntersectionObserver

> **[Intersection Observer API - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)**
>
> The Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport.

We will share results comming soon

---

<div class="post-metadata">

### Author: ![ced](https://discuss-cdn.tryton.org/user_avatar/discuss.tryton.org/ced/32/1237_2.png) [@ced](https://discuss.tryton.org/u/ced)
#### Post date: [August 14, 2019, 3:56pm UTC](https://discuss.tryton.org/t/improve-rendering-strategy-on-tree-view-on-sao/1481/3 "2019-08-14T15:56:15Z")

</div>

Is it still needed with the recent improvement on the rendering:

- [http://hg.tryton.org/sao/rev/6da9f9b71de5](http://hg.tryton.org/sao/rev/6da9f9b71de5)
- [http://hg.tryton.org/sao/rev/177ac9b75fef](http://hg.tryton.org/sao/rev/177ac9b75fef)

But the IntersectionObserver could be used to automatically click on more when visible.

---

<div class="post-metadata">

### Author: ![dabada83](https://discuss-cdn.tryton.org/user_avatar/discuss.tryton.org/dabada83/32/67_2.png) [@dabada83](https://discuss.tryton.org/u/dabada83)
#### Post date: [August 14, 2019, 4:27pm UTC](https://discuss.tryton.org/t/improve-rendering-strategy-on-tree-view-on-sao/1481/4 "2019-08-14T16:27:20Z")

</div>

> [@ced](#):
>
> Is it still needed with the recent improvement on the rendering:

I think this feature is one more step on performance improvement.

> [@ced](#):
>
> But the IntersectionObserver could be used to automatically click on more when visible.

Yes, in the same way that GTK client works.

---

<div class="post-metadata">

### Author: ![ced](https://discuss-cdn.tryton.org/user_avatar/discuss.tryton.org/ced/32/1237_2.png) [@ced](https://discuss.tryton.org/u/ced)
#### Post date: [August 14, 2019, 4:31pm UTC](https://discuss.tryton.org/t/improve-rendering-strategy-on-tree-view-on-sao/1481/5 "2019-08-14T16:31:57Z")

</div>

> [@dabada83](#):
>
> I think this feature is one more step on performance improvement.

Why? Because if we fill by default only 20 rows (average number for all the screen sizes) and when new rows are added we only render them (thanks to [http://hg.tryton.org/sao/rev/6da9f9b71de5](http://hg.tryton.org/sao/rev/6da9f9b71de5)). I do no see what improvement an IntersectionObserver will provide except to render only 10 rows instead of 20 on small screen (which is very negligible).

> [@dabada83](#):
>
> Yes, in the same way that GTK client works.

Not really. Because on GTK all the rows are created because it is cheap but on HTML it is not.

---

<div class="post-metadata">

### Author: ![ced](https://discuss-cdn.tryton.org/user_avatar/discuss.tryton.org/ced/32/1237_2.png) [@ced](https://discuss.tryton.org/u/ced)
#### Post date: [October 24, 2022, 6:00am UTC](https://discuss.tryton.org/t/improve-rendering-strategy-on-tree-view-on-sao/1481/6 "2022-10-24T06:00:12Z")

</div>

This topic was automatically closed after 12 days. New replies are no longer allowed.
