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' });

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');

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' });

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');

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' });

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' });

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');

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' });

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' });

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' });

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' });

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' });

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' });

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'); 

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' });

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' });

(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.

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;
                        }
                        });

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' });

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' });

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');

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');

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');

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');

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. }); 

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; }); 

Calls the widget's destroy function.

Code examples

Invoke the destroy method.

$('#jqxTagCloud').jqxTagCloud('destroy'); 

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'); 

Returns an array with indices of all hidden tags.

Code examples

Get hidden indices with getHiddenTagsList method.

var hidden = $('#jqxTagCloud').jqxTagCloud('getHiddenTagsList'); 

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'); 

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'); 

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.
                    

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); 

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); 

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); 

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);
    }