I'm trying to hide the context menu when there is a condition applied. I've come across this post and followed through with it but still, the context menu is showing. I'm trying to add context menu to p-table and I have a condition where if there are no options available then I want to hide context menu but when I'm calling hide() method on context menu it's not working. below are the code snippets of what I did so far.
In .html file
<p-table #table (onContextMenuSelect)="onContextMenuSelect($event, tableContextMenu)" [contextMenu]="tableContextMenu"> </p-table>
<p-contextMenu #tableContextMenu appendTo="body" [model]="contextMenus"></p-contextMenu>
In .ts file
public onContextMenuSelect(event, contextMenu){
if(this.loadContextMenu){
contextMenu.hide();
}
}
Changing (onContextMenuSelect) to contextmenu will trigger contextMenu.hide(); if condition is matched.
<p-table #table (contextmenu)="onContextMenuSelect($event, tableContextMenu)" [contextMenu]="tableContextMenu"> </p-table>
Related
I'm looking for a solution for my problem. I'm using a PrimeNG tree for an aside menu. When I click a button in screen to navigate, tree is rebuilded with new options. However, in the first menu, if I search an option with the filter of a p-tree, filter works fine, but, if I navigate, filter keeps input text, and options in the second menu are not showed till I clean the input filter.
¿Is there a possibility to clean the filter automatically?
I attach images for more details.
Expected behaviour:
Current behaviour
The HTML code is:
<p-tree [value]="files3" [filter]="true" filterMode="strict" selectionMode="single" scrollHeight="200px"></p-tree>
Thanks
I answer my onw question
It's necesary to give id to html element and execute function Tree resetFilter()
HTML code:
<p-tree #tree [value]="files3" [filter]="true" filterMode="strict" selectionMode="single" scrollHeight="200px"></p-tree>
Then, in TS:
#ViewChild('tree') tree;
this.tree.resetFilter();
I want to add a custom class name in each option of React-select dropdown. Later, to use that class name as the reference and click with Puppeteer for an end to end testing.
Right now when I click on drop-down, it has dynamic classes and when want to debug the HTML structure, dropdown closes and HTML also disappears.
The code is as follows:
<Select
options={this.loadSuppliers()}
value={this.props.supplierPicker ? this.props.supplierPicker : []}
defaultValue={
this.state.SupplierId
}
isSearchable={true}
onChange={this.onChangeSupplier}
id="supplier"
>
</Select>
supplierPick has JSON with value and label as keys.
Hi I am working on a Angular4 application and for UI I am using Primeng.
I have a multi-select element which behaves pretty much the same as it does over here https://www.primefaces.org/primeng/#/multiselect
The only thing I want different is on the drop-down, when "X" (close) button is clicked, I want it to clear all the selection instead of closing the drop-down itself.
Is there any way to achieve that in primeng ?
Help is appreciated !
You can manually trigger the checkbox in the left by jquery.
declare var jquery:any;
declare var $ :any;
$('.ui-chkbox-box.ui-widget.ui-corner-all.ui-state-default').trigger('click')
or you make the value of the p-multiselect equal to [].
Ex.
//html
<p-multiSelect #multiselect>
<button type="button" (click)="functionToClear(multiselect)"</button>
</p-multiselect>
//ts
functionToClear(multiselect): void {
multiselect.value = [];
}
It isn't possible, but you can clear all the selection by clicking the checkbox in the left corner twice.
While it isn't a supported functionality of the Multiselect PrimeNg component, if you really want it to do that, you would have to manually edit the component, multiselect.js, and modify the close(event) function to do what you want.
you can use formGroup and try to clear value following way:
html:
<ng-multiselect-dropdown [(ngModel)]="data"
[data]="fetchedData" [settings]="customeSettings"
formControlName="myControl">
</ng-multiselect-dropdown>
.ts:
this.form_name.controls.myControl.setValue("");
normally the multi-select input in primeng is binded to a property that holds the selected members, usually an array.
you can use a reset button for example that when clicked, it will empty that propery/array and this will clear all the selected check boxes of the multi-select.
Since PrimeNg version 13, you can use [showClear]="true" property to display an 'X' icon next to the control value.
I have a input field which I set focus to when my view loads in the following way:
ngAfterViewInit() {
this.focusInput.nativeElement.focus();
}
this works fine from within the ngAfterViewInit() function but when I try to do it in another part of my view when a button is clicked I get an exception saying that focusInput is undefined. After reading up a bit it seems like ngIf could be the cause of this as the part of the view that contains the input field #focusInput gets shown or hidden using ngIf. Is there any way I can check using ngOnChanges() or anything else whether the #focusInput input field is currently shown and if it is set focus to it?
It happens when you have ngIf or ngFor directives inside your template and your input can not be linked to focusInput property you added inside your class. Instead use this code:
<input type="text" #myInput />
{{ myInput.focus() }}
Just add {{ myInput.focus() }} right after input inside template
The simplest solution turned out to be writing a custom focus attribute directive. This helped a lot:
How to move focus on form elements the Angular way
I know its very late to answer your question. If you want focus after any click or view change so for this you need to call change detector.
You can call change detection after your view change or a click by calling detectchanges().
`constructor(private detRef:ChangeDetectorRef) {}
#ViewChild('name_input') input: ElementRef;
private buttonClick(): void {
this.detRef.detectChanges();
this.input.nativeElement.focus();
}`
Hope this will helpful.
I have used a datagrid and one button in control bar. by clicking button the application goes edit state from base state.
My question is how can i use popup for editing selected record of datagrid instead of changing state.
please give me any example with code that describe how pop ups can be used in flex 3 application.
I got answer for above problem.
First we have to create custom component for popup named MyPopup
And in application:
import components.popups.MyPopup;
public var pop:MyPopup;
public function Show_Pop():void
{
pop= PopUpManager.createPopUp(this,MyPopup,true) as MyPopup;
PopUpManager.centerPopUp(pop);
}
calling function:
<mx:Button click="Show_Pop()" id="btn1" label="show Popup"/>