New to SlickGrid here, and have a couple questions:
1) Is it possible to change the orientation of the column labels? I would like to display a grid without horizontal scrolling, and the data can easily fit if I limit the width of each column. However is I do that, I dont have enough space for my column labels. So I am wondering if - like in excel - I could change the orientation of the column labels (to say 45 degreees vs. horizontal)? If not, any other suggestion?
2) Is it possible to display D3.js type elements (shapes etc) inside cells? If not, are there options to display things such as color coded stop-lights type things?
As you might have guessed, I am building a dashboard that pulls data from a summary table in a DB, and need visual eye candy. It's probably all doable in D3.js, but I'm looking for a faster way to implement, and a data grid appears appropriate.
Related
I have a collection view showing a simple one-column list with a NSCollectionViewCompositionalLayout. The cells take the full width and have a fixed height.
I would like that, upon an external event, one of the cell grows in height (animated).
That could be for example :
when the cell is selected
when an image shown in the cell is downloaded
I found no way to do this in Apple's doc, when I think this is a fairly common use case. It seems that NSCollectionViewCompositionalLayout is very flexible in positioning cells, but very static. All cell sizes are computed once and for all.
Is there any API for this ? What's the way ?
I am using Tableau for data visualization and generating lists that can be exported to Excel.
However, when the amount of columns get too big, I cannot see all my columns in the view (They are there though). The problem is that there doesn't seem to be a horizontal scrollbar. I can scroll vertically through my rows, but I haven't found a way to do this horizontally to look through my columns, the same way you would do at the data source tab.
If anyone could help me to figure out how to achieve this that would be awesome! I am using Tableau Desktop version 2018.3 on a Mac.
Edit: The problem also seems to be on Windows and is not related to the maximum amount of columns or the view mode.
Example image of the described problem
You are not getting scrollbar because you are viewing it on a worksheet. Try putting it on the dashboard and set dashboard size to fixed and increase width to accommodate all columns.
now you will get horizontal scrollbar for sure
thanks
Besides updating the horizontal row/column label limit #Bernardo mentioned here:
You'll need to make sure you've have selected "Standard" from the display option list at the top of the screen. That options prevent Tableau from fitting everything into the height, width or view of your current display.
Tableau shows a horizontal scroll bar for measures, but not for dimensions. When only dimensions are included on either the Columns or Rows shelf, the lower horizontal scroll bar will not display. Dimensions are treated as headers for measure aggregations and do not generate a horizontal scroll bar when they exceed the width of the view.
To change the Table Layout and increase the number of columns and rows in your table, go to:
Analysis > Table Layout > Advanced
Set each of the Maximum values to 16, which is the limit allowed.
We want to use slickgrid to overlay clunky and inflexible tables of data on hundreds of existing web pages built from business forms. Some tables are for display only, others are for user input/update. Thus, the real estate (and column/row counts) is set in concrete. To avoid conflict with the parent page styles, the grid is placed in an iframe. The approach has to take into account a caption bar, optional filter bar on inquiry-only tables, column header bar, and footing pager bar (only if required). Getting the ovarall height correct is the most difficult. It looks like the available tools are:
the geometry of the iframe
the geometry of the grid-container div in the iframe
options.rowHeight
options.headerRowHeight (if inquiry)
line-height css style
Font-size css style.
It seems that there is some mysterious arithmetic going on to calculate the number of rows displayed, the canvas size and the viewport size; and setting some of these items directly with script breaks the grid.
As a simple example, assume the height available is H pixels and must contain R rows of data. Are there any formulas or guidelines that give values to the items listed above? Or must we struggle with trial and error to make a good fit?
I want slickgrid to autosize the columns based on the widest content or header text - whichever is wider. In simpler terms, I want it to simulate the default behavior of regular HTML tables when it comes to column sizing. How can I do it in slickgrid?
When constructing your options, you can use forceFitColumns: true
var options = {
enableCellNavigation: true,
forceFitColumns: true
};
This will make the columns fill the entire width of your grid div.
The OP is looking for columns to grow to match their content. grid.autosizeColumns() grows the cells to fit the parent container, which is not the same thing.
I have added this feature, and it is about as manual as you might imagine. You loop through the displayed cells and measure each one, saving the widest cell and using that width to set the width of your column. SlickGrid gives you good access to the cells in the viewport, so that works nicely.
The measurement algorithm is your big decision. You may put the content off screen and measure it, as #jay suggests. This works, but it is the slowest method, as it requires a repaint to insert, and a repaint when you remove. There may be ways to optimize. The solution I went with is to measure the width of every letter in the alphabet, as well as other typographic characters we come across, and sum them to generate a width. Yes, this sounds absurd. It has many constraints: The font size must be the same, it doesn't support images, there can't be any line returns, and more. If you can live with the constraints though, you can calculate sizes for a huge grid viewport in <5ms, because the character widths are only measured once.
After you get the sizes of the columns, you assign them to your columns using grid.setColumns().
Slickgrid will not support column auto size based on data.You need to write a plugin or fork the slickgrid core to modify.
Here is the link I have created a plugin to handle slickgrid auto size
https://github.com/naresh-n/slickgrid-column-data-autosize
I added this after the grid is drawn and it works fine.
$(window).resize(function() {
var cols = grid.getColumns();
grid.setColumns(cols);
})
You should be able to call the autosizeColumns() method of the grid object.
grid.autosizeColumns();
Make this simple adjustment to Naresh's https://github.com/naresh-n/slickgrid-column-data-autosize, on the init function:
Add $container.ready(resizeAllColumns); to the init function.
This ensures the columns autoresize on initial load
Insert the text into an off-screen element and retrieve the width of the element. This is what excanvas does to measure text. Use this to set the width of the column since it's expecting a pixel value.
I have a whole bunch of very narrow columns in a DevExpress GridView and I want to save on column header width by making the caption text (which is too wide even at 3-4 letter abbreviations) slanted / diagonal. Well, so I guess I could get rid of text captions and replace them with pictures of diagonal text, at least if GridView will allow sufficient height for the header.
Is there any built-in way to just display the rotated text without going the image way? I don't think I am the first programmer out there trying to squeeze out horizontal space like that, so this doesn't sound like an outlandish thing to support in a popular grid component :-)
If not, and so I do have to use an image for column header, any relevant suggestions or warnings?
XtraGrid does not provide a built in functionality to show column header captions this way. However, this can be done within the CustomDrawColumnHeader event handler. We have posted a tutorial showing how this can be done. By default, it should be located at:
C:\Users\Public\Documents\DevExpress 2010.2 Demos\Components\WinForms\XtraGrid\CS\GridTutorials\GridVerticalHeaders
NOTE, as this feature is implemented using custom draw. It means that this text is only painted this way. Custom drawn text won't be exported or printed.