I have a column with checkboxSelection=true
Under some conditions and via the API, I would like to decide whether the checkbox is readonly, i.e., I can't check/uncheck.
Is this possible?
If someone is still looking for an answer for this,
I found a simple solution,
in your gridOptions add the following
gridOptions = {
columnDefs: [
{
checkboxSelection: true,
cellStyle: params =>
params.value === 'YOUR_VALUE' ?
{'pointer-events': 'none'}
: ''
}
]
};
The property checkboxSelection can either be a boolean OR a function.
https://www.ag-grid.com/javascript-grid-column-properties/#gsc.tab=0
By using a function you can show or hide the checkbox row-based:
checkboxSelection = function(params) {
// add your cancheck-logic here
if (params.data.yourProperty) {
return true;
}
return false;
}
Disabling a checkbox is not possible out of the box. One possible way is to reset the checkbox back to it's original state:
onRowSelected:(params) => {
if(params.data.yourProperty && params.node.isSelected())
params.node.setSelected(false);
}
Instead of using checkboxSelection=true, you can try cellRenderer
field: 'isMandatory',
cellRenderer: (params) => {
if (params.value) {
return `<input type="checkbox" checked/>`;
}
else {
return `<input type="checkbox" />`;
}
}
As per documentation, you can you isRowSelectable in your gridConfig
isRowSelectable: function(rowNode) {
return rowNode.data ? rowNode.data.condition: false;
},
isRowSelectable does not work in single selection mode.
Better to disable it using css
cellClassRules:
{
'checkbox-disabled': isCheckboxDisabled ,
}
For those still looking for an answer:
use isRowSelectable in gridConfig
set showDisabledCheckboxes: true in column defs
Related
so basically i have this checkbox button , when multiple will be clicked their values gets updated in each row .
Alright now i have this edit button outside of ag grid that will determine now i can edit those selected rows.
I know i can update col defs. or use valueParam from that checkbox to isEditable call back function, But I require an variable value that's outside of ag-grid.
Please help !!!!!
So we can use a external variable via providing context property in aggrid grid options .
enableEdit(table:any){
if(table === 'tableOne'){
this.editTable1 = !this.editTable1;
this.grid1.gridOptions.context= {
allowEdit: this.editTable1,
}
}else{
this.editTable2 = !this.editTable2;
this.grid1.gridOptions.context= {
allowEdit: this.editTable2,
}
}
}
With col defs as =>
{headerName: 'Status',editable:(param)=>{return allowCagRefEdit(param)}, field: 'status', sortable: true, filter: true, lockVisible: true, lockPosition: true, filterParams: { newRowsAction: 'keep'}},
where allowCagRefEdit is a function =>
function allowCagRefEdit(params){
console.log("params value ***",params);[enter link description here][1]
let checkkBoxSelected = false;
if(params.data && params.data.cagRefManualCheck){
checkkBoxSelected = true;
}else{
checkkBoxSelected = false;
}
if(params.context && params.context.allowEdit && checkkBoxSelected){
return true;
}else{
return false;
}
}
After a lot of searches in SO without any particular solution, I am compelled to ask this question.
What I want is to hide a row group icon on a single group row. Like in the below picture I have a group row that has only one record, which is already shown in the top row. I want to hide that collapse icon on that single record. Only collapse/expand icon shown when group rows are more than one.
For reference see AG-Grid Master-Detail Section, here they specify which rows to expand. Same functionality I needed here.
I'm using the below versions of AG-Grid Angular (v9)
"#ag-grid-community/core": "^25.3.0",
"#ag-grid-enterprise/row-grouping": "^26.0.0",
"#ag-grid-enterprise/server-side-row-model": "^25.3.0",
"ag-grid-angular": "^25.3.0",
"ag-grid-community": "^25.3.0",
Here is my code:
this.rowModelType = 'serverSide';
this.serverSideStoreType = 'partial';
this.cacheBlockSize = 20;
this.gridOptions = {
rowData: this.loanlist,
columnDefs: this.generateColumns(),
getNodeChildDetails: function(rowItem) {
if (rowItem.orderCount > 1) {
return {
expanded: true
}
} else {
return null;
}
}
}
The issue is the getNodeChildDetails is not accessible. Browser console showing me the below warning and my above code is not working.
This is simple to achieve using a cellRendererSelector on the autoGroupColumnDef. You can specify whether to show the default agGroupCellRenderer or simply return another renderer (or, just return null):
this.autoGroupColumnDef = {
cellRendererSelector: (params) => {
if (params.value == 'United States') {
return null;
} else {
return {
component: 'agGroupCellRenderer',
};
}
},
};
In the example below, we are disabling the row group expand functionality on the United States row.
See this implemented in the following plunkr.
The solution isn't that hard - but could be tough, agreed (one day faced with the same case)
So - the answer is custom cell renderer.
It would look a little bit different (separate column for collapse\expande action) - but you would get all control of it.
Custom rendeder component for this action would look like :
template: `
<em
[ngClass]="{'icon-arrow-down':params.node.expanded, 'icon-arrow-right': !params.node.expanded}"
*ngIf="yourFunctionHere()"
(click)="toggleClick()">
</em>`,
export class MasterDetailActionComponent implements ICellRendererAngularComp {
private params: any;
agInit(params: any): void {
this.params = params;
}
public toggleClick(): void {
this.params.node.setExpanded(!this.params.node.expanded);
}
public yourFunctionHere(): boolean {
// so here you are able to access grid api via params.api
// but anyway params.node - would give you everything related to row also
}
refresh(): boolean {
return false;
}
}
in [ngClass] - you are able to handle the visual part (icons) - modify\customize
and don't forget to add this component in the gridOptions:
frameworkComponents: {
'masterDetailActionCellRenderer': MasterDetailActionComponent,
}
and include this column in your columnDef:
columnDefs: [
headerName: "",
width: 75,
field: "expand",
cellRenderer: "masterDetailActionCellRenderer",
filter: false,
resizable: true,
suppressMenu: true,
sortable: false,
suppressMovable: false,
lockVisible: true,
getQuickFilterText: (params) => { return '' }
]
I'm using ag-Grid Enterprise Vue.
I see in the docs how to enable a "context menu" that is available by right-clicking any individual cell.
I instead would love to have a special column (pinned to the right) that has a button (maybe looking like ⚙ or ...) that opens a menu upon left-click.
How could I go about enabling this? I have found no examples in the docs.
Ag-grid Cell containing menu button is a similar question but has no answer.
From this comment on this ag-grid-enterprise issue, I was able to fork the example, and I think it will work for my situation.
The relevant code is:
var gridOptions = {
columnDefs: columnDefs,
enableRangeSelection: true,
getContextMenuItems: getContextMenuItems,
allowContextMenuWithControlKey: true,
onCellClicked: params => {
console.log(params);
if(params.column.colDef.field === '...'){
params.api.contextMenuFactory.showMenu(params.node, params.column, params.value, params.event)
}
},
onCellContextMenu: params => {
params.api.contextMenuFactory.hideActiveMenu()
}
};
function getContextMenuItems(params) {
console.log('getContextMenuItems', params);
const node = params.node;
console.log('node.id, node.rowIndex, node.data', node.id, node.rowIndex, node.data);
var result = [
{
name: `Alert 'Row ${node.rowIndex + 1}'`,
action: function() {
window.alert(`Row ${node.rowIndex + 1}`);
},
cssClasses: ['redFont', 'bold']
},
'separator',
{
name: 'Checked',
checked: true,
action: function() {
console.log('Checked Selected');
},
icon: '<img src="../images/skills/mac.png"/>'
},
'copy' // built in copy item
];
return result;
}
I'm using TinyMCE text editor and I would like to upload an image by clicking on a toolbar button. But when the popup window was opened..:
I can't select the input element.
I can't type any image URL into the input field.
You can access my code from this link. Please take a look at the screenshot below.
What should I do in this situation?
I've solved my issue by using the following code. I hope it helps someone else who stuck with this kind of issue
openAddCommentDialog: function(oEvent,args) {
var _this = this;
if(sap.ui.getCore().byId("codeEditorContainer")){
sap.ui.getCore().byId("codeEditorContainer").removeAllItems();
}
var commentEditor = new RTE({
editorType: sap.ui.richtexteditor.EditorType.TinyMCE4,
width:'100%',
height:'100%',
customToolbar: false,
showGroupFont: true,
showGroupLink: true,
showGroupInsert: true,
beforeEditorInit:function(oEvent){
var config = oEvent.getParameter("configuration");
config["setup"] = function(editor){
editor.on('init', function(){
if(args && args.commentMessage){
editor.setContent(args.commentMessage);
oModel.setProperty("/TicketItemModel/CommentTitle",args.commentTitle);
}
else{
if(args && args.commentTitle){
oModel.setProperty("/TicketItemModel/CommentTitle",args.commentTitle);
editor.setContent(args.commentMessage);
}
else{
oModel.setProperty("/TicketItemModel/CommentTitle","");
editor.setContent("");
}
}
})
}
}
});
if (!this._oDialogAddCommentWindow) {
this._oDialogAddCommentWindow = sap.ui.xmlfragment("BnetPortal.Application.ToDo.fragments.addComment",this);
}
sap.ui.getCore().byId("codeEditorContainer").addItem(commentEditor);
this._oDialogAddCommentWindow.open();
},
As the title, I want to make a row selectable by some conditions with using ag-grid in angularjs.
In the past, I used ui-grid and its property "isRowSelectable" to make it.
$scope.options = {
...
isRowSelectable:function(row){
return row.entity.taskExecutionStatus===0?true:false;
}
}
However, the ag-grid doesn't have the property "isRowSelectable" like ui-grid.
How can I fix it now?
Check if the row is selectable or not in gridOptions.onSelectionChanged() function.
If false, then use node.setSelected(false, false, true) to deselect the row;
A valid solution is to use checkbox selection when you don't want all the rows to be selectable, something like this:
$scope.options = {
columnDefs: [
{headerName: "",
width: 17,
cellStyle: {'padding': '2px'},
checkboxSelection: function(row){
return row.entity.taskExecutionStatus===0?true:false;
}
},
...
],
...
rowSelection: 'single', // or 'multiple'
suppressRowClickSelection: true,
...
};
To select Single row in ag-grid:
$scope.Gridoptions:{
columnDefs:...,
rowData:...,
onRowClicked: RowClick,
rowSelection: 'single',
};
function RowClick(param) {
//To Find CurrentRow Index
var currentRowIndex = param.rowIndex;
//GridData
var gridData = $scope.gridOptionsInstrumentRegister.rowData;
//Item ShowS RoWData
var Item = params.data;
}
checkboxSelection: function (params) {
params.node.selectable = false; // this will explicitly restrict to select (useful in select all)
return true/false; // this will show or hide the checkbox
}