I've a grid component(table) made using Antdesign in React. On clicking a button ,it opens a modal which has multiple checkboxes .The challenge is to maintain the different checkbox values for different rows and pass all the selected checkboxes as a column in the same row.
This is the checkbox code :
<div><Checkbox name="length" onChange={this.handleCheck}>{listType.po_qc.metal[0].label}</Checkbox></div>
<div><Checkbox name="locking"onChange={this.handleCheck}>{listType.po_qc.metal[1].label}</Checkbox></div>
HandleChange -
handleCheck = (event) => {
var updatedList = [...this.state.checked];
console.log(event.target.checked)
if (event.target.checked) {
updatedList = [...this.state.checked, event.target.name];
} else {
updatedList.splice(this.state.checked.indexOf(event.target.name), 1);
}
this.setState({
checked:updatedList
});
console.log(this.state.checked)
};
Need to access the sleected checkbox values for different rows .(Suppose i selected 2 checkbox in row one after opening modal then those 2 values should be here in comma separated form in row one and selected 4 checkbox in row 2 then 4 checkbox value shoould be in row 2 in comma separated form)
Related
I have a table where I can select rows with a checkbox, and each selected row is saved in a state with a list of ids.
Every time I change the table page, a request is made that overwrites the list displayed in the table, which makes the list of selected rows disappears.
When I select a new row on the new page, and when I return to the page where I had the checkboxes selected, it is no longer there.
My row function:
const rowSelection: any = {
selectedRowKeys: listRowKeys,
onChange: (selectedRowKeys, selectedRow) => {
setListRowKeys(selectedRowKeys);
},
};
When I select:
Console print array:
I select a new row in the new page:
List overwritten:
I try to update the function by creating a new state and updating the new one with the old one, but it does not work.
const [selectedCloneList, setSelectedCloneList] = useState([]);
const rowSelection: any = {
selectedRowKeys: listRowKeys,
onChange: (selectedRowKeys, selectedRow) => {
setListRowKeys([...selectedRowKeys, selectedCloneList]);
setSelectedCloneList([...selectedRowKeys])
},
};
I'm new to Angular, I have a component which contains some basic fields and dropdown menu.When I select anything from dropdown using tab key the other related field are not getting populated,But it works with mouse click.
receipt-creation.component.ts
populateItems(event: any, obj) {
this.receiptForm.valueChanges.subscribe(() => {
const dirty = this.isFormDirty(this.receiptForm);
if (dirty) {
this.unsavedChanges = true;
}
});
this.receiptLineItems = obj.itemList; // obj.itemList contain the values related to selected item
this.changeDetectorRef.detectChanges();
this.updateSubtotal(); // this function caluclate the total based on the item selected from the dropdown
}
receipt-creation.component.html
<add-new-row
[addNewText]="INVOICE_CONSTS.ADD_LINE_ITEM"
[canAutoAddNewRow]="false"
[checkPristine]="true"
[type]="'receipt'"
[data]="lineItemsMetaData"
[form]="receiptCreationForm"
[triggerExtraAddNewKey]="true"
[itemList]="receiptLineItems"
(changeItemEvent)="populateItems($event, receiptCreationForm)"
(keydown.enter)="preventFormSubmission($event)"
></add-new-row>
With event.preventDefault() the fields gets populated, but I want the default behaviour of tab key to be working.
currently I have a signup form with 5 options but I'm trying to find a way to limit so the user can only select 2 options and in case the user selects a third option the first one would be unchecked, I had found a way of doing this in plain js but I haven't found a react way of doing it. This is what I have so far, would it be better to handle with plain js instead of react?
{iconsPool.map((src, index) => (
<Box className="test">
<input type="checkbox" className="iconsCheckbox" id={iconsPool.id} />
<label for={iconsPool.id}>
<img className="signupIcons" src={iconsPool[index].src} key={index} />
</label>
{console.log(iconsPool)}
</Box>
))}
This can be implemented with a state as an array with 2 elements.
Two items of the state Array will represent the index of selected items.
If an checkbox is clicked, that checkbox and the one clicked right before will be checked. (Therefore unchecking the one that was clicked even before that)
This can be done by pushing the index of newly clicked checkbox into the head of array, and removing the last item of the array.
When an checked checkbox is clicked again, (therefore it should be unchecked,) the index of the checkbox is searched from the state array, and removed by replacing that value with undefined
Below is code, as an example
...
const [checkedItems, setCheckedItems] = useState([undefined,undefined])
// When an Item is clicked
const onClickItem = (itemIndex:number, isSelected: boolean) =>{
if(isSelected){
setCheckedItems(c=>([itemIndex,c[0]]))
} else {
if(itemIndex === checkedItems[0]){
setCheckedItems(c=>([undefined,c[1]]))
} else if(itemIndex === checkedItems[1]){
setCheckedItems(c=>([c[0],undefined]))
}
}
}
Using Material-UI's <Table/> (http://www.material-ui.com/#/components/table) with ReactJS, I have a table set up with a select all checkbox. Every time a checkbox for a row is clicked on individually, the row id gets adds to the state array clickedRowIds. So console.log(), prints out an array with the ids of the clicked on row/s.
For example, if I were to check off the checkboxes just for the first row and second, the console log would print: ____THESE ARE THE CLICKED ROWS____ [1, 2] (With 1 and 2 representing the row ID numbers in integer). But when I click on the Select All checkbox in the header, it checks off all the checkboxes in the table, yet in the console.log(), it just shows ____THESE ARE THE CLICKED ROWS____ all and ids.forEach() gets an error Uncaught TypeError: ids.forEach is not a function.
The row checkboxes are all being clicked on via Select All checkbox, but why aren't all the row ID numbers being added to the clickedRowIds array? Using ids.forEach(), I would like to console log all the selected rows using Select All button.
export default class TestTable extends Component {
constructor(props) {
super(props)
this.state = {
clickedRowIds: [],
}
this.handleRowSelection = this.handleRowSelection.bind(this);
}
handleRowSelection(rowIds) {
this.setState({
clickedRowIds: rowIds
})
}
render(){
const ids = this.state.clickedRowIds
console.log('____THESE ARE THE CLICKED ROWS____ ', ids)
ids.forEach(id => {console.log(id)})
return(
<div className='table_body' style={styles.content}>
<Table
multiSelectable={true}
onRowSelection={this.handleRowSelection}
>
<TableHeader
displaySelectAll={true}
enableSelectAll={true}
>
...
</TableHeader>
</Table>
</div>
)
}
}
Answer will be upvoted and answered.
Check the docs here: http://www.material-ui.com/#/components/table
Called when a row is selected. selectedRows is an array of all row
selections. IF all rows have been selected, the string "all" will be
returned instead to indicate that all rows have been selected.
This means that if all rows are selected, annoyingly, your rowIds will no longer be set to an array, but a string saying "all". You'll need some logic to handle that case before calling forEach on rowIds. Your error is due to the string "all" not having the forEach method available.
I have a datatable from ajax source. I want to display a checkbox in one column based on its value.
If the value is active, checkbox should be checked, otherwise it remains unchecked.
I am using Switchery JS to stylize the checkbox. It works fine in normal HTML body, but not inside a datatable column.
Here is the fiddle:
https://jsfiddle.net/sohal/gfuuazxL/4/
The problem is that you are doing the Switchery' before the dataTable is populated with data. And even if you did it after, you would still end up not having Switcherys on hidden rows, i.e on page #2, #3 and so on.
So you must initialise Switchery after the dataTable is initialised and do the Switchery on all rows. You can do this in the initComplete() callback, and iterate over all rows by using the API every() method :
$(document).ready(function() {
var table = $('#datatable-buttons').DataTable({
initComplete : function() {
this.api().rows().every( function ( rowIdx, tableLoop, rowLoop ) {
this.nodes().to$().find('.js-switch').each(function(i, e) {
var switchery = new Switchery(e, {
color: '#26B99A'
})
})
})
},
...//rest of the options
})
})
forked fiddle -> https://jsfiddle.net/jpkysyp1/