All Apps and Add-ons

Why tableView.addCellRenderer not rendering on first load but works when the table header is clicked?

darljed
Explorer

I am developing a custom dashboard with a table created from XML. The table has an id of "summary_table" which I am calling to extend with custom cell renderer. 

The issue is that the table doesn't render the extended view of the table on first load. But if I click on the table header - which will trigger a sort function, the extended view works. Same thing when I click on a page from pagination view. 

This is the view when I first load the dashboard.  (DATA SHOWN BELOW ARE ALL MOCK DATA)

Screenshot_2.png

And this is the view when I click on any of the table headers. Which should have been rendered on first load.

Screenshot_3.png

I am thinking that the table didn't re-rendered again after adding the new BaseCellRenderer. 

 

here's my code. 

 

 

 

 

 

var CustomCellRenderer  = TableView.BaseCellRenderer.extend({
            canRender: function(cell) {
            // Enable this custom cell renderer for the confirm field
            return cell.field === 'Expiry_Extension'
            },
            render: function($td, cell) {
                console.log(cell.value)
                if(cell.value != ""){
                    const extension = cell.value.split("|")[0]
                    const expiration_date = cell.value.split("|")[1]
                    const order_id = cell.value.split("|")[2]

                    
                    let html = ``
                    let button_html = ` <button class="extend_expiry btn-sm btn btn-primary"><i class="icon icon-plus-circle"></i></button>`
                    if(extension == 'null'){
                        html += button_html
                    }
                    else{
                        html += extension
                        html += button_html
                    }

                    $td.html(html)
                }
            }
            });
        // Create an instance of the custom cell renderer
        var myCellRenderer = new CustomCellRenderer();
        setTimeout(function(){
            
            mvc.Components.get("summary_table").getVisualization(function(tableView) {
                tableView.addCellRenderer(myCellRenderer);
                tableView.table.render()
                console.log("rendered")
            });
        },1000)
    }

 

 

 

 

 

 

Labels (3)
Tags (1)
0 Karma

fran
Loves-to-Learn Lots

I noticed the

tableView.table.render()

Doesn't do anything if the table is already rendered. That means if it renders before you apply the cellrenderer well tough luck.

 

A hacky fix that works for me is adding a eval to the search that created the table

eval Update=$update_table$

And then just instead of the tableView.table.render() function invoking this in the JS

mvc.Components.get('submitted').set('update_table', '1');

to force it to update.

0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

@darljed 

Can you please try this? It's worked for me. Just go through and do appropriate changes in your code. 

JS

require([
    'underscore',
    'jquery',
    'splunkjs/mvc',
    'splunkjs/mvc/tableview',
    'splunkjs/mvc/simplexml/ready!'
], function (_, $, mvc, TableView) {

    var CustomCellRenderer = TableView.BaseCellRenderer.extend({
        canRender: function (cell) {
            // Enable this custom cell renderer for the confirm field
            return cell.field === 'Expiry_Extension'
        },
        render: function ($td, cell) {
            console.log(cell.value)
            if (cell.value != "") {
                const extension = cell.value.split("|")[0]
                const expiration_date = cell.value.split("|")[1]
                const order_id = cell.value.split("|")[2]


                let html = ``
                let button_html = ` <button class="extend_expiry btn-sm btn btn-primary"><i class="icon icon-plus-circle"></i></button>`
                if (extension == 'null') {
                    html += button_html
                }
                else {
                    html += extension
                    html += button_html
                }

                $td.html(html)
            }
        }
    });

    var sh = mvc.Components.get("summary_table");
    if (typeof (sh) != "undefined") {
        sh.getVisualization(function (tableView) {
            // Add custom cell renderer and force re-render
            tableView.table.addCellRenderer(new CustomCellRenderer());
            tableView.table.render();
        });
    }
});

 

XML

<dashboard version="1.1" script="addCellRenderer.js">
  <label>addCellRenderer</label>
  <row>
    <panel>
      <table id="summary_table">
        <search>
          <query>| makeresults count=10 | eval a=1 | accum a | eval Expiry_Extension="null|"+a | table _time a Expiry_Extension</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="count">100</option>
        <option name="dataOverlayMode">none</option>
        <option name="drilldown">none</option>
        <option name="percentagesRow">false</option>
        <option name="refresh.display">progressbar</option>
        <option name="rowNumbers">false</option>
        <option name="totalsRow">false</option>
        <option name="wrap">true</option>
      </table>
    </panel>
  </row>
</dashboard>

 

 

Screenshot 2023-08-16 at 11.48.52 AM.png

I hope this will help you.

Thanks
KV
If any of my replies help you to solve the problem Or gain knowledge, an upvote would be appreciated.

 

0 Karma

darljed
Explorer

Still having the same issue. One thing I noticed is that the search never showed the loading bar. My data source is from a lookup file so it was expected to load just quickly. So I tried to use data from index and make it load slower. With that, the javascript is working fine. So I am thinking that maybe there is some kind of cache in the search which will not trigger the re-rendering if the search's result is coming from the cache. Does this makes any sense?

0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

@darljed 

Is it possible to share your full code? You can mask important fields & values in XML and JS.

KV

0 Karma
Get Updates on the Splunk Community!

Detecting Remote Code Executions With the Splunk Threat Research Team

WATCH NOWRemote code execution (RCE) vulnerabilities pose a significant risk to organizations. If exploited, ...

Enter the Splunk Community Dashboard Challenge for Your Chance to Win!

The Splunk Community Dashboard Challenge is underway! This is your chance to showcase your skills in creating ...

.conf24 | Session Scheduler is Live!!

.conf24 is happening June 11 - 14 in Las Vegas, and we are thrilled to announce that the conference catalog ...