## 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