We have a list of values displayed using react-boostrap-table-next, and another list with same number of elements lets name it placeholder, we dont display the placeholder list using react-boostrap-table-next. There is some requirement where we want to automatically scroll the list displayed using react-boostrap-table-next, on scroll of the placeholder list.
I am wondering how it can be done?
I tried using refs to the list displayed using react-boostrap-table-next, but to no avail as it does not have the scrollTop property.
Related
I have a list of elements. I need to show by default say 4-5 elements which fits into the screen height and remaining elements needs to be fetched on scroll. In using the react-infinite-scroll-component am unable to fix the number of elements required to be displayed based on screen height and also unable to control hasMore prop with state. Attaching the sandbox link below.
https://codesandbox.io/s/sweet-tharp-uhi2cc?file=/src/index.js
I have this component where I'm getting response data from api as an array. I'm then using the map function to iterate through it and display the data in a page successfully. Beside each record, I have an action button that should display single item's details in a react material ui dialog box. The problem is that I don't know how to select an individual item and instead the dialog box is returning all details for all items in the list. I'm using a functional component.
Actually I found a solution on this, I created a new state to hold an individual current id, used the filter method to get each element in the array and then loop through the list and return an individual item on the dialog content using the specific id.
I am trying to show an infinite scrolled list inside a material-ui Autocomplete dropdown list, using react-window-infinite-loader. When I scroll to the bottom of the list, I want to fetch the next page of items from the server. I created a codesandbox example which combines the material-ui Autocomplete example for a virtualized list with the react-window-infinite-loader example. When I scroll to the bottom of the list, the next page of data is loaded, however something is causing the list to scroll back to the top. How can I keep the scroll position after new data is loaded?
Thanks!
I got this to work by using the useAutocomplete hook. I created a sandbox which shows the working code:
https://codesandbox.io/s/material-demo-0fbyb
There is only one problem, that I still cannot figure out. When pressing the down arrow key on the keyboard to select items in the list, you can select items beyond the visible "window" of items. There must be a way to get the list to scroll to the selected item. I am guessing this is because the autocomplete ref needs to be set on the FixedSizeList component, but how can I do this when the InfiniteLoader also needs to pass a ref to the FixedSizeList component?
I'm using react-selectable-fast on a list of items that can be selected. However an item or a group of selected items should also be draggable, which is implemented using react-dnd.
The issue is that the selecting comes in the way of dragging; when hovering on top of an item and trying to drag it I end up selecting instead.
I've managed to fix the issue with a hack: store in state whether currently hovering an item or a group of selected items and if so disable the <SelectableGroup>. However this means that the whole list of items is rerendered every time I move the mouse over an item.
So I would like a better solution but I haven't been able to find one. In the last attempt I put the draggable element (using connectDragSource) on top of the selectable element (using createSelectable) again on top of <SelectableGroup /> and gave them increasing z-indexes, also tried playing around with stopPropagation() and preventDefault() but still the selecting overrides the dragging.
Any ideas?
We are using slickgrid in our angular directive.
And we would like to use another list directive (simple select element with input) in a cell/column of Slickgrid.
I want the list element to be visible when the grid is available, so user knows there is a list. Therefor I am using the list directive as formatter. It Is visible when the grid is rendered.
The Problem:
When the cell that holds list element is clicked, the editor mode is never fired because of the list element click event.
We thought to use an image of list that user knows there is a list, and when clicked open the list.
Is there a better way to do it?
We have managed to get it done using list directive as our rendere/formatter as well as editor.
We made our list directive as ReadOnly so it does not fire click event. And now one sees a list element when grid is rendered. And when one clicks on the cell with list, the list is automatically opened via code. The only problem we have now with this solution is that how to copy selected Item from editor to formatter (if anyone knows, please share).
Any better solution is also welcomed.