Following this example - http://demos.kendoui.com/web/grid/detailtemplate.html, I have a grid and a tab strip inside the grid. One of the tabs has a grid within. This table is rather long, so I had to add a scrollbar. The grid overflows - though the scrollbar works, the data spills on to the next row, making the whole thing look ugly.
Is there any way to make the inner grid (the one within the tabstrip) not overflow?
I have seen this. Your parent has to grow to accommodate the last row. You can try placing the grid in a parent element and add a padding to the grid parent while setting the overflow to auto.
Related
I created a DataGrid in GWT and made the columns sortable.
The width of the columns in total is wider than the width of the DataGrid. So a horizontal scrollbar appears.
Now the problem is that when I for example sort on the first column, the sorting works ok, but the horizontal scrollbar jumps all the way to the right. This is really an undesired effect.
As soon as the last column is visible this does not happen any more.
Is this a known problem ?
To scroll to the first column of the first row:
dataGrid.getRowElement(0).getCells().getItem(0).scrollIntoView();
If you need to scroll to some specific row:
dataGrid.getRowElement(dataGrid.getVisibleItems().indexOf(object)).getCells().getItem(0).scrollIntoView();
[]'s
I have one WWSD or one SDPanel with some attributes but between these attributes that are fixed inside a Table or directly in the MainTable I want put and Grid, the problem is that the Grid is not showed and when I put the grid its no more possible scroll in the WWSD or SDPanel, is like the Grid stuck the SDPanel more than the grid is not showed.
Anyone can help me to put the Grid and keep with all normally ?
Thx.
I assume you're targeting Android.
The issue is that Android does not natively support nested scrolling. Therefore, a GeneXus layout that contains a grid will disable the form's own scrolling (so that the grid can itself scroll).
There are two ways of resolving this issue:
Redesign the panel so that the form does not vertically exceed the size of the screen (thus, form scrolling is not necessary).
Set autogrow=true for the grid, which will resize to fit all items (and "push down" any other controls located below it). Since the grid will no longer need to scroll, the form's scroll will be enabled.
I have made a window in which I will be having two groups/panels and some buttons in between them. I want to code the resizing behavior in a way that when the window expands, the two panels increase their widths while keeping the distance between them constant.
Please see this mockup:
As you see above, I want the 'Local' and 'Server' Panels to resize while keeping the distance in between them same. If I use anchors (Top+Left+Right+Bottom), the left panel will overlap the right one and the right's width one will go out of the window. I want them to share the increased width of the window equally.
As for the buttons in between, I have kept ancors as Top only. By removing Left anchor from button, it automatically places itself in the center of the window when window is expanded, which is just the way I want it to be.
Any ideas how to manage resizing of panels?
Thanks.
Use the TableLayoutPanel control.
First add the TableLayout to the Form and set its Dock() property to Fill.
Next you'll need to setup 3 columns and two rows. Add the two buttons to the middle column with each one is in its own row. Afterwards, setup the column values so they are like this:
Leave the rows at 50% on both.
Now add your two GroupBoxes to the 1st and 3rd columns in the 1st row.
For both GroupBoxes, set Dock() to Fill, and RowSpan() to 2.
For the top Button, turn on only the Bottom Anchor.
For the bottom Button, turn only the Top Anchor.
For the TableLayoutPanel, set Padding() to 5,5,5,5.
Here is what it looked like when I was all done:
Resize the window and observe how the controls behave...
SlickGrid always maintains a little space in right most side of the header, even there is no vertical scroll bar. This extra space seems like a extra column. I don't want this extra space.
I don't find any exposed API of SlickGrid component to remove this.I have seen inside autosizeColumns() method of SlickGrid implementation that available width is calculated by the availWidth = (options.autoHeight ? viewportW : viewportW - scrollbarDimensions.width) logic. When I avoid scrollbarDimensions.width from the logic no extra space is coming there.
But this cause a problem for forceFitColumns functionality when vertical scroll bar is present there, an unnecessary horizontal scroll bar is also rendered.
Is there any way to avoid this extra space?
Hi Tin,
I want to remove extra space of SlickGrid what I described before. I have checked there is no API or property in SlickGrid to do this. That's why I had modified SlickGrid implementation.
I use v2.1 and when I set:
options = {
forceFitColumns: true
};
slickgrid.setOptions(options);
There is no extra column when vertical scrolling is not needed.
As you can see on the screenshot the segmented control is placed rather ugly this way.
I need it in that place, meaning below the section title and before the second cell for that section. How could I make this better?
I can think of two suggestions that would improve the appearance. The first would be to increase the height of the table cell (just that particular table cell, not all of the cells in your table) so that the whitespace margin at the top and bottom of your segmented control is equal to the margin you currently have on the left and right of the control.
Another solution would be to move the selection of the value for this setting into a separate tableView controller that you drill down to. So that cell would show the current value, but tapping the cell would take the user to a new view where the user could select to change the value.
Here is an example of this from the Instapaper app settings page that I think looks pretty clean.