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)
Related
I have a situation, where I need to get the panel key when I click on extra icon (present beside expand arrow/collapse arrow) for the requirement posted below.
When I click on icon, I should remove that panel and add it to the right and vice-versa. To do that, I need to get panel key which I get when Panel is not in active state in onChange callback function, but don't get the same when the panel is active.
How do I do this? Please let me know
In the specific case wanted by #anup-r (modifying an antd sample) it is necessary to pass to the genExtra function the key of the panel
See updated sample
I'm using material-table to show some data, now I want to select one row at the time to pass the row's data to another component, so being able to select multiple rows at the time isn't what I'm looking for and the main suggestion is to go for a radio button. So is there a way to replace the checkbox on the table with radio buttons or make the selection option to only allow one row to be selected at the time?
According to documentation your hands are tied. But, this might work:
Add selectedRow key to the component which uses MaterialTable
Create some method or function e.g. handleSelection and pass it to onSelectionChange prop. Argument to this func is an array which handleSelection returns
When user select some row, set selectedRow to that row object
If user click on "slelect all" checkbox (top left) - show notification that action is not supported. If there is no way to unselect all checkboxes programatically - unmount and than mount MaterialTable (to reset checkboxes)
If one row is already selected, than another one get selected (which makes two selected rows) - repeat step "4"
I know this is a bit complicated, but it's a best I could think of at the moment
n.b. Another thing you can do (to force users to select only one row) is to hide table on multiple selection and show message about what they can do. Message could be closable. When message get closed fresh table could appear (mount aggain).
Update
Just have found another option that might work for you. Take a look at this page at the "Simple Action Example". There you have buttons instead of checkboxes. I am starting to think that:
options={{
selection: true
}}
is not the right option for you.
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()
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