Stack Overflow
Stack Overflow

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
11
votes
3 answers

Can SlickGrid's row height be dynamically altered?

We are implementing a user preference to (instantly) show "more" or "less" data on the grid. "More" should increase the row-height (with every row having the same increased height). When the user toggles, we update our DataView, and call setOptions…
Dave Clausen
  • 1,302
  • 1
  • 12
  • 23
10
votes
1 answer

SlickGrid Columns - Difference between id and field

A simple question i cant workout. In a column definition whats the difference between the field property and the id property...Fx.. columns.push({ id: "officeId", name: "Office Id", field: "officeId", width: 40 }); When would they be different/why…
Tim
  • 3,576
  • 6
  • 44
  • 58
10
votes
1 answer

Good tutorial for SlickGrid?

I am interested in getting familiar with SlickGrid but the only info I can find seems to be examples and the source code. Can anyone recommend a good source for documentation and tutorials?
Abe Miessler
  • 82,532
  • 99
  • 305
  • 486
10
votes
1 answer

SlickGrid multi-level grouping with group level selection

I've implemented a slick grid with a custom selection model as well as a custom checkbox selection plugin. I've also added group level checkboxes to allow toggling selection at the top level. One of my requirements is that collapsed groupings are…
Julien
  • 212
  • 1
  • 18
  • 53
10
votes
5 answers

What is this design pattern known as in JavaScript/jQuery?

I was looking over the JavaScript source code for SlickGrid. I've noticed that slick.grid.js has the following structure: (function($) { // Slick.Grid $.extend(true, window, { Slick: { Grid: SlickGrid } }); …
Rudiger
  • 6,634
  • 9
  • 40
  • 57
10
votes
1 answer

Make only certain columns editable in SlickGrid

I have a grid with multiple columns and I use the first column for a row label. I looked at the example for making the grid editable, but that appears to make the whole grid editable. Is there away to specify a certain column(s) only?
Alfawan
  • 282
  • 2
  • 11
10
votes
1 answer

What is the recommended approach to style a SlickGrid?

I am just starting to use SlickGrid and amazed by its quality. However, when it comes to styling, I did not find any docs or examples recommending an overall styling approach. There are options and APIs scattered in various places, but it's very…
Naresh
  • 23,937
  • 33
  • 132
  • 204
10
votes
3 answers

Slickgrid - Lost focus to end edit

When editing my grid, if I click outside the grid, the box I was editing is still editable. How do I get the edited cell to "complete" the edit when it looses focus?
sunzyflower
  • 195
  • 3
  • 13
10
votes
1 answer

How do I append a record to a dataset in Recline JS?

I am using the rather nice javascript library Recline http://okfnlabs.org/recline/ it is build around Backbone. It also uses SlickGrid. There are quite a number of examples and of course there is the source code to have a look at too. I have got…
nwaltham
  • 2,067
  • 1
  • 22
  • 40
9
votes
2 answers

Slickgrid - Column Definition with Complex Objects

I have a Java object where the person object contains a displayName object. I have converted it to a JSON object for my JSP. The data looks like the following: var people =…
user1195089
  • 91
  • 1
  • 2
9
votes
2 answers

SlickGrid DataView filter function behaving abnormally

In my custom filter function that I set by calling setFilter() on my DataView, I did the following to troubleshoot a problem with my filtering algorithm: function myFilter(item) { console.dir(item); console.dir(arguments); } To my surprise,…
Ates Goral
  • 137,716
  • 26
  • 137
  • 190
9
votes
1 answer

Get column name by index in SlickGrid

This code slickgrid.onDblClick.subscribe(function(e){ var cell = slickgrid.getCellFromEvent(e); console.log(cell.row, cell.cell); }); prints 0, 0 if I double click the first row, on the first column - and so on. But since column…
deprecated
  • 5,142
  • 3
  • 41
  • 62
9
votes
1 answer

slick grid column (text-align)

Is there any way to align the header in a slick grid to center and the text in the columns to left? any css files need modification or something else? Please guide. var columns = [ { id: "colEmpId", name: 'Number', field: "EmpId", "unselectable":…
Premanshu
  • 616
  • 3
  • 14
  • 24
9
votes
2 answers

Prevent certain SlickGrid columns from being reordered

The drag/drop column reordering is a great feature, but how do I prevent the users from moving particular (non-data) columns? For example, I am using the Checkbox Selectors for my mutli-select Grid, but this column should always be locked to the…
Kevin
  • 541
  • 3
  • 6
  • 17
9
votes
2 answers

Do action after render() method is completed

I need to do some action when render() method finished its work and appended all HTML elements to DOM. How to subscribe to onRenderEnds event (there is no such event)? Can I write my own event outside of slickgrid code and attach it to render()…
Kalinin
  • 2,489
  • 8
  • 37
  • 49
1 2
3
…
84 85