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

Writing custom formatters for slick grid

While writing custom cell formatters function PercentCompleteFormatter(row, cell, value, columnDef, dataContext) This is the basic definition we have to follow.can i get explanation about dataContext argument in slick grid.What it actually…
satheesh
  • 1,443
  • 7
  • 28
  • 41
3
votes
0 answers

How can I modify the SlickGrid to support Multi-level(Columns group) headers with colspan&rowspan

like jquery easyui's datagrid: Create column groups in DataGrid and jqgrid: jqGrid Demos (On the bottom categroy: Frozen Cols.Group Header)
sunway
  • 31
  • 4
3
votes
1 answer

Adding new row to SlickGrid

I have a slickgrid using the dataview. From what I can tell, the grid's add new row event isn't called until after the first new row field's editor is complete. The field I was editing is a custom editor that uses a input box with autocomplete and…
user1347790
  • 95
  • 1
  • 9
3
votes
2 answers

Colspan & rowspan of header for slickgrid

I am just wondering if there is a way to provide colspan/rowspan to header and have multiple header rows.
emphaticsunshine
  • 3,725
  • 5
  • 32
  • 42
3
votes
1 answer

Disable slickgrid horizontal scrollbar

I need to disable slickgrid horizontal scrollbar. I have only one column and have forceFitColumns : true. Is possible? Thanks
rgomesf
  • 702
  • 1
  • 10
  • 20
2
votes
1 answer

Grid with sub-grids using slickgrid

I've got a project that requires me to use a grid that supports sub-grids. From what I can tell, jqGrid supports it, but slickgrid does not. If that's not the case, I haven't found any examples of sub-grids using slickgrid. Does anyone know if…
Dan
  • 1,222
  • 2
  • 17
  • 33
2
votes
1 answer

Slickgrid css class to mark row dirty

When an item in a row has been edited, I want to mark the row as dirty using a CSS class. What's the best way to achieve this? UPDATE I'm trying this, doesn't seem to work: data.getItemMetadata = function (row) { if (data[row].isDirty == true) { …
JontyMC
  • 6,038
  • 6
  • 38
  • 39
2
votes
2 answers

Highlighting a slickgrid row when clicked

Humor me here. It seems like other grids like ExtJs do this out of the box, but for the life of me I can't find any solution to having a grid remain highlighted after a user clicks it. My interim solution is just a quick css rule to highlight a row…
jdivock
  • 113
  • 1
  • 1
  • 10
2
votes
1 answer

slickgrid - Can't get minimal example working

H*wdy all, I'm trying to SlickGrid working, by following the getting started instructions. But my grid is not editable. Nothing happens when I click on a cell. Here is my HTML/JS. I verified that all of the src's are being found.
Greg
  • 45,306
  • 89
  • 231
  • 297
2
votes
1 answer

Image Uploader with Slick Grid

I have trying to implement the Slick Grid for listing my data base information. I was able to do most of the things like editable data.(Took help from Stackoverflow ofcource). Now I got stuck where I need to display the image on the Grid, the image…
Abhik Chakraborty
  • 44,654
  • 6
  • 52
  • 63
2
votes
1 answer

esbuild hybrid plugin to bundle multiple files iife and single esm bundle

There is a project SlickGrid that have multiple files that are all written as iife (it was originally built with jQuery namespace as iife). Most files are optional and the user can choose which feature they are interested (ie slick.contextmenu.js,…
ghiscoding
  • 12,308
  • 6
  • 69
  • 112
2
votes
0 answers

Angular slickgrid auto resize column by content not working after doing force fit column check & uncheck action

In angular slickgrid, I am trying to implement force fit column & auto resize column feature with two button click. When I click force fit button, the column of slickgrid fit into the window size. And when I click the auto resize button, disable the…
2
votes
1 answer

How to make cell save when slickgrid looses focus

I have a SlickGrid with some Editors on a form with some buttons above it. (Save and Cancel). When i edit a cell in the grid and click the buttons above the grid - the cell does not commit it's edit. I've debugged and it is not calling :…
Tim
  • 3,576
  • 6
  • 44
  • 58
2
votes
0 answers

In the slick grid list section header menu pop-up is not scrollable

I have an angular-slick grid with an enabled header menu option. I want to scroll down and use the other option in the slick grid header menu. But we cant able to use the scrolling option. This is an issue I'm facing in the slick grid header…
2
votes
1 answer

How can I restrict SlickGrid to having a max of a single row highlighted at any particular time?

I want to allow only a single row to ever be highlighted in my grid. If a user selects a row, then selects a new row, only the new row will be highlighted (also, multiselect row is off). In attempting to do this, I set this…
SteveJ
  • 706
  • 1
  • 8
  • 9