React-select visual state resetting on scroll - javascript

I have this React website, with a spreadsheet (using ReactGrid). The spreadsheet has a column of dropdown cells (using React-Select).
When I select an item from the dropdown, the script updates the spreadsheet (that is saved as a state). And it displays like so:
Now, here is the issue. It's a long spreadsheet (100 columns). When I scroll all the way down and then scroll back up, the sheet "re-renders", and the option I just selected is not displayed anymore.
console.log shows that the sheet is in fact updated, and the correct value of "United States" is selected for the cell, but visually - it's gone. Important detail - I tried it with the text cells, but the issue isn't present with them.
I don't know what pieces of code to give here, so if you've any prompt on where to look for the issue, I'll provide the relevant lines. Thanks.

Related

how to clear state after select menu option changes

So I have the sandbox of code right now which is plotting polyline data based on the option selected the issue is right now from the code i have provided if you run the first one initially then quickly hit the button again to pause it then change the select value to option 2 and run again it seems to plot a line between the two. Where as I want the replayMap to re render itself when the options selected changes so that the data that is going to be plotted is only the data from the current select menu value. So basically cannot figure out how to set nextPosition state or props.activityData back to empty after the user chooses a new select menu option:
code sandbox link: https://codesandbox.io/s/distracted-sun-jwk3dg?file=/src/ReplayMap.js
I have been at this for hours but still cannot seem to find where I am going wrong can anyone that is more experienced in react spot my fault

W2UI Grid selects entire row when clicked, how to select single cell or column for copying?

Running into an issue with the W2UI grid.
Goal: I'd like to be able to select an entire column and copy/paste it to Gsheets. Alternately I'd like to be able to click a single cell and copy it's contents too.
Issue: When clicking it selects the entire row including all irrelevant columns, and copying that includes headers too, meaning it has to be cleaned manually before it can be inserted into a spreadsheet.
The "editable" property allows me to select a single cells contents but even that's not quite what I'm looking for as it required 2 clicks, highlighting text then copying, adding 3-4 button presses to the process.
Can't seem to find the answer on how to fix this in the documentation but I may just be missing something.
Option 1:
You could (temporarily) switch the select type from row (default) to cell.
Just make sure to remove any existing row selection first, otherwise it may look confusing.
Assuming your grid is named grid:
w2ui.grid.selectNone();
w2ui.grid.selectType = 'cell';
w2ui.grid.refresh();
Fiddle: http://jsfiddle.net/yghueLxp/
Option 2:
There's also a new (undocumented) feature to add a copy icon to whole columns - also demonstrated in the linked fiddle, on the first column.
All you have to do is add clipboardCopy: true to the column properties.
For this new feature you'll have to use the dist files of the current github master - it's not available in w2ui 1.5 RC.
By the way, you can make the grid behave similar to an Excel sheet, allowing copy & paste of multiple cells, see: Spreadsheet Like JavaScript Grid
I'd like to be able to [...] paste it to Gsheets
The copied values are TAB separated. This works well when you copy&paste to/from MS Excel. I don't know about Gsheets.

Chrome input caching too slow

I have a website which has 3 select boxes at the top. These select boxes are used as filters for a table I am displaying underneath it. When you change something on the select box I filter the table.
If I change the select box values and go to a new page and hit the back arrow at the top and return to the same page all of my select boxes changes are still there. However, the filter that I applied to the tables using javascript does not match the filter displayed. The table displays data for the default filters.
I though if I just run the filter function on page load, things would work again. But turns out the filter function runs way before chrome resets the value of the select boxes from the cache. When I set the breakpoint and started debugging the progression on returning back to page is:
1. The select boxes resets to default values (i.e the order of the `<option>` tag)
2. The table filters based on the default values
3. Chrome at some point decides to readd the filter
How do you guys deal with this?

Insert an image into a Google Spreadsheet that executes its own code when clicked by a user

I'm creating a spreadsheet that lets a user select an item from a custom menu, then automatically populates the sheet with relevant data for the item they chose to add. Think of it like a configurator for a burger, where users can click "Add tomato" and the spreadsheet automatically creates a line item for tomato and adjusts the total cost of the burger at the bottom.
I also need a way to selectively delete items the user no longer wants.
I'm trying to insert an image next to each item that resembles an X symbol, and attach code to that image that will delete the corresponding item and all associated data.
The insertImage() function doesn't seem to allow this. Any ideas?
Thanks for any help!
You have two options:
You can manually create a button (an image with a script linked). Click the arrow at the top right of an embedded image and select "Assign script..."
You can program your own add-on (or find an add-on that someone else created that does the exact thing you're looking for). See https://developers.google.com/apps-script/quickstart/docs
At this time it is not possible to attach a script to an image that was added using Google Apps Script
Also addressed in Adding Buttons To Google Sheets and Set value to Cells on clicking

Changing database values in an HTML table

I have written a control panel for managing devices, however as we have imported hundreds of them, there are a lot of values that need to be manually set. I have an overview page that shows the most import information and I am looking at some way to allow the end-user to change those values by clicking them.
Right now they are just text in TD cells pulled from the Database. Would it be possible to do something like double clicking the cell changes it to a drop-down box of options and then when deselected it automatically saves it to the database?
I have been searching Google and Stack Overflow but I am not even sure what to search for to get an idea of how to accomplish this.
To do this you must (short version):
Handle click event on your value from table
Change(hide text and display input) text for input with setted value
Handle blur event on your input
If some changes have been made, send Request (by AJAX) to your php actions which save value in database. Or do nothing if there were no changes.
Change(hide input and display text ) input to text

Categories