react-virtualized Changing column width with MultiGrid and CellMeasurer - react-virtualized

I am using a MultiGrid with variable row heights, and I have some code that allows the user to change the width of a column. I understand that doing this does not change any props on the MultiGrid, so I need to call some of the methods on MultiGrid to "kick" it a bit to rerender properly. I found that for fixed-row height case, I can just call MultiGrid.recomputeGridSize() and that seems to work fine. But in the variable row height case (which uses CellMeasurer and CellMeasurerCache), I can't figure out the right order of calls to make. In my component which has a MultiGrid, I tried calling:
this.cellMeasurerCache.clearAll();
this.multiGrid.recomputeGridSize();
That forced things to rerender, but everything looked munged. I also tried following that with a call to
this.multiGrid.forceUpdateGrids()
But doing that only got the column widths to look right, but the row heights were all wrong. However, as soon as I scrolled a bit, everything magically looked great. Can someone suggest the right sequence of calls to make to get things properly rendered?

Related

Bootstrap flex nested row positioning side by side instead one under another

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

Can't resize columns in grid

I have several custom screens which have grids. On all but one of them I can resize the columns. In the one where I can't resize, I'm using BLC code to determine when to hide the column and what to display as the name of the column. I do this as follows:
PXUIFieldAttribute.SetVisible<xTACOpenSourceDetail.string03>(OpenSourceDataDetail.Cache, null, true);
PXUIFieldAttribute.SetDisplayName<xTACOpenSourceDetail.string03>(this.OpenSourceDataDetail.Cache, ossd.String03);
All my grids are set up the same way, except for this one difference. Is there an attribute or property I can set to make sure these columns are sizable as well?
After dissecting this for a while, The solution I've come up with was to re-create the entire screen from scratch. This corrected the issue, and I can only conclude that something became corrupted within the original screen and could not be refreshed or recompiled. It is still unknown what caused the issue to begin with.

Disable sorting on one or more grid columns in Kendo UI for Angular

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

OpenEdge: Get clicked column in a browser

I have a browser object and I'm trying to get the number of the column in which the user clicked a cell - is that possible? My browser is called brw-misc so when I try:
brw-misc:CURRENT-COLUMN
I get '?' in return unless I've clicked on the column heading to sort the records before that.
brw-misc:COLUMN
Always returns '1'.
The CURRENT-COLUMN attribute only works with editable browsers. That's probably why you're getting a null (?). The COLUMN attribute is where the browser is positioned on the frame.
If the browser is editable, you can use
brw-misc:CURRENT-COLUMN:LABEL
to get the column label. You can then use that to figure out which column number that is.
TheDrooper offered some good advice above.
If that column is editable, and clicking it actually gets inside the field (to update the value), then you can query FOCUS:NAME to learn what is the column name you just clicked. It's a handle, all handle attributes apply.
It's going to be way trickier if you don't have the fields enabled, though. You didn't specify if this is client GUI, I'll go ahead and assume it is (rather than Webspeed). You need to capture mouse coordinates using Windows DLLs, your window coordinates (using X and Y attributes), then your browse columns X and Y, and hope that browse is not horizontally scrollable, lol.
If you do all that, you can tell which column they clicked on. Oh, and since (As far as I understood) you're more worried on which column he clicked on, rather than which cell, you're going to value X over Y (but don't forget to test to make sure they actually clicked INSIDE the browse at all).
Off the top of my mind, that's what I can think of. Not sure if it helps, but it might point you somewhere!

TableWrapData: widgets won't left align properly

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.

Resources