Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$

TinySlider's data update issue - Blazor hosted


Hi,

I'm combining a "timeline view" (Activities list in your demos) with TinySlider. This is how I do it :

+ I have in each line a list of text that slides horizontaly via TinySlider, each text is a slider element. At far right, and far left there's slider control arrows and dots above.
+ The other lines compose other text sliders that are completely independents from the others.
+ So I have as many (data-tns="true") as list groups, each one has its own controllers
+ The whole is inside the timeline with a left vertical bar that represents order

The issue pops out when I add a button to switch order (Importance/Chronology). By default importance is set and the component render perfectly. Than when I switch order It orders correctly but TinySliders renders poorly even with await JS.InvokeVoidAsync("KTApp.init") OnAfterRenderAsync().

For exp if Importance order shows 5 elements in the first line, than after the switch even if there's only 1 new element that replaces the 5 in this line the setup ( number of dots, width of elements...) is based on 5 elements rather than the now count so the render is complete mess.

Any help please?
TY


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (6)


Is there any cache system?



Hi Ania Berthelot,

Thank you for reaching out to us.

Please note that OnAfterRenderAsync() will be triggered when the page gets loaded, when you change an order most likely your slider elements get rerendered and they are not considered as a slider element anymore. To fix this after changing an order you can call slider initialization function.

Regards,
Lauris Stepanovs,
Keenthemes Support Team



1-Thank you for the reply I tried in many places including OnParametersSetAsync() still not working.

I noticed in Js part that

// Sliders
const elements = Array.prototype.slice.call(document.querySelectorAll("[data-tns="true"]"), 0);
is selecting not only the slider but it's content also including dots div....

2-I saw also that sliders with any number of content works fine except 3 elemets it's slightly marged negatively to the left.

3-Is there a way to set a video call to solve this please?

Thank you



Hi Ania Berthelot,

First of all, I want to apologize for the late response.

1. As I understood a first initialization is working fine for you, the error appears only when you change an order. My guess is that it might be related to element reinitialization, you need to recall tiny-slider initialization function right after elements get reinitialized.

2. Do you have the same issue in the examples in our documentation?
https://preview.keenthemes.com/html/metronic/docs/general/tiny-slider/basic

3. Unfourntlety, our support is limited with a devs platform. Please check out our support policy.

Regards,
Lauris Stepanovs,
Keenthemes Support Team



Hi, could you please answer? Thanks


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(