SlickGrid what is a Data View?

Question

I started to use SlickGrid and I got confused about the difference between Data View and Grid (with editing enabled). I haven't found in the docs some discussion about data view, although it has been mentioned there.

Please enlighten me.

Answer 1

In very simple terms, just think of three layers:

  Grid
  ----
DataView
  ----
  Data

At the bottom you have the raw data. This is just a plain old array. Each item in the array represents one row of data (to be displayed as one row in the grid).

The DataView reads the data array and makes it available to the grid by exposing a couple of standard methods. This way, when the grid wants to get data for display purposes, it just talks to the dataview via one of the standard methods.

The Grid is the display component. Its only responsibility is to render the HTML code necessary to display the desired output on the screen.

The grid never accesses the data directly. It only ever talks to the dataview. This allows the dataview to perform tricks when returning the data to the grid, such as delivering "phantom" rows used to represent group headings.

If you're interested, the example below is just about the simplest example you can come up with that uses a dataview with SlickGrid.

var data = [
  { title: "Primer",       rating: "A" },
  { title: "Matrix",       rating: "B" },
  { title: "Transformers", rating: "C" },
];
var columns = [
  { id: "title",  name: "Title",  field: "title" },
  { id: "rating", name: "Rating", field: "rating" }
];
var options = {
  enableColumnReorder: false  // ... whatever grid options you need
};

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

// Feed the data into the dataview
dataView.setItems(data);