GridExtension

Last modified by Ecaterina Valica on 2010/01/12 11:29

Grid Extension

The Grid extension allows to navigate through a list of pages of a specific XWiki class. You'll find a more complete documentation on xwiki.org in the Drafts Documentation section

Installation

You need to add XWiki.GridExtensionTranslations to the list of Translations bundles in your administration screen

Example

Here is an example with users of the wiki. An example for usage in Syntax 2.0 is also available:

Code

{pre}<p/>
{/pre}
{{html clean="false" wiki="true"}}
<meta name="gwt:property" content="translations=XWiki.GWTPropEditorTranslations" />
<meta name="gwt:property" content="xwikiservice=/xwiki/XWikiService" />
<script language="javascript" src="/xwiki/bin/download/XWiki/GridExtension/gwtpropeditor.zip?rev=1.1/com.xpn.xwiki.gwt.api.Api.nocache.js"></script>

{{/html}}{{html clean="false" wiki="true"}}
{{html clean="false" wiki="true"}}
<div id="users-tagcloud">
 <div class="xwiki-grid-tagcloud"></div>
 <div class="xwiki-grid-tagcloudcontrols">
   <div>
     <img src="/xwiki/resources/icons/silk/tag_purple.gif?cache-version=1703848066000" />
     <strong>{{html clean="false"}}xe.grid.tagcloud.usage{{/html}}</strong>
   </div>
   <form>
   <div>
   <div>
     <input type="radio" value="matching" name="users-tagcloud-usage" selected="selected" />{{html clean="false"}}xe.grid.tagcloud.modematching{{/html}}
   </div>
   <div>
     <input type="radio" value="filter" name="users-tagcloud-usage" />{{html clean="false"}}xe.grid.tagcloud.modefilter{{/html}}</option>
   </div>
   </div>
   </form>
 </div>
 <div class="clearfloats"></div>
</div>
<table id="users" class="xwiki-grid">
<tr>
<td class="xwiki-grid-pagination" colspan="2">
   <span id="users-limits" class="xwiki-grid-limits"></span>
   <span id="users-ajax-loader" class="xwiki-grid-loader"><img src="/xwiki/skins/flamingo/icons/ajax-loader.gif" alt="{{html clean="false"}}xe.grid.loading{{/html}}" title="" />{{html clean="false"}}xe.grid.loading{{/html}}</span>
   <span class="controlPagination">
 <a href="javascript:void(0)" title="{{html clean="false"}}Previous Page{{/html}}" class="prevPagination" onclick="$('users').grid.paginator.gotoPrevPage()"></a>
 <a href="javascript:void(0)" title="{{html clean="false"}}Next Page{{/html}}" class="nextPagination" onclick="$('users').grid.paginator.gotoNextPage()"></a>
</span>
  <span class="pagination">
 <span id="users-pagination-text" class="xwiki-grid-pagination-text">{{html clean="false"}}Page{{/html}}</span>
 <span id="users-pagination" class="xwiki-grid-pagination-content" ></span>
  </span>
</td>
</tr>
<tr><td class="xwiki-grid-display-container">
     <table class="xwiki-grid-display">
      <thead class="xwiki-grid-display-header">
         <tr>
                        <th class="xwiki-grid-display-header-text sortable  asc " rel="first_name" >{{html clean="false"}}user_first_name{{/html}}</th>
                        <th class="xwiki-grid-display-header-text sortable  selected asc " rel="last_name" >{{html clean="false"}}user_last_name{{/html}}</th>
                        <th class="xwiki-grid-display-header-text sortable  asc " rel="blog" >{{html clean="false"}}user_blog{{/html}}</th>
                        <th class="xwiki-grid-display-header-text sortable  asc " rel="imtype" >{{html clean="false"}}user_imtype{{/html}}</th>
                        <th class="xwiki-grid-display-header-text sortable  asc " rel="email" >{{html clean="false"}}user_email{{/html}}</th>
                        <th class="xwiki-grid-display-header-text sortable  asc " rel="doc.creator" >{{html clean="false"}}user_doc.creator{{/html}}</th>
                        <th class="xwiki-grid-display-header-text sortable  asc " rel="_attachment" >{{html clean="false"}}user__attachment{{/html}}</th>
                        <th class="xwiki-grid-display-header-text sortable  asc " rel="_avatar" >{{html clean="false"}}user__avatar{{/html}}</th>
                     </tr>
         <tr id="xwiki-grid-display-filters">
                                       <td class="xwiki-grid-display-header-filter"><input name="first_name" type="text"  size="10"   title='{{html clean="false"}}xe.search.filters.title{{/html}} {{html clean="false"}}user_first_name{{/html}}' /></td>
                                                    <td class="xwiki-grid-display-header-filter"><input name="last_name" type="text"  size="10"   title='{{html clean="false"}}xe.search.filters.title{{/html}} {{html clean="false"}}user_last_name{{/html}}' /></td>
                                                    <td class="xwiki-grid-display-header-filter"><input name="blog" type="text"  size="20"   title='{{html clean="false"}}xe.search.filters.title{{/html}} {{html clean="false"}}user_blog{{/html}}' /></td>
                                                   <td class="xwiki-grid-display-header-filter">
                                                                                <select name='imtype'><option value=''>none</option>
                                                   <option value="AIM">AIM</option>
                                  <option value="Yahoo">Yahoo</option>
                                  <option value="Jabber">Jabber</option>
                                  <option value="MSN">MSN</option>
                                  <option value="Skype">Skype</option>
                                  <option value="ICQ">ICQ</option>
                                 </select>
                             </td>            
                                                    <td class="xwiki-grid-display-header-filter"><input name="email" type="text"  size="20"   title='{{html clean="false"}}xe.search.filters.title{{/html}} {{html clean="false"}}user_email{{/html}}' /></td>
                                                    <td class="xwiki-grid-display-header-filter"><input name="doc.creator" type="text"  size="20"   title='{{html clean="false"}}xe.search.filters.title{{/html}} {{html clean="false"}}user_doc.creator{{/html}}' /></td>
                                                    <td class="xwiki-grid-display-header-filter"></td>
                                                    <td class="xwiki-grid-display-header-filter"></td>
                                  </tr>
      </thead>
      <tbody id="users-display" class="xwiki-grid-display-body"><tr><td>&nbsp;</td></tr></tbody>
     </table>
     </td>
</tr>
<tr>
<td class="xwiki-grid-pagination" colspan="2">
  <span class="controlPagination">
 <a href="javascript:void(0)" title="{{html clean="false"}}Previous Page{{/html}}" class="prevPagination" onclick="$('users').grid.paginator.gotoPrevPage()"></a>
 <a href="javascript:void(0)" title="{{html clean="false"}}Next Page{{/html}}" class="nextPagination" onclick="$('users').grid.paginator.gotoNextPage()"></a>
</span>
</td>
</tr>
</table>
<script type="text/javascript">
function grid_display_users(row, i, table)
{
  ~// the table row that will hold the record
  var tr = document.createElement('tr');
     ~// first_name
                   var a = document.createElement('a');
         a.href = row.doc_url;
             a.appendChild(document.createTextNode(row.first_name));
        var fieldel = document.createElement('td');
    fieldel.observe("click", function(event){
      var tag = event.element().down("a");
      editProperty(row.page, "XWiki.XWikiUsers", "first_name", function(value) { tag.innerHTML = value});
    });
    fieldel.className = "first_name linkview typetext";
    fieldel.appendChild(a);
    tr.appendChild(fieldel);
           ~// last_name
                   var a = document.createElement('a');
         a.href = row.doc_url;
             a.appendChild(document.createTextNode(row.last_name));
        var fieldel = document.createElement('td');
    fieldel.observe("click", function(event){
      var tag = event.element().down("a");
      editProperty(row.page, "XWiki.XWikiUsers", "last_name", function(value) { tag.innerHTML = value});
    });
    fieldel.className = "last_name linkview typetext";
    fieldel.appendChild(a);
    tr.appendChild(fieldel);
           ~// blog
                   var fieldel = document.createElement('td');
    fieldel.className = "blog linknone typetext";
         fieldel.appendChild(document.createTextNode(row.blog));
        tr.appendChild(fieldel);
           ~// imtype
                   var fieldel = document.createElement('td');
    fieldel.className = "imtype linknone typelist";
         fieldel.appendChild(document.createTextNode(row.imtype));
        tr.appendChild(fieldel);
           ~// email
                   var a = document.createElement('a');
                   a.href = "javascript:void()";
                                      a.appendChild(document.createTextNode(row.email));
        var fieldel = document.createElement('td');
    fieldel.observe("click", function(event){
      var tag = event.element().down("a");
      editProperty(row.page, "XWiki.XWikiUsers", "email", function(value) { tag.innerHTML = value});
    });
    fieldel.className = "email linkeditor typetext";
    fieldel.appendChild(a);
    tr.appendChild(fieldel);
           ~// doc.creator
                   var fieldel = document.createElement('td');
    fieldel.className = "doc_creator linknone typetext";
         fieldel.appendChild(document.createTextNode(row.doc_creator));
        tr.appendChild(fieldel);
           ~// _attachment
                   var fieldel = document.createElement('td');
    fieldel.className = "_attachment linknone typenone";
         fieldel.innerHTML = row._attachment;
        tr.appendChild(fieldel);
           ~// _avatar
                   var fieldel = document.createElement('td');
    fieldel.className = "_avatar linknone typenone";
         fieldel.innerHTML = row._avatar;
        tr.appendChild(fieldel);
          return tr;
}
var ta = new ASSTable("/xwiki/bin/view/XWiki/GridExtensionResult?xpage=plain&transprefix=user_&classname=XWiki.XWikiUsers&collist=first_name,last_name,blog,imtype,email,doc.creator,_attachment,_avatar&first_name_class=${propClassName}&last_name_class=${propClassName}&blog_class=${propClassName}&imtype_class=${propClassName}&email_class=${propClassName}&doc.creator_class=${propClassName}&_attachment_class=${propClassName}&_avatar_class=${propClassName}", 4 , "users", grid_display_users, true, 10);
$('users').grid = ta;
</script>

{{/html}}
{{/html}}

Result

{pre}

{/pre} {{html clean="false" wiki="true"}} {{html clean="false" wiki="true"}} <table id="users" class="xwiki-grid"> <tr> <td class="xwiki-grid-pagination" colspan="2"> <span id="users-limits" class="xwiki-grid-limits"></span> <span id="users-ajax-loader" class="xwiki-grid-loader"><img src="/xwiki/skins/flamingo/icons/ajax-loader.gif" alt="{{html clean="false"}}xe.grid.loading{{/html}}" title="" />{{html clean="false"}}xe.grid.loading{{/html}}</span> <span class="controlPagination"> <a href="javascript:void(0)" title="{{html clean="false"}}Previous Page{{/html}}" class="prevPagination" onclick="$('users').grid.paginator.gotoPrevPage()"></a> <a href="javascript:void(0)" title="{{html clean="false"}}Next Page{{/html}}" class="nextPagination" onclick="$('users').grid.paginator.gotoNextPage()"></a> </span> <span class="pagination"> <span id="users-pagination-text" class="xwiki-grid-pagination-text">{{html clean="false"}}Page{{/html}}</span> <span id="users-pagination" class="xwiki-grid-pagination-content" ></span> </span> </td> </tr> <tr><td class="xwiki-grid-display-container"> <table class="xwiki-grid-display"> <thead class="xwiki-grid-display-header"> <tr> <th class="xwiki-grid-display-header-text sortable asc " rel="_avatar" >{{html clean="false"}}user__avatar{{/html}}</th> <th class="xwiki-grid-display-header-text sortable asc " rel="first_name" >{{html clean="false"}}user_first_name{{/html}}</th> <th class="xwiki-grid-display-header-text sortable selected asc " rel="last_name" >{{html clean="false"}}user_last_name{{/html}}</th> <th class="xwiki-grid-display-header-text sortable asc " rel="email" >{{html clean="false"}}user_email{{/html}}</th> </tr> <tr id="xwiki-grid-display-filters"> <td class="xwiki-grid-display-header-filter"></td> <td class="xwiki-grid-display-header-filter"><input name="first_name" type="text" size="10" title='{{html clean="false"}}xe.search.filters.title{{/html}} {{html clean="false"}}user_first_name{{/html}}' /></td> <td class="xwiki-grid-display-header-filter"><input name="last_name" type="text" size="10" title='{{html clean="false"}}xe.search.filters.title{{/html}} {{html clean="false"}}user_last_name{{/html}}' /></td> <td class="xwiki-grid-display-header-filter"><input name="email" type="text" size="20" title='{{html clean="false"}}xe.search.filters.title{{/html}} {{html clean="false"}}user_email{{/html}}' /></td> </tr> </thead> <tbody id="users-display" class="xwiki-grid-display-body"><tr><td>&nbsp;</td></tr></tbody> </table> </td> </tr> <tr> <td class="xwiki-grid-pagination" colspan="2"> <span class="controlPagination"> <a href="javascript:void(0)" title="{{html clean="false"}}Previous Page{{/html}}" class="prevPagination" onclick="$('users').grid.paginator.gotoPrevPage()"></a> <a href="javascript:void(0)" title="{{html clean="false"}}Next Page{{/html}}" class="nextPagination" onclick="$('users').grid.paginator.gotoNextPage()"></a> </span> </td> </tr> </table> <script type="text/javascript"> function grid_display_users(row, i, table) { ~// the table row that will hold the record var tr = document.createElement('tr'); ~// _avatar var fieldel = document.createElement('td'); fieldel.className = "_avatar linknone typenone"; fieldel.innerHTML = row._avatar; tr.appendChild(fieldel); ~// first_name var a = document.createElement('a'); a.href = row.doc_url; a.appendChild(document.createTextNode(row.first_name)); var fieldel = document.createElement('td'); fieldel.observe("click", function(event){ var tag = event.element().down("a"); editProperty(row.page, "${propClassName}", "first_name", function(value) { tag.innerHTML = value}); }); fieldel.className = "first_name linkview typetext"; fieldel.appendChild(a); tr.appendChild(fieldel); ~// last_name var a = document.createElement('a'); a.href = row.doc_url; a.appendChild(document.createTextNode(row.last_name)); var fieldel = document.createElement('td'); fieldel.observe("click", function(event){ var tag = event.element().down("a"); editProperty(row.page, "${propClassName}", "last_name", function(value) { tag.innerHTML = value}); }); fieldel.className = "last_name linkview typetext"; fieldel.appendChild(a); tr.appendChild(fieldel); ~// email var a = document.createElement('a'); a.href = "javascript:void()"; a.appendChild(document.createTextNode(row.email)); var fieldel = document.createElement('td'); fieldel.observe("click", function(event){ var tag = event.element().down("a"); editProperty(row.page, "XWiki.XWikiUsers", "email", function(value) { tag.innerHTML = value}); }); fieldel.className = "email linkeditor typetext"; fieldel.appendChild(a); tr.appendChild(fieldel); return tr; } var ta = new ASSTable("/xwiki/bin/view/XWiki/GridExtensionResult?xpage=plain&transprefix=user_&classname=XWiki.XWikiUsers&collist=_avatar,first_name,last_name,email&_avatar_class=${propClassName}&first_name_class=${propClassName}&last_name_class=${propClassName}&email_class=${propClassName}", 4 , "users", grid_display_users, true, 10); $('users').grid = ta; </script> {{/html}} {{/html}}