JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › Data Grid › inconsistency with cell templates
Tagged: grid templates
- This topic has 4 replies, 2 voices, and was last updated 1 year ago by edwardsmarkff.
-
AuthorPosts
-
October 23, 2023 at 5:57 pm #109045edwardsmarkffParticipant
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 ago by edwardsmarkff.
- This topic was modified 1 year ago by edwardsmarkff.
- This topic was modified 1 year ago by edwardsmarkff.
- This topic was modified 1 year ago by edwardsmarkff.
October 23, 2023 at 8:04 pm #109053adminKeymasterHi 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,
MarkovSmart UI
https://www.htmlelements.com/October 23, 2023 at 8:36 pm #109055edwardsmarkffParticipanthi – i stopped using templates and just switched over to
forEachRow
because of the inconstancy usingtemplate
.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 ago by edwardsmarkff.
- This reply was modified 1 year ago by edwardsmarkff.
October 23, 2023 at 10:33 pm #109062adminKeymasterHi,
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,
MarkovSmart UI
https://www.htmlelements.com/October 23, 2023 at 11:51 pm #109063edwardsmarkffParticipantbeginUpdate 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 ago by edwardsmarkff.
-
AuthorPosts
- You must be logged in to reply to this topic.