## Properties

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.
    var value = $('#jqxTagCloud').jqxTagCloud({ 'alterTextCase' });
Try it: alterTextCase is set to 'titleCase'
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');
Try it: disabled is set to true
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.
    var value = $('#jqxTagCloud').jqxTagCloud({ 'displayLimit' });
Try it: displayLimit is set to 3
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');
Try it: displayMember is set to 'name'
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.
    var value = $('#jqxTagCloud').jqxTagCloud({ 'displayValue' });
Try it: displayValue is set to true
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.
    var value = $('#jqxTagCloud').jqxTagCloud({ 'fontSizeUnit' });
Try it: fontSizeUnit is set to 'em'
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');
Try it: height is set to 50
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.
    var value = $('#jqxTagCloud').jqxTagCloud({ 'maxColor' });
Try it: maxColor is set to 'darkgreen'
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.
    var value = $('#jqxTagCloud').jqxTagCloud({ 'maxFontSize' });
Try it: maxFontSize is set to 5
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.
    var value = $('#jqxTagCloud').jqxTagCloud({ 'maxValueToDisplay' });
Try it: maxValueToDisplay is set to 50
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.
    var value = $('#jqxTagCloud').jqxTagCloud({ 'minColor' });
Try it: minColor is set to 'lime'
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.
    var value = $('#jqxTagCloud').jqxTagCloud({ 'minFontSize' });
Try it: minFontSize is set to 1
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.
    var value = $('#jqxTagCloud').jqxTagCloud({ 'minValueToDisplay' });
Try it: minValueToDisplay is set to 30
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');
Try it: rtl is set to true
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.
    var value = $('#jqxTagCloud').jqxTagCloud({ 'sortBy' });
Try it: sortBy is set to 'label'
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.
    var value = $('#jqxTagCloud').jqxTagCloud({ 'sortOrder' });
Try it: sortOrder is set to 'descending'
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. Try it: jqxTagCloud with data source
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;
                            }
                            });
Try it: Use a custom tagRenderer function
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.
    var value = $('#jqxTagCloud').jqxTagCloud({ 'takeTopWeightedItems' });
Try it: takeTopWeightedItems is set to 'true'
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.
    var value = $('#jqxTagCloud').jqxTagCloud({ 'textColor' });
Try it: textColor is set to 'red'
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');
Try it: urlBase is set to 'http://jqwidgets.com/'
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');
Try it: urlMember is set to "url"
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');
Try it: valueMember is set to 'rating'
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');
Try it: width is set to 600
## Events
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. });
Try it: Bind to the bindingComplete event
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; });
Try it: Bind to the itemClick event
## Methods
destroy | Method |
Calls the widget's destroy function.
Parameter | Type | Description
--- | --- | ---
None |  |
Return Value None #### Code examples Invoke the `destroy` method.
    $('#jqxTagCloud').jqxTagCloud('destroy');
Try it: destroy widget
findTagIndex | Method |
Returns the index of the first tag with the specified label (displayMember).
Parameter | Type | Description
--- | --- | ---
tag | String |
Return Value Number #### Code examples Get index of a tag with label 'USA' with `findTagIndex` method.
    var index = $('#jqxTagCloud').jqxTagCloud('findTagIndex', 'USA');
Try it: Get tagIndex by label
getHiddenTagsList | Method |
Returns an array with indices of all hidden tags.
Parameter | Type | Description
--- | --- | ---
None |  |
Return Value Array #### Code examples Get hidden indices with `getHiddenTagsList` method.
    var hidden = $('#jqxTagCloud').jqxTagCloud('getHiddenTagsList');
Try it: Get hidden list
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.
Parameter | Type | Description
--- | --- | ---
None |  |
Return Value Array #### Code examples Get rendered tags list with `getRenderedTags` method.
    var rendered = $('#jqxTagCloud').jqxTagCloud('getRenderedTags');
Try it: Get rendered tags list
getTagsList | Method |
Returns an array with a copy of all tags. This list is used before any filtering/sorting/hiding is done.
Parameter | Type | Description
--- | --- | ---
None |  |
Return Value Array #### Code examples Get all tags list with `getTagsList` method.
    var tagsList = $('#jqxTagCloud').jqxTagCloud('getTagsList');
Try it: Get all tags list
hideItem | Method |
Hides an element with specified index.
Parameter | Type | Description
--- | --- | ---
index | Number |
Return Value None #### 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.
Try it: hideItem example
insertAt | Method |
Inserts an element before an element with specified index
Parameter | Type | Description
--- | --- | ---
index | Number |
item | Object |
Return Value None #### 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);
Try it: insertAt example
removeAt | Method |
Deletes an element with specified index.
Parameter | Type | Description
--- | --- | ---
index | Number |
Return Value None #### 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);
Try it: removeAt example
updateAt | Method |
Updates an element with specified index.
Parameter | Type | Description
--- | --- | ---
index | Number |
item | Object |
Return Value None #### 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);
Try it: updateAt example
showItem | Method |
Reveals a hidden element with specified index.
Parameter | Type | Description
--- | --- | ---
index | Number |
Return Value None #### 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);
        }
Try it: showItem example