Is variable rowheight a possibility in SlickGrid?

by

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.

More Related Contents:

  1. JavaScript data grid for millions of rows [closed]
  2. Fade animation while scrolling
  3. Difference between .ajaxSubmit() vs .submit()
  4. Check if a user has scrolled to the bottom (not just the window, but any element) [duplicate]
  5. Proper way to wait for one function to finish before continuing?
  6. How do you log all events fired by an element in jQuery?
  7. Deprecation warning in Moment.js – Not in a recognized ISO format
  8. Attach an event in a child iframe to a handler in the parent window
  9. When should I use return false in jquery function?
  10. jQuery .append() not appending to textarea after text edited
  11. Why cache jQuery objects?
  12. How can I differentiate a manual scroll (via mousewheel/scrollbar) from a Javascript/jQuery scroll?
  13. What is the elegant way to get the latest date from array of objects in client side?
  14. How to reenable event.preventDefault?
  15. Read :hover pseudo class with javascript
  16. Enabling Save button on JQ Grid with InlineEditing and CellEdit
  17. Difference between $(“#id”).load and $.ajax?
  18. jQuery text() and newlines
  19. Change table columns order
  20. Callback function for JSONP with jQuery AJAX
  21. Chrome and Safari XSLT using JavaScript
  22. Divide semi circle with stroke-dasharray and on active color fill
  23. ToolTip is not closing with Select2
  24. how to select all class except the clicked element in JQuery?
  25. Specifying the value output of of an HTML5 input type = date?
  26. jQuery form submit() is not working in IE6?
  27. Prevent a link to reload page
  28. Do duplicate ID values screw up jQuery selectors?
  29. How to determine if the client is a touch device [duplicate]
  30. Can you have multiple lines in an element?

Leave a Comment