Dashboards & Visualizations

How to enable/disable drilldown via javascript in an HTML dashboard?

sfatnass
Contributor

Hi,

I want to know how to enable and disable drilldown with jquery using onclick event.

ps: i'm using an html dashboard

thx

0 Karma
1 Solution

piUek
Path Finder

I think the proper way would be:
- get the mvc element

- change drilldown settings
- re-render the table

It is little tricky at first:

var element1 = mvc.Components.get('element1');

element1.getVisualization(function(tableView) {
    tableView.settings.set('drilldown', 'none');
    tableView.table.render();
});

If You are doing this in the same script context, then You can simply use it's handler.
In this example, I've created 2 buttons - on and off:

        <button id='drillOff'>Off</button>
        <button id='drillOn'>On</button>

And then created the table and attached functions which change drilldown behaviour:

            var element1 = new TableElement({
                "id": "element1",
                "drilldown": "row",
                'drilldownRedirect': false,
                "rowNumbers": "undefined",
                "wrap": "undefined",
                "managerid": "search1",
                "el": $('#element1')
            }, {
                tokens: true,
                tokenNamespace: "submitted"
            }).render();

            $('#drillOff').click(function() {
                element1.getVisualization(function(vis) {
                    vis.settings.set('drilldown', 'none');
                    vis.table.render();
                })
            })

            $('#drillOn').click(function() {
                element1.getVisualization(function(vis) {
                    vis.settings.set('drilldown', 'row');
                    vis.table.render();
                })
            })

View solution in original post

piUek
Path Finder

I think the proper way would be:
- get the mvc element

- change drilldown settings
- re-render the table

It is little tricky at first:

var element1 = mvc.Components.get('element1');

element1.getVisualization(function(tableView) {
    tableView.settings.set('drilldown', 'none');
    tableView.table.render();
});

If You are doing this in the same script context, then You can simply use it's handler.
In this example, I've created 2 buttons - on and off:

        <button id='drillOff'>Off</button>
        <button id='drillOn'>On</button>

And then created the table and attached functions which change drilldown behaviour:

            var element1 = new TableElement({
                "id": "element1",
                "drilldown": "row",
                'drilldownRedirect': false,
                "rowNumbers": "undefined",
                "wrap": "undefined",
                "managerid": "search1",
                "el": $('#element1')
            }, {
                tokens: true,
                tokenNamespace: "submitted"
            }).render();

            $('#drillOff').click(function() {
                element1.getVisualization(function(vis) {
                    vis.settings.set('drilldown', 'none');
                    vis.table.render();
                })
            })

            $('#drillOn').click(function() {
                element1.getVisualization(function(vis) {
                    vis.settings.set('drilldown', 'row');
                    vis.table.render();
                })
            })

sfatnass
Contributor

thx it work ^^

0 Karma

tom_frotscher
Builder

Hi,

get the component by id and use preventDefault to prevent the default onclick behavior.

   var myview = mvc.Components.getInstance("your_view_id");
   myview.on("click", function (e) {
       e.preventDefault();
       // To do: respond to events
   });
 });
0 Karma

sfatnass
Contributor

The question is about drilldown

I know how use jquery in Splunk, but how can change drilldown settings?

I tried this, but it doesn't work:

document.getElementById('id_table').settings.set('drilldown','none');

and 

document.getElementById('id_table').setattr('drilldown','none');

Another person searched about this function:
http://answers.splunk.com/answers/216486/how-to-enable-disable-table-element-drilldown-thro.html

thx

0 Karma

sfatnass
Contributor

nobody can help?

0 Karma

tom_frotscher
Builder

Then you have to use:

var myview = mvc.Components.getInstance("your_view_id");
myview.settings.set('drilldown', 'none');

What you did is to select a dom element. Ofcourse the dom element does not have a set function for drilldowns. Only the model of the view has the settings and methods that are mentioned in the reference here: http://docs.splunk.com/Documentation/WebFramework

Greetings

Tom

0 Karma
Got questions? Get answers!

Join the Splunk Community Slack to learn, troubleshoot, and make connections with fellow Splunk practitioners in real time!

Meet up IRL or virtually!

Join Splunk User Groups to connect and learn in-person by region or remotely by topic or industry.

Get Updates on the Splunk Community!

Manage Edge Processor pipelines end to end with APIs

This guide uses the Data Management APIs to create an Edge Processor, onboard one instance, deploy a pipeline ...

Splunk Brings Proof of Control to Digital Asset Transfers

Digital assets now sit inside the core of financial services. HSBC launched its Tokenized Deposit Service in ...

Manage Ingest Processor pipelines end to end with APIs

This guide uses the Data Management APIs to create an Ingest Processor pipeline, deploy it to the ...