AppSuite:VGrid

API status: In Development

VGrid

Abstract: The VGrid is a grid used to structure contents in the main viewport. For example, if you see mails stacked in the v-split of the mail module, this is the VGrid at work.

Create new instance:

 
// pass jQuery node where VGrid should be drawn
var grid = new ox.ui.tk.VGrid(node);

Add basic template:

 
grid.addTemplate({
  build: function () {
    var name, email;
    this
      .addClass("contact")
      .append(name = $("<div/>").addClass("fullname"))
      .append(email = $("<div/>"))
      .append(job = $("<div/>").addClass("bright-text"));
    return { name: name, job: job, email: email };
  },
  set: function (data, fields, index) {
    fields.name.text(data.display_name);
    fields.email.text(data.email);
    fields.job.text(data.job);
  }
});

Add label template:

 
grid.addLabelTemplate({
  build: function () { },
  set: function (data, fields, index) {
    var name = data.last_name || data.display_name || "#";
    this.text(name.substr(0, 1).toUpperCase());
  }
});

Add a function to determine if a new label is needed:

 
grid.requiresLabel = function (i, data, current) {
  var name = data.last_name || data.display_name || "#",
    prefix = name.substr(0, 1).toUpperCase();
  return (i === 0 || prefix !== current) ? prefix : false;
};

Define functions to get data:

 
// get all IDs of all objects
grid.setAllRequest(function (cont) {
  api.getAll().done(cont);
});

// define a named "search" request
grid.setAllRequest("search", function (cont) {
  api.search(win.search.query).done(cont);
});

// define a request that loads detailled data on demand
grid.setListRequest(function (ids, cont) {
  api.getList(ids).done(cont);
});