Is variable rowheight a possibility in SlickGrid?

Asked
Active3 hr before
Viewed126 times

6 Answers

variable
90%

I would like to provide variable row height depending upon the content size. is it possible in Slickgrid? , GitLab launches Collective on Stack Overflow , possible duplicate of Can SlickGrid's row height be dynamically altered? – violet313 Apr 1 '15 at 21:48 , Stack Overflow for Teams Where developers & technologists share private knowledge with coworkers

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) {}
});
load more v
88%

Here is the documentation of the extension of SlickGrid by the grid option for dynamic row height (dynRowHeight). As background for this extension we used the second answer of the question 'Is variable rowheight a possibility in SlickGrid?' from the stackoverflow thread.,This is the acknowledged most active non-customised fork of SlickGrid.,Check out the examples for examples demonstrating new features and use cases, such as dynamic grid creation and editors with third party controls.,It aims to be a viable alternative master repo, building on the legacy of the mleibman/SlickGrid master branch, keeping libraries up to date and applying small, safe core patches and enhancements without turning into a personalised build.

Check out the examples for examples demonstrating new features and use cases, such as dynamic grid creation and editors with third party controls.

Here is the documentation of the extension of SlickGrid by the grid option for dynamic row height (dynRowHeight). As background for this extension we used the second answer of the question 'Is variable rowheight a possibility in SlickGrid?' from the stackoverflow thread.

dynRowHeight
72%

je voudrais fournir la hauteur de ligne variable en fonction de la taille du contenu. est-ce possible en Slickgrid? ,Pouvez-vous me diriger vers des exemples?, ajouter du code à la fin du rendu pour redimensionner la toile à la somme de toutes les hauteurs de lignes.,mise à jour de getViewport pour retourner les lignes du haut et du bas en fonction de la somme des hauteurs des lignes.

ajouter le code pour manipuler le curseur et recréer la grille (alternativement, vous pourriez déplacer ce que j'ai dans la fonction "slide" à la fonction "stop" si vous ne voulez pas redessiner sur chaque touche de glissement):

$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) {}
});
load more v
65%

I just tried using HTMLTemplateFormatter and it did not work. As Vivek points out in the SO post, this is a limitation of slickgrid which assumes uniform height of rows for performance reasons. This post describes the problem and several forks to address it. http://stackoverflow.com/questions/2805094/is-variable-rowheight-a-possibility-in-slickgrid,Sorry for the slow response, I was going to say I think it is a SlickGrid limitation which is unfortunate. If you do (or did) find anything that seems like it might be a useful or workable workaround (or even a modification we could make to our vendored version of slickgrid) please don’t hesitate to open a GH issue.,Sorry for the slow response, I was going to say I think it is a SlickGrid limitation which is unfortunate. If you do (or did) find anything that seems like it might be a useful or workable workaround (or even a modification we could make to our vendored version of slickgrid) please don't hesitate to open a GH issue.,And some relevant issues in the slickgrid project:

You can supply a template that is any HTML as a template with slots for the values. An example from the docstring:

HTMLTemplateFormatter(template=’<%= value %>’)

< %= value % >
75%

Flag a row as changed, which could be useful for only sending back changed data to the server.,This example changes a row’s background color, depending on the value of a cell in the row. First you must set a formatter in the columns array:,Before continuing, I’d recommend you review the examples to get a feel for the true power and capabilities of this grid. No other grid can compare to what SlickGrid has to offer.,It’s as simple as defining the columns, data, and any options, then rendering:

It’s as simple as defining the columns, data, and any options, then rendering:

var cols = [{
      id: "fname",
      name: "First Name",
      field: "fname"
   },
   {
      id: "lname",
      name: "Last Name",
      field: "lname"
   }
];
var data = [{
      fname: "Jimmy",
      lname: "Page"
   },
   {
      fname: "Ritchie",
      lname: "Blackmore"
   },
   {
      fname: "Michael",
      lname: "Schenker"
   }
];
var options = {
   enableCellNavigation: true,
   editable: true
}
var sgGrid = new Slick.Grid("#myGrid", data, col);
$("#myGrid").show();
load more v
40%

Qgrid API Documentation,Qgrid is a Jupyter notebook widget which uses SlickGrid to render pandas DataFrames within a Jupyter notebook. This allows you to explore your DataFrames with intuitive scrolling, sorting, and filtering controls, as well as edit your DataFrames by double clicking cells.,Qgrid API Documentation Other qgrid resources qgrid Module ,Automatically use qgrid to display all DataFrames and/or Series instances in the notebook.

[
   'cell_edited',
   'selection_changed',
   'viewport_changed',
   'row_added',
   'row_removed',
   'filter_dropdown_shown',
   'filter_changed',
   'sort_changed',
   'text_filter_viewport_changed',
   'json_updated'
]
load more v

Other "variable-undefined" queries related to "Is variable rowheight a possibility in SlickGrid?"