I want to use react-sortable-hoc with react-virtualized's Grid where the rows are sortable. I cannot use the List as I have multiple columns and I cannot use it with the Table because I have too many columns and therefore need horizontal scrolling.
The issue that I am facing is that the Grid does not have a rowRenderer callback as the Table or List has (it only has cellRenderer and cellRenderer), thus I don't know what to wrap the SortableElement around.
I would appreciate any ideas or examples of this usage?
I ended up implementing this as a cellRangeRenderer - see my comment on this GitHub issue: https://github.com/clauderic/react-sortable-hoc/issues/295#issuecomment-344070823
Related
Use: We use ag-grid like we would use excel on our client software. In it we have some custom calculations that I run with the valueGetter function. Our grid has over 50 ColumnDefs. This means that some of the columns are not in view until you scroll right or left respectively. All my functions work and I have no calculation issues.
Issue: When I edit a Value I have some columns that now need to fire the valueGetter. For the columns that are currently in view they fire and run the calcs without issues, however there are some columns that are out of view and some columns are hidden. On these specifically the grid will not run the value getter until it is in view or the hidden flag on the column has been set to false.
The main reason for this being an issue is that because the grid is so wide I have to hide and show certain columns as a "view Groups". I need to know if there is a gridOptions setting or grid Directive that I am missing? Or is there another solution where I can have the calculations for the entire runs when I edit a field.
ag-grid version 23.0.2
angular version 8
Not sure if you are using Adaptable with your AG Grid implementation but if you are then this might help:
We had this issue a while back and we solved it by moving the custom calculations out of AG Grid and into Adaptable's Calculated Columns which will evaluate whenever any relevant cell in the row updates.
Im trying to do trivial bootstrap nested rows positioning and I cannot understand why my rows position side by side instead typical and desired behavior of laying down one under another. I tried to replicate it on fiddlejs and it works as expected, but on my real project somehow behave strange (for me) Please refer to the screenshot. Green and red boxes shows rows which are nested under one column. Each of the rows has column with content within. Probably reason is trivial but i cannot figure it out. Thanks my page with problematic nested rows
I found what cause the problem. .input-group class doesn't work well with .col class, causing nested row not being stacked one under another. Deleting .input-group did the job.
Page with proper rows stack alignment
The documentation in react-virtualized is not clear on how row selection is handled. I need to:
track selected row
highlight selected row
query which row is selected (I care for getting to its data)
It appears that there is a way to handle row click events and change style class on per row basis. I assume I have to roll my own selection tracking based on these parameters. I hope I am wrong and there is a better way.
Than you
The concept of a selected row or per-row styling is not specific to windowing. It's part of application code and should be tracked there- using React's built-in setState probably.
react-virtualized doesn't have anything built-in for this because it's orthogonal to the purpose of the library and I wouldn't want to add bloat (in terms of byte size or maintenance efforts) for features that aren't core to windowing.
I've created examples of doing similar types of things online that you might find useful to look at. For example this slide (source code here) shows click-to-select styling.
I have used React-Virtualized Table in my app, and there are library provided functions for row style and row data.
version: react-virtualized: ^9.19.1,
Link: https://github.com/bvaughn/react-virtualized/blob/master/docs/Table.md
checkout function onRowClick for picking rowdata,
and getRowStyle for giving styling to row.
I'm playing around a bit with Kendo UI for Angular and can't seem to find an easy way to disable sorting on specific columns of a grid.
There's an allowUnsort in sort-settings.d.ts, but I'm uncertain on how to use this (and this appears to relate to removing sorting afterwards, not from the start).
Or perhaps I'm simply using the grid wrong, that's also possible..
My situation is as follows:
I'm trying to use a grid to display some rows, and depending on the type of data, it should render a different icon in the first column. Also, I'm not using a 'real' header in that column, but replaced it with a button to create a new row.
To get my button in the header, I use a <template kendoGridHeaderTemplate ...>...</template>. This always seems to add a link around the header cell if sortable is enabled, which is what I'm trying to avoid (in some cases).
Is there a way around this?
Setting [sortable]="true" for the Grid component will enable sorting globally. Then you can fine-tune which column has sorting by disabling it per column, i.e [sortable]="false"
Here is a quick example:
http://plnkr.co/edit/hLbzC5jKJwVdMtRmh0cH?p=preview
I am creating a dojo data grid following Brad Balassaitis' excellent blog series. I want to prevent the user from resizing any columns.
I know that each column needs the attribute noresize=true, but I don't know where to put that in xpages. I have defined the width of each column using percentages, and that is working. I just don't want the users messing with the widths I have set. I am hoping to not have to programmtically define the grid if I can help it. Is there an easy way to add this attribute?