I have problem with changing position of the records which are displaing in the grid. I have added arrows into column and wrote handler like below:
{
text: "Down",
width : 80,
xtype: 'actioncolumn',
tdCls : "row-shifter",
icon: appContext + "/images/arrow-dark-down-40.png",
handler: function(grid,index,c,d,f,row){
if(index >= grid.all.endIndex){
return;
}
index++;
grid.store.remove(row, true);
grid.getStore().insert(index, row);
},
dataIndex : "Down",
textResource : "Down"
}
When i click arrow button, the row is moved correctly but when i change displayed page (via pagination) the old records order is back. What should i do to do this changes permanent?
I suggest a new approach... You should set a new field to your model, call it 'order' for example with type 'number', then add sorter to your store to sort by this new field.
In your handler, just set a new value to the order field of the record according to the direction (add for up, subtract for down) and you have the up and down effect on the rows. This will also handle the paging correctly.
And its easier to restore the rows order if you save the order field with the rows.
Related
Goals
I am trying to add row selection functionality which is connected between the master grid and detail grid.
When a checkbox on a master grid row is selected, I want to select all the checkboxes in the associated detail grid.
When a checkbox on a master grid row is deselected, I want to deselect all the checkboxes in the associated detail grid.
When only partial checkboxes inside of a detail grid are selected, I want the master grid row to show a partial selection icon in the checkbox.
I want to keep count of how many items were selected in all of the detail grids
Questions/Problems
All of this functionality already exists for Groups, but I cannot get it to work for Master/Detail. I've tried adding in the line that I believe should add this for Groups cellRendererParams: {checkbox: true}, but that does nothing for the detail grid.
I've also tried implementing the functionality myself, but I hit a couple of roadblocks.
I don't know how to set the partial-checkbox icon manually or if that's even possible.
I implemented the onSelectionChanged event handler for the detail grid, but inside of the function it looks like I can't access the Angular component context to update the count of selected items. Not sure how to pass in the context this.
Code that I have working so far:
When a checkbox on a master grid is selected/deselected, the checkboxes in the associated detail grid are all selected/deselected.
public onMasterRowSelected() {
this.gridOptions.api.forEachNode(masterRowNode => {
if(masterRowNode.isSelected()) {
this.gridOptions.api.getDetailGridInfo(`detail_${masterRowNode.id}`).api.selectAll();
} else {
this.gridOptions.api.getDetailGridInfo(`detail_${masterRowNode.id}`).api.forEachNode(detailRowNode => detailRowNode.setSelected(false));
}
});
}
Added the onSelectionChanged() event listener for the detail grid.
constructor() {
this.gridOptions = {
...
detailCellRendererParams: {
getDetailRowData: function(params) {
params.successCallback(params.data.items); // Defines where to find the detail fields out of the rowData object
},
detailGridOptions: {
rowSelection: 'multiple',
defaultColDef: {
sortable: true
},
getRowNodeId: function (rowData) {
return rowData.id; // detail items are indexed by id field
},
onSelectionChanged: function (params) {
console.log(this); // I expected this to print out my Angular component object, but instead it prints out this.gridOptions.detailCellRendererParams.detailGridOptions
console.log("TEST"); // I know that this function is successfully being called because this line is printed
this.selectedItems = 0;
params.api.forEachNode(detailRowNode => {
if(detailRowNode.isSelected()) {
this.selectedObs++; // I believe that this would work if I had access to the correct "this" context
}
});
},
columnDefs: [
{headerName: 'Column 1', field: 'column1', checkboxSelection: true},
{headerName: 'Column 2', field: 'column2'},
]
}
}
};
}
Here is an Angular example where you can push the parent component as a reference to the detail grid and set it as its context. Doing this allows you to register a component method as a callback for the detail grid's onRowSelected method.
https://stackblitz.com/edit/ag-grid-detailrow-selectcallback?file=src/app/app.component.ts
Move the onSelectionChanged(params) function to the same level as the detailCellRendererParams object.
internalOnSelectionChanged(params)
{
this.detailGridApi = params.api;
this.detailGridColumnApi = params.columnApi;
console.log(this);
}
Then, on the onSelectionChanged, do this:
onSelectionChanged: this.internalOnSelectionChanged.bind(this);
This solved my issues that were very similar to yours.
This question is related to Ag-Grid row height on Angular 4 Project. Please see the below scenario:-
I have an Ag-Gird having 3 columns respectively:-
Id (resizable column from UI)
Name (resizable column from UI)
Address (resizable column from UI)
I do not have any limitations( like the limited number of character or words is allowed) on Address column. Users can type any number of characters or words they want to.
Issues:-
How to increase the row height, when Address column width is completely filled-up with words or when users press Enter or Shift + Enter?
How to adjust height automatically when users resize the Address column?
Please help me with these issues.
Thanks
There are multiple things to be taken care.
Have a look at the updated Stackblitz
Have cellClass: "cell-wrap-text" attribute in the ColDef for Address column and have the appropriate CSS
Handle columnResized event so that this.gridApi.resetRowHeights() can be called to adjust the height of the rows whenever the column is resized
Also handle cellEditingStopped event, so that when the data for the column is updated, the row height also gets updated accordingly.
onColumnResized() {
this.gridApi.resetRowHeights();
}
onCellEditingStopped() {
this.onColumnResized();
}
Provide autoHeight: true property in the defaultColDef
defaultColDef = { autoHeight: true };
Update:
provide cellEditor: 'agLargeTextCellEditor' if you want to have textarea like control for this field.
Check this StackBlitz
I was facing the same issue in react I wanted to increase the height of row according to the content of the text area and on enter it should go to next line in text area instead of not turning into read only, so what I did i used the suppressKeyboardEvent of ag-grid and wrote the code into it, here is my code
cellClass: "description-cell",
width: 200,
cellRendererFramework: (params) =>{
return <pre> {params.data.description}</pre>
},
cellEditor: 'agLargeTextCellEditor',
cellEditorParams: (params) => {
return {
maxLength: '1000',
cols: this.props.cols,
rows: 2
}
},
suppressKeyboardEvent: (params) => {
const KEY_ENTER = 13;
const keyCode = params.event.keyCode;
const gridShouldDoNothing = params.event.target.value && params.editing && keyCode === KEY_ENTER;
params.event.target.style.height = 'inherit';
params.event.target.style.height = `${params.event.target.scrollHeight}px`;
params.node.setRowHeight(params.event.target.scrollHeight); // adjust it according to your requirement
this.gridApi && this.gridApi.onRowHeightChanged();
return gridShouldDoNothing;
}
I hope this could help you or someone who is looking for it :)
What helped me was to call redrawRows()
Typescript + React example:
const onCellEditingStopped = (event: CellEditingStoppedEvent<any>) => {
event.api.redrawRows();
};
As we can see on https://www.ag-grid.com/javascript-grid-column-menu/, when the user checks/unchecks a column from the menu, the grid animates the other columns.
I'm introducing some columns dynamically, by using columnDefs:
this.columnDefs = [
{ headerName: 'Name', field: 'name', width: 200 },
{ headerName: 'S01F01', hide: this.solver !== 'solver1', field: 'age', width: 90, suppressToolPanel: true },
...
];
I've bound the hide/show flag to buttons on the UI that will bring a set of columns into the grid when needed. Although the columns show up appropriately, they simply appear instead of animating into the grid. I understand this is because I'm simply updating the columnDefs for the whole grid every time the user clicks the button.
Is there a way for me to display these columns on the click of the button while at the same time triggering the animation?
Unless you have this grid property suppressColumnMoveAnimation=true, the columns should have animation on by default.
As per docs
Column animations are on by default, row animations are off by
default. This is to keep with what is expected to be the most common
configuration as default.
In my Angular application I have a grid that is almost identical to the Group Selection example in the ag-Grid docs: https://www.ag-grid.com/javascript-grid-selection/#gsc.tab=0
My requirement is slightly different in that my expand button needs to both expand the row and select the row. As you see in the plunker example selection and expansion are two separate click events, but I am looking to select the row and expand that same row in one click, without having the user click on the checkbox and the expand button. I have tried doing this with css by making the checkbox transparent and placing it over the expand icon, but the click is highjacked so only one event will fire...
Is this possible in ag-Grid?
In my component by columnDefs for the column that has my checkbox and expand icon looks like so:
...
this.gridOptions.columnDefs = [
{
headerName: '', width: 100, cellRenderer: 'group',
// for parent row selection - checkboxes for parent rows
checkboxSelection: function(params) {
return params.node.canFlower;
},
cellRendererParams: { value: ' ' }, colId: 'PlusIcon', pinned: 'left', cellClass: 'center'
},
...
Listen to the rowGroupOpened event and set the row to selected:
// inside the ag-grid tag
(gridReady)="onGridReady($event)"
// inside the AppComponent class
onGroupOpened(event){
event.node.setSelected(true)
console.log(event)
}
plnkr example
I have datecolumn in a grid.
I am getting value from backend in following format: Y-m-d H:i:s. I have to display it as d.m.Y. And While sending back I have to again send it as Y-m-d H:i:s.
My code is as following:
Model
{
name: 'REA_LIT_URSPR',
type: 'date',
dateFormat:'Y-m-d H:i:s.0'
}
View
{
xtype: 'datecolumn',
format:'d.m.Y',
text: 'Ursp. LT',
align: 'center',
flex:1,
dataIndex: 'REA_LIT_URSPR',
editor: {
xtype: 'datefield',
format:'d.m.Y',
editable: false
}
}
Now issue is that if I get this value 2016-04-05 23:15:03.0, it is displayed properly. But as soon as I click it to edit it(and cancel it without selecting new date), I lose the Time 23:15:03.0 and it is changed to 00:00:00.0.
I want to persist this time, in case when user click on cell to change date but change his mind and click somewhere else without changing date.
I am using Ext.grid.plugin.CellEditing for making grid editable.
Can someone tell me what I am doing wrong or how can I achieve my goal?
ExtJS CellEditing plugin does not support "canceling" an edit by the user - whenever you click into the field and then leave, the field is validated, and if that does not fail, it is "edited". This is different in RowEditing, where a cancel button is shown that would cancel the edit and fire the canceledit event without validating the input.
So you would have to use the beforeedit and validateedit events on the CellEditing plugin. How to use them is described very well in the ExtJS docs, which documents how to access the date field, the record and the store all at the same time. Example code:
beforeedit:function( editor, context, eOpts ) {
editor.oldTime = context.record.data.REA_LIT_URSPR;// Save old value.
},
validateedit:function ( editor, context, eOpts ) {
if(editor.context.value == editor.oldTime) // Compare Values and decide
context.cancel = true; // whether to save it or not
}
{
xtype: 'datecolumn',
format:'Y-m-d g:i:s A',
text: 'Ursp. LT',
align: 'center',
flex:1,
dataIndex: 'REA_LIT_URSPR',
editor: {
xtype: 'datefield',
format:'Y-m-d g:i:s A',
editable: false
}
}
Ok so the problem is on column date format, maybe you lose a part of date because g:i:s aren't saved from the datecolumn.
I haven't tryed the code, but if it doesn't work try to create a new date format using these docs http://docs.sencha.com/extjs/5.1/5.1.1-apidocs/#!/api/Ext.Date-method-parse (same on extjs 4)
sorry for first answer, just not clear question