I am using ui-grid and want to export the table data in PDF through grid menu.
$scope.gridOptions = {
enableGridMenu: true,
columnDefs: [
{
name: "Group",
cellTemplate: '<div ng-if="row.entity.unit_GROUP">{{row.entity.unit_GROUP.description}}</div><div ng-if="!row.entity.unit_GROUP">No Group Assigned</div>'
}
]
}
This is shown in cell but when i eport the pdf through grid menu option.all the data except this group columns is exported and visible in grid.
My question is how can i make the data of grid visible which is shown in conditional cell template in columnDefs.
EDITL(added an example):
This plunker can show the problm in which "export all data as pdf" is not showing the column with conditional template(Married);
Related
The AgGrid documentation for Grouping Footers, mentions there is a way to customize the rendering of the grouped row using groupInnerCellRenderer, but its not clear if this prop needs to be added to the gridOptions or to cellRendererParams for agGroupCellRenderer, see the excerpt below:
When showing the groups in one column, the aggregation data is displayed in the group header when collapsed and only in the footer when expanded (ie it moves from the header to the footer). To have different rendering, provide a custom groupInnerCellRenderer, where the renderer can check if it's a header or footer.
I was wondering if someone could post an example of agGrid that uses groupInnerCellRenderer.
groupInnerCellRenderer should basically be added to cellRendererParams with a custom cell renderer component something like this -
{
headerName: 'City',
field: 'city',
minWidth: 240,
showRowGroup: true,
cellRenderer: 'agGroupCellRenderer',
cellRendererParams: {
suppressCount: true,
checkbox: true,
innerRenderer: 'simpleCellRenderer',
suppressDoubleClickExpand: true,
suppressEnterExpand: true,
},
},
The group cellRenderer will take care of all the expand / collapse, selection etc, but the with simpleCellRenderer you can customize how the cell displays for grouped row.
There is neat example of this in the docs - https://www.ag-grid.com/javascript-grid-provided-renderer-group/#example-group-renderer
I understand how to hide a column in Angular UI-grid:
$scope.gridOptions = {
columnDefs: [
{ name: 'id', visible : false },
],
};
But if I only define which columns I want hidden, the grid automatically assumes that I also define which columns I want to have visible, however this is not the case so this results in an empty grid.
Is it possible to configure the grid to show 'all columns except those configured to be hidden'?
Yes, it's certainly possible as stated in GridOptions api.
You just need to add excludeProperties instead of columnDefs and assign it an array of strings where every string is a property to hide in your grid.
In your example you should just write:
$scope.gridOptions = {
excludeProperties: ['id'],
};
I'm using an Angular UI Grid in my app. I set enableFiltering to true in the options which made some filter boxes show up above my columns. This is great, but the filters don't work exactly as desired.
If a cell contains the text "I like pizza" and I type "I like", that cell's row is shown as a match. I would also think that if I type "pizza", the "I like pizza" cell/row should show up, but that's not the case.
How can I get the filters to allow searching anywhere in the text, not just from the beginning?
You can use filter: {condition: uiGridConstants.filter.CONTAINS} in the column definition to allow that column to search anywhere in the text.
Here's a sample column definition with this in place:
columnDefs: [
// default
{ field: 'name',
filter: {condition: uiGridConstants.filter.CONTAINS} },
...
You can pass a custom filter object that takes a condition property, which can be a function that takes searchTerm and cellValue. Will display if the function returns true.
Plunkr
{ field: 'name', filter: {
condition: function(searchTerm, cellValue) {
return cellValue.indexOf(searchTerm) > -1
}
}}
in my ng-grid options I have :
columnDefs : [
{
field : 'status',
headerClass : 'tbl-header',
displayName : 'Status',
cellTemplate : '<span tooltip="{{row.entity.note}}" tooltip-append-to-body="true" tooltip-trigger:"focus">{{row.entity.status}}</span>'
},
],
But this does not display the tooltip on the click of the column cell. However, if I remove the tooltip-trigger:"focus" then the tooltip appears on the hover.
How can i show the tooltip on the click event of the cell template?
As it explained here :
Angular-ui's tooltip does not display correctly in ng-grid
you can use
tooltip-append-to-body="true"
to append tooltip to body.
I am new to angular and ng-grid. I am using ng-grid as grid control in my project. I am trying to edit a cell whose value is formatted with a angular filter. For example:
{field:'rate | currency: "GBP "', displayName:'Rate'}
Here currency filter is applied to Rate column. When I click on the "Rate" column to edit, I get a blank textbox as in editable cell template. I was expecting to see the textbox bound to underlying data, but its not happening. Any idea?
Also, on blur or lost focus on cell, it should get out from editable template, even that is not happening. Anything I am missing?
Here is the plukr to see the problem: http://plnkr.co/edit/W5aViYikZzEGnDPgSI5z
Just use the cellFilter option. Plunker
columnDefs: [
{
field: 'name',
displayName: 'Name',
cellTemplate: 'input-tpls.html'},
{
field:'rate ',
displayName:'Rate',
cellFilter: 'currency'
}
],
app.filter('currency', function () {
return function (input) {
//Do your formatting here.
return "GBP " + input;
};
});