topic jquery filter not working on Embedded report in Developer

jquery filter not working on Embedded report

cranial3 — Wed, 29 Nov 2017 07:27:52 GMT

I have a Report embedded into an MVC Web app, the problem is that my filter does not work, i have tried various methods to no avail.

<script type="text/javascript">

window.onload = function () {
var Filter1 = {
$schema: "http://powerbi.com/product/schema#basic",
target: {
table: "vw_NGO_Registrations",
column: "NGOName"
},
Operator: "In",
values: ["BADISA"]
}
var config = {
type: 'report',
accessToken: "@(Model.Token)",
embedUrl: "@Model.PBIReport.embedUrl",
id: "@Model.PBIReport.id",
filters: [Filter1],
settings: {
filterPaneEnabled: true,
navContentPaneEnabled: true
}
};
var reportContainer = document.getElementById('reportContainer');
var report = powerbi.embed(reportContainer, config);

});
});
};
</script>

I have also tried adding the following at the bottom of the script

report.on('loaded', event => {
report.getFilters()
.then(filters => {
filters.push(Filter1);
return report.setFilters(filters);

The report just keeps showing all the data, additionally, The filter pane does NOT show, i dont know if that has anything to do with it, even though i explicitly set filterPaneEnabled = true. Even when i remove the settings, it still wont show.

Even when i added the following, still no filter pane.

<div ID="reportContainer" style="width: 900px; height: 500px" powerbi-settings-nav-content-pane-enabled="true"   powerbi-settings-filter-pane-enabled="true"></div>

Thank you

Re: jquery filter not working on Embedded report

Eric_Zhang — Thu, 30 Nov 2017 06:42:12 GMT

@cranial3 wrote:

Hi

I have a Report embedded into an MVC Web app, the problem is that my filter does not work, i have tried various methods to no avail.
<script type="text/javascript">

window.onload = function () {
var Filter1 = {
$schema: "http://powerbi.com/product/schema#basic",
target: {
table: "vw_NGO_Registrations",
column: "NGOName"
},
Operator: "In",
values: ["BADISA"]
}
var config = {
type: 'report',
accessToken: "@(Model.Token)",
embedUrl: "@Model.PBIReport.embedUrl",
id: "@Model.PBIReport.id",
filters: [Filter1],
settings: {
filterPaneEnabled: true,
navContentPaneEnabled: true
}
};
var reportContainer = document.getElementById('reportContainer');
var report = powerbi.embed(reportContainer, config);

});
});
};
</script>
I have also tried adding the following at the bottom of the script
report.on('loaded', event => {
report.getFilters()
.then(filters => {
filters.push(Filter1);
return report.setFilters(filters);
The report just keeps showing all the data, additionally, The filter pane does NOT show, i dont know if that has anything to do with it, even though i explicitly set filterPaneEnabled = true. Even when i remove the settings, it still wont show.

Even when i added the following, still no filter pane.
<div ID="reportContainer" style="width: 900px; height: 500px" powerbi-settings-nav-content-pane-enabled="true"   powerbi-settings-filter-pane-enabled="true"></div>
Thank you

@cranial3

How is it going on if you run the test embedding report demo? Does the filter pane show? By the way, what is the browser in your case, have you observed anything wrong in the tab of Console and Network of browser dev mode(F12).

Re: jquery filter not working on Embedded report

cranial3 — Fri, 01 Dec 2017 06:54:52 GMT

No Filter Pane is shown when using the embedded report demo, it displayed the report exactly as in my browser.

I am using Chrome, i installed firefox, and viewing is the same in there too, no filter pane.

I checked the console, no errors except for "Slow network is detected".

Thanks