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
Get Updates on the Splunk Community!

Index This | Why did the turkey cross the road?

November 2025 Edition  Hayyy Splunk Education Enthusiasts and the Eternally Curious!   We’re back with this ...

Enter the Agentic Era with Splunk AI Assistant for SPL 1.4

  &#x1f680; Your data just got a serious AI upgrade — are you ready? Say hello to the Agentic Era with the ...

Feel the Splunk Love: Real Stories from Real Customers

Hello Splunk Community,    What’s the best part of hearing how our customers use Splunk? Easy: the positive ...