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

Metronic dynamically add data to widget list


I'm trying to add custom data to widget list.
What is the proper way to do this?
I've tried to generate custom "timeline-item" and just push it to DOM like innerHtml, but css fails, it doesn't serve my pushed items.

I believe I need to do this other way, maybe using something to generate "timeline-item" or reload the widget data. I can see information about using the DATATABLE, but this is not a table.

<div class="card card-xl-stretch mb-xl-8">
<div class="card-header align-items-center border-0 mt-4">
<h3 class="card-title align-items-start flex-column">
<span class="fw-bolder mb-2 text-dark">Activities</span>

</div>
<div class="card-body pt-5">
<div class="timeline-label">
<!--begin::Item-->
<div class="timeline-item">
<div class="timeline-label fw-bolder text-gray-800 fs-6">08:42</div>
<div class="timeline-badge">
<i class="fa fa-genderless text-warning fs-1"></i>
</div>
<div class="fw-mormal timeline-content text-muted ps-3">Outlines keep you honest. And keep structure</div>
</div>
<!--end::Item-->
</div>
</div>
</div>


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 (2)


Question is closed.
There was problem on my side, sorry happy



Noted, all the best with your projects happy


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  :(