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.
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.
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
The textarea-class in JavaFX should give me the option to add rows and columns, but the way I tried didn't work:
TextArea ta = new TextArea();
ta.setPrefRowCount(100);
ta.setPrefColumnCount(100);
I'm searching for columns/rows like in Microsoft Excel, inclusive the gridines.
.setGridLinesVisible(true);
doesn't work for this Type.
For use case similiar to Excel you're actually looking for TableView. Every table cell can contain anything, even another window so it is very flexible.
If you want grid lines on top of TextArea, but want to keep the standard TextArea behavior, you will have to combine the TextArea and TableView in a StackPane.
You will just have to clear the table's background using CSS.
However, matching the row and column sizes with the text will need some additional code.
Apologies for my English.
colums/rows like in Microsoft Excel, inclusive the gridines
TableView as recommended in Michael's answer is likely the right basic solution for.
There are some 3rd party controls you might consider which add some basic spreadsheet like functionality to the base JavaFX TableView control:
SpreadsheetView from the ControlsFX project.
TiwulFX from Panemu.
I have developed a list in SharePoint. While entering new item in it, like name, if I keep on typing it gets spread over a line making the width of cloumn spread over page. I want to limit the width of site column so as the column's value spreads over multiple lines instead of spreading over one. How can I do this setting?
This is not a setting you can configure in SharePoint. You will need to write some custom code using css and possibly javascript that will set the width of the column. You can make a change like this in SharePoint Designer.
You must use min-width (CSS) in your block.
You have to create custom XSLT for this. There you have loop all the column and need to specify the overflow:auto, hidden,.. CSS property. So it automatically get effect based on your internal name of the field.
So whereever you have the field it automatically get affected. If it for one single view you can use JavaScript to achieve this but this is not right way to do.
The data you are entering can be displayed in many ways. Today in a table format, tomorrow in a dropdown etc. You should distinguish between:
limiting the amount of data that can be entered in a site column (can be done in SharePoint alone, when you design your list)
limiting the wrapping of the words in a table cell today or trimming the values in a dropdown tomorrow (can be done using HTML/CSS "nowrap" if you display the list values in a browser app, or differently if you show the values in a WinForms app)
I have a tree Grid where I want to provide for a Search facility and highlight the results in a tree. I looked at the link How to search for a row and then select it in jqGrid? and the same works fine.
However my Grid is a tree and as mentioned in the link Selecting multiple rows in jqGrid tree, MultiSelect:true option does not work. Hence when I search for a pattern, only the last row with the matching pattern is highlighted. I want to know how to highlight all the rows with the matching pattern.
The solution provided in the link Access jqgrid elements using a javascript suggests providing checkboxes to get a list of selected rows, but my requirement is to highlight the rows which satisfy the search result.
If this description is not sufficient, I will provide for my jqgrid definition, but I thought this is a generic issue and hence am currently not pasting the same.
Thanks much in advance
I changed the background color of the rows that match the search pattern and that served my purpose. Another link that helped me is - jQuery Highlight Effect with no fade away
If you have the id's of the rows that have matches..
You can do..
//matchingRowIds
$.each(matchingRowIds, function(rowId, _){
grid.setSelection(rowId); //or however it is that you're selecting the row
});
Note: Do not call resetSelection() whilst calling setSelection()