Uncheck checkbox toggle when Reactable table is refreshed - javascript

I have a Reactable table which has a column of checkboxes, where in the column header has a checkbox that acts as a toggle for checking and unchecked the column.
The problem I am seeing is when the table is refreshed the toggle is still checked, which is affecting the state on those table rows, plus some rows are still checked because of the toggle.
I have tried adding an onload method to the reactable table and passed in event to get to the toggle but I unable to get the target.checked.
Can someone please explain how I can uncheck all checkboxes including the checkbox in the table header when the table is refreshed?
_onload = (e) => {
if(e.target.checked) {
e.target.checked = false ;
}
}
The method above is called inside the table tag using:
onload={this._onload(e)}

Related

Uncheck radio button datatable with pagination

I have a datatable with radio buttons for every row, my problem is that when i check the radio button in first page for example and go to another page and check another radio button i sow that the first one (in page one) still checked.
Expected : When i select a row, then i change the page in the table, and if i re-select a row, the value of the previous page must be deselected.
I'm using this https://datatables.net/examples/data_sources/js_array
thinks

How to get specific selection of checkbox from a popup datatable in Webix?

I have a popup data table in each row of a maintable with some checkboxes in it.
I am selecting/checking items randomly by clicking the checkbox buttons for each row and printing the values checked with the help of Print button.
I am observing that only the last selection of checkbox buttons are overwriting all the earlier selections.
How can I get the appropriate selection of checkbox buttons corresponding to each row?
Snippet: https://snippet.webix.com/11irkt7o
Thanks.
You code uses a single instance of popup table for each rows, so as result whey you are calling $$pt.eachRow you are itterating other the last active value, all previous values are lost.
The better solution will be to use click handler of close button, to get all checked rows and store that data in the master row
{view:"button", label:"Close", click:function(){
ids = collectCheckedRows($$('p_table'));
$$('mytable').updateItem(selectedRow, { checked : ids })
this.getTopParentView().hide()
}}
Now, to print all values you can use
$$('mytable').eachRow(function(id){
console.log(id, this.getItem(id).checked);
});

Clear previous selection only if checkbox is not clicked in jQgrid?

I have a grid setup with multiselect: true because I need to be able to delete more than one row at the same time. On the onSelectRow event I am loading some data based on the ID and displaying it to the end user. So far so good.
This is the example where everything works fine, the data for ID=219109 is being displayed:
Now look at the following example:
In the example above the first row still highlighted and then I clicked a second one. Because of multiselect is enabled I was able to select both at the same time. The onSelectRow event still working properly which means is loading the data for the ID=282006 but visually it could be confusing for the end user.
What I want to do is to reset the previous selected rows and just highlight the last one I have clicked.
For example using the same images:
Load a fresh grid with no rows selected
Click on ID=219109: highlight and select this row
Click on ID=282006: clear the grid and highlight this row
However this should only happen when I click in any other place than the checkbox.
In the image above if I click on any column rather than the first one (the one having the checkbox) I should be able to clear the grid selection and choose the last one but if I click on the checkbox it does not matter because is the only way to delete more than one at the time.
I have tried the following:
onSelectRow: function () {
var rowid = $(this).jqGrid('getGridParam', 'selrow');
$(this).jqGrid("resetSelection");
$(this).jqGrid("setSelection", rowid);
}
But it's not working since the behavior is not consistent. You can check the demo here.
Any ideas in how to achieve this?
It seems to me that you need just add the option
multiboxonly: true
and remove your current onSelectRow code. See https://jsfiddle.net/OlegKi/949pLpfv/3/. If the user clicks multiple times on checkbox the rows will be selected. The click on another part of the row will deselect all previously selected rows and select only the clicked row.

jqgrid get rowData values without selecting multi-select checkbox

I have a jgrid with multiple rows and 5 columns without check-boxes. In 5th column it has screen permissions. I had given the sample of jqgrid below.
So when i am changing screen permissions either by clicking on the close mark or clicking on plus mark i am deleting existing or adding other available permissions to the screen.
Here i am doing same operation for multiple rows in grid. When i am clicking on the SAVE button outside of the grid i need to get the edited row values and need to send back to controller.
I tried this functionality with the selarrow function of jqgrid. but i am not getting these edited row values without selecting the checkbox of the row.
Could any one help me how to get this edited row values without selecting the checkboxes of the row.
You can use the below code:
var lastSel;
jQuery("#gridid").jqGrid({
...
onSelectRow: function(id){
if(id && id!==lastSel){
jQuery(this).restoreRow(lastSel);
lastSel=id;
}
jQuery(this).editRow(id, true);
},
...
});
onSelectRow :Raised immediately after row was clicked.
rowid: is the id of the row,
status: is the status of the selection,
e: is the event object. Can be used when multiselect is set to true. true if the row is selected, false if the row is deselected.
You Can refer this as well:
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:events

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