I'm trying to include a uib-popover inside of an ag-grid cell. However, the popover is getting cut off (by the grid's overflow settings). What is the best way to make this work?
Here is the code that sets up the grid:
function _setGridOptions() {
$ctrl.agGridOptions = {
suppressHorizontalScroll: true,
suppressColumnVirtualization: true,
angularCompileRows: true,
rowHeight: 64,
columnDefs: [
{headerName: "", width: 30, checkboxSelection: true, suppressSorting: true, suppressMenu: true, pinned: true},
{headerName: "Sender", field: "submitterName", tooltipField: "submitterName", cellClass: "sender_name"},
{headerName: "Package", field: "packageName", tooltipField: "packageName"},
{headerName: "Document", cellRenderer: $ctrl._documentNameRenderer},
{headerName: "Document Status", cellRenderer: $ctrl._stateRenderer},
{headerName: "Recording Date", cellRenderer: $ctrl._recordingDateRenderer},
{headerName: "", template: '<div style="height: 40px;"></div><div uib-popover="I appeared on mouse enter!" popover-trigger="\'mouseenter\'">hover</div>'}
],
onGridSizeChanged: function () {
$ctrl.agGridOptions.api.sizeColumnsToFit();
},
onGridReady: function (param) {
$ctrl.agGridOptions.api = param.api;
if ($ctrl.search_results) {
$ctrl.agGridOptions.api.setRowData($ctrl.search_results);
$ctrl.agGridOptions.api.doLayout();
}
}
};
}
And this is what it looks like when you hover over the div...
A co-worker pointed me to the solution...
All you have to do is add 'popover-append-to-body="true"'
This will attach the popover to the body tag instead of the parent, so that the overflow settings do not affect it.
Related
I am working on grid using AgGridReact and enabling rowGrouping by setting it to true. However, it only adds the column "Group" but no actual grouping happens
const columnDef = [
{field: "module", width: 120, rowGroup: true, hide: true},
{headerName: "Ref Name", field: "referenceName", width: 120, },
{headerName: "ID", field: "referenceId", width: 120, }
]
const gridOptions = {
columnDefs: columnDef,
animateRows: true,
defaultColDef: {
sortable: true,
resizable: true,
enableRowGroup: true
},
rowData: mediaUsage
}
As you can see in the below image, it only adds GROUP column but no actual label appears
It should be group by Module column which is below
I've watched multiple tutorials and it's the rowGroup property that will display the grouping, but it doesnt in my case. Hope anyone could help. Thanks!
I am doing a project in ag-grid and using renderer to render selected gender from it. But, I am not able to fetch the data back. Actually, I have to get the value selected in the dropdown, I tried a lot but I am not able to get it. Please can someone help me with this? At least can I get a hint
App.js
class App extends Component {
constructor(props) {
super(props);
this.state = {
columnDefs: [
{ headerName: "Id", field: "Id", width: 120, checkboxSelection: true, sortable: true, filter: true, editable: true, resizable: true },
{ headerName: "Name", field: "Name", width: 140, sortable: true, filter: true, editable: true, resizable: true },
{ headerName: "Email", field: "Email", width: 200, sortable: true, filter: true, editable: true, resizable: true },
{ headerName: "Gender", field: "Gender", cellRenderer: 'genderRenderer', cellRendererParams: { onGenderChange: this.onGenderChange }, width: 140, sortable: true, filter: true, resizable: true },
{ headerName: "DOB", field: "DOB", cellRenderer: 'dateRenderer', cellRendererParams: { onDateChange: this.onDateChange }, width: 160, sortable: true, filter: true, editable: true, resizable: true },
{ headerName: "Country", field: "Country", cellRenderer: 'countryRenderer', cellRendererParams: { onCountryChange: this.onCountryChange }, width: 140, sortable: true, filter: true, resizable: true },
{ headerName: "City", field: "City", cellRenderer: 'cityRenderer', cellRendererParams: { onCityChange: this.onCityChange }, width: 140, sortable: true, filter: true, resizable: true },
{ headerName: " ", field: "Delete", cellRenderer: 'deleteRenderer' }
],
rowData: [
{ 'Id': '1', 'Name': "kishor", 'Email': "kishor#gmail.com", 'Gender': "", 'DOB': "", 'Country': "", 'City': "" },
],
suppressAggFuncInHeader: true,
frameworkComponents: {
genderRenderer: GenderRenderer,
}
this.onGenderChange = this.onGenderChange.bind(this)
}
onGenderChange = (setGender) => {
console.log("Gender Change", setGender)
}
GenderRenderer.js
import React, {useState} from 'react';
function GenderRenderer(props) {
const[gender, setGender] = useState(props.value);
const onGenderChange = (event) => {
props.onGenderChange(event.target.value);
setGender(event.target.value);
}
return(
<div>
<select name="select" value={gender} onChange={onGenderChange}>
<option value="male"> Male </option>
<option value="female"> Female </option>
</select>
</div>
)
}
export default GenderRenderer;
I use ag-grid with Angular 1.5 and I have defined 5 columns in the following format in an array:
[
{headerName: 'Username', width: 150, field: 'username'},
{headerName: 'Full Name', width: 150, field: 'full_name'},
{headerName: 'Location', width: 150, field: 'location'},
{headerName: 'Email', width: 150, field: 'email'},
{headerName: 'Check In Comment', width: 370, field: 'comment'},
];
The rendering shows 6 columns with the right-most one being blank. I've tried everything, but I cannot still remove the blank column. See the :
gridOptions:
options = {
rowData: dataArray,
rowModelType: 'pagination',
columnDefs: getColumnDefs(),
enableColResize: true,
enableSorting: false,
enableFilter: true,
rowHeight: 25,
angularCompileRows: true,
suppressRowClickSelection: true
};
The html code:
<div style="width: 100%;"
ag-grid="vm.gridOptions"
class="ag-fresh ag-basic">
</div>
I wonder how to remove the blank column right to the 'Check In Comment' column. any ideas?
Have you tried gridOptions.api.sizeColumnsToFit() ?
Source (7min 50sec)
extra column is there even if we use that api gridOptions.api.sizeColumnsToFit().
I'm using Angular Ui Grid.How can I show multiple fields for the single column ? Thanks.
I need to show both streetNumber and StreetName on the same column.How can I do that ?
vm.propertyListGridOptions = {
appScopeProvider: vm,
flatEntityAccess: false,
fastWatch: true,
showHeader: false,
columnDefs: [
{
name: app.localize('IplNumber'),
field: 'id',
width: 100,
},
{
name: app.localize('BrAddress'),
field: 'address.streetNumber',
width: 140,
}
],
data: []
};
You can use custom template like this
$scope.gridOptions['columnDefs'] = [
{field: 'name', displayName: 'Name'},
{field: 'options',displayName: 'Options', cellTemplate: '<span>{{row.entity.streetNumber}} {{row.entity.StreetName}}</span>'}
];
You can also refer this page for documentation for custom templates http://ui-grid.info/docs/#/tutorial/317_custom_templates
I am using angular and Kendo ui Grid. I have a custom button on each row which i need it bound to a function that expand the detail view. Below is the grid options.
Please help
$scope.mainGridOptions = {
dataSource: financialYearsDataSource(),
sortable: true,
selectable: true,
columnMenu: true,
columns: [
{ field: "FinYearName", title: "Year Name", width: "150px" },
{field: "StartDate", title: "*Start Date", type: "date", format: "{0:dd-MM-yyyy}", width: "150px"},
{field: "EndDate", title: "*End Date", type: "date", format: "{0:dd-MM-yyyy}", width: "150px"},
{field: "Remarks", title: "*Remarks", editor: descriptionEditor, hidden:true},
{
command: [
{name: "edit"},
{name: "destroy"},
{
text: " Expand/Collapse",
click: $scope.expandToggle,
className: "fa fa-map-marker"
},
], title: " ", width: "300px"
}],
editable: {
mode: "popup"
},
pageable: {
pageable: true,
refresh: true
},
detailExpand: function (e) {
this.collapseRow(this.tbody.find(' > tr.k-master-row').not(e.masterRow));
}
};
Here is the toggle function that needs to do the toggling
$scope.expandToggle = function (e) {
e.preventDefault();
$scope.myGrid.expandRow($(this));
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));}
Here is a jsfiddle demo:http://jsfiddle.net/akimaina/ay3vv2cm/2/
I have updated your fiddle. Please check if this solves.
http://jsfiddle.net/ay3vv2cm/3/
$("#grid").on("click",".clsExpand", function(e){
$("#grid").data("kendoGrid").expandRow($(e.currentTarget).closest("tr"));
});