Splunk Dashboard Examples: How can I implement the table row expansion?

[t183194]

Trying to adopt the example table row expansion from Dashboard examples app. In the example a chartview is used which I've replaced with a tableview. The row expansion only seems to work correctly the first time then not after that. Example is where expanded data spans > 1 page. The prev/next page buttons work the first time but if another row is expanded after that they no longer work. The same issue applies using a hyperlink (the link works on the first expansion only).
Sample js from Dashboard Examples using tableview.

require([
    'splunkjs/mvc/tableview',
    'splunkjs/mvc/chartview',
    'splunkjs/mvc/searchmanager',
    'splunkjs/mvc',
    'underscore',
    'splunkjs/mvc/simplexml/ready!'],function(
    TableView,
    ChartView,
    SearchManager,
    mvc,
    _
    ){
    var EventSearchBasedRowExpansionRenderer = TableView.BaseRowExpansionRenderer.extend({
        initialize: function(args) {
            // initialize will run once, so we will set up a search and a chart to be reused.
            this._searchManager = new SearchManager({
                id: 'details-search-manager',
                preview: false
            });
            this._chartView = new TableView({
                managerid: 'details-search-manager',
                'charting.legend.placement': 'none'
            });
        },
        canRender: function(rowData) {
            // Since more than one row expansion renderer can be registered we let each decide if they can handle that
            // data
            // Here we will always handle it.
            return true;
        },
        render: function($container, rowData) {
            // rowData contains information about the row that is expanded.  We can see the cells, fields, and values
            // We will find the sourcetype cell to use its value
            var sourcetypeCell = _(rowData.cells).find(function (cell) {
               return cell.field === 'sourcetype';
            });
            //update the search with the sourcetype that we are interested in
            this._searchManager.set({ search: 'index=_internal earliest=-1m latest=now sourcetype=' + sourcetypeCell.value + ' | timechart count'});
            // $container is the jquery object where we can put out content.
            // In this case we will render our chart and add it to the $container
            $container.append(this._chartView.render().el);
        }
    });
    var tableElement = mvc.Components.getInstance("expand_with_events");
    tableElement.getVisualization(function(tableView) {
        // Add custom cell renderer, the table will re-render automatically.
        tableView.addRowExpansionRenderer(new EventSearchBasedRowExpansionRenderer());
    });
});

[nagar57]

@t183194 Did you get the solution for this problem? I am facing the exact same problem with table row expansion having data scattered over different pages.

[iamkilarunaresh]

Hello, @rshah_splunk  I actually need help on a similar kind of problem, Is it possible to have a two-level of row expansions. 

[rshah_splunk]

Hi,

You can try replacing line 21-24 in your code with the below contents.

this._chartView = new TableView({
managerid: 'details-search-manager',
count: 10,
dataOverlayMode: "none",
drilldown: "none",
rowNumbers: "false",
wrap: "true",
});

This worked for me...!

[t183194]

Hi. Thanks for the idea but the issue occurs after the initial expansion. Subsequent collapses/expansions work ok but the next/prev page & hyperlink functions don't work after the initial expansion.

[rshah_splunk]

Its working for me actually. Only sort is not working for me.