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])
},
};
Related
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.
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)
The documentation shows by adding printVisibleRows:false the table.print(false,true) function will print all rows. My table only prints the 20 rows that are visible due to pagination. I would like to print all rows. Is that possible?
//define setup options
var tabData = [{
invalidOptionWarnings: false,
layout: fitDatafill,
printAsHtml:true,
printVisibleRows:false,
printCopyStyle:true, //copy Tabulator styling to HTML table
printHeader:"<h1>"+tdata[0].tablenamedisplay+"<h1>",
printFooter:"<h2><h2>",
autoResize:true,
pagination:"local",
paginationAddRow:"page",
paginationSize:20,
paginationSizeSelector:[25,40,50,100],
movableColumns:false,
tooltipsHeader:true,
columns:tdata[0],
data:tdata[1],
footerElement:myfooter,
rowClick:function(e, row){},
rowContext:function(e, row){
e.preventDefault(); // prevent the browsers default context menu form
appearing.},
}];
//create table
tabEquip[p] = new Tabulator("#"+vDDest, tabData[0] );
My table only prints the 20 rows that are visible due to pagination. I would like to print all rows.
You can do this as of Tabulator v4.8 in one of two ways.
Either by setting the printRowRange option to "active" in the table constructor, and then calling the print function:
///define table
var table = new Tabulator("#example-table", {
printRowRange:"active", //print all active rows
});
//print table
table.print();
Or by passing the string "active" into the print function when you call it:
table.print("active", true);
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've an extjs editor grid panel(3.3.1) that is binded to a store. New records are added to the grid by an empty row at the top. On the load of the store I'm adding an empty row at the top of the grids. When the user adds a new value and the focus loses out I'm adding another empty row.
AV.ClassifiedCategories = Ext.extend(Ext.grid.EditorGridPanel, {
....
initComponent: function(){
this.store = this.initialConfig.store;
//add an empty row at top
this.store.on('load', this.addCategory, this);
Ext.apply(this,
{
clicksToEdit: 1,
listeners:
{
afteredit : function(e){
this.addCategory();
},
scope: this
}
});
},
//adds an empty row and insert a record to store
addCategory: function(){
var Category = this.getStore().recordType;
var cat = new Category({ cat_id: null, cat_name: "" });
this.stopEditing();
this.store.insert(0, cat);
this.startEditing(0, 0);
return cat;
},
...
});
The problem is facing here is once the afteredit event is fired and an empty row is added the focus is not moving to the first row i.e. the second row is still in edit mode. How I can solve that?
I've taken your code and have created this demo. As you can see everything works as expected. Are you sure you have provided us with non-working code?