I'm displaying an ng-grid and I would like to change a particular cell's content based on an update. I don't want to make the cell editable. I'm instead popping up a dialog when they click on a Row. When they submit the data, I update the db using ajax, but I don't want to refresh the page. I'd like to update the cell to say something like "Updated". I haven't found anything in documentation or examples that would allow me to modify a particular cell on the fly. Anybody wanna point me in a right direction?
I do something similar with my data. Use a row or cell template to show your dialog using ng-click and pass a reference to the row.entity to your dialog. Then you can just update the data on the row.
I created an example below where I have a cell template that has an event to capture the row, column, and cell data. Then I allow for the user to update the value, and on the button click I update the row with the new value.
Plunkr here:
http://plnkr.co/edit/JQ7mtD?p=preview
Related
I am trying to implement row editing with Antd where when I click on the Edit link the row expands and has a textarea inside the user can type into. I haven't been able to figure out how to trigger row expansion (didn't see any onclick event handlers on the + sign) nor how to get access to the expanded row element to slide a form field in there in a non hacky way.
This is the current code - https://gist.github.com/llevar/8f9a68bcc15ab0e37defb14a5126c5ad. The goal is to have the column "Configuration" with JSON in it end up in a text area upon clicking Edit.
Thanks in advance.
Did you try
onExpandedRowsChange props and onExpand they give you access to the expanded row callback and expanded row change.
edit:
I haven't try this, but I think you should be able to programatically expand rows with expandedRowKeys and state. and use the expandedRowRender to conditionally render "view mode" and "edit mode(text area)", also you can add a save button to save the textarea values and turn it back to "view mode"
onExpand is trigger when you press the + icon (or expand the row via rowClick)
I use AgGrid Enterprise, and allow users to edit an entire row so all cells switch to edit mode.
I also have an event listener to save the row in database when the user put the focus on a new line or outside the grid.
In the first column of my grid, i have a custom cell displaying a combo.
When the user select a value, it should update the cell AND 3 other cells in the row.
So i use the API to refresh the 3 cells.
Doing so put the cell in view mode, i loose the edit mode and the save event is triggered.
Is there a way in edit mode, to update cell content without loosing the edit mode ??
Thanks a lot.
You said your are try to entire row and and also have custom cell with combo
but ag-grid does not work any popup editor with full row edit.
You have to remove ag-grid property editType: 'fullRow' and it will work.
https://www.ag-grid.com/javascript-grid-cell-editing/#gsc.tab=0
I'm using a property grid with editors set in sourceConfig. I want only some rows to be editable and not all. Returning false in beforeedit disables all. The reason is, I have a button in a grid. When I click the button, the grid turns to a textfield! Any way to do this?
The beforeedit event should provide you with the editor and the editing context. Lets say your callback function looks like this:
function(editor,context) { ... }
Using the context you will get the record which get edited by accessing context.record while the editor can provide you with the editor form from where you have access to all rendered fields within that form. To get the form you have to get the editor first and after that you can fetch the form
var form = editor.getEditor().getForm()
This way you can be sure that the editor has been set up. To get a field within that form simply call
form.findField('fieldname') // fieldname is the dataIndex of the column
You can now do nearly anything based on your conditions.
In addition the record is also loaded into this form an can be accessed by calling form.getRecord()
Folks,
I am using ng-grid to display a list of items.
I want to give my users ability to rearrange the rows in the list.
i.e move the rows up and down as they please.
Now,
However when I update the grid data in the backend i.e say change the index of a particular row, that row does not automatically change locations in the front-end.
What am i missing here ?
I have created a plunker to describe the problem
http://plnkr.co/edit/s1hrTSqF2zeZo3Btaln0
The grid doesn't use the index of the array to order it, so even if you are changing it, because the data is still there nothing happens.
What you could do is define an order field and update the value then changing the values as shown in this plukr. The order field you can hide it from the grid if required using columnDefs to explicitly defined which column should be shown.
Regards
I have an infragistics ultragrid control in a windows form. There is an 'Add New' button outside to insert new rows to the grid.
The problem I faced is, when I click the button outside the grid, while I'm editing a cell inside the grid, the cell doesn't lose focus. Because of this the edited new value is not updated to its underlying data source.
I need this cell to lose focus and update it's underlying data source, because the 'Add New' button creates a new row with this particular column having a default value which is calculated based on the previous row's edited value.
So any ideas on how to unfocus the ultragrid cell? This situation may apply to normal GridView also.
If your button is on a Toolbar, then the behavior you are seeing is expected because toolbars don't take focus. If this is the case before performing your logic you can use the PerformAction method of the grid and pass in UltraGridAction.CommitRow to force the row that was being editor to commit its updates.
For example:
this.ultraGrid1.PerformAction(UltraGridAction.CommitRow);
I used myUltraGrid.ActiveRow.Cells[0].Activate(); which also works. But the solution by #alhalama is better one I guess.