Delete remove functionality for last row in ng-grid? - javascript

I have functionality that allows my ng-grid to remove rows in which when you click the remove button, the row is deleted from the ng-grid. Below is an example of how I have it set up now:
http://plnkr.co/edit/NL7sMGT6acdUHAAZPNba?p=preview
I want to get it so that the remove button disappears on the very last row. In the example above, for example, all but the Enos entry would have no delete button. Also, if I created a new row under Enos, I would have it so that Enos would then have a remove button and the new row under Enos would have no delete functionality. I have the functionality to add/remove rows, but I simply want to get the remove button to disappear on the last row. How would I do so?
Any help would be appreciated. Thanks!

You can use the ng-hide directive to hide the button when the row index is the last one in the collection:
<input type="button"
value="remove"
ng-click="removeRow()"
ng-hide="row.rowIndex == $parent.myData.length-1" />
This uses the $parent property to access the original list on the parent scope to get the count.

Related

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.

Select and deselect row after another selection - ReactJS Hooks

Have a list of licenses plates that start with a disabled button and no line selected.
Here is what should to do:
When select a row, button "Go foward" enable;
When select a row already selected, deselect it and disabled button again.
When list have a row selected and user click in another row, deselect old row and select the new one.
The snippet code i did:
https://codesandbox.io/s/busy-galileo-mw3p3?fontsize=14&hidenavigation=1&theme=dark
Facing this problems:
Need 2 clicks to set css style 'custom-col-row-active' to row selected. Button is enable already first click.
When a line is already selected, when you click on the other lines, they are selected as well. With 1 click on a selected line, all are deselected.
I know need use data table to deselect line already select, but i don't know how to get the full data table, since i only get the data when i click in a specif row.
Any tips here?
#Rafael, I don't know much about tabler-react, but this is just my suggestion for you. Your handleSetActivedRow seems to have problem. I don't understand why you have written onClick={(e) => handleSetActivedRow(e)}. You are calling a function inline when onClick itself and again you are taking it to an other function handleSetActivedRow. This is bad coding; instead you can do like this onClick={handleSetActiveRow}. secondly, you need to check again your handleSetActiveRow function. I don't understand why you want to return? when it is not necessary. What you need to check on is that you want to set the className to -active when you click on an element.

Angular JS add row to ng-repeat table with different controls than other rows

I have a table populated with json data and an ng-repeat, as in
I need to add rows to the top with a button, as in the screenshot, but the added row(s) has to have editable cells where I have blank rows. The data in the existing rows cannot be editable.
I am adding the row with an ng-click handler on the "add" button on the page:
$scope.addRow = function () {
$scope.hsCodes.unshift({});
};
This works, but of course adds a row just like the others, with empty TDs.
How can I add input (text) controls only to the added row(s)?
It would be helpful to have a demo to more accurately answer, but generally what I would do is:
Add a boolean property to the row object such as isEditable.
Set a template for the cell using ng-if="row.isEditable"
If the row.isEditable property is not there, that would be false, so you don't have to worry about adding it if you are dealing with remote data.

adding rows inside grid extjs

I am trying to add rows dynamically inside a grid using a button and remove individual rows using an action column function. I have two text fields (name, email) inside the grid on each row. So when the user hits the add button, a new row should appear with name and email fields. The third column would be an action column and when the button in the action column is clicked the entire row should be removed.
It would greatly help me out if somebody could share some sample code for me to get started.
There are some great code examples in the docs. This is where you have to head first, before asking here.
Look at this row editing example.

jquery get value of grouped radio buttons

How do I get the value of a radio button group when the add button is clicked?
Below is what I have so far:
http://jsfiddle.net/RBYzm/
Whenever I add a row to the other table no matter which radio button I select it does not showup as selected in the table that I am adding rows to.
I see that you are not setting the values of row that is added to the one from which you want to add.. You are just creating the elements but not copying over the values from the main table..
Why don't you just use .clone() instead..
EDIT
UPDATED FIDDLE
I have made some changes in the code.. Changed the id's where there were duplicates.. Also accessing the values of the current row and copying it over to the newly added row..

Categories