Questions tagged [slickgrid]

SlickGrid is a specialized JavaScript grid/spreadsheet component optimized for high performance, even with many thousands of rows of underlying data.

SlickGrid utilizes virtual rendering to enable you to easily work with hundreds of thousands of items without any drop in performance. This is achieved through virtual rendering where only what’s visible on the screen plus a small buffer is rendered. As the user scrolls, DOM nodes are continuously being created and removed. These operations are highly tuned to provide optimal performance under all browsers. The grid also adapts to the direction and speed of scroll to minimize the number of rows that need to be swapped out and to dynamically switch between synchronous and asynchronous rendering.

It is an advanced component and is a bit more difficult to learn and configure, but is correspondingly extremely flexible.

Some highlights:

  • Adaptive virtual scrolling (handle hundreds of thousands of rows with extreme responsiveness)
  • Extremely fast rendering speed
  • Supports jQuery UI Themes
  • Background post-rendering for richer cells
  • Configurable & customizable
  • Full keyboard navigation
  • Column resize/reorder/show/hide
  • Column autosizing & force-fit
  • Pluggable cell formatters & editors
  • Support for editing and creating new rows.
  • Grouping, filtering, custom aggregators, and more!
  • Advanced detached & multi-field editors with undo/redo support.
  • “GlobalEditorLock” to manage concurrent edits in cases where multiple Views on a page can edit the same data.

Useful links

1268 questions
7
votes
3 answers

Slickgrid, how to get the grid item on click event?

grid.onClick.subscribe(function(e) { var cell = grid.getCellFromEvent(e), row = cell.row; // var item = dataView.rows[row]; }); I used to use dataView.rows to access the item inside a grid, and this seems not working in the latest…
user469652
  • 48,855
  • 59
  • 128
  • 165
7
votes
5 answers

get data of selected rows in slickgrid

I have a slickgrid in which some rows are hidden by a filter (DataView). When I now call the getSelectedRows method of the grid I get the indices of the visibly selected rows. But I need the actual data of the selected rows.
Preli
  • 2,953
  • 10
  • 37
  • 50
7
votes
1 answer

How to filter multiple properties of a parent child array which could be several tree level deep

TL;DR; To make it simple, how can I filter multiple properties of a parent child array which could be several tree level deep. This is for an Open Source datagrid lib used by several hundred users. So I have an array of parent/children references,…
ghiscoding
  • 12,308
  • 6
  • 69
  • 112
7
votes
4 answers

multiple slickGrid in jQuery tabs

I am creating multiple slickGrids and puts them in a jQuery tab. The first slickGrid on the first jQuery tab works fine, but when I switch to the next tab the data columns on the slickGrid does not show up until you resize the header and the columns…
Anthony Umpad
  • 165
  • 3
  • 11
7
votes
2 answers

editable and non-editable rows in slickgrid

How do I make some rows editable and some rows non-editable in slickgrid?
ranendra
  • 2,492
  • 2
  • 19
  • 29
7
votes
4 answers

Cell tooltip in SlickGrid

Some cells in my SlickGrid table have myClass class. I added a tooltip for them like this: $(".myClass").hover(// Mouse enters function(e) {...}, // Mouse leaves function() {...}); It…
Misha Moroshko
  • 166,356
  • 226
  • 505
  • 746
7
votes
1 answer

Why is Minified Code not Equivalent to Original?

When I ran my MVC 4 project in Release mode, one page that uses SlickGrid did not display correctly (the grid is very, very tall and the grid cells are missing). However, I do not think this is an issue of SlickGrid, but rather of how the bundler…
Eric J.
  • 147,927
  • 63
  • 340
  • 553
7
votes
3 answers

how to add hidden column in slickgrid

Is it possible to have a hidden column in slickgrid? By hidden column I mean I want to save some data for each row, but I don't want this data to be shown on the grid.
sivann
  • 2,083
  • 4
  • 29
  • 44
6
votes
2 answers

SlickGrid-rotated column headers

How can I rotate my column headers 90 degrees? I've tried this, but haven't been able to get it to work. .slick-column-name { -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); display: block; vertical-align:…
brad miley
  • 229
  • 2
  • 4
6
votes
1 answer

SlickGrid RemoteModel vs. Dataview Model

We're currently using the slick.remotemodel.js model implementation of SlickGrid for its remote Ajax loading functionality. With this example the only filtering provided is a simple Search element. What we're looking to accomplish is a much more…
paradox
  • 71
  • 1
  • 4
6
votes
1 answer

how do I apply a class to the header cell for a column in slickgrid

I have a column in slickgrid where all the cells need to have some padding applied to the right side of the cell. I use the cssClass property when initializing the columns for the grid, but this applies only to the non-header cells of the column.…
user806273
6
votes
3 answers

Updating SlickGrid with Knockoutjs via dependentObservable

I'm using SlickGrid with knockout.js based on the example http://jsfiddle.net/rniemeyer/A9NrP/ I have the grid populating and the add button working as per the example. The problem I'm having is when I update the rows property of my viewmodel via a…
Dave
  • 3,812
  • 5
  • 31
  • 39
6
votes
1 answer

Combining SlickGrid Filter Examples

I like the functionality of the Filter in this example: http://mleibman.github.com/SlickGrid/examples/example-header-row.html where each column has its own filter, but I also require the functionality of the Filter…
Kevin
  • 541
  • 3
  • 6
  • 17
6
votes
1 answer

Use another property in data element as id

I have data elements: { 'rid': '1', 'id': '2', 'name': 'asdw' }, { 'rid': '2', 'id': '2', 'name': 'dsddf' }, { 'rid': '3', 'id': '2', 'name': 'fffgg' } Each data element have the same value of "id" property…
Kalinin
  • 2,489
  • 8
  • 37
  • 49
6
votes
1 answer

SlickGrid onSelectedRowsChange firing twice when more than one row selected?

(See this question and this question for background...) Given: grid = new Slick.Grid("#myGrid", data, columns, options); grid.setSelectionModel(new Slick.RowSelectionModel()); grid.onSelectedRowsChanged.subscribe(function() { row_ids =…
neezer
  • 19,720
  • 33
  • 121
  • 220