We Keep Coding

How to add a textField to a specific row inside a table onclick of a button using reactjs & material ui

I want to add multiple textfield on to a specific row inside a table whenever the specific row add button is clicked, currently I am able to add text field onclick of add button but whenever the add button is clicked the textfield is getting added in every row of the table. Also the add icon needs to be next to the last text field but currently I could only achieve it having it on the 1st text field. Please someone help me out here. Image of what i have achieved so far.
As you can see I'm trying to add textfields on 1st row ,but it is automatically adding textfields in every row of table.
Working codesandbox:
https://codesandbox.io/s/broken-dream-7nncc?file=/src/App.js

There are a few ways to do it. A quick way is to (as Muhammad said) handle the button click for each row.
Meaning that you need to pass to the addCustomFile method the row Id and store this in your array.
Then when you map the customRow array in your main TableBody make sure to add the two custom columns only if there is a match between the customRow.rowID and the row ID you are currently rendering.
I`ve modified your sandbox https://codesandbox.io/s/infallible-resonance-qn64l?file=/src/App.js:1807-1820

you have to handle button click for each row. right now just one state so therefore it is showing in each cell

Maybe give this a try
https://www.w3schools.com/code/tryit.asp?filename=GQP3C100TJZH
hopefully it solves what you are looking for, if not please provide me with a bit more detailed issue of what exactly you want
This at the moment just works for one row and maybe for two rows you can try it by adding a it is not exactly a text field area but it should be a similar fix.

Angular agGrid - Is it possible to pass rowSelection event into cellRenderer?

I've got a custom radio button cellRenderer which I'm trying to display as selected when a row is clicked.
It works when clicking on the button directly, but I want it to also select on row selection, if the user clicks elsewhere.
The problem is, the cellRenderer doesn't know when it's row is clicked. The API documentation for agGrid only has a cellClicked method.
Is there a way to do this?

There are a few ways of doing this. Here is one approach:
Firstly, you can listen to whether a row has been clicked or selected via the following events: rowClicked, rowSelected.
Read more about these events in the documentation:
https://www.ag-grid.com/javascript-grid-events/#reference-selection
You can either add these events globally on the gridOptions or, on the cell renderer itself by utilising the Grid API method: addEventListener (which you can read more about here: https://www.ag-grid.com/javascript-grid-api/#reference-events)
Once you have captured the row selection/clicked event, you can get the instance of the cell renderer by using the API method getCellRendererInstances, you can read more on this implementation here: https://www.ag-grid.com/javascript-grid-cell-rendering-components/#accessing-cell-renderer-instances
Finally, you have the instance of the renderer, you can do whatever you want to set the radio button to be checked. e.g. adding a method on the renderer to change the state.

Kendo UI inline editing with dynamically change editor

I have two columns in this demo
Setting Type (which has drop-down list)
Editor (it contains the value of column)
I want to change the the Editor column when drop-down list value is changed (from Setting Type column). Example, if a user selects date from drop-down list, the Editor column field should change to date picker.
Can anyone help me to solve this problem? I've been stuck with this for a week. Appreciate your help. Here's a demo: DEMO IN DOJO

One option is to switch to incell edit mode (https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/editable) so that when the editor for the settingDefaultValue is created, the value of settingType is set.
The second option is to bind to the change event of the typeEditor and re-create the editor for settingDefaultValue. Currently, I don't think the grid.refresh() will even be fired, since the grid has a row open for edition. In the typeEditor change event, e.sender will give you the kendoDropDownList, and something like e.sender.element.closest("tr").find("td:nth-child(2)") will give you the container to put the editor in.
One more remark: use either data-bind="value:YourFieldHere", or a change handler with options.model.set("YourFieldHere", this.value()), but you don't need to do both - setting the YourFieldHere is literally what the value binding does.

ExtJS Using Tab to navigate between two grids

I have a panel that contains two grids, both of which are editable using the cell editing plugin. Within the grids, users can use the tab key to move between editable fields. However, I can not seem to find the right way to get the tab key to allow the user to move from the last editable cell in the first grid to the first editable cell in the second (there are no components between the two grids). The user is just stuck in the last editable field of the first grid.
I tried using FocusManager, but this made keyboard navigation far more complex, rather than less, requiring use of the arrow keys to get into and out of each form element and grid.
I added this code to the parent panel:
var nav = new Ext.util.KeyNav(Ext.getDoc(), {
tab: function(e) {
console.debug('TAB HIT!', arguments);
},
scope: this
});
nav.enable();
just to see what tabs were detected, but it only activated when the tab key was clicked and a form element in the parent panel itself had focus.
I guess there are a few elements I need to learn, how to I pass focus from element to element, and how do I detect the first and last element in a grid? Or is there some way to do this built into ExtJS? Any suggestions or advice would be greatly appreciated.

I would use the new cellkeydown event for grid panels.
Implement a handler for that event which checks the key type, and whether the cell is the last column in the grid, then starts a cell edit in the first column of the corresponding row in the other grid.
You can find out if it was a TAB key from the 7th argument passed by this event.
You can find out if it is the last cell in the grid from the 3rd argument passed by the event.
The rowIndex is the 6th argument - use that so you know which row to start editing in the other grid.
Event handlers can be added to components using the on method by the way.
You can also look up the functions that need to be called to start cell editing in the API here.
If you had more code and maybe a bounty I might be able to get more specific but that's the gist of how I would do it.

Editor Grid Keyboard Navigation - Enable editing without clicking with mouse

I have an editor grid that is populated using XML static data. Using the TAB key, I need to be able to navigate between the sections of content, until finally arriving to the inside of the editor grid. This part works fine.
However, the default behavior demands that the use hit the Enter key to begin editing the field. Is there any way to enable editing on the custom editor (TextField) when the user TAB's into a cell? The grid's config already has clicksToEdit set to 1.
I have attempted to set up a cellSelectionModel with a listener on the selectionchanged event. This code fails when using the mouse as well.
this.cm = new Ext.grid.CellSelectionModel({
listeners: {
selectionchanged : function(foo, selected) {
//using the selected.cell[] I can get the cell row and col
//This next line blows up
foo.grid.startEditing(selected.cell[0], selected.cell[1]);
//I want to be able to edit the cell when the user clicks or TAB's into the cell.
}
}
})
Does anyone have any ideas on how to approach enabling the custom editor when tabbing into th field with the keyboard?