Search code examples
jqueryslickgrid

SlickGrid get grid instance with jQuery through HTML element

My Example: https://jsfiddle.net/djL5ad7m/

My example shows a basic SlickGrid example. I am creating the Grid like so:

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

This grid variable is what I am interested in. enter image description here

I want to get exactly this element via jQuery - so I can call an external function and get the same Grid variable that my code above saves into "var grid".

I have tried to get it like $('#myGrid').data('Slickgrid') but that does not work.

(Kendo UI Grid illustrates this perfectly - see my example with it here and find code below)

/***** getGridExternalFunction *****/
  function getGridExternal(){
    var grid = $('#grid').data('kendoGrid');
    console.log('grid', grid);
  }
Solution

  • SlickGrid doesn't attach itself to the HTML like that, although I have seen that as a standard pattern in some javascript client side controls.
    That said, it's easy enough to set this up yourself using jQuery:

    var grid = new Slick.Grid("#myGrid", data, columns, options);
$('#myGrid').data('SlickGrid', grid);

    the you can retrieve it elsewhere in your code as you have shown:

    var grid = $('#myGrid').data('SlickGrid');

    There's a bit of a warning bell regarding your error message though: "cannot read property 'data' of null" would imply that $('#myGrid') is returning null, which it shouldn't be if the DOM element myGrid is present. Not sure what's going on there.