I am trying to dynamically fit columns in the grid.
Is there anything in Ext JS 4 which resizes each column to fit the grid like method fitColumns() in Ext JS 3.4?
thanks
If any one of grid columns has flex:1 then the columns are resized to fit the grid width.
Related
There is an angular grid and it has 25 columns. Now only 5 columns are visible on the page and to make other columns visible, I have to do horizontal scroll.
I want the text of all the column headers as grid keeps on scrolling horizontally across. any help from protractor experts?
This question has been asked many times but no solution yet.
Wrote below code but it is giving me the text of visible columns only.
var gridclass= $('.ui-grid-viewport');
var columnheader= $('.ui-grid-columns);
browser.executeScript("$(arguments[0]).scrollLeft(arguments[0].scrollLeft + 20)",gridclass.getWebElement());
columnheader.getText();
Expected: I should get the text of all the columns as grid keep on scrolling
Actual: I am getting the text of only visible columns on the page
Assuming .ui-grid-columns identifies the table row containing the all the column headers can you try using the inner text attribute like so
var columnheaders= $('.ui-grid-columns');
columnheaders.getAttribute('innerText')
Use getAttribute("textContent") instead of getText().
This issue could be due to DOM not render the whole page completely. You could try to set the resolution of browser bigger like 3840 x 2160, then getText() all column headers.
I Am looking for a Summary row or a Footer row for a grid where i can display total value of all column ,This footer row should not get scrolled(Virtically) .
Please Correct me if i am wrong .A Summary row for a Grid is not available in Dojo as a Default widget.
I Have achieved the above Summary row feature for Grid By
1) Adding a second grid only with Header Just below the Grid where you want footer row ,as a whole its look like a footer row to a Grid
Problems faced are
1) Column resizing i.e., when you resize any column in Grid 1 the same column in Grid 2(Grid with only Header ) must be resized
The above problem can be solved be capturing a resizing event in Grid 1 and propagating the event to Grid 2.
2) When you resize the column we will get Horizontal scroll Bar For both the Grids
Is there a way to propagate Horizontal scroll event from Grid 1 to Grid 2 so that when u scroll the Grid 1 then simultaneously Grid 2 has to get scrolled or how to get only one scroll for two Grids
Is there any other way to achive above feature for a grid .
I have achieved this by "stacking" the grids together. A primary data and footer grid. Use CSS to hide the heading of the footer grid. You have to use javascript to update the sums for the footer grid.
See demo and detailed reference
DoJo EnhancedGrid has a summary property that can be set, as described in the api documentation
I have a textarea in a td element. Currently, when the text area is resized to a width beyond the width of the td element, the entire table resizes to keep the textarea element within the td.
Is there a way to allow the textarea to resize beyond the containing td?
You can add a div with fixed size inside the td around the textarea:
http://jsfiddle.net/kvKZu/4/
(reposting comment as answer)
You can use the max-width and max-height style properties on the textarea. Take a look at:
http://jsfiddle.net/kvKZu/
You can also set them dynamically with javascript if the width and height of the containing row or column is not known in advanced.
I found that applying the style table-layout:fixed to the table fixed this problem.
I am writing a WinRT app and need to change its layout in a snapped view. In a regular view details are displayed in grid of a following structure:
MainGrid: contains 2 rows, 2 columns (let's call them M11, M12, M21, M22)
DetailGrid: occupies rightmost column and upper row of MainGrid, contains 1 row, 2 columns of equal, so the layout looks like this:
M12 contains D1 and D2 layered horizontally
In a snapped view I want DetailGrid to be redefined so it has a single column and 2 rows:
M12 contains D1 and D2 layered vertically
If I didn't care about column width, I could use StackPanel instead of Grid to display details and simply change StackPanel orientation in a snapped mode from Horizontal to Vertical. But D1 and D2 must use all available space in a standard mode and have equal size, therefore I control them via Grid ColumnDefinition. But grid definition is not something that is easily controlled using VisualStateManager.
What do you think would be the best way to manage such layout?
Thanks in advance
Grid definitions are hard to control but I've found changing Grid.RowSpan or Grid.RowColumn span on the controls within the grid should be able to do what you need in snap view
I have a Dojo Datagrid which has 10 columns and about 400 records of data... it doesn't seem like that much but it is very very slow to scroll...
I have another Datagrid which has some 5k records and it scrolls faster. The only difference between the two is that for one I am specifying the height in pixels and have autoheight turned off...
For the smaller one, I couldn't use height = 100% to fill up its parent div because for some reason it doesn't like a percent height and doesn't even render the grid if I specify a percent height - I have to give it in pixels... if I use autoheight = true, then it fills up its parent div which is what I want but then it loads ALL data in the grid at once and so it doesn't do any lazy loading of the data.
Any ideas how to achieve lazy loading and still be able to use autoheight = true (or be able to expand the grid so that it always fills up the height of its parent div)?
Thanks
autoHeight can be set to a numeric value, which will define the maximum number of rows to display