Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 

Enhance your career with this limited time 50% discount on Fabric and Power BI exams. Ends August 31st. Request your voucher.

Reply
mahoon
New Member

dataSelected on table

I have a powerbi embedded report that works fine -it renders as a table with a few columns . I would like to be able to click a row in the table and see the data related to that row. I have tried to utilise dataSelected:

(

 

    <script> 
        $(function() {
            var reportConfig = {
                settings: {
                    filterPaneEnabled: false,
                    navContentPaneEnabled: false,
                    dataSelectedEnabled: true
                }
            };
            var reportElement = document.getElementById('pbi-report');
            var pageName = document.getElementById('page-name');

            // Embed report
            var report = powerbi.embed(reportElement, reportConfig);
            var pages = [];
            var pageIndex = 0;
            var currentPage = null;
            report.on('loaded',
                function() { 
                    report.getPages()
                        .then(function (reportPages) {
                            pages = reportPages;
                        });
                });

            report.on("dataSelected", function (event) {
                var data = event.detail;
                console.log(data);
            });
            report.on('pageChanged',
                function(e) {
                    currentPage = e.detail.newPage;
                    //pageName.innerText = e.detail.newPage.displayName;
                    if (pages.length === 0) {
                        return;
                    }
                    pageIndex = pages.findIndex(function(el) {
                        return el.name === e.detail.newPage.name;
                    });
                });
            function changePage(direction) {
                var nextPageIndex = pageIndex + direction;
                if (nextPageIndex < 0) nextPageIndex = pages.length - 1;
                if (nextPageIndex >= pages.length) nextPageIndex = 0;

                pages[nextPageIndex].setActive();
            }
            function addFilter() {
                var target = $('#filter-target').val();
                var table = $('#filter-table').val();
                var column = $('#filter-column').val();
                var value = $('#filter-value').val();

                var basicFilter = {
                    $schema: "http://powerbi.com/product/schema#basic",
                    target: {
                        table: table,
                        column: column
                    },
                    operator: 'In',
                    values: [value]
                };

                var filterTarget = target === 'page' ? currentPage : report;
               
                filterTarget.getFilters().then(function(allTargetFilters) {
                    allTargetFilters.push(basicFilter);
                    filterTarget.setFilters(allTargetFilters);
                });
                $('#filter-form')[0].reset();
            }

            function clearFilters() {
                report.removeFilters();
                pages.forEach(function(page) {
                    page.removeFilters();
                });
            }
            function updateSetting(e, settingName) {
                var settings = {};
                settings[settingName] = e.target.checked;
                report.updateSettings(settings);
            }
        });
    </script>

 

 

and followed https://microsoft.github.io/PowerBI-JavaScript/demo/dataselection.html to the best of my ability. But I'm getting nothing firing when I click on a row. what am I missing? Any help appreciated. 

1 ACCEPTED SOLUTION
Eric_Zhang
Microsoft Employee
Microsoft Employee

@mahoon

What visual do you click on? Based on my test, the Table and Matrix visual seem not having the dataSelected event. On other visuals, the dataSelected event can be fired.

Capture.PNG 

 

            report.on("dataSelected", function (event) {
                var data = event.detail;
                console.log(JSON.stringify(data));				 
            });

the data JSON string
{
   "report":{
      "id":"719c43ad-xxx-4xxx9-8xx4-f79exxxxc1a6",
      "displayName":"Pyrxxxxple"
   },
   "page":{
      "name":"ReportSection",
      "displayName":"Sample Dashboard"
   },
   "visual":{
      "name":null,
      "title":"Count of Opportunity by Region",
      "type":"pieChart"
   },
   "dataPoints":[
      {
         "identity":[
            {
               "target":{
                  "table":"Account",
                  "column":"Region"
               },
               "equals":"Central"
            }
         ],
         "values":[
            {
               "value":null
            }
         ]
      }
   ],
   "regions":null,
   "filters":[

   ]
}

 

So far, it is not possible to get the values, the data json doesn't have values at the moment and the PG team is working on it. Check this link.

View solution in original post

2 REPLIES 2
Eric_Zhang
Microsoft Employee
Microsoft Employee

@mahoon

What visual do you click on? Based on my test, the Table and Matrix visual seem not having the dataSelected event. On other visuals, the dataSelected event can be fired.

Capture.PNG 

 

            report.on("dataSelected", function (event) {
                var data = event.detail;
                console.log(JSON.stringify(data));				 
            });

the data JSON string
{
   "report":{
      "id":"719c43ad-xxx-4xxx9-8xx4-f79exxxxc1a6",
      "displayName":"Pyrxxxxple"
   },
   "page":{
      "name":"ReportSection",
      "displayName":"Sample Dashboard"
   },
   "visual":{
      "name":null,
      "title":"Count of Opportunity by Region",
      "type":"pieChart"
   },
   "dataPoints":[
      {
         "identity":[
            {
               "target":{
                  "table":"Account",
                  "column":"Region"
               },
               "equals":"Central"
            }
         ],
         "values":[
            {
               "value":null
            }
         ]
      }
   ],
   "regions":null,
   "filters":[

   ]
}

 

So far, it is not possible to get the values, the data json doesn't have values at the moment and the PG team is working on it. Check this link.

Thanks for the reply - yes I was using a table as the visual. I will check your link, thanks again.

Helpful resources

Announcements
July 2025 community update carousel

Fabric Community Update - July 2025

Find out what's new and trending in the Fabric community.

July PBI25 Carousel

Power BI Monthly Update - July 2025

Check out the July 2025 Power BI update to learn about new features.