I have a requirement to create a combobox with checklist.I am able to do that.
I also want a select all option so that i can select all values which i can not do.Please help me to get this done.
selModel: {
selType: 'checkboxmodel',
//mode: 'SINGLE',
headerWidth: 62,
//checkOnly: false,
checkOnly: true,//this will check only when you click on checkbox
allowDeselect: false,
ignoreRightMouseSelection: true,
listeners: {
'selectionchange': Ext.bind(function (view, records) {
},this)
}
},
docs:http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.panel.Table-cfg-selModel
when you use this you will get a checkbox in the header we can select and deselect form there
Related
Setup Summary: We have two aggrids where we drag from one grid to the second grid. This works perfectly.
Issue: We have some lines we don't want to enable drag on. So we want a conditional drag based on a cell value.
Currently our table settings (we use reactjs) are as follows:
Table 1 and 2 have these properties:
rowData={rowData}
ref={fileGridRef}
columnDefs={columnDefs}
gridOptions={gridOptions}
rowDragManaged={true}
rowDragEntireRow={true}
animateRows={true}
onRowDragEnd={(params: any) => addToFilesGrid(params)}
suppressClickEdit={true}
gridOptions are (for both grids)
rowSelection: "single",
rowMultiSelectWithClick: true,
Column defs are (for both grids)
{
field: "name",
headerName: "File Name",
sortable: true,
filter: true,
editable: true,
cellStyle: { textAlign: "center", marginLeft: "-10px" },
cellRenderer: EditCellRenderer,
rowDrag: (params: any) => {
params.data.type !== ""; //HERE IS THE CONDITION WE HAVE
},
},
{
field: "type",
headerName: "Type",
sortable: true,
filter: true,
editable: false,
}
When the params.data.type is "" we want it not to move.
I tried playing around with rowDragManaged=false, but then nothing moved. I thought about making handlers for onDragEnter/Leave/Move/End, but I would rather avoid that if I can.
Anyone know what the issue is?
Do I have to do unmanaged dragging if I want this to work?
Finally found a solution!
I had seen that rowDrag could be set to a conditional statement but had issues getting it working, and there is one example on ag-grid docs that wasn't helpful in my use case.
So, I have a table, and if a cell is BLANK I don't want the row to drag.
So in the ColDef I had:
rowDrag: params => params.data.type === "",
Because that is what it was in the rowData. Also when I printed out params in other row changing functions (onRowSelected, onRowDragMove, etc...) this field was an empty string -> "".
It seems like for this conditional however it may be treated as an undefined or have a space. Not exactly sure, but I was able to do this:
params => params.data.type.length > 1,
And it worked! This leads me to believe the tags in the aggrid cell or something in their code inserts a space somewhere.
This was shown when I tried
rowDrag: params => params.data.type.length > 0,
and I could still drag the rows where my type field was "".
I am using ag-grid to display and modify data.How Can I switch between editable and non editable for the hole ag-grid. Can I do this with the grid api.
this is my default config:
this.defaultDefs = {
suppressMovable: true,
enableColResize: true,
editable: true,
};
Can I change editable dynamically?
editable can be either a boolean as you have it, or a function
If you use the function form you can determine on a cell by cell basis if you want the given cell to be editable
editable: function(params) {
return true; // true/false based on params (or some other criteria) value
}
you can set editable property by your way just create another function isEditable(columnName) which will give you boolean result.
this.defaultDefs = {
suppressMovable: true,
enableColResize: true,
editable: isEditable(column),
};
Do a logic check in the cellEditingStarted callback, calling the stop() when the check fails. You may need to write some css to style it or add a toast/notification to give the user feedback on why they're not able to edit.
You can use it like this:
editable: (params) => your logic
update your date
call api.redrawRows({ rowNodes: [node] })
You can also use suppressClickEdit in the grid options for a quick disabling:
gridOptions: {
suppressClickEdit: true | false,
...
}
See: https://www.ag-grid.com/angular-data-grid/cell-editing-start-stop/#no-click-editing
A simpler approach
editable: (params:any)=> params.data.isEdit === 'edit' ? true : false
add it to the columndefinitions
*
Note: isEdit === 'edit' is your custom logic
*
I have requirement to get a drop down from a column which should have three values. I marked the column as editable with editable: true keyword, even then I am not able to edit. I just need a drop down with two values when i double click on the cell.
{headerName: "O", width: 70, valueGetter: this.geValue, editable: true, cellEditor: 'select',
cellEditorParams: {
values: ['Yes', 'No']}
}
I am using select here but not rick select because i am not using ag-grid enterprise. I am also setting these below properties for all the rows.
suppressCellSelection: true,
suppressMovableColumns: true,
suppressRowClickSelection: false,
I need help to find if I am missing anything here. I am not getting a drop down when I double click on cell.
I could finally figure out why I could not edit the cell even if I declare it editable. Because css is adding a class as shown below
<div class="ag-cell-no-focus ag-cell ag-group-cell ag-cell-not-inline-editing ag-cell-value" colid="O" style="width: 54px; left: 48px;"></div>
I have to remove ag-cell-not-inline editing class from the div. I am not sure how. Is there any option to remove default class from grid options?
Is there an option to remove first menu from ag-grid column menu?
I mean the menu with 'pinSubMenu', 'valueAggSubMenu', 'autoSizeThis', etc.
I want to open the context menu and to see first the filter menu and second the columns visibility menu.
I tried to do this, but it still opens empty menu and I need to navigate to my filter menu:
function getMainMenuItems(params) {
var countryMenuItems = [];
var itemsToExclude = [
'separator', 'pinSubMenu', 'valueAggSubMenu', 'autoSizeThis', 'autoSizeAll', 'rowGroup', 'rowUnGroup',
'resetColumns', 'expandAll', 'contractAll','toolPanel'
];
params.defaultItems.forEach(function(item) {
if (itemsToExclude.indexOf(item) < 0) {
countryMenuItems.push(item);
}
});
return countryMenuItems;
}
Looks like you should be able to accomplish what you want to do within the gridOptions:
gridOptions = {
...
suppressMenuMainPanel: true,
...
}
You can also suppress any of the panels of the column menu:
gridOptions = {
...
suppressMenuMainPanel: true,
suppressMenuColumnPanel: true,
suppressMenuFilterPanel: true,
...
}
This is supposing that you are using the Enterprise version, which I assumed you were based on your usage of the getMainMenuItems function
You need to specify menuTabs in the colDef object:
{
headerName: "ID",
field: "id",
menuTabs: ['filterMenuTab','generalMenuTab','columnsMenuTab']
}
See more details here.
I want to have the selection checkbox for ag-grid with the option below:
But didn't see the checkbox on the left. Have any idea what else needs to be settings to make the selection checkbox works.
self.appliancesInGroupGridOpts = {
angularCompileRows: true,
enableColResize : true,
rowData: null,
checkboxSelection: true,
enableSorting: true,
columnDefs: [
{
valueGetter: 'data.name',
headerName: $filter('translate')('APPLIANCE.NAME'),
suppressSizeToFit : true,
template: '<span class="appliance-name">{{data.name}}</span>',
checkboxSelection: true,
width: 200
} ,
{
valueGetter: 'data.updated',
headerName: $filter('translate')('APPLIANCE_GROUP.PUBLISH.MODIFICATION_TIME'),
suppressSizeToFit : true,
template: '<span class="appliance-updated">{{data.updated}}</span>',
checkboxSelection: true,
width: 200
}
] ,
http://www.ag-grid.com/angular-grid-selection/index.php
Checkbox selection can be used in two places:
row selection
group selection.
To include checkbox selection for a column, set the attribute
columnDefs: [{
valueGetter: 'data.name',
headerName: $filter('translate')('APPLIANCE.NAME'),
suppressSizeToFit : true,
template: '<span class="appliance-name">{{data.name}}</span>',
width: 200,
checkboxSelection: true
...
on the column definition.
You can set this attribute on as many columns as you like, however, it doesn't make sense to have it in more one column in a table.
To enable checkbox selection for groups, set the attribute:
groupColumnDef: {
headerName: "Athlete",
field: "athlete",
width: 200,
cellRenderer: {
renderer: "group",
checkbox: true
}
}
for the group renderer. See the grouping section for details on the group renderer.
Selecting groups can have the effect of selecting the group row, or selecting all the children in the group. This is done by setting the attribute:
groupSelectsChildren: {true || false}
When set to false, then selecting the group will select the group node.
When set to true, then selecting the group will either select or deselect all of the children.
The example below shows checkbox selection with groups. Selecting the group has the effect of selecting the children. Likewise selecting all the children automatically selects the group. In this scenario the group itself will never appear in the selectedRows list.
The example also shows a checkbox for selection on the age column. In practice, it is not normal to have more than two columns for selection, the below is just for demonstration. Having a checkbox within a non-group row is best for grids that are not using grouping.
In Addition: you could add this on the col definition
checkboxSelection:
Set to true to render a selection checkbox in the column.
What say einav is true however i think he forgot the very base :
set the property rowSelection:'single' or rowSelection:'multiple' on gridOptions if you want to have selection enabled :)
The attribute checkboxSelection is only for columns not grid options.
The following properties are relevant to selection:
rowSelection: Type of row selection, set to either 'single' or 'multiple' to enable selection.
rowDeselection: Set to true or false. If true, then rows will be deselected if you hold down ctrl + click the row. Normal behaviour with the grid disallows deselection of nodes (ie once a node is selected, it remains selected until another row is selected in it's place).
suppressRowClickSelection: If true, rows won't be selected when clicked. Use, for example, when you want checkbox selection, and don't want to also select when the row is clicked.
From the same link given by Einav