I am trying to essentially make row expansion work in an already full-fledged Grid component. Basically when we click a cell in row index 0, it should inject a new div under that "row" with more information about that specific "row".
("row" = collection of cells)
From reading the docs I understand that cellRangeRenderer is called when we are rendering a bunch of cells together. I tried implementing my own range renderer where I would have a div parent wrap the cells in a row and possibly add more UI elements into that div based off of a prop, but it seems to render the content as more of an overlay.
Does anyone have any insight into how I can inject a new "row" under the currently clicked "row"?
If you need more info, I would be happy to give it. Just didn't know how much info would be too much info. Let me know if anyone has an idea of how to go about this!!
Related
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'd like to create a PropertyGrid alike using dgrid (and dojo). As far as I can see, a single column may only contain a single editor type. Is there any workaround to have different editor controls for different cells in the same row?
The Editor mixin seems to create a single cached editor control per row, but maybe there is something I have missed.
Thanks a lot!
There is no mixin available to achieve the functionality that you have described. But, you could do one of the two things.
1) Instead of using editor, you could use the renderCell function in the columns to return different inputs/widgets depending on the column value/row data. In this case you would need handle the events and update the store.
2) If you still want to use editor, there is a workaround. by using dojo/aspect. You would need to listen to the insertRow method of the grid. And update the cell with appropriate widgets for the cell element. Below is the snippet for the same.
aspect.after(grid, "insertRow", lang.hitch(this, 'updateRowWidgets'));
function updateRowWidgets(rowElement){
var cell = grid.cell(rowElement, <columnid>);
var rowdata = cell.row.data;
var rowWidget = .... //Create your widget according to row data.
cell.element.widget = rowWidget;
return rowElement; // remember to return this.
}
Hope this was helpful.
UPDATE: The second option would work only with editOn, as the widget will be shown/added to grid after the editOn event, and you would be able to switch the widget before that happens. Otherwise the widgets would be added to the grid before insertRow is completed.
My program uses TableWrapLayout with numColumns set to 2. I then have the following code: (background colors are set to show you that the widgets aren't using the blank space).
Label label = toolkit.createLabel(container, "Resource Type":);
label.setLayoutData(new TableWrapData(TableWrapData.LEFT,TableWrapData.MIDDLE));
label.setBackground(DiagramSettings.NODE_BACKGROUND_COLOR);
resourceComboMenu = new Combo(container, SWT.READ_ONLY);
resourceComboMenu.setBackground(DiagramSettings.NODE_BACKGROUND_COLOR);
resourceComboMenu.setLayoutData(new TableWrapData(TableWrapData.LEFT,TableWrapData.MIDDLE));
However as you can see in the picture the combo box refuses to left align properly. But that I mean I want it to start right after the label, not have a bunch of blank space.
One workaround would be to put the row inside it's own Composite just like I do Resource Icon and Geolocation. But I feel like I shouldn't need to since the widgets on this row equals the number of columns set by the layout. I've created this workaround for now but would like to understand this TableWrapData behavior for the future.
Any insight would be helpful, thanks.
I pretty much answered my question in the question. The composite that contains everything in the picture had TableWrapData with columns set to 2. TableWrapData essentially draws a straight, vertical line between each column then makes sure widgets from one column don't cross it.
So to fix this (like I mentioned in my question) you simply make another composite with nested widgets (which in the case would be the resource type label and resourceComboMenu). I just didn't realize that is what you're supposed to do.
I have an ext.net page containing a table built by TableLayout. It is similar with the example shown on the official demo site. (link) The only thing different is I have combo box, textbox inside those Cells, not just a bunch of panels.
Now, there is the need to dynamically hide some textboxes based on the selection of a combobox. What I have done is to set up the combobox to AutoPostBack="true" OnValueChanged="comboboxname_OnValueChanged" .
In that code-behind method comboboxname_OnValueChanged, I check the selected value and do a textboxname.Visible="false". Then I got the unexpected: the whole Cell that contains that textbox is removed. And my whole table is messed up!
Then my guess is that the Cell must remain in place to occupy the position. My next try is:
mytablelayout.Cells[5].Clear();
mytablelayout.Cells[5].Add(emptyLabel);
here, the index 5 is the table cell with the textbox I want to hide. and emptyLabel is an ext.Label which displays nothing. Unfortunately it does not work.
My third try is to build an empty cell first. then,
mytablelayout.Cells.RemoveAt(5);
mytablelayout.Cells.Insert(5, emptyCell);
I found RemoveAt(5) can be successfully executed, which again messed up my table because the next cell just moves from its supposed place. But the Insert(5, emptyCell) just never did what I want.
Now I am really at my wit's end. Can any ext.net expert give some advice? How did you manipulate the Cells in a TableLayout?
Thank you for any helpful input.
make a CSS class with display none.
.myClass {
display: none;
}
set the textbox cls property to the CSS class made earlier
textboxname.cls = "myClass";