i'm working on Kendo react grid and a set reorderable={true} to make the columns reordering.
Now i want to save the new order and i don't found a solution what event should i use to detect when the column move
<Grid
pageable={paginationConfig}
reorderable={true}
sortable
filterable
resizable
style={{ height: '600px', overflow: 'auto' }}
>......</Grid>
can somebody help me please.
See onColumnReorder in the Documentation. Where you store it is the next question... State, store, local storage etc...
Related
I am using material ui ,I want to fix the left side fix and right side scrollable but its not working.I am trying in this way....
<Stack direction="row">
<Box sx={{ position: "fixed", width: "25%" }}>Left-side box content</Box>
<Box sx={{ overflow: "scroll", width: "75%" }}>Right-side box content</Box>
</Stack>
Thanks in advance...
It sounds like you are trying to create a layout where the left side of the page is fixed and the right side is scrollable. To do this with Material-UI, you can use the Grid component to create a two-column layout, and set the style property of the left column to { position: 'fixed' } and the right column to { overflow: 'auto' }.
You can also use grid-template-columns: fixed-value auto in CSS to achieve this.
It is important to note that you will likely need to adjust the widths of the columns and the container to make sure everything fits correctly on the screen.
It is also possible that you are facing some other issue, please provide more details about your code and the exact problem you are facing, so i can help you in a better way.
I have datatable with paginator.
<p-table [value]="data" [paginator]="true" [rows]="10">
When I have no data on the page my datatable is collapsed.
Is it any possibility to set property like [min-rows]?
I have looked in primeng documentation but any results.
I don't want to use scroll.
Have you any idea how to resolve this problem?
Example here
EDIT:
#Shai, this setting makes the whole table goes wrong.
When I set fixed height for my table, for example:
.p-datatable-tbody { height: 500px; }
it looks good but td resizes (picture).
Example here
I am working with React Suite's Grid to display university course data in a calendar format. The grid works great, other than the cell heights not being uniform: An image example of my Grid UI
Here is the code I currently have for the grid:
<Grid
style={{
width: "100%",
height: "100%",
}}
data-testid="grid"
>
{this.state.data.map((c) => (
<Row>
{c.map((e) => (
<Col className="display-linebreak" style={this.formatCell(e)}>{e}</Col>
))}
</Row>
))}
</Grid>
Is there any way to make the height of all cells consistent across their respective row, while still making the grid flexible enough for data intake of a variable number of dates and times? One way I tried to do this is by adding {{ height: "100%" }} as inline style for the Row, but I quickly realized that this or any similar approach will not work, as ultimately it is the cell height that needs to conform to a dynamic row height, based on the automatic heights of the other cells. Another thing I considered is that it may be easier to isolate a cell with respect to a Row if Column is the parent component to Row instead of the other way around, but I don't think this is possible in React Suite Grid.
Basically, my conundrum is, how can the cell know how tall it has to be if there are cells in the row that have not been rendered yet? Is it possible to go back and update the height post-render if a taller cell is found? How does a cell even know which row it is in?
Any tips or insight is greatly appreciated, I am happy to clarify anything or answer questions about it. Thank you in advance!
I did it with adding flex to the rs-row:
.rs-row{
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
Then you can add height 100% to the cols or cards elements inside of them.
In an antd table I am trying to use the columnWidth property in expandable to set the column width as the minimum. In my table the width for the expandable icon column is very big and by default it's quite large for me. I've tried giving a string | number as said so in the documentation but it doesn't seem to work. Is there any other way to set it to a minimum?
expandable={{expandedRowRender: record => <p style={{ margin: 0 }}></p>,
columnWidth: 1,
expandRowByClick: true,
}}
I've tried to use style and margin as 0 but even that isn't making a difference and columnWidth doesn't seem to work.
I am using React Beautiful DnD to create a nested list. I know this is not supported by the library, but I've seen plenty of workarounds and my use-case is relatively simple (no dragging sub-list elements between parent lists; sub-list elements can only be dragged within their respective sub-list).
The issue is as follows: trying to drag elements from the nested list sometimes drags the parent list elements instead. (I just made a long post documenting my problem here.)
I haven't gotten any responses yet, so I stared thinking about other ways to potentially solve the problem. I realized one solution could be choosing only a specific area of each list element that can be clicked to drag, and making sure this area does not overlap between the parent/nested lists.
Seeing that this is possible here, I simply need to add {...provided.dragHandleProps} to the element that I want to serve as the drag handle.
However, my nested list is built using two instantiations of a reusable DnDList component that I wrote, so it gets a little more complicated. Rather than trying to figure out how to specify a drag handle as props, I'd like to just set the drag handle to be list item marker for each list item (the '1', '2', '3', etc next to each list item).
How can I add {...provided.dragHandleProps} to the li::marker elements of my list?
Here's how I figured it out:
I ultimately used CSS to turn off the list item marker (listStyle: "none"), then wrapped each DnDList item in a flex container with a clickable drag icon that I manually placed on the left of the list item (first sibling in the flex container).
I also overlayed an invisible div over the drag icon, and placed the {...provided.dragHandleProps} here. It looked like this:
<div className={classes.listItemWrapper}>
<div
className={invisibleDiv}
{...provided.dragHandleProps} // MUST CLICK THIS TO DRAG
>
<DragIndicatorIcon className={classes.dragIcon} />
</div>
{child}
</div>
Here is what the styling looked like (using material UI):
listItemWrapper: {
display: "flex",
position: "relative",
},
invisibleDiv: {
position: "absolute",
left: "-4%",
top: "36%",
width: "40px",
height: "40px",
textAlign: "center",
},
Hope this is useful for somone!
I could not see your DnD component. But the possible solution is to remove the DragDropContext component from the inner DnD component which must solve the problem. Meaning you must have only one DragDropContext for your entire Draggable and droppables.