primeng

Unable to use primeng <p-datatable> virtual scroll lazy load

。_饼干妹妹 提交于 2019-12-11 07:06:00
问题 I am trying to implement a lazy load for a large set of data with primeng <p-datatable> . I have done everything documented on the official site, however I could not make it work. The onLazyLoad callback runs only once at the time of loading the table. It doesn't trigger on each scroll as expected. <div style="max-height:300px; border:1px solid black;overflow-y:auto"> <p-dataTable #pocListref [value]="data" rowHover="true" [(selection)] = "selectedData" scrollable="true" scrollHeight="200px"

Upload file with Primeng upload component

家住魔仙堡 提交于 2019-12-11 06:56:15
问题 I would upload the file in Angular using upload component Here's my HTML: <p-fileUpload mode="basic" name="demo[]" customUpload="true" accept="image/*" maxFileSize="1000000" (uploadHandler)="upload($event)"></p-fileUpload> in my ts I print param value upload(event) { console.log(event) } I get only metadata and not blob content {"files":[{"objectURL":{"changingThisBreaksApplicationSecurity":"blob:https://prime-ng-file-uploading.stackblitz.io/d429e761-c391-45fa-8628-39b603e25225"}}]} I would

Getting focus on buttons p-toast primeng modal

半城伤御伤魂 提交于 2019-12-11 06:33:37
问题 Here is the modal that gets displayed when a user selects something to delete. How can the focus be set on the buttons and not stay at the underlying content below the modal? <p-toast position="center" key="modal" (onClose)="onDeleteReject()" [modal]="true" [baseZIndex]="5000"> <ng-template let-message pTemplate="message"> <div style="text-align: center"> <i class="pi pi-exclamation-triangle" style="font-size: 3em"></i> <h3>{{message.summary}}</h3> <p>{{message.detail}}</p> </div> <div class=

Transpose HTML table (p-table with PrimeNG 7.x)

北慕城南 提交于 2019-12-11 05:07:02
问题 I'm creating a table with PrimeNG for an Angular app. It shall show the number of students by class. What I magaged to build is a table with one column for class names and one column to the number of students. What I need is one ROW for class names and one for the number of students. Is there a (clean code compatible) way to transpose a table? Here is the table html: <p-table [value]="getData()"> <ng-template pTemplate="header"> </ng-template> <ng-template pTemplate="body" let-data> <tr> <td

How to highlight a PrimeNG datatable row on click of an image in the column?

[亡魂溺海] 提交于 2019-12-11 04:32:19
问题 I have PrimeNG datatable with 10 columns. Last column contains images. On click of the image I have to highlight the row. If I add selection mode 'single' in the datatable, on click of row it highlights the row. I do not want that. I want it to be highlighted only when the user clicks on the image at the last column. <p-column> <ng-template let-row="rowData" pTemplate type="body"> <img src="assets/images/info_icon.jpg" style="height:20px;width:20px"> </ng-template> <p-column> 回答1: What you

Trim date format PrimeNG calendar - remove timestamp, angular reactive forms

老子叫甜甜 提交于 2019-12-11 02:48:11
问题 I have the following pushed into my reactive forms obj 2016-01-01T00:00:00.000Z but I want the following 2016-01-01 . Does anyone know of a built in function to achieve the above. I've searched the docs here but no luck. A .trim would of course work fine in a callback, but I'm wondering if anyone has done this before and knows a built in functionality. Thanks. UPDATE To help others - this is how I solved it with the help of the answer below using primeng calender, reactive forms in angular.

PrimeNG filter dropdown issue in scrollable turbo table

岁酱吖の 提交于 2019-12-11 02:47:33
问题 In prime-ng turbo table , when we put filter dropdown in scrollable table dropdown going inside the table Without scrollbale table dropdown works perfect. This works perfect but when scrollable table , dropdown is going inside the table Not works perfect. so I want to do dropdown outside the table not inside the table. This is a link https://primeng-table-bry1sl.stackblitz.io/ to see the code. Please see in 1024 resolution so you can see the scroll in the table and select one of the brand to

Primeng - Cant display array items in a column

喜你入骨 提交于 2019-12-11 00:59:21
问题 I am using primeng datable in Angular 2. My model is an array of products . Every product has an array of locations . That array of locations have a property name . How to display every name of locations array in a row of product ? Example: If first product has 5 name in its locations array, it should display 5 names in locations column Currently i am doing this. <p-dataTable [value]="products" selectionMode="single" [(selection)]="selectedProduct" (onRowSelect)="onRowSelect($event)"

PrimeNg context menu passing data issue

℡╲_俬逩灬. 提交于 2019-12-10 23:36:23
问题 I am using PrimeNg's context menu v6.0.1, the problem is the documentation is not clear and I cannot find it over the web as well on how to pass data to command function e.g.: I have 10 objects rendered on screen and context menu is attached to all of these objects, now if I click on menu item I want to get the id of the target object on which the context menu is rendered, how can this be accomplished? <div id="block-container" *ngFor="let block of blocks"> <!-- where to attach this block

Primeng pTooltip loop

瘦欲@ 提交于 2019-12-10 22:02:07
问题 I try to display a list of string in a pTooltip with an ngFor. <div pTooltip="Liste: <span *ngFor='let code of {{codes}}'>{{code}}</span>" [escape]="false"></div> or <div pTooltip="Liste: <ng-template ngFor let-code [ngForOf]="codes"><span>{{code}}</span></ng-template>" [escape]="false"></div> Thinking with [escape]="false" will be ok but i have nothing. Anyone have an idea please ? Thank you 回答1: You can show HTML content in pTooltip by setting [escape]="false" and using property binding