ag-grid

How to render the HTML inside a row in ag-grid?

由 可紊 提交于 2020-08-23 07:52:11
问题 Is there any api or something using which I can render HTML inside a row. I'am able to bind simple html but my HTML is dynamic and contains some angular directives so, how can I render that HTML in ag-grid. 回答1: Add to the columnDefs of specific column which cells contain HTML: cellRenderer: function(params) { return params.value ? params.value : ''; } This fools ag-grid to think you are rendering column by your own function (which you technically are). 回答2: use cellRenderer for your custom

基于 Angular Material 的 Data Grid 设计实现

由 心已入冬 提交于 2020-08-11 06:28:21
自 Extensions 组件库发布以来，Data Grid 成为了使用及咨询最多的组件。最开始 Data Grid 的设计非常简陋，经过一番重构，组件质量有了质的提升。 Extensions 组件库: https://github.com/ng-matero/extensions Data Grid 示例: https://ng-matero.github.io/extensions/data-grid 距离 Extensions Data Grid 重构已经过去了两个多月，因工作忙碌而迟迟没有介绍 Extensions Data Grid 的细节。这几天又重构了一下官网示例，目前的 API 文档放在了 gitbook 上，暂时还没有和官网整合，国内访问会比较慢。本文会介绍 Data Grid 的使用方法及比较好的一些功能实现。说点题外话， 开发一款插件最大的难度不在于功能的实现，而在于如何去设计插件 。 什么是 Data Grid？ Data Grid 本质上就是通过 数据 + 列定义 + 配置项 来渲染表格的插件。这比写一堆 DOM 结构要简洁很多，可以说是 CRUD 业务中的大杀器之一。目前市面上功能最全的 Data Grid 是 ag-grid ，很多组件库也有自己的 Data Grid 实现，比如 Ignite UI ， Kendo UI

Angular Ag-Grid: Add PrimeNg P-dropdown as html element in Ag Grid cells

由 寵の児 提交于 2020-08-09 13:59:22
问题 How to include basic HTML elements in Ag-Grid cells. Below is my html PrimeNg p-dropdown in MyComponent.html <p-dropdown [options]="cars" [(ngModel)]="selectedCar" (click)="doSomething()" [style]="{'width':'150px'}"></p-dropdown> And ag-grid now to be used to include above p-dropdown in one of the cells <ag-grid-angular #agGrid style="width: 100%; height: 350px;" class="ag-theme-alpine" [gridOptions]="gridOptions" [rowData]="rowData" [columnDefs]="columnDefs"> </ag-grid-angular> And below is

Angular Ag-Grid: Add PrimeNg P-dropdown as html element in Ag Grid cells

由 与世无争的帅哥 提交于 2020-08-09 13:58:50
问题 How to include basic HTML elements in Ag-Grid cells. Below is my html PrimeNg p-dropdown in MyComponent.html <p-dropdown [options]="cars" [(ngModel)]="selectedCar" (click)="doSomething()" [style]="{'width':'150px'}"></p-dropdown> And ag-grid now to be used to include above p-dropdown in one of the cells <ag-grid-angular #agGrid style="width: 100%; height: 350px;" class="ag-theme-alpine" [gridOptions]="gridOptions" [rowData]="rowData" [columnDefs]="columnDefs"> </ag-grid-angular> And below is

Is there a way to group rows in ag-grid without the enterprise version?

由 丶灬走出姿态 提交于 2020-07-22 01:38:26
问题 I'm using ag-grid in my application and want to have a row have child rows that expand when clicked (similar to master/detail, row grouping, or tree data). However, all of these are enterprise features. Is there a way to achieve similar functionality without an enterprise license? Row Grouping: https://www.ag-grid.com/javascript-grid-grouping/, Master/Detail: https://www.ag-grid.com/javascript-grid-master-detail/, Tree Data: https://www.ag-grid.com/javascript-grid-tree-data/ 回答1:

Is there a way to group rows in ag-grid without the enterprise version?

由 天大地大妈咪最大 提交于 2020-07-22 01:37:10
问题 I'm using ag-grid in my application and want to have a row have child rows that expand when clicked (similar to master/detail, row grouping, or tree data). However, all of these are enterprise features. Is there a way to achieve similar functionality without an enterprise license? Row Grouping: https://www.ag-grid.com/javascript-grid-grouping/, Master/Detail: https://www.ag-grid.com/javascript-grid-master-detail/, Tree Data: https://www.ag-grid.com/javascript-grid-tree-data/ 回答1:

How to get filtered rows in ag-grid?

由 感情迁移 提交于 2020-07-20 07:02:53
问题 I have an ag-Grid with filtering option. How to get the filtered rows (not the selected) in ag-Grid? 回答1: You can use the forEachNodeAfterFilter(callback) api method for this. See https://www.ag-grid.com/javascript-grid-api for all available API calls, including the various forEachXXX methods. 回答2: This took me forever so I'm posting here. Use onFilterChanged() to access the filtered rows, or the filtered + selected rows. The event passed to onFilterChanged() can be used like so (example in

AG-Grid - How to insert a line break into my cell data

由 一笑奈何 提交于 2020-07-09 04:14:14
问题 I'm new to AG-Grid, so forgive me if this is a dumb question. We're using the OSS version of Ag-Grid in an Angular 5 application. I have a column where I am combining two sets of summary data and showing them. I would like to have a line-break between the two pieces of text. Right now it's doing this: "Summary One Summary Two" I want it to do this: "Summary One Summary Two" So far I've tried and HTML break tag, \r\n and just \n and nothing has worked. Is this possible to do? Thanks, James 回答1

AG-Grid - How to insert a line break into my cell data

由 自闭症网瘾萝莉.ら 提交于 2020-07-09 04:11:13
问题 I'm new to AG-Grid, so forgive me if this is a dumb question. We're using the OSS version of Ag-Grid in an Angular 5 application. I have a column where I am combining two sets of summary data and showing them. I would like to have a line-break between the two pieces of text. Right now it's doing this: "Summary One Summary Two" I want it to do this: "Summary One Summary Two" So far I've tried and HTML break tag, \r\n and just \n and nothing has worked. Is this possible to do? Thanks, James 回答1

How to insert row at index into sorted ag-grid

由 [亡魂溺海] 提交于 2020-07-08 18:20:26
问题 I have a grid setup with sorting enabled. Each row has a duplicate button. When duplicating a row, I would like to insert the new row just below the copied row. This works with a default sort but if you sort it on a column like for example status, it randomly inserts the row into the grid, making it hard to find. I have noticed that the grid does a sort sometime during save, yet before it gets a response to assign a new id. I have tried adding the row using updateRowData(transaction) with an
订阅 ag-grid