I need to update the value of one of the cells in a row in ag-grid as soon as the onCellEditingStopped callback is called (this happens when a user exits any other cell on that row).
I have this code which is based on the single cell update example at Ag grid single cell update
onCellEditingStopped: {function(event) {
event.node.setDataValue("cell_to_update","a new value");
}
}
which should update the cell with field "cell_to_update" but it doesnt.
I am wondering if that is because I am calling it from this specific callback?
One way is by forcing the refresh, like
onCellEditingStopped: {function(event) {
event.node.setDataValue("cell_to_update","a new value");
event.api.refreshCells({force:true});
}
}
Related
I want to control row focus process. I need to show confirm dialog on row focus change in my table.
I tried to do this with rowClassRules property, but as I understood that functionality apply classes when table rendering, after that row classes stop changing
rowClassRules = {
'custom-row-focus': (params) => {
return params.data.id === this.currentSelectedItem.id
}
}
currentSelectedItem set's when I click on the row
Found an answer in docs
https://www.ag-grid.com/javascript-grid-row-styles/#refresh-of-styles
If you refresh a row, or a cell is updated due to editing, the rowStyle, rowClass and rowClassRules are all applied again.
So, when I'm clicking to the row I should make something like that:
onClicked($event: RowClickedEvent) {
$event.node.setData({...$event.data});
}
Using Angular 4 (typescript), I have some code like below using ag-grid 12.0.2. All I'm trying to do is load my grid and automatically (programmatically) select the first row.
:
this.gridOptions = ....
suppressCellSelection = true;
rowSelection = 'single'
:
loadRowData() {
this.rowData = [];
// build the row data array...
this.gridOptions.api.setRowData(this.rowData);
let node = this.gridOptions.api.getRowNode(...);
// console logging here shows node holds the intended row
node.setSelected(true);
// console logging here shows node.selected == true
// None of these succeeded in highlighting the first row
this.gridOptions.api.redrawRows({ rowNodes: [node] });
this.gridOptions.api.redrawRows();
this.gridOptions.api.refreshCells({ rowNodes: [node], force: true });
First node is selected but the row refuses to highlight in the grid. Otherwise, row selection by mouse works just fine. This code pattern is identical to the sample code here: https://www.ag-grid.com/javascript-grid-refresh/#gsc.tab=0 but it does not work.
Sorry I am not allowed to post the actual code.
The onGridReady means the grid is ready but the data is not.
Use the onFirstDataRendered method:
<ag-grid-angular (firstDataRendered)="onFirstDataRendered($event)">
</ag-grid-angular>
onFirstDataRendered(params) {
this.gridApi.getDisplayedRowAtIndex(0).setSelected(true);
}
This will automatically select the top row in the grid.
I had a similar issue, and came to the conclusion that onGridReady() was called before the rows were loaded. Just because the grid is ready doesn't mean your rows are ready.(I'm using ag-grid community version 19) The solution is to setup your api event handlers after your data has loaded. For demonstration purposes, I'll use a simple setTimeout(), to ensure some duration of time has passed before I interact with the grid. In real life you'll want to use some callback that gets fired when your data is loaded.
My requirement was that the handler resizes the grid on window resize (not relevant to you), and that clicking or navigating to a cell highlights the entire row (relevant to you), and I also noticed that the row associated with the selected cell was not being highlighted.
setUpGridHandlers({api}){
setTimeout(()=>{
api.sizeColumnsToFit();
window.addEventListener("resize", function() {
setTimeout(function() {
api.sizeColumnsToFit();
});
});
api.addEventListener('cellFocused',({rowIndex})=>api.getDisplayedRowAtIndex(rowIndex).setSelected(true));
},5000);
}
Since you want to select the first row on page load, you can do onething in constructor. But your gridApi, should be initialized in OnGridReady($event) method
this.gridApi.forEachNode((node) => {
if (node.rowIndex === 0) {
node.setSelected(true);
}
It's setSelected(true) that does this.
We were using MasterDetail feature, its a nested grid and on expanding a row we needed to change the selection to expanded one.
Expanding a row was handled in
detailCellRendererParams: {
getDetailRowData: loadNestedData,
detailGridOptions: #nestedDetailGridOptionsFor('child'),
}
and withing loadNesteddata, we get params using we can select expanded row as
params.node.parent.setSelected(true)
Hope this helps.
In AG-Grid, How to make a floating row not editable when a column is defined as editable?
Is it possible to use floatingCellRenderer to prevent cell editing for the floating row cell?
floatingCellRenderer: function(params) {
if (params.node.floating) {
do_something_here_to_prevent_this_cell_editing;
}
}
I am using the default cell editors for text/select on the grid.
jsfiddle
all you need to do is make a function that checks whether or not a row is floating:
function notFloating (params){
return !params.node.floating
}
then pass that into the editable attribute of the affected column
I have a flextable that gets populated with data from a database.
I want to get the ROW number of the clicked row.
So far I figured out only how to get the value of a particular cell in a particular row. You have to know the position and hard code it which isn't practical.
String test =flexTable.getFlexCellFormatter().getElement(2, 2).getInnerHTML();
System.out.println(test);
How can I create a ClickHandler to get the selected row?
//flexTable is a FlexTable object. Add a ClickHandler to it.
flexTable.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
//gets the index of the cell you clicked on
int cellIndex = flexTable.getCellForEvent(event).getCellIndex();
//gets the index of the row you clicked on
int rowIndex = flexTable.getCellForEvent(event).getRowIndex();
//print statements below will verify
System.out.println("cellIndex "+cellIndex);
System.out.println("rowIndex "+rowIndex);
//gets the value of the selected cell
String test =flexTable.getFlexCellFormatter().getElement(rowIndex,cellIndex ).getInnerHTML();
System.out.println(test);
}
});
The FlexTable supports row spans and column spans, allowing you to layout data in a variety of ways. I think you should use CellTable or a DataGrid or for that matter even a CellList if only single column data is being displayed. To these widgets you can add a selectionhandler to which you can achieve your goal. Refer this it has some pre coded examples.
I have defined a custom cell with an UISwitch control, is the GetCell method the correct place and correct way to get the values of the cell's control and assign it to a more persistent object than an object from the view? (GetCell method example).
if (indexPath.Section == 0)
{
switch (indexPath.Row)
{
case 0:
TVCellTwoColWBool cell = tableView.DequeueReusableCell(_cIDTwoColWBool) as TVCellTwoColWBool;
if(cell==null)
cell = new TVCellTwoColWBool("Date Filtering", MappedList.DateFilter, _cIDTwoColWBool);
cell.DataView.SWData.ValueChanged += (sender, e) => {MappedList.DateFilter = cell.DataView.SWData.On;};
return cell;
When you create or re-initialize the cell it is a good time to bind the state of any controls in the cell with the actual column/row that you want to attach the behavior to.
Your approach is correct, because it would update the values that you want. But sadly, because you are using ValueChanged as an event, you will be adding a new event handler every time the cell is dequeued.
So you would need to first remove the old event handler, and then add a new event handler. This means that you need to use a helper method for it to allow ValueChanged += FOO and ValueChanged -= FOO
I think this is not GetCell method,this is cellForRowAtIndexPath.
And yes its a correct place to get and paste the values in the cell.