topic Re: How can I achieve a two level row expansions for a table view? in Dashboards & Visualizations

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

deepikagooty — Thu, 18 May 2023 18:22:52 GMT

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.

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

kamlesh_vaghela — Sat, 20 May 2023 05:37:32 GMT

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

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

deepikagooty — Wed, 31 May 2023 03:26:14 GMT

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.

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

deepikagooty — Wed, 14 Jun 2023 22:59:06 GMT

@kamlesh_vaghela Can you please suggest a solution for this

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

kamlesh_vaghela — Thu, 15 Jun 2023 05:20:44 GMT

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

Please check screenshot. 🙂

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

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

deepikagooty — Thu, 15 Jun 2023 06:03:28 GMT

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.