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!

Why You Can't Miss .conf25: Unleashing the Power of Agentic AI with Splunk & Cisco

The Defining Technology Movement of Our Lifetime The advent of agentic AI is arguably the defining technology ...

Deep Dive into Federated Analytics: Unlocking the Full Power of Your Security Data

In today’s complex digital landscape, security teams face increasing pressure to protect sprawling data across ...

Your summer travels continue with new course releases

Summer in the Northern hemisphere is in full swing, and is often a time to travel and explore. If your summer ...