Name
|
Type
|
Default
|
alterTextCase
|
String
|
'none'
|
Sets or gets the alterTextCase property used to specify the field by which tags should be sorted.
Possible values are 'none', 'allLower', 'allUpper', 'firstUpper', 'titleCase'
Set the alterTextCase property.
$('#jqxTagCloud').jqxTagCloud({ alterTextCase: 'firstUpper' });
Get the alterTextCase property.
|
autoBind
|
Boolean
|
true
|
Sets whether the tag cloud auto binds to data adapter on widget creation.
If set to false, then dataBind method must be called manually.
Code examples
Set the autoBind property.
|
disabled
|
Boolean
|
false
|
Enables or disables the ability to follow tag links in jqxTagCloud.
Code examples
Set the disabled property.
$('#jqxTagCloud').jqxTagCloud({ disabled: false });
Get the disabled property.
var disabled = $('#jqxTagCloud').jqxTagCloud('disabled');
|
displayLimit
|
Integer
|
null
|
Sets or gets the displayLimit property used to filter highest values tags up to the number specified.
Set the displayLimit property.
$('#jqxTagCloud').jqxTagCloud({ displayLimit: 10 });
Get the displayLimit property.
|
displayMember
|
String
|
'label'
|
Sets or gets the field name used for the tag label.
Code examples
Set the displayMember property.
$('#jqxTagCloud').jqxTagCloud({ displayMember: 'tagLabel' });
Get the displayMember property.
var displayMember = $('#jqxTagCloud').jqxTagCloud('displayMember');
|
displayValue
|
Boolean
|
false
|
Sets or gets the displayValue property used to specify whether to add the tag value field after the text.
Set the displayValue property.
$('#jqxTagCloud').jqxTagCloud({ displayValue: true });
Get the displayValue property.
|
fontSizeUnit
|
String
|
'px'
|
Sets or gets the fontSizeUnit property used to set the font size unit
possible values 'px', 'em', '%'
Set the fontSizeUnit property.
$('#jqxTagCloud').jqxTagCloud({ fontSizeUnit: 'em' });
Get the fontSizeUnit property.
|
height
|
Number/String
|
null
|
Sets or gets the jqxTagCloud's height.
Code examples
Set the height property.
$('#jqxTagCloud').jqxTagCloud({ height: 35 });
Get the height property.
var height = $('#jqxTagCloud').jqxTagCloud('height');
|
maxColor
|
Color String
|
null
|
Sets or gets the maxColor property used to specify color of the tags for the elements with highest value attribute.
Together with minColor property will set color of tags in a gradient fashion depending on their value attribute towards the highest value.
Possible values: all browser supported colors including rgba.
Set the maxColor property.
$('#jqxTagCloud').jqxTagCloud({ maxColor: 'red' });
Get the maxColor property.
|
maxFontSize
|
Integer
|
24
|
Sets or gets the maxFontSize property used to set the font size of the tags with the highest value attribute.
Set the maxFontSize property.
$('#jqxTagCloud').jqxTagCloud({ maxFontSize: 30 });
Get the maxFontSize property.
|
maxValueToDisplay
|
Integer
|
0
|
Sets or gets the maxValueToDisplay property used to filter tags with value higher than the specified.
Set the maxValueToDisplay property.
$('#jqxTagCloud').jqxTagCloud({ maxValueToDisplay: 10 });
Get the maxValueToDisplay property.
|
minColor
|
Color String
|
null
|
Sets or gets the minColor property used to specify color of the tags for the elements with lowest value attribute.
Together with maxColor property will set color of tags in a gradient fashion depending on their value attribute towards the highest value.
Possible values: all browser supported colors including rgba.
Set the minColor property.
$('#jqxTagCloud').jqxTagCloud({ minColor: 'green' });
Get the minColor property.
|
minFontSize
|
Integer
|
10
|
Sets or gets the minFontSize property used to set the font size of the tags with the lowest value attribute.
Set the minFontSize property.
$('#jqxTagCloud').jqxTagCloud({ minFontSize: 10 });
Get the minFontSize property.
|
minValueToDisplay
|
Integer
|
0
|
Sets or gets the minValueToDisplay property used to filter tags with value lower than the specified.
Set the minValueToDisplay property.
$('#jqxTagCloud').jqxTagCloud({ minValueToDisplay: 10 });
Get the minValueToDisplay property.
|
rtl
|
Boolean
|
false
|
Sets or gets a value indicating whether widget's elements are aligned to support locales using right-to-left fonts.
Code example
Set the rtl property.
$('#jqxTagCloud').jqxTagCloud({ rtl : true });
Get the rtl property.
var rtl = $('#jqxTagCloud').jqxTagCloud('rtl');
|
sortBy
|
String
|
'none'
|
Sets or gets the sortBy property used to specify the field by which tags should be sorted.
Possible values are 'none', 'label', 'value'
Set the sortBy property.
$('#jqxTagCloud').jqxTagCloud({ sortBy: 'value' });
Get the sortBy property.
|
sortOrder
|
String
|
'ascending'
|
Sets or gets the sortOrder property used to specify the direction in which tags should be sorted.
Possible values are 'ascending', 'descending'
Set the sortOrder property.
$('#jqxTagCloud').jqxTagCloud({ sortOrder: 'descending' });
Get the sortOrder property.
|
source
|
Object
|
{}
|
(requires jqxdata.js)
The source object represents a set of key/value pairs.
url: A string containing the URL to which the request is sent.
data: Data to be sent to the server.
localdata: data array or data string pointing to a local data source.
datatype: the data's type. Possible values: 'xml', 'json', 'jsonp', 'tsv', 'csv', 'local', 'array', 'observablearray'.
type: The type of request to make ("POST" or "GET"), default is "GET".
id: A string containing the Id data field.
root: A string describing where the data begins and all other loops begin from this element.
record: A string describing the information for a particular record.
|
tagRenderer
|
function
|
null
|
A callback function used for custom tags rendering.
function tagRenderer (itemData, minValue, valueRange)
itemData - the record information of the current tag
minValue - the lowest value attribute of all elements in the cloud
valueRange - the difference between the lowest and highest value attributes in the cloud ( can be used for custom logic )
The function must return valid content for an anchor tag, usually a string but can be also be a jquery element object.
Set the tagRenderer callback function.
$('#jqxTagCloud').jqxTagCloud({ tagRenderer: function () {
var el = $('' + record.countryName + '');
var img = $(' ');
img.on('click', function (event) {
var id = $(event.target).closest('li').index();
var index = $('#tagCloud').jqxTagCloud('getRenderedTags')[id].index;
$('#tagCloud').jqxTagCloud('removeAt', index);
event.preventDefault();
event.stopPropagation();
});
el.append(img);
return el;
}
});
|
takeTopWeightedItems
|
Boolean
|
false
|
Sets or gets the takeTopWeightedItems property.
Property indicates if displayLimit will prioritize highest value members
Set the takeTopWeightedItems property.
$('#jqxTagCloud').jqxTagCloud({ takeTopWeightedItems: true });
Get the takeTopWeightedItems property.
|
textColor
|
Color String
|
null
|
Sets or gets the textColor property used to specify color of the tags in the case where the minColor and maxColor properties are not set.
Possible values: all browser supported colors including rgba.
Set the textColor property.
$('#jqxTagCloud').jqxTagCloud({ textColor: 'red' });
Get the textColor property.
|
urlBase
|
String
|
''
|
Sets or gets the field name used for common base URL path for all tags.
Code examples
Set the urlBase property.
$('#jqxTagCloud').jqxTagCloud({ urlBase: 'http://wikipedia.com/' });
Get the urlBase property.
var urlBase = $('#jqxTagCloud').jqxTagCloud('urlBase');
|
urlMember
|
String
|
'url'
|
Sets or gets the field name used by the anchor element.
Code examples
Set the urlMember property.
$('#jqxTagCloud').jqxTagCloud({ urlMember: 'tagHref' });
Get the urlMember property.
var urlMember = $('#jqxTagCloud').jqxTagCloud('urlMember');
|
valueMember
|
String
|
'value'
|
Sets or gets the field name used for value/weight.
Code examples
Set the valueMember property.
$('#jqxTagCloud').jqxTagCloud({ valueMember: 'postCount' });
Get the valueMember property.
var valueMember = $('#jqxTagCloud').jqxTagCloud('valueMember');
|
width
|
Number/String
|
null
|
Sets or gets the jqxTagCloud's width.
Code examples
Set the width property.
$('#jqxTagCloud').jqxTagCloud({ width: '200px' });
Get the width property.
var width = $('#jqxTagCloud').jqxTagCloud('width');
|
|
bindingComplete
|
Event
|
|
This event is triggered when the widget has completed binding to a dataAdapter.
Code examples
Bind to the bindingComplete event.
$('#jqxTagCloud').on('bindingComplete', function (event) { // Some code here. });
|
itemClick
|
Event
|
|
This event is triggered when a tag element is clicked.
Event Arguments:
- label - item's label.
- value - item's value.
- url - item's url.
- visibleIndex - item's visible index.
- index - item's index.
- originalEvent - the Click event object.
- target - item's html element.
Code examples
Bind to the itemClick event.
$('#jqxTagCloud').on('itemClick', function (event) { var args = event.args; });
|
|
destroy
|
Method
|
|
Calls the widget's destroy function.
Code examples
Invoke the destroy method.
$('#jqxTagCloud').jqxTagCloud('destroy');
|
findTagIndex
|
Method
|
|
Returns the index of the first tag with the specified label (displayMember).
Code examples
Get index of a tag with label 'USA' with findTagIndex method.
var index = $('#jqxTagCloud').jqxTagCloud('findTagIndex', 'USA');
|
getHiddenTagsList
|
Method
|
|
Returns an array with indices of all hidden tags.
Code examples
Get hidden indices with getHiddenTagsList method.
var hidden = $('#jqxTagCloud').jqxTagCloud('getHiddenTagsList');
|
getRenderedTags
|
Method
|
|
Returns an array with a copy of all tags that have been rendered in the order that they have been rendered.
This array excludes filtered values. But includes hidden ones.
Code examples
Get rendered tags list with getRenderedTags method.
var rendered = $('#jqxTagCloud').jqxTagCloud('getRenderedTags');
|
getTagsList
|
Method
|
|
Returns an array with a copy of all tags.
This list is used before any filtering/sorting/hiding is done.
Code examples
Get all tags list with getTagsList method.
var tagsList = $('#jqxTagCloud').jqxTagCloud('getTagsList');
|
hideItem
|
Method
|
|
Hides an element with specified index.
Code examples
Hide the the first visible record of the cloud with hideItem method.
var tagItem = $('#jqxTagCloud').jqxTagCloud('getRenderedTags')[0];
var index = tagItem.index;
$('#jqxTagCloud').jqxTagCloud('hideItem', index);
// Note: getRenderedTags will include hidden tags, so doing this repeatedly will have no effect.
|
insertAt
|
Method
|
|
Inserts an element before an element with specified index
Code examples
Add an item at the front of the cloud with insertAt method.
var index = 0;
var tagItem = { label: 'hardware', value: 215, url: '/categiries/hardware' };
// label, value and url fields need to match the respective value of the displayMember, valueMember and urlMember fields of your cloud.
$('#jqxTagCloud').jqxTagCloud('insertAt', index, tagItem);
|
removeAt
|
Method
|
|
Deletes an element with specified index.
Code examples
Delete the the first visible record of the cloud with removeAt method.
var tagItem = $('#jqxTagCloud').jqxTagCloud('getRenderedTags')[0];
var index = tagItem.index;
$('#jqxTagCloud').jqxTagCloud('removeAt', index);
|
updateAt
|
Method
|
|
Updates an element with specified index.
Code examples
Update the the first visible record of the cloud with updateAt method.
var tagItem = $('#jqxTagCloud').jqxTagCloud('getRenderedTags')[0];
var index = tagItem.index;
tagItem.label = 'Improved' + tagItem.label;
// label, value and url fields need to match the respective value of the displayMember, valueMember and urlMember fields of your cloud.
$('#jqxTagCloud').jqxTagCloud('updateAt', index, tagItem);
|
showItem
|
Method
|
|
Reveals a hidden element with specified index.
Code examples
Reveal the the last hidden record of the cloud with showItem method.
var hiddenItems = $('#jqxTagCloud').jqxTagCloud('getHiddenTagsList');
var len = hiddenItems.length;
if (len > 0) {
var index = hiddenItems[len - 1];
$('#jqxTagCloud').jqxTagCloud('showItem', index);
}
|