Skip to main content

ASPxClientTokenBox.GetTokenHtmlElement(index) Method

Returns an HTML span element that corresponds to the specified token.

#Declaration

TypeScript
GetTokenHtmlElement(
    index: number
): any

#Parameters

Name Type Description
index number

The token index.

#Returns

Type Description
any

An object that is the HTML span element that corresponds to the specified token.

#Remarks

The following code sample demonstrates how to add a tooltip and change the background color of tokens.

Colored token box with tooltip

function AddTooltipToTokens(s, e) {
    var tokenCollection = s.GetTokenValuesCollection();
    for (var i = 0; i < tokenCollection.length; i++) {
        var tokenDescr = s.cpTokenDescriptions[tokenCollection[i]];
        var tokenElem = s.GetTokenHtmlElement(i);
        if (tokenElem.getAttribute('data-modified'))
            continue;
        if (tokenDescr)
            tokenElem.setAttribute("title", tokenDescr);
        var backColor = tokenCollection[i] % 2 == 0 ? 'red' : 'yellow';
        tokenElem.style.backgroundColor = backColor;
        tokenElem.setAttribute('data-modified', true);
    }
}
<dx:ASPxTokenBox ID="ASPxTokenBox1" runat="server" ItemValueType="System.Int32" TextField="CategoryName" 
                 ValueField="CategoryID" DataSourceID="AccessDataSource1" 
                 OnItemRowPrepared="ASPxTokenBox1_ItemRowPrepared" OnDataBound="ASPxTokenBox1_DataBound">
    <ClientSideEvents Init="AddTooltipToTokens" 
                      ValueChanged="AddTooltipToTokens"
                      EndCallback="AddTooltipToTokens" />
</dx:ASPxTokenBox>
protected void ASPxTokenBox1_ItemRowPrepared(object sender, DevExpress.Web.ListBoxItemRowPreparedEventArgs e) {
    e.Row.ToolTip = e.Item.GetFieldValue("Description").ToString();
}
protected void ASPxTokenBox1_DataBound(object sender, EventArgs e) {
    var tokenBox = (ASPxTokenBox)sender;
    Dictionary<object, object> tokenDescription =  tokenBox.Items.Cast<ListEditItem>().ToDictionary(g => g.Value, g => g.GetFieldValue("Description"));
    tokenBox.JSProperties["cpTokenDescriptions"] = tokenDescription;
}
See Also