ASPxClientTokenBox.GetTokenHtmlElement(index) Method

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

Declaration

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.

JS

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

ASPX

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

C#

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

VB.NET

Protected Sub ASPxTokenBox1_ItemRowPrepared(ByVal sender As Object, ByVal e As DevExpress.Web.ListBoxItemRowPreparedEventArgs)
    e.Row.ToolTip = e.Item.GetFieldValue("Description").ToString()
End Sub

Protected Sub ASPxTokenBox1_DataBound(ByVal sender As Object, ByVal e As EventArgs)
    Dim tokenBox = DirectCast(sender, ASPxTokenBox)
    Dim tokenDescription As Dictionary(Of Object, Object) = tokenBox.Items.Cast(Of ListEditItem)().ToDictionary(Function(g) g.Value, Function(g) g.GetFieldValue("Description"))
    tokenBox.JSProperties("cpTokenDescriptions") = tokenDescription
End Sub