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?
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:
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
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.
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.
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.
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.
Plain and simple, this is not supported in SlickGrid and likely will never be. Sorry.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With