How can I achieve a two level row expansions for a table view?

[deepikagooty]

Hello everyone,

I am currently working with the "row table expansion.js" from the dashboard examples. However, I am facing an issue where I can only achieve a single-level row expansion. My requirement is to have a two-level row expansion instead.

Could you please assist me with achieving the desired two-level row expansion functionality? Thank you in advance.

[deepikagooty]

@kamlesh_vaghela Can you please suggest a solution for this

[kamlesh_vaghela]

@deepikagooty 

Can you please try this Sample JS Code?

require([
    'splunkjs/mvc/tableview',
    'splunkjs/mvc/chartview',
    'splunkjs/mvc/searchmanager',
    'splunkjs/mvc',
    'underscore',
    'splunkjs/mvc/simplexml/ready!'
], function(
    TableView,
    ChartView,
    SearchManager,
    mvc,
    _
) {
    console.log("HIe");
    var CustomRangeRenderer = TableView.BaseCellRenderer.extend({
        canRender: function(cell) {
            return cell.field;
        },
        render: function($container, rowData) {
            console.log(rowData.value);
            $container.html(rowData.value)
        }
    });

    var EventSearchBasedRowExpansionRendererSecondLevel = TableView.BaseRowExpansionRenderer.extend({
        initialize: function(args) {
            this._searchManager = new SearchManager({
                preview: false
            }, { tokens: true, tokenNamespace: "submitted" });
            
            this._TableView = new TableView({
                managerid: this._searchManager.name,
                drilldown: 'cell'
            });
        },

        canRender: function(rowData) {
            return true;
        },

        render: function($container, rowData) {
            var processCell = _(rowData.cells).find(function(cell) {
                return cell.field === 'a';
            });

            value = processCell.value

            // var tokens = mvc.Components.get("default")
            this._searchManager.set({ search: '|makeresults count=100 | eval b="B", value="'+value+'",c=2 | accum c '});

            $container.append(this._TableView.render().el);
        }
    });

    var EventSearchBasedRowExpansionRenderer = TableView.BaseRowExpansionRenderer.extend({
        initialize: function(args) {
            this._searchManager = new SearchManager({
                preview: false
            }, { tokens: true, tokenNamespace: "submitted" });
            
            this._TableView = new TableView({
                managerid: this._searchManager.name,
                drilldown: 'cell'
            });

            this._TableView.addRowExpansionRenderer(new EventSearchBasedRowExpansionRendererSecondLevel());

        },

        canRender: function(rowData) {
            return true;
        },

        render: function($container, rowData) {
            var processCell = _(rowData.cells).find(function(cell) {
                return cell.field === 'Test Case';
            });

            value = processCell.value
            // var tokens = mvc.Components.get("default")
            // var id = tokens.get("splunk_id")
            this._searchManager.set({ search: '|makeresults count=100 | eval a="A", value="'+value+'",c=1 | accum c '});

            $container.append(this._TableView.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.table.addCellRenderer(new CustomRangeRenderer());
        tableView.render();
        tableView.addRowExpansionRenderer(new EventSearchBasedRowExpansionRenderer());
    });
});

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.

[deepikagooty]

Hi,

Thanks for the reply. I tried the below mentioned solution. I am able to see the two level row expansion. However, it only works for the first row and that too only once and it does not roll up. For the rest of the rows it only expands to one level.

[kamlesh_vaghela]

@deepikagooty 

Below solution works for me. Can you please compare it with your code?

XML

<dashboard script="expand_with_events.js" theme="dark" hideFilters="True">
  <label>expand_with_events</label>
  <row>
    <panel>
      <table id="table1">
        <search>
          <query>| makeresults count=10 | eval count=1 | accum count | eval SID = count</query>
          <earliest>-1w@w1</earliest>
          <latest>@w1</latest>
        </search>
        <option name="drilldown">row</option>
        <option name="refresh.display">progressbar</option>
        <drilldown>
          <condition></condition>
        </drilldown>
      </table>
    </panel>
  </row>
</dashboard>

JS

require([
    'splunkjs/mvc/tableview',
    'splunkjs/mvc/chartview',
    'splunkjs/mvc/searchmanager',
    'splunkjs/mvc',
    'underscore',
    'splunkjs/mvc/simplexml/ready!'
], function (
    TableView,
    ChartView,
    SearchManager,
    mvc,
    _
) {
    console.log("HIe");
    
    var EventSearchBasedRowExpansionRenderer = TableView.BaseRowExpansionRenderer.extend({
        initialize: function (args) {
            this._searchManager = new SearchManager({
                preview: false
            }, { tokens: true, tokenNamespace: "submitted" });

            this._TableView = new TableView({
                managerid: this._searchManager.name,
                drilldown: 'cell'
            });
        },

        canRender: function (rowData) {
            return true;
        },

        render: function ($container, rowData) {
            var processCell = _(rowData.cells).find(function (cell) {
                return cell.field === 'SID';
            });

            value = processCell.value
            
            this._searchManager.set({ search: '|makeresults count=100 | eval a="A", value="' + value + '",c=1 | accum c ' });

            $container.append(this._TableView.render().el);
        }
    });

    var tableElement = mvc.Components.getInstance("table1");
    tableElement.getVisualization(function (tableView) {
        
        tableView.addRowExpansionRenderer(new EventSearchBasedRowExpansionRenderer());
    });
});

Please check screenshot. 🙂 

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

[deepikagooty]

Hi @kamlesh_vaghela ,

 I tried the recent solution and it seems to be doing the one level expansion whereas I have the requirement to implement two level expansion. I have tried your previous solution on the same thread and got the two level expansion working. But the problem is, it only works for the first row and that too only once and it does not roll up. For the rest of the rows it only expands to one level.