Questions tagged [primeng]

0

votes
0

answer
2

Views

angular 7 how to access element by id defined in parent component from child component template

I am using primeng multiSelect control in the child component. i want this to be appended to the element defined in the parent component as shown above. the above code failed when i run npm run build:prod. it can't access popupContent in the child. can anyone help how to access the parent element in...
Mukil Deepthi
0

votes
0

answer
13

Views

PrimeNg TurboTable - Cell width not matching header width

I have a TurboTable with row grouping and row expansion, based on this post. {{rowData[groupField]}} {{rowData[col.field]}} The class table-action-element enforces width: 30px;, which can be seen in the headers. However, when I expand the row group, the row columns that appear do not have this width...
naman1901
1

votes
2

answer
91

Views

How to trigger primeng colorpicker using a button?

Here is stackblitz link:- https://stackblitz.com/edit/angular-gtv8vo?file=src/app/app.component.html Here, colorpicker is not opening while click of a button? How to open color pallete onclick of button? Add COlor
Mahi
1

votes
2

answer
90

Views

PrimeNG TurboTable - strange virtual scroll behaviour

I've implemented a custom Grid component that uses PrimeNG TurboTable and NgRx and I've added the virtual scroll feature to it using the built-in TurboTable virtual scroll. It is also lazy loading, with onLazyLoad handler. However, I get this strange behaviour when onLazyLoad is called as I am scrol...
Botond Béres
1

votes
2

answer
5k

Views

Angular PrimeNG datetimepicker

I use component calendar from PrimeNG 5.0.1, Angular 5.1, which allows to choose both date and time: But timepicker is frozen on time page was reloaded. Is it possible to update time value everytime when picker is shown? I have not found any parameter is in charge for this.
maxx
1

votes
2

answer
1.5k

Views

How to add selected p-dropdown item to primeng p-datatable list using Angular 2?

I have a primeng pdatatable with a p-dropdown, I want to select an item from the p-dropdown and add it to the p-datatable(empty in the begining) with the onChange event, it shows the added items with ngFor but it doesn't with p-datatable, what should I change? Thanks PS. I'm using angular 2 In the c...
user3307817
1

votes
0

answer
422

Views

Line chart using Angular4 and PrimeNg

Is it possible to get an example with a nested set of data for a line chart?This is my code:- this.data1 = { datasets: [ { label: 'BILL', data: [this._billList, this.billDateList], fill: false, borderColor: '#565656' }, { label: 'GRN', data: [this._grnList, this.grnDateList], fill: false, borderColo...
Dipin raman
1

votes
1

answer
753

Views

PrimeNG P-ListBox throwing error upon selection

Upon selecting an item from my listbox module i am getting an error thrown for some reason the value keeps coming in as an object instead of an array to my listbox.js which is from p-listbox from PrimeNG HTML: .TS: import { ListboxModule } from 'primeng/primeng'; export class SearchCareResultsCompon...
BadGuyKUTA
1

votes
0

answer
470

Views

Angular PrimeNG Checkbox Model Driven wrong display

I am using PrimeNG with the checkbox in the Model Driven angular(5) style. I used the solution of this issue to make it worked https://github.com/primefaces/primeng/issues/2906 I used I get correctly the infos in my post the issue is on the display, the first issue is the label is displayed below t...
Niradnik
1

votes
1

answer
580

Views

PrimeNG schedule fullcalendar error

I am using PrimeNG schedule in one of my project. After installing PrimeNG, I was getting error for JQuery, but after installing it the error went away. Currently i am getting this error this.schedule.fullCalendar is not a function Another thing I noted is that If I try to install FullCalendar, I ge...
BhargavG
1

votes
1

answer
469

Views

primeng editor without toolbar

How do I switch off the toolbar on a primeNG Editor ? I am getting the Editor instance of (onInit) of the editor. However the below doesn't seem to work. The example I see from quilljs all seem to work on the basis of creating a new Quill js instance, but in this case I already have the instance? T...
oudekaas
1

votes
1

answer
271

Views

How to remove all the items in an p-chips input inside PrimeNG datatable by clicking on a link?

I need help in removing all items in a primeng p-chips input inside PrimeNG datatable when user clicks on 'remove all'. In this case, I want to remove all the selections of carBrandOptions for that row when user clicks on remove all link. I am looking for typescript code for this. Thank you! remo...
Saman
1

votes
1

answer
598

Views

PrimeNG p-datatable set min width columns

I've a p-datatable responsive and I need to set min-width for each column. This to avoid on resize to have a column width too small. My table is created in this way: My first Column .... It doesn't work. First column became smaller than 90px on resizing page. Can you help me? Any suggestion? Thanks...
bigskull
1

votes
0

answer
509

Views

Access inner component of ng-template in Angular

I'm using fileUpload component from primeng ( https://www.primefaces.org/primeng/#/fileupload ) in a modal component ( https://ng-bootstrap.github.io/#/components/modal/examples ) When Im selecting the files and display them via ng-template, i want to have a button that removes some of the files....
Gerald Hughes
1

votes
0

answer
232

Views

Load primeng tree in a scrollable window

How can I load the tree control in a scrollable window? I want this window to open when i click the arrow icon and a label to show the selected items - like the multiselect control (https://www.primefaces.org/primeng/#/multiselect) ?
lpstyler
1

votes
0

answer
484

Views

DataScroller and Datatable in prime react

I am very new to React and we are trying to primeReact to implement datatables and datascroller on our UI pages. Though, I was able to successfully implement datatables. Now, I want to add datascroller which is like virtual scroll in a datatable. But, I am not sure how to use it. Can someone provide...
Vicky
1

votes
1

answer
133

Views

How to ignore materialize.css classes that are impacting primeng autocomplete?

I am using primeng autocomplete (https://www.primefaces.org/primeng/#/autocomplete), bootstrap 4, and materializecss (http://materializecss.com/getting-started.html). I see that the only css that is really messing up the page is the autocomplete form box. How can I stop materialize.css from messing...
Rolando
1

votes
0

answer
165

Views

How to avoid deleting other packages while installing one package

Good day! I just newly update my angular2 project and I'm installing primeng. This is only happening when I'm installing the primeng. I just followed the given instruction here.And this also happening when I'm installing other dependecy. How can I avoid this situation? And why this happening? This i...
1

votes
1

answer
2.7k

Views

primeng overlay panel appendTo=“body” alternative css

I have an overlay panel from primeng, I am using appendTo='body' and it work fine in Chrome, but does't work in Internet Explorer 11. When I click it in IE the panel just doesn't appear, if I remove the appendTo='body', it works fine in internet explorer but the panel is just off in the middle of th...
sashafedsdev
1

votes
1

answer
1.4k

Views

p-table paginatorLeft & paginatorRight do not show up

I have a p-table that shows the paginator control fine at the bottom. However when I tried to add the paginatorLeft or the paginatorRight tags, neither of them would show up: {{state.totalRecords}} Here's the stackbliz link for the project - https://stackblitz.com/edit/angular-x87wzc?file=app%2Fprov...
Niner
1

votes
1

answer
1.2k

Views

Angular5 - Passing ng-template parent component to child component

this is original html tag to make Table using primeng. and I think that this header part and body part should be injected from Parent html. [this is originl p-table code] {{ col.caption | translate }} {{ rowData[col.fieldName] }} [I changed code above to code below] this is parent html {{ col.captio...
1

votes
1

answer
1.6k

Views

Empty dropdown selected value

I'm using Angular5 and primeng library. Particularly, I have problem with p-dropdown. I have one big entity - Consignment - with many fields, I open page with this saved object. And several p-dropdown elements(here it is contract component) dont' display selected value. But, I'm sure that there are...
Artem P.
1

votes
2

answer
942

Views

PrimeNG p-multiselect - multiple values in a row (using ng-template)

Is it possible to do something like that with PrimeNG's p-multiselect?
Efi
1

votes
0

answer
225

Views

PrimeNG TreeTable Level Styling

I have implemented TreeTable from PrimeNG. Requirement is to add doted lines between levels for usability perspective. I have tried multiple approaches but since it is generating HTML structure I don't able figure out proper solution to implement it. Is it possible to implement with PrimeNG TreeTa...
atish shimpi
1

votes
1

answer
639

Views

How to add NG Prime schedule (calendar) component dynamically in Angular 4/5

In my job I have a task where I have to add many NG Prime-calendars into webpage and need to exchange information among them. It seems that it is not enough in such case just to add component in a typical way i.e.: .. etc. I need to also be able to dynamically loop through them and catch them indivi...
M.Y.
1

votes
0

answer
1.1k

Views

Simulate upload with PrimeNG file upload component?

I am trying to use the PrimeNG file upload component in a prototype I am making. The demo on their page simulates the files being uploaded, with a progress bar ultimately displaying the message: Looking at their code, they are using a file upload.php which is a dummy file that only contains So, I ad...
Steve
1

votes
0

answer
446

Views

Why onLazyLoad not working for dataTable in PrimeNG?

I'm getting undefined value for selectedid in the fetchTest method. Same code I'm using in a different component, but its working fine there. fetchTest(selectedid: any, event?: LazyLoadEvent): void { } PrimeNG Version: 4.1.2 Angular 4
vivek nuna
1

votes
0

answer
1.2k

Views

Styling primeng autocomplete input

I would change the style of the p-autocomplete component. I used styClass then in my css: .ui-autocomplete .autocomplete { border: 0px !important; background-color: green; box-shadow: none // delete the blue glow when focus on input } I would delete the border and on focus enable border and disab...
infodev
1

votes
1

answer
359

Views

Prime Ng Calendar triggering a page reload

I am using primeng calendar component with angular 2. The problem I am facing is whenever I select the time from it. It triggers a complete roundtrip (whole page reload) and I loose all the data on the page. Not able to solve it event after trying a lot to search something related to this issue. I d...
Jeet
1

votes
2

answer
382

Views

disable on focus box shadow primeng autocomplete component

I'm using primeng autocomplete input I would that when I focus on the input the blue glow effect get disabled. Here's my html component {{elm.name}} ( ID: {{elm.code}} ) I have tried to change css according to the documentation ::ng-deep .ui-autocomplete { box-shadow: 0 !important; } but that doe...
infodev
1

votes
1

answer
281

Views

MultiSelect with ng-dirty ng-valid

I was using a classic select with the css style bellow select.ng-pristine.ng-invalid { border-left: 5px solid $primary-600 !important; } select.ng-dirty.ng-valid { border-left: 5px solid $valid !important; } select.ng-dirty.ng-invalid { border-left: 5px solid $error !important; } Now I use the Pr...
Aymen Kanzari
1

votes
2

answer
1.1k

Views

How to create data model for PrimeNG TreeTable for angular 5?

I am trying to use the PrimeNG treetable in angular 5. As per documentation it needs data in particular format. Is there a recommended way to convert custom data in required format ? Right now I am getting json array through http get service in following format, where relatedkey specify the children...
PPB
1

votes
1

answer
354

Views

Angular PrimeNG megamenu visible false doesn't work

Angular PrimeNG megamenu visible false doesn't work. this.menuItems = [ { label: 'Home', items: null, routerLink: [''] }, { label: 'About', visible: false, items[{label: 'About 1.1', visible: false},{label: 'About 1.2'}] }] In above example I have used visible false twice with About and About 1.1,...
Punit Sachan
1

votes
0

answer
331

Views

Any work around for PrimeNG - calendar timepicker hourFormat - 00 displayed for 12:00 AM

I am using PrimeNG components for an Angular 4 project, and I am struggling with how to use their timepicker. If I bind to a date that is the beginning of the day, I am seeing '00' for the time, instead of 12, even when I have [hourFormat]='12'. If [hourFormat]='12', the time should never display wi...
JRS
0

votes
0

answer
4

Views

Primeng Autocomplete Change Highlight Color

I want to change the highlight color of item in autocomplete. I have tried changing the highlight color by templating, as followed: {{test.testSearchString}} but it does not change the highlight color I want to change the default highlight color of autocomplete item
imv_90
1

votes
0

answer
170

Views

How to get PrimeNG p-autocomplete and optgroup combination work

I use angular4 code more and implemented a dropdown with autocomplete behavior using p-autoComplete from PrimeNG. On top of this I want to group the items in the dropdown list based on status. Tried using optgroup, but of no luck. Please help me out eg : a sample JSON of filteredObjects looks like t...
Maurya
1

votes
1

answer
156

Views

Insert quilljs markers instead of particular occurrences in string

I use primeng editor based on quilljs and struggling with modification of particular occurrences in string with custom markers. I have string like this: User data {{userName}} - {{lastName}}. Topic {{title}} and date: {{occurredDate}} And I'm trying to achieve this result: However quill puts the w...
antonyboom
1

votes
1

answer
365

Views

PrimeNG p-dialog positionTop

We are displaying an Angular 4 application inside IFrame. We use PrimeNG components and in one of the situations, we need to display PrimeNG p-dialog box. By default, p-dialog box is shown in the center of Iframe (in terms of height), and not the top window's (iframe container's) height. I find a a...
Amanpreet
1

votes
0

answer
434

Views

primeNg dynamic p-checkbox in TurboTable focus error/bug

I dynamically load p-checkboxes in a TurboTable (PrimeNg). Everything works fine as long as there's only one column, whenever there is more than one columns and I uncheck a checkbox from the first column, the checkbox from the second column automatically gets the focus and is unchecked aswell... com...
Regret Muter
1

votes
0

answer
268

Views

How to add column menu to primeNG datatable to show and hide columns

We are upgrading our angularJS project to angular 4 and are using the primeNG components including the primeNG datatable. Does anyone know how to create a hide/show menu item the same way the angular-ui-grid has to hide/show columns? We figured we can use the [hidden] property in the html
snowleopard

View additional questions