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'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 2

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 3

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

Answer 4

To Vihari Piratla's solution - I've downloaded Seaview, modified its /SlickGrid-master/examples/example1-simple.html to add the new option enableWrap - during my test the example1-simple.html continue to work as expected when enableWrap is set to false, but when its set to true the grid is drawn empty with no content. I was wondering if there are special way use the enableWrap option?

Answer 5

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();
});

Answer 6

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.