KoolReport's Forum

Official Support Area, Q&As, Discussions, Suggestions and Bug reports.
Forum's Guidelines

Run arbitrary JS in Dashboard Table #2771

Open GHSix opened this topic on on Jul 28, 2022 - 3 comments

GHSix commented on Jul 28, 2022

For example, I have this in MyTable.php:

protected function fields()
    {
        return [
            Text::create('name')
                ->label('Nome')
                ->formatUsing(function($value, $row) {
                    return '<span data-bs-toggle="tooltip" title="'. $value .'">'. mb_strimwidth($value, 0, 14, '...') .'</span>';
                })
        ];
    }

In the [https://getbootstrap.com/docs/5.0/components/tooltips/](Bootstrap docs) they tell my to initialize the tooltips as:

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
})

If I run it in the console, it works.

So I have 3 questions here:

  1. How to run this JS code for this component and others when needed?
  2. How to run any JS code when I want, like an simple alert('Ok') insde dashboard onRendered? With Client class? If so, how is the sintaxe?
  3. Koolreport/Dashboard has it own way to start Bootstrap tooltips already?
KoolReport commented on Aug 1, 2022

You assign an id to the span and call javascript after that:

return "<span id='tooltip".$row["id"]."' title='Your title'>Your content</span><script>$('#tooltip".$row["id"]."').tooltip();</script>";

Let me know if you need further assistance.

GHSix commented on Aug 1, 2022

I see, but in this case, if I have 20 lines in a table, this code will run 20 times.

Is there a way to run a code on events, like onLoad, onReady, etc, so I can run a code once to act over all the table or all the board?

KoolReport commented on Aug 2, 2022

Currently the above way is only way. No worries about 20 times because even you have onLoad events for Table, the code there looks short but it will loop 20 times or more because it may re-initiate tooltip outside of table (in another table for example) as well. It will waste more resources than above way.

P.S: The client js run on event was on our wish list already.

Build Your Excellent Data Report

Let KoolReport help you to make great reports. It's free & open-source released under MIT license.

Download KoolReport View demo
help needed

Dashboard