I'm about to test a website with Selenium. There is implemented a table with SlickGrid.
I have the Problem that when I read in a row i get only 29 columns but there were about 40 (in real).. This cause to 100% to the virtualised scrolling.
I'm wondering, what's the default amount of columns which appears in the dom?
It took me a while to resolve how it's done and I can say it's a bit tricky. There is no such thing as a "default amount" of columns, this amount is getting computed, see below for a bit of technical details.
You can check the slick.grid.js files line 1787. There is a function cleanUpAndRenderCells(). This is responsible for calculating and rendering the cells which aren't on the grids canvas. For example when you scroll the horizontal scrollbar, this function gets called and based on the direction of the scroll they check if the next set of cells aren't on canvas and can fit the canvas, they append the cells to the DOM.
For the matter of reading the row values
I see two possible ways of doing that using javascript.
If you are using a data array as datasource:
data[grid.getSelectedRows()[0]]
If you are using a DataView as datasource:
grid.DataView.getItemById(0)
Both will return an Object with property names of columns.
However I'm not sure how/why would you integration test this, the slickgrid package is already tested, you can check it here.
Related
Is there is a way to represent grid in kendo, so that the title will be in the first column and the data will be in the second column and so on
I want to generate the second grid but I only find the grid is genereted is like the first one
What you are looking for is called a vertical grid (or a property grid if you want to display a single record) and it ain't supported out of the box by Kendo (as July 2015). Many components of the grid (like the scrollbars) are hardcoded in Kendo's library and are not made to be modified. Since the grid source are available, you could, in theory, modify the code to create a vertical grid but that would have a lot of impact all over the place and with those changes you can't expect any kind of support from Telerik.
I already requested a vertical grid back in 2012 in kendo's user voice but Telerik haven't reviewed it yet.
For now, the only simple workaround I can think of would be to pre format your data to invert the columns with the rows. However, this as some limitations. For instance, you won't get any header support (filter / sort) nor the virtual scroll support. If you don't need those support, then you could use the grid to do what you want.
jqGrid offers a bunch of fantastic features, but there is one feature missing that my customer keeps on complaining about (OK, he is never really satisfied with what he gets ) and that's proper vertical and horizontal scrolling. The grid I had to set up contains about 20 columns with some columns containing longer text so the grid won't even fit a 24″ screen. To properly layout the grid and the rest of the visual components (i.e. additional search and filter functions above the grid) I moved the grid to a scrolling div being about 95% of the screen width with a horizontal scrollbar to scroll the oversized grid, the problem with that workaround is that you won't see the vertical scrollbar of the grid itself, it only becomes visible if you first scroll to the right and that's not really comfortable.
Hope my explanation is comprehendible? If someone knows a good workaround, I would be eager to know it! Otherwise a "dual scrolling grid" would be a nice feature in 4.5
Thanks a lot!
Video example http://screencast.com/t/gPdOVPQlRc
jqGrid have many many options. It could be a problem with usage of jqGrid. The grid with many columns could be displayed in different ways.
One way is just to display full grid on the page and to use scrollbars of the browser windows. If you have simple page layout then the way could be really the best.
Another way could be to use shrinkToFit: false option. In the case you should specify the exact width values for columns in colModel. If you use shrinkToFit: false option you can set width option of jqGrid. In the case horizontal scrollbars will be placed in jqGrid.
In many cases the grid with many columns contains not always really interesting information for every user. So it can be helpful if you would provide columnCooser in the grid. Additionally you can save the users preferences in localStorage (see the answer and another one). It could improve user experience.
You don't wrote about the height of the grid, but the usage of height: "auto" produced typically good results.
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.
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.
How do you force a row to be a given height? I have a grid that has a column that sometimes has lengthy data and the rows auto-size to fit it in. I'd like to force the rows to remain a uniform height, however all of my searches seem yield results from people trying to achieve the exact opposite.
What you need to do is just set the CSS attribute 'height' of the row (of the <tr>) element. It is important that you can do this only after the row will be created. So you have to place the changing of the 'height' inside of loadComplete of gridComplete event handle.
The answer contain working demos. The usage of setRowData inside of the loop is not the best way from the performance side, but nevertheless the demos shows the main idea how to set the fixed row height dynamically.