Dropdown options list is positined and scaled relatively to browser window instead of the object
Dear Community, I'm experiencin a very annoying issue where the list of options (that appears when clicking the dropdown) is poisitioned and scaled relatively to the browser window but not to the dialogue box of the dropdown (see images). In the image on left I window is 100% scaled and positioned in the middle. On the right I have increased window scaling to ~150% and moved it to the left. As a result of these manipulations the dropdown dialogue box moves and scales as expected, but the list of options stays unoved and unscaled. Here is my visual.ts file: import powerbi from "powerbi-visuals-api"; import "./../style/visual.less"; import { IconType, SVGIcons } from "./../style/svg_icons" import VisualConstructorOptions = powerbi.extensibility.visual.VisualConstructorOptions; import VisualUpdateOptions = powerbi.extensibility.visual.VisualUpdateOptions; import IVisual = powerbi.extensibility.visual.IVisual; import DataView = powerbi.DataView; import * as d3 from "d3"; import { BasicFilter, IFilterColumnTarget } from "powerbi-models"; import IFilter = powerbi.IFilter; import FilterAction = powerbi.FilterAction; export class Visual implements IVisual { // Visual elements private svgRoot: d3.Selection<SVGElement, {}, HTMLElement, any>; private dropdowns: d3.Selection<HTMLSelectElement, {}, HTMLElement, any>[] = []; private clearButtons: d3.Selection<HTMLButtonElement, {}, HTMLElement, any>[] = []; // Parameters private visualHost: powerbi.extensibility.visual.IVisualHost; private currentDataView: DataView | null = null; private postalCode: string = ""; private lob: string = ""; constructor(options: VisualConstructorOptions) { this.visualHost = options.host; this.svgRoot = d3.select(options.element).append("svg") .style("background", "rgb(0, 82, 164)") .style("cursor", "default"); // Dropdowns const dropdownNames = ["Postal Code", "LOB"]; dropdownNames.forEach((name, index) => { this.svgRoot.append("text") .text(name + ":") .attr("x", 10) .attr("y", 90 + index * 40) .style("font-size", "16px") .style("fill", "white"); const dropdown = d3.select(options.element) .append("select") .attr("class", "dropdown-box") .style("position", "absolute") .style("top", `${70 + index * 40}px`) .style("left", "150px") .style("width", "138px") .style("padding", "8px") .style("border", "1px solid rgb(0, 122, 197)") .style("border-radius", "6px") .style("background", "white") .style("color", "black") .style("cursor", "pointer") .on("change", (event) => this.handleDropdownChange(index, event)) .on("click", () => this.clearDropdown(index)); this.dropdowns.push(dropdown); const defaultColor = "rgb(215,215,215)"; const highlightColor = "white" const clearButton = d3.select(options.element) .append("button") .html(SVGIcons.Get_SVG_Icon(IconType.Eraser, defaultColor)) .style("width", "15px") .style("height", "15px") .style("position", "absolute") .style("top", `${80 + index * 40}px`) .style("left", "290px") .style("padding", "0px 0px") .style("border", "none") .style("background", "transparent") .style("cursor", "pointer") .on("mouseover", function () { d3.select(this).select("svg path").attr("fill", highlightColor); }) .on("mouseout", function () { d3.select(this).select("svg path").attr("fill", defaultColor); }) .on("click", () => this.clearDropdown(index)) this.clearButtons.push(clearButton); }); } private handleDropdownChange(index: number, event: any): void { const value = event.target.value; if (index === 0) { this.postalCode = value; } else if (index === 1) { this.lob = value; } if (this.currentDataView) { this.applyFilter(this.currentDataView); } } public update(options: VisualUpdateOptions) { this.currentDataView = options.dataViews[0]; // Save the DataView to a class property this.svgRoot .attr("width", options.viewport.width) .attr("height", options.viewport.height); let dataView: DataView = this.currentDataView; let table = dataView.table; let postalCodeIndex = table.columns.findIndex(col => col.roles["PostalCode"]); let lobIndex = table.columns.findIndex(col => col.roles["LOB"]); if (postalCodeIndex !== -1) { let postalCodes = Array.from(new Set(table.rows.map(row => String(row[postalCodeIndex])))); this.populateDropdown(this.dropdowns[0], postalCodes, this.postalCode); } if (lobIndex !== -1) { let lobs = Array.from(new Set(table.rows.map(row => String(row[lobIndex])))); this.populateDropdown(this.dropdowns[1], lobs, this.lob); } } private populateDropdown(dropdown: d3.Selection<HTMLSelectElement, {}, HTMLElement, any>, values: string[], selectedValue: string): void { dropdown.selectAll("option").remove(); // Clear existing options // Preserve existing selection let isSelectedValueInList = values.includes(selectedValue); // Add options dynamically values.forEach(value => { dropdown.append("option") .text(value) .attr("value", value) .attr("selected", value === selectedValue ? "selected" : null); // Keep previous selection }); if (!isSelectedValueInList) { dropdown.property("value", ""); // Reset only if the selection is invalid } } private applyFilter(dataView: DataView): void { if (!this.visualHost) { console.error("Visual Host is not initialized properly."); return; } const filterValues: string[] = []; let targets: IFilterColumnTarget[] = []; if (this.postalCode) filterValues.push(this.postalCode); if (this.lob) filterValues.push(this.lob); if (dataView?.metadata?.columns) { dataView.metadata.columns.forEach(column => { console.log("Checking Column:", column.displayName, "Query Name:", column.queryName); if (column.displayName === "PostalCode" && this.postalCode) { targets.push({ table: column.queryName.split('.')[0], column: column.displayName }); } if (column.displayName === "LOB" && this.lob) { targets.push({ table: column.queryName.split('.')[0], column: column.displayName }); } }); } console.log("Targets:", targets); console.log("Filter Values:", filterValues); if (targets.length > 0 && filterValues.length > 0) { const filters: IFilter[] = targets.map((target, index) => new BasicFilter(target, "In", [filterValues[index]]) // Use index instead of shift() ); filters.forEach(filter => { this.visualHost.applyJsonFilter(filter, "general", "filter", FilterAction.merge); }); console.log("Filters Applied: ", filters); } else { this.visualHost.applyJsonFilter(null, "general", "filter", FilterAction.merge); console.log("Filters Cleared."); } } private clearDropdown(index: number): void { if (index === 0) { this.postalCode = ""; } else if (index === 1) { this.lob = ""; } this.dropdowns[index].property("value", ""); this.visualHost.applyJsonFilter(null, "general", "filter", FilterAction.merge); console.log(`Dropdown ${index} cleared.`); } } Thank you very much in advance! Kind regards, Artem
Filtering between week end dates with two dropdown (start period and end period)
Hello community, I am facing the following problem. I want to be able to filter between two week end dates. I need to use two dropdown filter for a start and en period. Each drop down will only have the week end date (suppose every friday date). Currently PowerBI offers the possibility to filter between dates but with a slider ( which is a calnder with all dates displayed, not what I am lokking for). I found this post that tackle the issues : https://community.fabric.microsoft.com/t5/Desktop/Drop-down-box-to-filter-two-dates/m-p/1996708 However this solution does seems really efficient if I were to add a filter to each of my visualisations ? Do you have any ideas how this could be done more efficiently ? Let me know you thoughts or input about this 🤔
PBI Report Builder - removing duplicate values in parameter dropdown
I'm currently working through building a paginated report with PBI Report Builder, but a small issue came up. One of my parameters is called Spend Year. Currently, for the sake of working with a faster loading file, I filtered this down to only include the year 2023. However, the issue with this is that the parameter dropdown is displaying multiple options for 2023. I believe it's displaying a 2023 for each row in the dataset that contains one. Having multiple options for the same thing just isn't practical, so I've been looking for a way to have the parameter dropdown display distinct options. I managed to find this article: https://www.c-sharpcorner.com/article/remove-duplicate-filter-values-from-ssrs-parameter-drop-down/. While this matches my situation, the VB code that he writes is for String values. I'm working with integers. I tried my best to adapt his code to work for integers (you can find the code below), but after following through everything, my Spend Year parameter is now greyed out with no selectable values. I was sure to configure the available values as detailed in the article. Does anyone happen to have any idea how I should go about this? If it's useful to know, my data was pulled via a DAX query. Thank you in advance! My version of the code: Public Shared Function RemoveDuplicates(parameter As Parameter) As Integer() Dim items As Integer() = parameter.Value Array.Sort(items) Dim k As Integer = 0 For i As Integer = 0 To items.Length - 1 If i > 0 AndAlso items(i) = items(i - 1) Then Continue For End If items(k) = items(i) k += 1 Next Dim unique As Integer() = New Integer(k - 1) {} Array.Copy(items, 0, unique, 0, k) Return unique End Function
"Date between" slicer appearing as a dropdown for user
Hi All, I have a Power BI report with a date range slicer, which I have set to the 'between' option. On publishing this to web, this works for myself and another colleague in my team. However, when another user uses the report they see a drop down instead. What we see: What they see: Why is this?
Creating excel like cell-based dropdown in Power BI Table
Hi, I am new to Power BI and was looking for ways to create a status update table in Power BI to track progress of certain tasks. The table in excel would look like this I want to create a similar table where I would be able to update the status in the visuals itself. Is that possible to do in Power BI? Thanks in advance for any help!paginated reports interactive parameter dropdown lists not displaying data
From 2022-03-31have interactive paginated reports stoped display data. The reports has worked before. After I choose parameter values from dropdown lists (From, To and Organisation) and push <View Reports> nothing happends . It seems like report is not running the query. The problem seems to be, that the choosen parameter values in the dropdown list is not used in the query. If I manually enter the the values in parameter boxes, if works, sometimes. I have tried to use different web browsers (Edge, Chrome, Fire Fox and Opera) and have the same issue. The "Power BI Embedded" service is Gen.1 in Prod environment and Gen.2 in Dev environment. When I use the local .rdl file, everything works.Drop Down Filters Not Permitting Selection
In PBIRS in Chrome, Power BI Desktop (May 2019), and Power BI Desktop 2.70.5494.761 64-bit (June 2019) we are experiencing an issue with Drop Down Slicers. The issue does not occur in PBIRS in Edge or PBIRS in Internet Explorer. When selecting the drop down list the expanded list of options disappears (detracts) before a selection can be made. In order to recreate the issue, I click on the drop down selection list first and then move the mouse down to make a selection. The selection list disappears. In order to "resolve" the issue I click anywhere else in the slicer area including below, to the side, or on the title of the slicer, anywhere but on the select list. I then click the select list and I am able to choose a selection from the select list.RDL report on Power BI server - parameter drop down lists doesn't open underneath dropdown
I have a report I created in Power BI Report Builder that's publishes to Power BI service. It has a couple of parameters that have drop downs - when I click to select from the drop down it appears of the far right of screen (not underneath the drop-down field). I have three drop downs, they all open in the same place.Showing group of dates filtered with slices
Hello all, I would like to get a line chart of the numbers of sales for a period like this one But I'd like to know if I can get the same, filtering the date in a list or dropdown slice, instead of a range of dates. This is the measure I'm using: sales = CALCULATE(countrows(sales);FILTER(sales;sales[salesdate]>=sales[salesdate]-7 && sales[salesdate]<=sales[salesdate])) Thanks in advance for your help
