|
|
| Line 1: |
Line 1: |
| <!-- !!! -->
| | The content on this page has moved to https://documentation.open-xchange.com/latest/ui/components/vgrid.html |
| <!-- PLEASE APPLY CHANGES ONLY TO THE NEW TECHNICAL DOCUMENTATION: wd/frontend/web/documentation -->
| |
| <!-- !!! -->
| |
|
| |
|
| | | Note: Open-Xchange is in the process of migrating all its technical documentation to a new and improved documentation system (documentation.open-xchange.com). Please note as the migration takes place more information will be available on the new system and less on this system. Thank you for your understanding during this period of transition. |
| {{Stability-experimental}}
| |
| | |
| <div class="title">VGrid</div>
| |
| | |
| ''' 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:
| |
| | |
| <pre class="language-javascript">
| |
| // pass jQuery node where VGrid should be drawn
| |
| var grid = new ox.ui.tk.VGrid(node);
| |
| </pre>
| |
| | |
| Add basic template:
| |
| | |
| <pre class="language-javascript">
| |
| 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);
| |
| }
| |
| });
| |
| </pre>
| |
| | |
| Add label template:
| |
| | |
| <pre class="language-javascript">
| |
| grid.addLabelTemplate({
| |
| build: function () { },
| |
| set: function (data, fields, index) {
| |
| var name = data.last_name || data.display_name || "#";
| |
| this.text(name.substr(0, 1).toUpperCase());
| |
| }
| |
| });
| |
| </pre>
| |
| | |
| Add a function to determine if a new label is needed:
| |
| | |
| <pre class="language-javascript">
| |
| 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;
| |
| };
| |
| </pre>
| |
| | |
| Define functions to get data:
| |
| | |
| <pre class="language-javascript">
| |
| // get all IDs of all objects
| |
| grid.setAllRequest(function (cont) {
| |
| // must return deferred object
| |
| return api.getAll().done(cont);
| |
| });
| |
| | |
| // define a named "search" request
| |
| grid.setAllRequest("search", function (cont) {
| |
| // must return deferred object
| |
| return api.search(win.search.query).done(cont);
| |
| });
| |
| | |
| // define a request that loads detailled data on demand
| |
| grid.setListRequest(function (ids, cont) {
| |
| // must return deferred object
| |
| return api.getList(ids).done(cont);
| |
| });
| |
| </pre>
| |
| | |
| [[Category:AppSuite]]
| |
| [[Category:UI]]
| |
| [[Category:ToDo]]
| |