CODEWITHSUNDEEP
javascriptjqueryjsonslickgrid
user1939246
user1939246

Reputation: 11

SlickGrid requires a valid container, #myGrid does not exist in the DOM

I've been trying to use SlickGrid Dataview with Json but to no avail. I keep getting the above error. "JavaScript runtime error: SlickGrid requires a valid container, #myGrid does not exist in the DOM."

<div id="myGrid" style="width:100%;height:500px;"></div>

And this is the script file to load json:

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

 //sample data
 var columns = [{
     id: "CodeID",
     name: "CodeID",
     field: "CodeID",
     width: 50
 },
 {
     id: "Name",
     name: "Name",
     field: "Name",
     width: 200
 },
 width: 100
 }
 ];
 var options = {
     enableColumnReorder: false,
     multiColumnSort: true
 };
 // wire up model events to drive the grid
 dataView.onRowCountChanged.subscribe(function(e, args) {
     grid.updateRowCount();
     grid.render();
 });

 dataView.onRowsChanged.subscribe(function(e, args) {
     grid.invalidateRows(args.rows);
     grid.render();
 });


 $.getJSON(my_url, function(data) {
     dataView.beginUpdate();
     dataView.setItems(data);
     dataView.endUpdate();

 });

If I don't use dataview and iterate throught json data and pass it to the grid everything works fine but when I use dataview I get the error above even though I have a div with Id="myGrid".

I would appreciate any help.

Thanks

Upvotes: 1

Views: 4119

Answers (3)

Oniel Telies
Oniel Telies

Reputation: 155

In my Case, I was using SlickGrid.js and grid.js files. So it ran container two times. So removing grid.js solved the problem. Also make sure that document is ready before running new Slick.Grid()

Upvotes: 1

user1939246
user1939246

Reputation: 11

Thank you all for your help.

I solved the problem by putting the grid and dataview in the $.getJSON function as follows and all is fine for now.

$.getJSON(my_url, function (items) {


//get data from Json  looping through Json items

.....


var dataView = new Slick.Data.DataView();
var grid = new Slick.Grid("#myGrid", dataView, columns, options);
// wire up model events to drive the grid
dataView.onRowCountChanged.subscribe(function (e, args) {
    grid.updateRowCount();
    grid.render();
});

dataView.onRowsChanged.subscribe(function (e, args) {
    grid.invalidateRows(args.rows);
    grid.render();
});

dataView.beginUpdate();
dataView.setItems(data);
dataView.endUpdate();
});
});

Upvotes: 0

grepsedawk
grepsedawk

Reputation: 3411

I am assuming you are loading your JS at the top of the page and before "myGrid" exists.

In that case, try to use $( document ).ready() like so:

$( document ).ready(function() {
var dataView = new Slick.Data.DataView();
var grid = new Slick.Grid("#myGrid", dataView, columns, options);

//sample data
var columns = [
    { id: "CodeID", name: "CodeID", field: "CodeID", width: 50 },
    { id: "Name", name: "Name", field: "Name", width: 200 },
    width: 100 }
];
var options = {
    enableColumnReorder: false,
    multiColumnSort: true
};
// wire up model events to drive the grid
dataView.onRowCountChanged.subscribe(function (e, args) {
    grid.updateRowCount();
    grid.render();
});

dataView.onRowsChanged.subscribe(function (e, args) {
    grid.invalidateRows(args.rows);
    grid.render();
});


$.getJSON(my_url, function (data) {
        dataView.beginUpdate();
        dataView.setItems(data);
        dataView.endUpdate();
});
});

JS executed within the $( document).ready() callback won't be initialized until the entire document loads.

Upvotes: 0

Related Questions