Giter Site home page Giter Site logo

6pac / slickgrid Goto Github PK

View Code? Open in Web Editor NEW
1.8K 97.0 420.0 12.21 MB

A lightning fast JavaScript grid/spreadsheet

Home Page: https://github.com/6pac/SlickGrid/wiki

License: MIT License

CSS 1.23% JavaScript 19.86% HTML 2.71% TypeScript 72.15% SCSS 4.05%

slickgrid's Introduction

License: MIT TypeScript NPM downloads jsdelivr hits/month

Cypress.io npm Actions Status

This is the 6pac SlickGrid repo

Check out the NEW SlickGrid Website! http://slickgrid.net/

This is the acknowledged and most active fork of SlickGrid.

It aims to be a viable alternative master repo, building on the legacy of the mleibman/SlickGrid master branch, keeping dependencies up to date and applying, safe core patches and enhancements to keep the project up to date.

We extended the project from the original SlickGrid foundation while also including the following changes:

  • added a few more Plugins: RowDetail, CellMenu, ContextMenu, GridMenu, CustomTooltip, GridState
  • merged X-SlickGrid code into the project to bring Frozen Columns/Rows (aka Pinning)
  • removed jQueryUI requirement in v3 (replaced it with SortableJS)
  • removed jQuery requirement in v4
  • modernized the project in v5 by migrating to TypeScript (we kept IIFE and added ES6/ESM build targets) and we also gave SlickGrid a fresh and more modern look via a new Alpine Theme (CSS/SASS)
  • the project now has only 1 required dependency which is SortableJS

Examples

Check out the Examples Wiki for a full list of examples demonstrating new features and use cases, such as dynamic grid creation and editors with third party controls.

Also take a look at the Wiki and Releases for documentation and news.

For a basic TypeScript example, take a look at the v5.0 Annoucement & Migration guide shown below and also the TypeScript Example Wiki.

Installation

There are multiple ways to use and install SlickGrid, you can use it as a standalone (IIFE) or install it through NPM then import or require SlickGrid (import is preferred for tree shaking).

# Alpine style from CDN
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/styles/css/slick-alpine-theme.min.css">

# standalone scripts (IIFE) from CDN
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/browser/slick.core.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/browser/slick.grid.min.js"></script>
<script>
  const grid = new Slick.Grid("#myGrid", dataView, columns, options);
</script>
---
# or install from NPM
npm install slickgrid

<script type="module">
  import 'slickgrid/dist/styles/css/slick-alpine-theme.css';
  import { SlickGrid, SlickDataView } from 'slickgrid';
  const dataView = new SlickDataView({ inlineFilters: true });
  const grid = new SlickGrid("#myGrid", dataView, columns, options);
</script>

For more CDN links, like controls and plugins, just headover to jsDevlivr - SlickGrid for the full list and click on the "Files" tab (or use this jsdelivr CDN link "dist/browser").

Contributions

See Contributing Guide

E2E Tests with Cypress

We have started to add E2E (end to end) tests in the browser by using Cypress. You can see here the list of Examples that now have E2E tests. We also run these tests in the GitHub Actions Workflow (CI) on every Pull Request to avoid committing changes that might break the library. We currently have tests for over 30+ examples with over 350+ tests.

We welcome any new contributions and if you wish to add Cypress E2E tests, all you need to do is to clone the repo and run the following commands

npm install         # install all npm packages
npm run dev         # run a local development server on port 8080 in watch mode (or `npm run serve` without watch)
npm run cypress     # open Cypress UI tool

Once the Cypress UI is open, you can then click on "Run all Specs" to execute all E2E browser tests.

Migrations

SlickGrid Migration Guide Description
3.x Announcing v3.0 dropping jQueryUI requirement and replaced it with SortableJS which is a lot more modern and touch friendly
4.x Announcing v4.0 dropping jQuery requirement, SlickGrid is now using browser native code
5.x Announcing v5.0 project modernization, we added TypeScript with ES6, ESM builds and also a new Alpine Theme

CSP Compliance

The library is now, at least for the most part, CSP (Content Security Policy) compliant since v5.5.0, however there are some exceptions to be aware of. When using any html string as template (for example with Custom Formatter returning an html string), you will not be fully compliant unless you return TrustedHTML. You can achieve this by using the sanitizer method in combo with DOMPurify to return TrustedHTML, for more info please take a look at the CSP Compliance Wiki.

Quick Little Fun Survey โœจ

We are conducting a small little poll for fun, it is a single question survey about our latest releases. Thanks for taking the time to participate.

What do you think was the most exciting change(s) for you?

slickgrid's People

Contributors

6pac avatar aasdkl avatar ajpiano avatar alexandrchazov avatar arashdalir avatar ataft avatar blowsie avatar brandonaaron avatar ckosmowski avatar clemens-panda avatar dacap avatar dariusk avatar dependabot[bot] avatar gavingallagher avatar ghiscoding avatar ghiscoding-se avatar gregggut avatar jasongardnerlv avatar jesenko avatar jesperjakobsencim avatar kofifus avatar kzhdev avatar lfilho avatar loonix avatar mckramer avatar milang avatar mleibman avatar resnyanskiy avatar satanenglish avatar turnertime avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

slickgrid's Issues

paging # issue if search returns page size

If I do a search on the 2nd page and if the number of items returned equal the page size then the
page does not flip back to the first page. Instead it says Page 2 of 1. The page back arrow does allow me to go back and then it says Page 1 of 1 correctly.

I also get the same error if I change example4 - http://mleibman.github.io/SlickGrid/examples/example4-model.html

Replace this code -

for (var i = 0; i < 50000; i++) {

var d = (data[i] = {});
d["id"] = "id_" + i;
d["num"] = i;
d["title"] = "Task " + i;
d["duration"] = "5 days";
d["percentComplete"] = Math.round(Math.random() * 100);
d["start"] = "01/01/2009";
d["finish"] = "01/05/2009";
d["effortDriven"] = (i % 5 == 0);
}

with this -

var x;

for (var i = 0; i < 5; i++) { var d = (data[i] = {});

if (i == 0)
x = "1";
if (i == 1)
x = "11";
if (i == 2)
x = "111";
if (i == 3)
x = "1111";
if (i == 4)
x = "2";

d["id"] = "id_" + i;
d["num"] = i;
d["title"] = "Task " + x;
d["duration"] = "5 days";
d["percentComplete"] = Math.round(Math.random() * 100);
d["start"] = "01/01/2009";
d["finish"] = "01/05/2009";
d["effortDriven"] = (i % 5 == 0);

}

Add this line - dataView.setPagingOptions({pageSize: 4});

Go to page 2 and search for Task 1. It should say Showing Page 2 of 1.

triggering a modal on click event on only specific column and row

Hi:
Trying to get a modal to trigger on a click event only for first row in column 10 only.
This field will be the same for each row and I need to display information about it's properties only on the first instance on the text box in column 10 row 1. It will display additional information about the field because the form has similar named fields. Any help with this would be great. Thanks so much for keeping the slick grid information up to date.

Thanks

Horizontal/vertical scroll bars flipflopping upon every update/redraw

My app uses options.forceFitColumns = true (my understanding of this setting = no horizontal scrollbar). But in some cases, when canvas still fits into viewport, I see either 1) both scrollbars present or 2) horizontal and vertical scroll bars flip flop every redraw [horizontal scrollbar is visible, vertical is hidden; then vice versa; ...]

I tried to debug the math SlickGrid is doing but my current perception is it is not the one which is causing it (maybe html layout causes it?).

The solution which solved this problem for my app is to set "overflow-x" to "hidden":

      $viewport = $("<div class='slick-viewport' style='width:100%;overflow:auto;outline:0;position:relative;;'>").appendTo($container);
      $viewport.css("overflow-y", options.autoHeight ? "hidden" : "auto");
      **$viewport.css("overflow-x", options.forceFitColumns ? "hidden" : "auto");**

I'm not sure whether something additional needs to be done for cases where users can change forceFitColumns option (it's not exposed in my app).

Thoughts?

updating to node ES6

So, not sure if this is a desired goal or not but...

Consumption of SlickGrid in a modern project that is driven by npm and built via webpack/babel/ES6 can be a pain in the backside, given the reliance on globals, order of loading, lack of implicit dependencies.

I got annoyed and took out the bits from the repo one by one and added them to a new repo, converting in the process.

It's WIP - https://github.com/DimitarChristoff/slickgrid-es6 - but it occurs to me, it can probably be done as a fork of this instead of a fresh standalone effort. If this sort of direction is something of interest, ping me and we can convert and do stuff as a pull request and an actual fork of 6pac/SlickGrid.

TL;DR; took your repo, made it work with node/ES6, removed IE8, moved to jquery 3.1.0, all deps are npm, works fine in React or whatever.

'Filling the whole window' example does not resize with changes in window size

Open a browser window to full screen, and load the 'Filling the whole window' example.
Move the vertical scroll thumb to the bottom.
Size the window smaller.
Note that while you can still see the vertical scroll bar, the scroll thumb is out of view, below the current window bottom. Also note that the horizontal scroll bar is completely lost.

I am just considering SlickGrid for use in a project, and I am hopeful that this is just an issue where the sample isn't responding to the necessary events, and calling resize as needed. If someone could confirm or deny this explanation, perhaps along with the code necessary to make it work properly, that would be nice.

Thanks!

Clear Items for slick.dataview

(This is more of a feature request than an issue.)

I think it would be useful to have a clear all for the dataview module.
The use case here would be if you want to remove and replace all of the items in the table. Currently you have to do it one by one using the deleteItem(id) method. Having a clearItems() method would be much more efficient and clearer.

If you think it fits within the scope of this project I can create a pull request with my changes.

Should SlickGrid throw Error and not strings?

Hello,

When exception occurs (rows have same id), SlickGrid usually (always?) throws them as strings:

function ensureIdUniqueness() {
     var id;
     for (var i = 0, l = items.length; i < l; i++) {
       id = items[i][idProperty];
       if (id === undefined || idxById[id] !== i) {
         throw "Each data element must implement a unique 'id' property";
       }
     }
   }

As a result in try/catch we also get only a string without stack trace and other information. Which makes debugging things harder, especially when it repro's only on user's browser =)

Does it make sense to move towards

throw new Error("Each data element must implement a unique 'id' property")

instead?

Create minimized slickgrid files

It would be nice to have minimized files for the js and css for the many default includes?

Perhaps uglifyjs / uglifycss or some other minification process?

Collapsing a group leaves one row showing, feature or bug?

I currently have a nested grouping setup. When I minimize a 2nd level grouping it leaves one data row showing, and when I minimize a top level grouping it levels one of the 2nd level groupings showing. Just curious if this is seen as a feature or bug?

1stlevelcollapse

Note: the data that is visible here actually should be grouped under the 1st grouping, not the second.
2ndlevelcollapse

Uncaught NotFoundError: Failed to execute 'removeChild' on 'Node'

Scrolling quickly on the basic example causes a bunch of javascript errors: http://6pac.github.io/SlickGrid/examples/example1-simple.html

slick.grid.js:2321 Uncaught NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.handleMouseWheel @ slick.grid.js:2321m.event.dispatch @ jquery-1.11.2.min.js:3$event.dispatch @ jquery.event.drag-2.2.js:374m.event.add.r.handle @ jquery-1.11.2.min.js:3
slick.grid.js:2316 Uncaught NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.handleMouseWheel @ slick.grid.js:2316m.event.dispatch @ jquery-1.11.2.min.js:3$event.dispatch @ jquery.event.drag-2.2.js:374m.event.add.r.handle @ jquery-1.11.2.min.js:3

Using Chrome Version 45.0.2454.99 (64-bit)

Cannot find stylesheet.

This old problem with webkit.
Looking at the code I have a question.
Why is loop on the document.styleSheets ?

slick.grid.js

function getColumnCssRules(idx) {
      if (!stylesheet) {
-        var sheets = document.styleSheets;
-        for (var i = 0; i < sheets.length; i++) {
-          if ((sheets[i].ownerNode || sheets[i].owningElement) == $style[0]) {
-            stylesheet = sheets[i];
-            break;
-          }
-        }

        if (!stylesheet) {
          throw new Error("Cannot find stylesheet.");
        }
...

that if we replace on

function getColumnCssRules(idx) {
      if (!stylesheet) {
 +        stylesheet = $style[0].sheet || $style[0].styleSheet;
        if (!stylesheet) {
          throw new Error("Cannot find stylesheet.");
        }
...

Thanks in advance!!!

SlickGrid can be Accessible or not?

Hi Team,

Regarding accessibility of the slickGrid.

  1. Is the Slick Grid can be accessible with the keyboard? - Can we do accessibility for the slick grid.
  2. will it work with the JAWS(screen reader).
  3. Can we use controls/formatters inside the slick grid with keyboard.

Error when using with jquery 3.1.0

I'm getting an error when using with the latest version of jquery 3.1.0 with the latest version of slickgrid 2.3.2.

I get an exception in jquery.event.drag-2.2.js on fixHooks not being defined. It looks like this is not present in jquery 3.1.0??? Everything works fine if I use an earlier version of jquery.

Error: is Uncaught TypeError: Cannot set property 'touchcancel' of undefined.

// event fix hooks for touch events...
var touchHooks = 
$event.fixHooks.touchstart = 
$event.fixHooks.touchmove = 
$event.fixHooks.touchend =
$event.fixHooks.touchcancel = {
    props: "clientX clientY pageX pageY screenX screenY".split( " " ),
    filter: function( event, orig ) {

Text selection over multiple rows is broken

When enabling text selection for rows and trying to select text on multiple rows at the same - I get broken behavior in Chrome after scrolling up and down. Please see GIF below for the example.

Is there a fix/work-around for this issue?

Broken selection

Exclude certain group-rows from grid

Hi, thank you for supporting on this grid - hope you can help me out with the following:

I've been struggling with appropriate way to hide/exclude certain group-headers from being included in the grid. As the image below pretty obviously display, I'd like the headers with: "HIDE THIS" to be excluded from the grid, as this group will only contain 1 item. Nevertheless, I really like the 2. part ("2. variations") of the level 1-grouping.

I'm using 2 levels grouping in my grid; where the first group is grouping by title (String), and the second level is grouping by a child-attribute (Boolean).

Image:
http://prntscr.com/bujgq9

Group-code:

` function groupByParentID() {

    dataView.setGrouping([{
        getter: "parent_id",
        formatter: function ( g ) {
            return '<strong>' + g.rows[0].title + '</strong><span class="grey-field"> (ID: ' + g.value + ')</span>';
        },
        aggregateCollapsed: false,
        lazyTotalsCalculation: true
    }, {
        getter: "child",
        formatter: function ( g ) {
            if ( g.rows[0].title ) {
                return 'HIDE THIS';
            } else {
                return "<span class='grey-field'>" + g.count + " variations</span>"
            }
        },
        aggregateCollapsed: false,
        lazyTotalsCalculation: true
    }]);
}`

More than one slickgrid on a page breaks styling

The formatting of the columns in the first slickgrid is broken after loading the second slickgrid on the page. The column widths are uneven/overlapping.

See the picture. I used the simplest example from mleibman's examples, but just put a second grid in there.

Provide issues for each "fix" with description

Hi.
The repo is a good idea. But I beleive its current state is unacceptable for being a replacement of the master SlickGrid.
The fix list contains just short notes like "fix bug with refresh last row of grid". What does it mean? What bug with refresh?
There should an issue with full description of the bug. And so for each fix. Then it will make sense.

Performance Issue with multiple slickgrids on the same page

I am currently using the older SlickGrid implementation from the main branch (2.2), however, after looking at the problem and looking at the code difference it appears this would still be a problem with the latest version (this fork is also more active).

Essentially the problem is that having 15+ slick grids on the same page can make initialization very slow (exponentially/factorially with the number of slickgrids). I've narrowed the problem down to a rendering issue that slickgrid on init is causing the browser to re-render the page multiple times. Therefore, with more grids, this rendering takes significantly longer.

It is similar to this problem mleibman/SlickGrid#383 however, the suggestion to make them asynchronous would not help in this situation. A screen shot of the problem http://imgur.com/5JrnUlg

You can see that init and getViewport (the root problem) is causing a lot of rerendering. From my understand, according to https://gist.github.com/paulirish/5d52fb081b3570c81e3a, this is most likely caused by the fact that getviewport is calling div properties a lot, which causes a rerender on the browser each time (thus why this problem can't be solved by an async).

I've sort of worked around this problem by implementing a virtual scrolling type system where only the grids in view get rendered, but the problem is the browser slightly freezes when it gets in the range of rendering a new grid.

My question: is there a good way to work around this problem? My initial idea is to somewhere cache the viewport height and reuse it for each grid (since each grid is guaranteed to be the same size on my webpage), however I don't see a good way of doing this without modifying the slickgrid library itself. Is this a problem someone else has solved?

Grouping formatter doesnt use formatted value

When i use a Key-Value Map formatter in column definition and after grouping by this column the value is not formatted. And also no other way to invoke it manually since group formatter doesnt have a reference to the column definition.

Prevent useless onSelectedRangesChanged events in selectionmodels' setSelectedRanges

Plugins slick.cellselectionmodel and slick.rowselectionmodel have function setSelectedRanges which sets selected range and fires onSelectedRangesChanged event.
Unfortunately the event is fired in any case even if range didn't change. As consequence grid fires onSelectedRowsChanged event.
That can (and does) have some useless processing.
For example slick.checkboxselectcolumn plugin in its handleSelectedRowsChanged updates column header.

    function setSelectedRanges(ranges) {
      _ranges = ranges;
      _self.onSelectedRangesChanged.notify(_ranges);
    }

I suggest to put a simple check for empty range:

    function setSelectedRanges(ranges) {
      // simle check for: empty selection didn't change, prevent firing onSelectedRangesChanged
      if ((!_ranges || _ranges.length === 0) && (!ranges || ranges.length === 0)) { return; }
      _ranges = ranges;
      _self.onSelectedRangesChanged.notify(_ranges);
    }

Filter doesn't redraw the grid

When filtering on the data, if the n new rows are identicals to the n first current rows then no diff is detected and the grid is not refreshed
Try with the fiddle :
* Filter with 'abcd'
* The first row is not filtered
* Filter with 'zzzz'
* The last row is filtered

The issue is in the slick.dataview.js script in the method getRowDiffs which don't return diff if the n new rows are identical to the n first current rows

Update README

You should probably update the README so people coming here don't think you are too busy to maintain this project (people that don't know that that message is from @mleibman.

Other than that. I hope you get access to the main repo to keep this project alive as you are currently doing here.

Thanks.

Show totals when using a dataView grouping

I don't see a feature in this version of slickgrid for a fixed overall totals footer. Is this something that will be explored in the future?

I looked into showing totals via a dataProvider, but I also need to use a dataView technique for grouping and etc. For some reason this isn't working for me. Does someone know the proper technique to get something like this working?

Eg. this is for using a dataProvider for totals:

      var dataProvider = new TotalsDataProvider(data, columns);
      grid = new Slick.Grid("#myGrid", dataProvider, columns, options);

And this is used for grouping and etc:

      var groupItemMetadataProvider = new Slick.Data.GroupItemMetadataProvider(options);
      dataView = new Slick.Data.DataView({
        groupItemMetadataProvider: groupItemMetadataProvider,
        inlineFilters: true
      });

    grid = new Slick.Grid("#myGrid", dataView, columns, options);

Is it possible to use both at the same time???

Thanks!

Update jquery+ui and removal of old (unstable) libraries

Since the original project isn't maintained anymore and the necessary libraries are highly outdated. Wouldn't it be nice if this version would have support for the latest jquery+ui and removed the outdated jquery.event.drag.js ?

I have run in allot of trouble with slickgrid due to the lack of support for the newer versions of said libraries. Are you planning on supporting these?

Make a Nuget package available?

Similar to #22 , it would be great to have a nuget package available to make it easier to update from original SlickGrid to this Fork in commercial dev environments.

Getting rid of all the jQuery dependencies

Hi there,

I've been using Slickgrid for a while already in several projects in the last 2 years and a half. I personally find this grid amazing. Probably one of the best out there, and I'd offer myself to contribute with its development... Only thing I find sad is having these, in my personal opinion, unnecesary dependencies. The only reason why I'm including jQuery in those projects is just because of Slickgrid. I've dived many times in the code to change and improve things and I really see no reason at all to use jQuery and jQuery-ui. I don't even think it would take long to do so.

What's the opinion about it?

Thanks

Refiltering on grouping

Hi,

Apologies if this question sounds stupid or out of place, I am just trying to optimise some code I am working on involving grouping and filtering. I have looked at the example here http://mleibman.github.io/SlickGrid/examples/example-grouping,

however it is a bit unclear to me why everytime we call dataView.setGrouping() we need to perform filtering again in dataVIew.refresh() -> .. -> getFilteredAndPagedItems(items) instead of accessing the already filtered items through the global var filteredItems which would spare the filtering call?

I have a feeling I am overlooking something and I would appreciate your help.

Many thanks,
Yulia

Is there a fixed total row solution within this fork?

While editing the rows i want to show sum of two columns separately in a fixed total rows in bottom. And a second question is; I cant make grouping since the data is still been editing. Is that possible too?

Thank you in advance.

Prevent cell content removal on click (when editor is used)

Hello,

I have custom editor for cell, the problem i'm facing is whenever the cell is clicked the existing content (DOM) is getting removed and also I'm not able to listen to the events registered to the cell content DOM. Is there way I can prevent the cell content removed by default? how do I listen to the cell content DOM events?

image

In the attached image, the 2 input boxes must show on clicking "Set Range" and if user click on the clear icon (red x circled) the cell content should set back to "Set Range". I have implemented using "grid.onClick.subscribe" but this have other challenges like validation. I couldn't use the editor because of the cell content getting cleared by default.

Grunt deployment issues when date editor has image url hard-coded

I suggest we remove that and put it in the css, like so:

.ui-datepicker-trigger {
  background:url("../images/calendar.gif") top left no-repeat;
  width: 16px;
  height: 16px;
}

The button image line can then be removed from the slick.editos.js

Some more context: If it is in the JS file, and you run grunt (where files get moved around), then it will point to the wrong url. The CSS files on the other hand, will likely need to get fixed to account for images moving around. I do that through grunt search and replace (suspect other folks may be doing that too).

IntegerEditor validation

Can IntegerEditor have a validator option as well, similar to TextEditor? Use cases including checking whether the integer is positive, negative, above a value, etc. Currently I'm using TextEditor and casting the results myself to an int which isn't really convenient.

btw, thanks for creating and maintaining this fork! Perhaps if slickgrid totally dies you could call it slickgrid 2 or something.

does content menu work (example 7) in dataview?

Hi,

I try to implement example 7 where with the right mouse click you get the content menu.
In my test I use dataview. The problem for me is this code:
grid.onContextMenu.subscribe(function (e) {
e.preventDefault();
var cell = grid.getCellFromEvent(e);

While in the example the 'grid.getCellFromEvent(e)' give you the cell and row, I get 'null' in my dataview.

My question is if this context menu works with using dataview in Slickgrid.

I even tried using args to get the cell and row but it gives you 'undefined' in the alert.

grid.onContextMenu.subscribe(function (e, args) {
  alert (args.cell);
  e.preventDefault();
  var cell = grid.getCellFromEvent(e);

I have no idea why this doesn't work. The grid.onClick.subscribe(function (e, args) works in my code while grid.onContextMenu.subscribe(function (e, args) doesn't.

Thanks!!!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.