How to disable entire column in ag-grid
I want to disable entire column based on specific condition that column contains onCellClicked event but i don't want it to fire
angularjs ag-grid
asked Nov 13 at 9:01
e kanojia
2115
add a comment |
I want to disable entire column based on specific condition that column contains onCellClicked event but i don't want it to fire
angularjs ag-grid
asked Nov 13 at 9:01
e kanojia
2115
add a comment |
I want to disable entire column based on specific condition that column contains onCellClicked event but i don't want it to fire
angularjs ag-grid
asked Nov 13 at 9:01
e kanojia
2115
I want to disable entire column based on specific condition that column contains onCellClicked event but i don't want it to fire
angularjs ag-grid
angularjs ag-grid
asked Nov 13 at 9:01
e kanojia
2115
asked Nov 13 at 9:01
e kanojia
2115
asked Nov 13 at 9:01
e kanojia
2115
asked Nov 13 at 9:01
e kanojia
2115
asked Nov 13 at 9:01
e kanojia
2115
2115
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
Using gridOptions.isRowSelectable we can set a particular row to be selectable or not selectable. Below is an example from the ag-grid documentation itself.
gridOptions.isRowSelectable: function(rowNode) {
return rowNode.data ? rowNode.data.year < 2007 : false;
}
answered Nov 13 at 18:03
Arcot Deepika
1639
he saidcolumn, notrow.
– un.spike
Nov 13 at 18:13
He commented that he used rowSelection multiple so I thought it was row selection. Thanks for mentioning it @un.spike
– Arcot Deepika
Nov 13 at 18:23
add a comment |
You have to define editable property in colDef
editable: false <-- edit would be disabled for needed column
Updated
Header checkbox can be used for row-selection, for other things, you should create custom handlers by yourself.
For display handling, you need to create cellRenderer
For edit handling, you need to create own cellEditor
Based on the official demo:
Here is worked sample for your case DEMO
cellRenderer - checkbox would be displayed as an icon
import {Component} from "@angular/core";
import {ICellRendererAngularComp} from "ag-grid-angular";
@Component({
selector: '',
template: `
<div class="checkbox-container">
<span *ngIf="params.value == true" title='true' class='ag-icon ag-icon-tick content-icon'></span>
<span *ngIf="params.value == false" title='false' class='ag-icon ag-icon-cross content-icon'></span>
<span *ngIf="!params.value"></span>
</div>
`
})
export class CheckboxRendererComponent implements ICellRendererAngularComp {
private params: any;
agInit(params: any): void {
this.params = params;
}
refresh(params):boolean{
return true;
}
}
cellEditor - double click on the cell will provide edit mode (if its possible, based on colDef- editable property)
import {Component} from "@angular/core";
import {ICellEditorAngularComp} from "ag-grid-angular";
@Component({
selector: '',
template: `<input type="checkbox" [(ngModel)]="checkboxValue">`,
})
export class ChekboxEditorComponent implements ICellEditorAngularComp {
private params: any;
private checkboxValue:boolean;
agInit(params: any): void {
this.params = params;
this.checkboxValue = this.params.value;
}
refresh(params):boolean{
return true;
}
getValue(){
return this.checkboxValue;
}
}
And the last thing:
editable: (params)=>{return params.node.data.checkbox != true}
here there is a logic which will disable edit mode for true values in column
answered Nov 13 at 9:56
un.spike
1,3081517
Thanks for the answer.But i used rowSelection: 'multiple' in column & want that entire column disable.
– e kanojia
Nov 13 at 10:26
here is the plunker [plnkr.co/edit/FKzYGZd5rbUVKv1j5yQK?p=preview] i want that when grid loaded & checkboxes are checked (based on some condition) i want that first column Disable so checkboxes are not checked or unchecked.
– e kanojia
Nov 14 at 8:01
I want to achieve following 1.load grid with checkboxes(some checkboxes are pre selected based on some condition) 2. user not able to select / deselect that checkboxes like they have only view rights not edit rights
– e kanojia
Nov 14 at 8:48
check updated answer
– un.spike
Nov 14 at 9:38
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53277249%2fhow-to-disable-entire-column-in-ag-grid%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
Using gridOptions.isRowSelectable we can set a particular row to be selectable or not selectable. Below is an example from the ag-grid documentation itself.
gridOptions.isRowSelectable: function(rowNode) {
return rowNode.data ? rowNode.data.year < 2007 : false;
}
answered Nov 13 at 18:03
Arcot Deepika
1639
he saidcolumn, notrow.
– un.spike
Nov 13 at 18:13
He commented that he used rowSelection multiple so I thought it was row selection. Thanks for mentioning it @un.spike
– Arcot Deepika
Nov 13 at 18:23
add a comment |
Using gridOptions.isRowSelectable we can set a particular row to be selectable or not selectable. Below is an example from the ag-grid documentation itself.
gridOptions.isRowSelectable: function(rowNode) {
return rowNode.data ? rowNode.data.year < 2007 : false;
}
answered Nov 13 at 18:03
Arcot Deepika
1639
he saidcolumn, notrow.
– un.spike
Nov 13 at 18:13
He commented that he used rowSelection multiple so I thought it was row selection. Thanks for mentioning it @un.spike
– Arcot Deepika
Nov 13 at 18:23
add a comment |
Using gridOptions.isRowSelectable we can set a particular row to be selectable or not selectable. Below is an example from the ag-grid documentation itself.
gridOptions.isRowSelectable: function(rowNode) {
return rowNode.data ? rowNode.data.year < 2007 : false;
}
answered Nov 13 at 18:03
Arcot Deepika
1639
Using gridOptions.isRowSelectable we can set a particular row to be selectable or not selectable. Below is an example from the ag-grid documentation itself.
gridOptions.isRowSelectable: function(rowNode) {
return rowNode.data ? rowNode.data.year < 2007 : false;
}
answered Nov 13 at 18:03
Arcot Deepika
1639
answered Nov 13 at 18:03
Arcot Deepika
1639
answered Nov 13 at 18:03
Arcot Deepika
1639
answered Nov 13 at 18:03
Arcot Deepika
1639
1639
he saidcolumn, notrow.
– un.spike
Nov 13 at 18:13
He commented that he used rowSelection multiple so I thought it was row selection. Thanks for mentioning it @un.spike
– Arcot Deepika
Nov 13 at 18:23
add a comment |
he saidcolumn, notrow.
– un.spike
Nov 13 at 18:13
He commented that he used rowSelection multiple so I thought it was row selection. Thanks for mentioning it @un.spike
– Arcot Deepika
Nov 13 at 18:23
he said
column, not row.– un.spike
Nov 13 at 18:13
he said
column, not row.– un.spike
Nov 13 at 18:13
He commented that he used rowSelection multiple so I thought it was row selection. Thanks for mentioning it @un.spike
– Arcot Deepika
Nov 13 at 18:23
He commented that he used rowSelection multiple so I thought it was row selection. Thanks for mentioning it @un.spike
– Arcot Deepika
Nov 13 at 18:23
add a comment |
You have to define editable property in colDef
editable: false <-- edit would be disabled for needed column
Updated
Header checkbox can be used for row-selection, for other things, you should create custom handlers by yourself.
For display handling, you need to create cellRenderer
For edit handling, you need to create own cellEditor
Based on the official demo:
Here is worked sample for your case DEMO
cellRenderer - checkbox would be displayed as an icon
import {Component} from "@angular/core";
import {ICellRendererAngularComp} from "ag-grid-angular";
@Component({
selector: '',
template: `
<div class="checkbox-container">
<span *ngIf="params.value == true" title='true' class='ag-icon ag-icon-tick content-icon'></span>
<span *ngIf="params.value == false" title='false' class='ag-icon ag-icon-cross content-icon'></span>
<span *ngIf="!params.value"></span>
</div>
`
})
export class CheckboxRendererComponent implements ICellRendererAngularComp {
private params: any;
agInit(params: any): void {
this.params = params;
}
refresh(params):boolean{
return true;
}
}
cellEditor - double click on the cell will provide edit mode (if its possible, based on colDef- editable property)
import {Component} from "@angular/core";
import {ICellEditorAngularComp} from "ag-grid-angular";
@Component({
selector: '',
template: `<input type="checkbox" [(ngModel)]="checkboxValue">`,
})
export class ChekboxEditorComponent implements ICellEditorAngularComp {
private params: any;
private checkboxValue:boolean;
agInit(params: any): void {
this.params = params;
this.checkboxValue = this.params.value;
}
refresh(params):boolean{
return true;
}
getValue(){
return this.checkboxValue;
}
}
And the last thing:
editable: (params)=>{return params.node.data.checkbox != true}
here there is a logic which will disable edit mode for true values in column
answered Nov 13 at 9:56
un.spike
1,3081517
Thanks for the answer.But i used rowSelection: 'multiple' in column & want that entire column disable.
– e kanojia
Nov 13 at 10:26
here is the plunker [plnkr.co/edit/FKzYGZd5rbUVKv1j5yQK?p=preview] i want that when grid loaded & checkboxes are checked (based on some condition) i want that first column Disable so checkboxes are not checked or unchecked.
– e kanojia
Nov 14 at 8:01
I want to achieve following 1.load grid with checkboxes(some checkboxes are pre selected based on some condition) 2. user not able to select / deselect that checkboxes like they have only view rights not edit rights
– e kanojia
Nov 14 at 8:48
check updated answer
– un.spike
Nov 14 at 9:38
add a comment |
You have to define editable property in colDef
editable: false <-- edit would be disabled for needed column
Updated
Header checkbox can be used for row-selection, for other things, you should create custom handlers by yourself.
For display handling, you need to create cellRenderer
For edit handling, you need to create own cellEditor
Based on the official demo:
Here is worked sample for your case DEMO
cellRenderer - checkbox would be displayed as an icon
import {Component} from "@angular/core";
import {ICellRendererAngularComp} from "ag-grid-angular";
@Component({
selector: '',
template: `
<div class="checkbox-container">
<span *ngIf="params.value == true" title='true' class='ag-icon ag-icon-tick content-icon'></span>
<span *ngIf="params.value == false" title='false' class='ag-icon ag-icon-cross content-icon'></span>
<span *ngIf="!params.value"></span>
</div>
`
})
export class CheckboxRendererComponent implements ICellRendererAngularComp {
private params: any;
agInit(params: any): void {
this.params = params;
}
refresh(params):boolean{
return true;
}
}
cellEditor - double click on the cell will provide edit mode (if its possible, based on colDef- editable property)
import {Component} from "@angular/core";
import {ICellEditorAngularComp} from "ag-grid-angular";
@Component({
selector: '',
template: `<input type="checkbox" [(ngModel)]="checkboxValue">`,
})
export class ChekboxEditorComponent implements ICellEditorAngularComp {
private params: any;
private checkboxValue:boolean;
agInit(params: any): void {
this.params = params;
this.checkboxValue = this.params.value;
}
refresh(params):boolean{
return true;
}
getValue(){
return this.checkboxValue;
}
}
And the last thing:
editable: (params)=>{return params.node.data.checkbox != true}
here there is a logic which will disable edit mode for true values in column
answered Nov 13 at 9:56
un.spike
1,3081517
Thanks for the answer.But i used rowSelection: 'multiple' in column & want that entire column disable.
– e kanojia
Nov 13 at 10:26
here is the plunker [plnkr.co/edit/FKzYGZd5rbUVKv1j5yQK?p=preview] i want that when grid loaded & checkboxes are checked (based on some condition) i want that first column Disable so checkboxes are not checked or unchecked.
– e kanojia
Nov 14 at 8:01
I want to achieve following 1.load grid with checkboxes(some checkboxes are pre selected based on some condition) 2. user not able to select / deselect that checkboxes like they have only view rights not edit rights
– e kanojia
Nov 14 at 8:48
check updated answer
– un.spike
Nov 14 at 9:38
add a comment |
You have to define editable property in colDef
editable: false <-- edit would be disabled for needed column
Updated
Header checkbox can be used for row-selection, for other things, you should create custom handlers by yourself.
For display handling, you need to create cellRenderer
For edit handling, you need to create own cellEditor
Based on the official demo:
Here is worked sample for your case DEMO
cellRenderer - checkbox would be displayed as an icon
import {Component} from "@angular/core";
import {ICellRendererAngularComp} from "ag-grid-angular";
@Component({
selector: '',
template: `
<div class="checkbox-container">
<span *ngIf="params.value == true" title='true' class='ag-icon ag-icon-tick content-icon'></span>
<span *ngIf="params.value == false" title='false' class='ag-icon ag-icon-cross content-icon'></span>
<span *ngIf="!params.value"></span>
</div>
`
})
export class CheckboxRendererComponent implements ICellRendererAngularComp {
private params: any;
agInit(params: any): void {
this.params = params;
}
refresh(params):boolean{
return true;
}
}
cellEditor - double click on the cell will provide edit mode (if its possible, based on colDef- editable property)
import {Component} from "@angular/core";
import {ICellEditorAngularComp} from "ag-grid-angular";
@Component({
selector: '',
template: `<input type="checkbox" [(ngModel)]="checkboxValue">`,
})
export class ChekboxEditorComponent implements ICellEditorAngularComp {
private params: any;
private checkboxValue:boolean;
agInit(params: any): void {
this.params = params;
this.checkboxValue = this.params.value;
}
refresh(params):boolean{
return true;
}
getValue(){
return this.checkboxValue;
}
}
And the last thing:
editable: (params)=>{return params.node.data.checkbox != true}
here there is a logic which will disable edit mode for true values in column
answered Nov 13 at 9:56
un.spike
1,3081517
You have to define editable property in colDef
editable: false <-- edit would be disabled for needed column
Updated
Header checkbox can be used for row-selection, for other things, you should create custom handlers by yourself.
For display handling, you need to create cellRenderer
For edit handling, you need to create own cellEditor
Based on the official demo:
Here is worked sample for your case DEMO
cellRenderer - checkbox would be displayed as an icon
import {Component} from "@angular/core";
import {ICellRendererAngularComp} from "ag-grid-angular";
@Component({
selector: '',
template: `
<div class="checkbox-container">
<span *ngIf="params.value == true" title='true' class='ag-icon ag-icon-tick content-icon'></span>
<span *ngIf="params.value == false" title='false' class='ag-icon ag-icon-cross content-icon'></span>
<span *ngIf="!params.value"></span>
</div>
`
})
export class CheckboxRendererComponent implements ICellRendererAngularComp {
private params: any;
agInit(params: any): void {
this.params = params;
}
refresh(params):boolean{
return true;
}
}
cellEditor - double click on the cell will provide edit mode (if its possible, based on colDef- editable property)
import {Component} from "@angular/core";
import {ICellEditorAngularComp} from "ag-grid-angular";
@Component({
selector: '',
template: `<input type="checkbox" [(ngModel)]="checkboxValue">`,
})
export class ChekboxEditorComponent implements ICellEditorAngularComp {
private params: any;
private checkboxValue:boolean;
agInit(params: any): void {
this.params = params;
this.checkboxValue = this.params.value;
}
refresh(params):boolean{
return true;
}
getValue(){
return this.checkboxValue;
}
}
And the last thing:
editable: (params)=>{return params.node.data.checkbox != true}
here there is a logic which will disable edit mode for true values in column
answered Nov 13 at 9:56
un.spike
1,3081517
edited Nov 14 at 9:38
answered Nov 13 at 9:56
un.spike
1,3081517
answered Nov 13 at 9:56
un.spike
1,3081517
answered Nov 13 at 9:56
un.spike
1,3081517
1,3081517
Thanks for the answer.But i used rowSelection: 'multiple' in column & want that entire column disable.
– e kanojia
Nov 13 at 10:26
here is the plunker [plnkr.co/edit/FKzYGZd5rbUVKv1j5yQK?p=preview] i want that when grid loaded & checkboxes are checked (based on some condition) i want that first column Disable so checkboxes are not checked or unchecked.
– e kanojia
Nov 14 at 8:01
I want to achieve following 1.load grid with checkboxes(some checkboxes are pre selected based on some condition) 2. user not able to select / deselect that checkboxes like they have only view rights not edit rights
– e kanojia
Nov 14 at 8:48
check updated answer
– un.spike
Nov 14 at 9:38
add a comment |
Thanks for the answer.But i used rowSelection: 'multiple' in column & want that entire column disable.
– e kanojia
Nov 13 at 10:26
here is the plunker [plnkr.co/edit/FKzYGZd5rbUVKv1j5yQK?p=preview] i want that when grid loaded & checkboxes are checked (based on some condition) i want that first column Disable so checkboxes are not checked or unchecked.
– e kanojia
Nov 14 at 8:01
I want to achieve following 1.load grid with checkboxes(some checkboxes are pre selected based on some condition) 2. user not able to select / deselect that checkboxes like they have only view rights not edit rights
– e kanojia
Nov 14 at 8:48
check updated answer
– un.spike
Nov 14 at 9:38
Thanks for the answer.But i used rowSelection: 'multiple' in column & want that entire column disable.
– e kanojia
Nov 13 at 10:26
Thanks for the answer.But i used rowSelection: 'multiple' in column & want that entire column disable.
– e kanojia
Nov 13 at 10:26
here is the plunker [plnkr.co/edit/FKzYGZd5rbUVKv1j5yQK?p=preview] i want that when grid loaded & checkboxes are checked (based on some condition) i want that first column Disable so checkboxes are not checked or unchecked.
– e kanojia
Nov 14 at 8:01
here is the plunker [plnkr.co/edit/FKzYGZd5rbUVKv1j5yQK?p=preview] i want that when grid loaded & checkboxes are checked (based on some condition) i want that first column Disable so checkboxes are not checked or unchecked.
– e kanojia
Nov 14 at 8:01
I want to achieve following 1.load grid with checkboxes(some checkboxes are pre selected based on some condition) 2. user not able to select / deselect that checkboxes like they have only view rights not edit rights
– e kanojia
Nov 14 at 8:48
I want to achieve following 1.load grid with checkboxes(some checkboxes are pre selected based on some condition) 2. user not able to select / deselect that checkboxes like they have only view rights not edit rights
– e kanojia
Nov 14 at 8:48
check updated answer
– un.spike
Nov 14 at 9:38
check updated answer
– un.spike
Nov 14 at 9:38
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53277249%2fhow-to-disable-entire-column-in-ag-grid%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
