I am using ng-grid when I drag the window the grid resize well. But when I click a button to make the window bigger,the grid does not resize.
UPDATE: Actually, the grid is resized. However, the row and column are not.
I notice in 3.x they have autoresize function. Unfortunately, I cannot update to 3.x version. Is there any way I can fix it?
$scope.gridOptions.$gridServices.DomUtilityService.RebuildGrid(
$scope.gridOptions.$gridScope,
$scope.gridOptions.ngGrid
);
I used this code the rebuild the grid and it solve my problem.
Thanks for everyone's replay.
Related
I'm not sure if this is the right place to ask because I dont have any code to show. I'm actually looking for ideas on possible ways to solve my problem.
I have an app that displays the grid on the screen when the media query has a min width of a tablet.
But when the view is in mobile mode I don't want to show the grid. Instead I have a drop down menu which has a grid option. When selected will be show in a paper-dialog (pop up)
The problem is I have to create two grids (vaadin-grid) and show the appropriate one based on the view. Is there a way to have only one grid? Can I put it in a paper-dialog but not pop-out when in tablet and desktop view?
Thanks in advance
If your grid element has every custom property then that is an element in the DOM, so you can move it into the dialog if thats needed using javascript:
let myGrid = this.$$('#myGrid');
let myDialogContent = this.$$('#myDialogContent');
Polymer.dom(myDialogContent).appendChild(myGrid);
Also if you think it a different way, then you can hide the grid outside of the screen and you can slide that in when it's needed like a drawer panel and you dont need to move the element at all in the DOM.
By the way for programming question stackoverflow has the https://softwareengineering.stackexchange.com/ site, but I think it is Ok to send it here.
I'm trying to add columns to a ng-grid but facing problem with the last column. Even I set the width of the last column, the component enlarge it to the end of the grid. So when I have more rows, a vertical scroll bar as well as an unnecessary horizontal scroll bar is added.
How can I avoid this?
I solved the problem upgrading to ui-grid. with the new version I have a better control of everything
This Radmenu is dynamically created in code behind.Please let me know how to add scroll bar in this menu to limit the items in the submenu.
Check out this post from telerik forums.
Though it's in silverlight, I'm pretty sure you can use it as is.
Try explicitly setting the Height property of the Menu for that has a lot of menu items and that should add (Up/Down) button I believe
While not a scrollbar, you can set the DropDownHeight property of the RadMenuItem. It limits the height taken by the child menu items, and has up/down arrows to enable the scrolling.
I'm trying to add a Grid into a VerticalLayoutContainer of fixed size (250 px) and have the user be able to scroll vertically.
I'm using the following code, however, the grid does not display at all.
VerticalLayoutContainer vPanel = new VerticalLayoutContainer();
vPanel.setHeight("250px");
vPanel.add(grid, new VerticalLayoutData(1, 1));
grid.setHeight("auto");
add(vPanel);
The Grid displays in other circumstances, but covers up other GUI elements (no scrollbar).
Hopefully this is an easy fix for those more experienced with Sencha GXT.
Thanks to anyone taking the time to help me out...
try this:
vPanel.getScrollSupport().setScrollMode(ScrollMode.auto);
If it doesn't work, then, try this:
`
ContentPanel p = new ContentPanel();
p.setHeaderVisable(false);
p.setBodyBorder(false);
p.setBorder(false);
p.setHeigh(250);
vPanel.add(p);
p.add(grid);
`
then grid, will automaticaly have scroll mode.
I had the same problem with a Grid in a ContentPanel, that is, the grid didn't show a vertical scrollbar. I used ContentPanel#forceLayout immediately after adding the grid to the panel, and it resolved the problem. Here's the actual code:
Grid<Pet> grid = new Grid<>(listStore, columnModel);
grid.setBorders(true);
grid.setColumnReordering(true);
grid.setLoadMask(true);
grid.setSelectionModel(selectionModel);
grid.setView(createGridView());
ContentPanel contentPanel = new ContentPanel();
contentPanel.setHeaderVisible(false);
contentPanel.add(grid);
contentPanel.forceLayout(); // <---- this is the line that fixed the problem!
I am using sencha to update a panel as follows.
I will have a handler for a button.
In that i am removing a docked panel from a panel. and then adding the some new panel as a docked item.
But the contents of the panel are not appearing. They are appearing only when i change the size of the browser window, i.e., maximize it or restore it.
How can the problem be solved?
The code for the problem is as shown below.
handler: function(){
chaptersPanel.removeDocked(chaptersList[chaptersPanel.getStory()]);
chaptersPanel.insertDocked(0,chaptersList[this.no]);
chaptersPanel.setStory(this.no);
chaptersPanel.doLayout();
mainPanel.setActiveItem("chaptersPanel");
}
YOu need to do a doComponentLayout() sometimes. Sencha Touch is a little flakey about it. doLayout is supposed to handle the componentlayout, but it doesn't always