I have an ag grid that correctly shows within a div container and fills it. This is simply done by calling ...gridApi.sizeColumnsToFit() on the 'firstDataRenedered' output binding event which fires ONCE when the data is available and bound by grid's [rowData] input binding. Cool.
I am also able to resize the div container the grid is in. However, as the div is resized the grid does not automatically fill with it (note there is no new data so the 'firstDataRenedered' output binding event doesn't fire). How can I automatically resize the grid to fill the dynamic div?
the best solution i got in my mind is to use the gridSizeChanged event and invoke gridApi.sizeColumnsToFit()
here's an example for you
Related
I am developing a Delphi game for my (grade 10) PAT.
I am using an image as a grid for my game and placing individual panels in each grid because I do not know how to use string grids as it's my first year with Delphi. When I place the panels perfectly in each grid of the image and run my code everything looks normal until I go full screen,then all the panels are in each grid but the size is not in proportion with the image as I placed it before.
A solution would be much appreciated.
Thanks in advance.
Use a TGridPanel in place of your image. Each panel goes into one cell of the grid, and with the column widths and row heights set as a percentage (which is the default), and both the grid and the panels in the grid having Align set to alClient, the cells, and therefore the panels, will adjust their size proportional to the entire form.
The use case is to a) allow the user to resize columns and reorder them, which the Grid can do, and then by user reset to what they had.
What I need: how do I a) read/set the column order and b) read/set the column widths? If there's a document with a description of grid column properties and methods, that's what I need. Or, if the column widths and order are stored elsewhere on the grid, the doc for that component.
thanks,
Hank
Based on your requirement, we have achieved the resetting of resize and reorder columns after we do both actions on Grid using getPersistData and setProperties methods. We have locally to store the Grid Properties using getPersistData(it is store feasible of resetting grid properties) method in load event of Grid and you can bind the locally stored grid properties to Grid using setProperties method when we reset the positions and width of the columns in the Grid. please refer to the Grid code example and sample for more information.
[Index.cshtml]
<ejs-grid id="Grid" dataSource="ViewBag.dataSource" allowReordering="true" allowResizing="true" load="onLoad">
<e-grid-columns>
. . . .
</e-grid-columns>
</ejs-grid>
<script>
function onLoad() {
window.localStorage.setItem("gridPorps", this.getPersistData()); //Store the intial renderting Grid properties in global variable
}
document.getElementById("resetprops").addEventListener("click", function () {
var grid = (document.getElementById("Grid") as any).ej2_instances[0];
grid.setProperties(JSON.parse(window.localStorage.getItem("gridPorps"))); //Bind the stored Grid properties in the Grid
});
Sample link: https://www.syncfusion.com/downloads/support/directtrac/252153/ze/filter_core-120629378.zip
Else If you expect to reset the Grid columns positions and width after reorder and resizing the Grid columns. Please share your exact requirement to us it will help validate further.
Please get back to us, if you need further assistance.
Best,
Balaji S
I have canvas with vertical layout and 2 elements within (in fact it's element with only recttransform on it, let's call it container). So these 2 containers take a half of the screen by height and stretched by width, ok. How can I place an text element in above container and snap it to the bottom of this container? I tried press bottom button in recttransform widget (also with shift and alt) and it seems it doesn't affect my transform at all
P.s. May be I can use some free plugin instead of default unity components of UI layout?
There are different ways of placing your UI elements
Simply drag and drop it to the bottom where you want it
Use the anchor widget to set the anchoring to bottom with horizontal stretch and hold shift to also set pivot. Then set Pos Y to 0. Set Left and Right to 0.
Assuming you also want other elements in your containers, place a Vertical Layout Group on each container and make sure that your text element is the last child of the container in the hierarchy.
I would also advise you to seek out tutorials on Unity UI anchoring, positioning, scaling, and layout. You need a deeper understanding of how these things interact than you are likely to get from Stack Overflow. Otherwise you will suddenly find that your UI behaves in unexpected ways when rearranged or displayed on a different aspect ratio.
It's fairly easy with Unity UI system. You just need to get used to it. Here are simple steps to accomplish what you want:
Create Text element as a child of that container.
Select your newly created element and edit its RectTransform component values:
2.1. Set both Y axis anchors (min and max) to 0.
2.2. Set pivot value to 0 as well.
2.3. Set Pos Y value to 0 as well.
Now your Text element is anchored at the bottom of the container and its position (and height) is measured from the bottom of the Text element itself.
Since the way in the MS excel when we click on the grid it auto adjust to the size of the data in the grid. Can we have same functionality here also in GWt.
You can program this by hand by getting the offsetWidth of all elements in the dataGrid or whatever you are using and keep track of the max.
I am using gwt with gwt-dnd and I want to do the following:
1. Select rectangle area by dragging the mouse
2. Select all the elements that are in this area
3. drag all selected elements.
Is there any idea?
On MouseDownEvent record the coordinates of the pointer (event.getClientX() and eventGetClientY()).
On MouseUpEvent do the same. If coordinates are different, you have a selected rectangular.
Get the widget which contains all the widgets or elements that are selectable. Loop through its children.
Compare coordinates of each widget with your rectangular (use getAbsoluteTop(), getAbdoluteLeft(), getOffsetHeight(), and getOffsetWidth()). Select widgets that are totally or partially inside the selected area.
I would add to Andrei's answer that if you to provide feedback by displaying the rectangle during selection that what we do is display the rectangle as an instance of com.google.gwt.user.client.ui.HTML with a style that displays the borders. This is updated using onMouseMove using setPixelSize and setWidgetPosition.
The library gwtquery-plugins offers a MultiSelect feature, so I will give it a try.
gwtquery-plugins