Skip to content

Tree Data View & new Styling Themes with SVG icons
Compare
Choose a tag to compare
@ghiscoding ghiscoding released this 20 May 02:27
· 1346 commits to master since this release
v2.18.2
63bd938

Quick intro

This version is packed with a new major feature (Tree Data View) and also comes with many styling enhancements & bug fixes. There's also a new Dual Input Editor.

Tree Data View

This is the biggest feature in this release, it is a fairly complex feature to implement (because it requires a lot of recursion handling) and because of that, it comes with some limitation (see below). There are 2 demos that represent 2 ways of building a grid with Tree Data.

Tree Data Limitations

Tree Data is, like I said earlier, fairly complex and because of that, it has certain limitations. See below for what works and what doesn't. If anyone can help in pushing the missing piece further that would be great.

Works

  • Single Column Sort

Doesn't Work (they're also not supported, so please don't open any new issue unless you want to help)

  • Multi-Column Sort
  • Aggregator

Styling

There is now a new Sort Icon hint (with an opacity of 0.5) when hovering a Column that has Sort enabled, this will help the user to identify that the column is sortable or not.

New Themes

This release also brings 2 new Styling Theme, first is a Material Design Theme and also a Salesforce Theme... does that mean SlickGrid is used in Salesforce... indeed! (more on that later).

  • Material Theme - demo
  • Salesforce Theme - demo

For more demo, you can also take a look at my other repo (Slickgrid-Universal) demos. Also, note that Bootstrap is completely optional (and has been for some time), the other demo that I mentioned was created using only the Bulma CSS framework, you will also notice that only the Material & Salesforce Themes were used across these multiple examples.

Each of these Styling Themes is compiled in CSS and created from a SASS file, so you can use either or. Both Themes are shown in each Tree Data demo

  • Note: you might need to refresh the page to see the theme correctly since the styling is global and if you change page, the style will follow on the next page (unless you refresh).

SVG Icons

The 2 new Themes were created with only SVG icons, most of the icons were pulled from the Material Design Icons set. If you wish to create your own set of SVG Icons, you can refer to the new Wiki - SVG Icons

Note: Just to point out that both the Fonts and SVG icons are supported, the default Bootstrap theme will keep Font-Awesome 4 so that it still works for everyone. You could, however, use SASS to override the Font and use SVG, again see the Wiki - SVG Icons for more details.

Final Word

If you like the lib, please upvote ⭐ and/or Buy Me a Coffee ☕

Features

  • core: update to latest TypeScript version (330f8ad)
  • editor: add new Dual Input Editor & extract all Editor Validators (#333) (25ff639)
  • extension: add column position option for checkbox row selector (#317) (1de66f4)
  • extension: add column position option for Row Detail icon (5e496fe)
  • extension: add latest slickgrid with RowMove improvements (#321) (bf767c5)
  • grouping: add missing Grouping interface properties (#325) (35e2c67)
  • i18n: add namespace prefix + separator grid option, closes #338 (#344) (115989d)
  • query: add queryFieldNameGetterFn callback know which field to use (#326) (2d7ebbc)
  • sort: add valueCouldBeUndefined column flag to help sorting (#323) (9c5996c)
  • style: add Sort icon hint on hover when column is sortable (#327) (357fabd)
  • styling: add CSS/SASS Material Design & Salesforce styling themes (#337) (6c57616)
  • treeData: add new Tree Data View feature (#339) (1526b87)
  • gridMenu: update to latest SlickGrid & add new Grid Menu options (#351) (e55b7e7)

Bug Fixes

  • editor: disregard Date Editor Flatpickr error and fix output format (#332) (c60a51c)
  • export: remove unsupported file type (#341) (ffa66fd)
  • filter: string filter should also work when using Contains (#320) (90a752b)
  • filter: when entering filter operator it shouldn't do any filtering (#324) (0f3bab6)
  • formatter: exportWithFormatter should work with undefined item prop (#340) (5e12d80)
  • gridMenu: column picker list should include grouped header titles (#343) (ae08a87)
  • gridMenu: the command "Toggle Filter Row" disappeared (#334) (23c94f2)
  • gridService: crud methods should support custom dataset id (#336) (c942929)
  • pagination: passing custom pagination sizes should work (#342) (1ca62a4)
  • resizer: remove scrollbar measure compensate patch (#319) (2527589)
  • rowDetail: use latest SlickGrid version to fix issue with id (#335) (d89e707)
  • sort: header menu sorting should include columnId property (d0cdfbe)
  • excel: update excel builder dependency (86fce02)
  • filters: add all Filters as Transient (#348) (1d39b2e)
  • footer: custom footer metric texts could not be changed (#350) (c5c6b63)
  • gridMenu: command "Toggle Filter Row" header row (#347) (4d0491a), closes #334
  • odata: encode uri also for IN/NIN operators (#349) (7be2d3b)
  • resizer: check for undefined option instead of fallback (#352) (7d03e9a)
Assets 2
Loading