inconsistency with cell templates

[edwardsmarkff]

i am reposting this question since i may have found an inconsistency using templates.

please try this codepen:  https://codepen.io/edwardsmarkf/pen/dyayjxP

please click the button, notice the CSS, close the window, and open the window again.   notice how the CSS is different on the second time.  it remains consistent (and correct) upon the second window opening, but not on the first window opening.

however, as you can see from my original question using forEachRow is very consistent and works fine.

its difficult for me to tell if this is something wrong in my code, or by chance is there something with grid template that is inconsistent?

i am using:  smartGrid.clearRows() ;   smartGrid.resetState(); to make sure each time the window is open that the grid is recreated.

please take a look & let me know what you think.

 

• This topic was modified 1 year, 1 month ago by edwardsmarkff.
• This topic was modified 1 year, 1 month ago by edwardsmarkff.
• This topic was modified 1 year, 1 month ago by edwardsmarkff.
• This topic was modified 1 year, 1 month ago by edwardsmarkff.

[admin]

Hi edvardsmarkff,

For styling Grid cells, please refer to https://www.htmlelements.com/docs/grid-styling-cells/ and for applying templates look at https://www.htmlelements.com/demos/grid/column-dynamic-template-with-components/. You can see in the example, that the “template” is a function. We check whether there is a template. If there is not a template, we set it. Next, when the cell is re-rendered, we have a template and just update it instead of creating new html elements which will affect the performance.

Regards,
Markov

Smart UI
https://www.htmlelements.com/

[edwardsmarkff]

hi – i stopped using templates and just switched over to forEachRow because of the inconstancy using template.

could you please explain why we get different results from the first to the second load?

https://codepen.io/edwardsmarkf/pen/dyayjxP

i should think every run would be identical.

• This reply was modified 1 year, 1 month ago by edwardsmarkff.
• This reply was modified 1 year, 1 month ago by edwardsmarkff.

[admin]

Hi,

The Grid is used a bit incorrectly in the shared sample. Using element.querySelector on elements which are dynamically created and reused is the source of the issue. I would suggest you to look at our help docs and examples in order to learn how to better utilize the component. It is also better to create a grid instance, set all the Grid properties and then append the Grid to the DOM instead of dynamically setting multiple properties which will require re-renders from a performance point of view. If you app requires this, then I would suggest using the Grid’s beginUpdate and endUpdate methods before and after setting your properties. By doing that, you will end up with only 1 refresh.

Regards,
Markov

Smart UI
https://www.htmlelements.com/

[edwardsmarkff]

beginUpdate and endUpdate

wow that sure sped things up!  thank you very much for your time and your patience with me.

>>> set all the Grid properties and then append the Grid to the DOM

by this you mean to use the grid the way all the examples worked like so?
Smart('#grid', class {
–or
window.Smart('#grid', class {


i was running into some sort of issue with the <script type="module" vs <script type="javascript" but will address this later on.

 

 

• This reply was modified 1 year, 1 month ago by edwardsmarkff.

[Author]

Posts