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 vie

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

Answer 2

DataView is an abstraction on top of your data source. If all of the data is available on the client (i.e. in a Javascript array), DataView can provide many useful features that the grid itself doesn't have. (This fact that the grid lacks these features is by design - SlickGrid tries to keep the core lean and simple while encouraging modular design and data abstraction in its API.)

DataView works by taking in your data and acting as a data provider that you can pass to SlickGrid instead of your original data array. For example, if you make DataView group data, it makes the grid think that the "group" rows are just regular data items, so the grid doesn't need to be aware of them. DataView tells the grid that those items have a custom display and behavior and provides implementations of both. You then wire up DataView's onRowCountChanged and onRowsChanged events to update the grid and voila.

Here's a rough list of features that DataView adds to the grid:

• Paging.
• Sorting.
• Search.
• Grouping with totals.
• Expand/collapse groups.

Answer 3

DataView allows to sort and filter the data without modifying it or the grid. You can think of it as an overlay on top on the grid which provides view-related functions - in some cases enhances these functions.

Hope that helps!