Is variable rowheight a possibility in SlickGrid?

Question

I would like to provide variable row height depending upon the content size. is it possible in Slickgrid?

Can you point me towards any examples?

Answer 1

I have implemented this in my project, with the help of @Stephen Robinson 's answer here.
If anyone is interested they can check:
https://github.com/vihari/Seaview/blob/version3.0/SlickGrid-master/slick.grid.js.
It can be enabled with the file above if you set options.enableWrap to true.
Thank you.

Answer 2

Plain and simple, this is not supported in SlickGrid and likely will never be. Sorry.

Answer 3

As non of the forks of SlickGrid are really viable options in many regards, I thought it would be valuable to many readers of this post to discuss alternatives to SlickGrid.

I consider 'viable alternatives' that fully support variable row height to be: each row can have a different row height that automatically adapts to fit the content, and lets the text wrap to the next line.

I have looked into this quite extensively, and unfortunately I have not found viable alternatives that are related to SlickGrid. Of other alternatives, I have only found one that is free for commercial use - dojox DataGrid, however it is not clear how you could use custom editors with this (most commercial ones offer this).

There are quite a few viable alternatives that require payment for commercial use: dhtmlxGrid, jQuery EasyUI DataGrid, jQWidgets, Wijmo Grid widget, JideTable, and Sencha ExtJS Grids. Of these, I would personally say the best is dhtmlxGrid http://dhtmlx.com/docs/products/dhtmlxGrid/ - Free version is GPL, Pro version is $199.

Answer 4

I've recently forked SlickGrid to add in a bunch of new features - including variable (and resizable) rows. You can try it here: https://github.com/globexdesigns/doby-grid

Answer 5

As a summary of the above options none of them are official, supported and production ready. Even the doby-grid option (more supported) is still listed as not production ready.

Note, there are also differences between:

• Row height can be changed separately for each row.
• The text can wrap around to the next line.
• The row height can automatically adjust to fit the content.

Surprisingly, with all of the SlickGrid variants above (and many other DataGrid libraries), you might get one or two of the above, but not all three.

If you are not so concerned about official, supported and production ready, then this is my impressions from testing the 3 SlickGrid variants listed above:

Seaview

• Users report problems with only displaying white, not tested with editing cells (warning), pagination may not work (warning).
• My test of the demo found that it wrapped text and automatically varied the cell height ok, but has a bug that rows/borders are off by a few pixels. So may be usable, but not production ready.
• I tried downloading and using it. It has wrapping of text in cells - good. Its auto adjusting of cell height is very broken/incomplete, which makes wrapping of text practically useless (unless you fix row height - not great). I have partly fixed the auto adjusting of cell height, but quite a bit more work to be done. Not a simple task. Does not work out of the box. Definitely not production ready.

JLynch7

• No demo to run without downloading.
• I tried downloading and using it. It is buggy (I had to fix it to get it working), adds variable row height, but does NOT seem to wrap the text and does NOT auto adjust the row height based on the text!. It is not actively maintained. And not very popular, so not very well supported. Seaview seems to be more advanced, even though its "auto adjust the row height" feature is broken.

doby-grid

• Is in alpha - not production ready. Seems like a considerable fork - many changes.
• I tried it. Getting started is confusing, but got it working. Needs bowser and Require JS.
• options.resizableRows is half of what we want - you can manually change row heights dynamically. BUT there is not auto re-sizing of row heights to fit the content!!??!!
• This issue states that "Adding a truly dynamic row height (which is affected by the row's content) will require us to disable a lot of the features.". They offer a couple of possible solutions, but one determined dev tried this and had a lot of trouble with it. He might have made it work, or he might have given up. I am not going to risk it.

Answer 6

Define this variable outside....

var tableHeight = 0;

Before creating the slick grid, use below the lines:

// 30 px for each line this will cover the header... You can adjust this value for your table.

tableHeight = dataTable.length * 30;    

if(tableHeight >  ($(window).height() - 400)){
       $("#myGrid").height($(window).height() - 400);
}else{
       $("#myGrid").height(tableHeight);
}

If user changes the screen when page is already generated, the below will resize the table based on screen and number of rows of data:

    $(window).resize(function() {

    // For grid height
    if(tableHeight >  ($(window).height() - 400)){
        $("#myGrid").height($(window).height() - 400);
    }else{
        $("#myGrid").height(tableHeight);
    }

    // For grid width
    $("#myGrid").width("100%");

    // Resize the grid dynamically. 
    gridName.resizeCanvas();
});