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

[darljed]

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)

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

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)
    }

[fran]

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.

[kamlesh_vaghela]

@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>

 

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.

[darljed]

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?

[kamlesh_vaghela]

@darljed 

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

KV