CODEWITHSUNDEEP
jqueryslickgrid
DavidDunham
DavidDunham

Reputation: 1362

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);
  }

Upvotes: 1

Views: 1481

Answers (2)

Ben McIntyre
Ben McIntyre

Reputation: 1968

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.

Upvotes: 2

Ignacio Ara
Ignacio Ara

Reputation: 2582

Get table body data:

$('#myGrid').find('.slick-viewport')

Get HTML body data:

$('#myGrid').find('.slick-viewport')[0].innerHTML

To get header data use .slick-header in selector.

Upvotes: 0

Related Questions