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 sectionInstallation
You need to add XWiki.GridExtensionTranslations to the list of Translations bundles in your administration screenExample
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> </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}}
{/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> </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);
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}}