Is variable rowheight a possibility in SlickGrid?

问题:

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?

回答1:

This is possible but it's not trivial and you will likely take a performance penalty. The way SlickGrid works, it needs to be able to answer the following two questions rapidly:

• For a given row X, what is the top offset for that row?
• For a given offset Y, what row is at that offset?

When you use a static row height, answering these questions is trivial; however, with dynamic row height, you'll need to maintain a couple of extra data structures.

Here's roughly what I changed in Slick.Grid.js

• Add a new array to track row sizes. Initialize all rows to the default size
• Remove the css rules in createCssRules which set the cell height
• Add some code at the end of renderRows which checks the rendered height of each cell in the row and then sets the height of all cells to the maximum (and stores the height in the row size array). You also need to adjust the top offset based on the sum of heights of rows above the current one.
• Add code to the end of render to resize the canvas to the sum of all row heights.
• Update getViewport to return the top and bottom rows based on the sums of row heights.
• There are a handful of other places where options.rowHeight is used. You can ignore some of them but at the very least, anywhere the canvas is resized needs to be changed.

To make this practical (performant), you'll also need a cache of row top offsets (a cache of sums of row size). This will enable quick computation for the first question and will allow for binary search to answer the second.

I hope that helps.

回答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.

回答3:

I know this doesn't meet the heart of the question, but decided upon a simple solution for now that is minimal effort and meets my requirements at the moment. So, this is just in case others were looking for a simple solution as well.

I started with an input box, where changing the value would resize the row. However, I've now settled on using a slider. As a matter of fact, since I have such little data in my grid (guaranteed to be small amounts of data, and very few rows), I dynamically resize the grid as the slider slides. Now, I know many will say this is a terrible idea because it can be horribly slow, but again, I'm using a very small amount of data.

The key is that I recreate the grid again with the new rowHeight value set in the options.

1. Include jQuery UI:
2. Create elements for the slider and the value
3. Be sure your grid is set up and initialized for when the page loads.

4. Add the code to handle the slider and recreating the grid (alternatively, you could move what I have in the "slide" function to the "stop" function if you don't want to redraw on every sliding tick):

   $j( "#resizeRowSlider" ).slider({
         range:"min"
       , min: 50
       , max: 200
       , value: 50
       , create: function( even, ui ) {
           $j("rowResizeValue").html( "50" );
       }
       , slide: function( event, ui ) {
           $j( "rowResizeValue" ).html( ui.value );
   
           options.rowHeight = ui.value;
   
           // I do a manual resize; you could use autoHeight:true in grid options
           resizeGrid();
   
           grid = new Slick.Grid("#" + gridElemId, json, columns , options);
           grid.setSelectionModel(new Slick.RowSelectionModel() );
   
           refreshGrid(); // Handle invalidate, resizeCanvas
       }
       , stop: function( event, ui ) {
       }
   });
   

Also, I should note that this is not on a per row basis, but again, it fits my needs for now. It's not ideal, but it works. Additionally, if you really need to render the grid the first time without any overflow, you can create a hidden div whenever you get the text in question and add display:table-cell, then get the div height and set that value the grid options for rowHeight. Then, create (or recreate) the grid.

回答4:

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

回答5:

There is also the variable height implementation by JLynch7 on github:

https://github.com/JLynch7/SlickGrid/tree/variableRowHeight

As far as I understand the height is set by user and not automatically computed based on content of the row's cells (I only looked at the example/example-variable-row-height-dataview.html)

回答6:

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

回答7:

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.

回答8:

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?

回答9:

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

回答10:

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.