React Table - useRowSelect change select all default behavior - javascript

I am using the selection hook in my react table and I can't find a way to override the select all checkbox behavior.
When the select all checkbox is checked if you uncheck a specific row in the table it turns the isAllRowsSelected to false.
I want it to change only if the header checkbox is clicked, because I want to be able to have a state that says "all results, except the unmarked ones".
I am using server side pagination so I can't rely only on the selectedRowIds array.
This is the implementation of useRowSelect I used : here

You can add this line, it trigers on component mount.
React.useEffect(()=> {toggleAllRowsSelected()},[])
All code like this: codesandbox

Related

Set WooCommerce country with Javascript, wait for state field update, then set a specific state

I am setting the country select menu on page load with Javascript:
$('#billing_country').val(billing_country);
I have to then trigger the update, because we are not using standard form elements (with spans, divs, placeholders, etc.):
$('#billing_country').trigger('change');
That much works.
However, since changing the country causes the state select menu to change, my attempt to set the state does not work, I assume because it is happening too fast. How can I detect when the state select menu has updated following a country select menu update, so that I can set it too?
You can try to make the change on country_to_state_changed event. This one is triggered when country is changed and after the code replaces the
$(document.body).on('country_to_state_changed', function(){
$('#billing_state').val('CO').trigger('change');
});
Here is a great list of javascript events triggered on the WooCommerce frontend:
https://wordpress.stackexchange.com/questions/342148/list-of-js-events-in-the-woocommerce-frontend

Vue- How can I control the behavior of chips in v-autocomplete?

I have a 20-25 names coming from API where I'll need to show them in a drop down box (requirement). I'm using Vue v-autocomplete here to display the selected names on the field. I've used custom item called Select All where the user can select all the names in the drop down list, but what I also need to do when the user clicks on Select All is that I don't want to show all the names in the Autocomplete field including Select All Chip. Only items that are selected individually without Select All should show as Chips.
Here is my code sandbox I've attempted so far. I'm new to Vue js, so I'm hoping to get some thoughts on controlling the chips on v-autocomplete.
v-autocomplete sandbox
Instead of including "Select All" in the array of names, you can use the prepend-item slot to include a separate Select All checkbox.
If you need to differentiate between names selected via individual click and those selected via the Select All checkbox you will probably need a new property in the names array to track that, say a boolean that is true if selected one way and false the other.
You'll also need a slot like selection to customize the display of your chips where you can use v-if to conditionally render a chip based on that new boolean property.
This codesandbox I believe is pretty close to what you're after

ag-grid - Warning "unstable_flushDiscreteUpdates: Cannot flush updates when React is already rendering." in ag-grid

we use ag-grid version 20.2.0.
I am doing something like
``https://plnkr.co/edit/?open=main.js&preview.
I get data from API. Data is an array of objects and object has many values and Boolean value.
This values will be displayed in grid which is react component and button which is also a react component whose display is based on Boolean value.
All works fine until new data comes. New data has only value change which should be changed in only one cell and the button in that row based on Boolean value should be hidden or displayed.
I was able to achieve this but I get warning "unstable_flushDiscreteUpdates: Cannot flush updates when React is already rendering."
After doing some research I found this solutions
https://github.com/ag-grid/ag-grid/issues/3680
According, to this I need to use deltaRowDataMode={true} and getRowNodeId={(data) => data.id} in grid options. Now the warning is gone.
But the Boolean change is not reflecting, only value change is reflecting and cell value is changed and as Boolean value is not recognized the button is not hidden.
In the data when it comes to ag-grid I can see both value and Boolean value changes. But the part where I check Boolean and display or hide button is not getting triggered.
In above github there is also demo which shows the issue still exists.
`` https://codesandbox.io/s/ag-grid-formik-fieldarray-integration-cjcie
Can somebody let me know if I can do any other way updating only one cell value in ag-grid and hiding button without the above warning?
Or is there something else I need to add with deltaRowDataMode?

AG-GRID-ANGULAR - How to check/uncheck checkbox in header component if all checkboxes in the cell renderers are checked/unchecked?

I am using ag-grid. I have a checkbox in the header using headerComponentFramework for a column (here, isBooked) and checkboxes in corresponding cells of the same column using cellRendererFramework.
My requirement is to check/uncheck the header checkbox when all the cell checkboxes are checked/unchecked. And, all this activity keeps the state of data associated with the grid updated.
This is how the grid looks - https://angular-fcgbt9.stackblitz.io/
The situation is replicated at this stackblitz link.
https://stackblitz.com/edit/angular-fcgbt9?embed=1&file=src/app/grid-header-checkbox/grid-header-checkbox.component.ts
Approaches that I tried are -
Using a Subject to emit value change. But, it looks the Subject is not getting subscribed to inside the agInit hook inside the header component.
Using gridApi.refreshHeader(). It looks like the Angular version of the header component interface (IHeaderAngularComp) does not have a refresh hook.
I am not able to update the value of the header checkbox when I run a logic for checking if all the cell checkboxes are checked/unchecked and try to update the value of the checkbox inside the header component.
You can use headerCheckboxSelection event along with onRowSelected event(this will update your data).
Here is a working code

Datatables: how to checkbox checked status change?

My table powered by datatable is 100% working now.
I am now trying to improved look&feel using a custom render function to use more beautiful checkbox.
Actually when I click on a row's checkbox, the row is selected, the counter of selected rows is updated and so on.
But I must 'react' to status change to update the visual side of my custom checkbox.
I tried to add a console.log() to render function and I discovered that it's executed only when doing the first draw with data returned from server, because I'm using ajax.
Is there a function, similar to render, called instead when checkbox value changes?
More precise indications:
Commonly, we have a TD with a INPUT[type=checkbox] as direct child
Now I have TD > DIV > INPUT[type=checkbox]
Commonly, when user check a checbox, the input receive the checked attribute, and browser draw it in the appropriate way based on checked or not status
Now I have no 'checked' attribute automatically set.
So I need to 'intercept' when datatable select the row and apply/remove the 'checked' attribute.
How can I achieve this?
assign function to checkbox when onchange the save the values
$("#table").on('draw.dt', function() {
// call the function of your saved values do the code
}

Categories

Resources