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!

ICYMI - Check out the latest releases of Splunk Edge Processor

Splunk is pleased to announce the latest enhancements to Splunk Edge Processor.  HEC Receiver authorization ...

Introducing the 2024 SplunkTrust!

Hello, Splunk Community! We are beyond thrilled to announce our newest group of SplunkTrust members!  The ...

Introducing the 2024 Splunk MVPs!

We are excited to announce the 2024 cohort of the Splunk MVP program. Splunk MVPs are passionate members of ...