[Solved] Set child node text color

[Donna Stewart]

I have a treeview that I am loading via AJAX  and I would like to be able to set each child node's text color based on some criteria. I am using the htmlattributes.add method, but it doesn't seem to be working.  I've tried using style and class, both to no avail.  Here is my controller code:

Function GetReportsForUser(ByVal userKey As Integer) As JsonResult
    Dim gmcPermissions As New GMCPermissions
    Dim reportNodes As New List(Of TreeViewItem)
    Dim reportsReturned As New List(Of GMCListItem)
    Dim scheduledRpts As New List(Of GMCListItem)
    Dim statusReturn As New StatusReturn
    Dim reportObj As New CustomerReport
    Dim scheduledRpt As New GMCListItem
    Dim parentNode As New TreeViewItem
    Dim childNode As TreeViewItem
    statusReturn = gmcPermissions.GetReportsForUser(userKey, reportsReturned, scheduledRpts)
    If reportsReturned.Count > 0 Then
        Dim initialReportType As String = reportsReturned.Item(0).value
        parentNode.Text = initialReportType
        parentNode.Value = initialReportType
        For Each rpt In reportsReturned
            reportObj = rpt.dataObject
            If rpt.value.Equals(initialReportType) Then
                childNode = New TreeViewItem
                scheduledRpt = scheduledRpts.Find(New PredicateWrapper(Of GMCListItem, GMCListItem)(rpt, AddressOf ReportMatch))
                childNode.Text = reportObj.FileName
                childNode.Value = reportObj.ReportKey
                '                    childNode.LinkHtmlAttributes.Add("title", reportObj.Description)
                If Not scheduledRpt Is Nothing Then
                    childNode.HtmlAttributes.Add("style", "color:#719501")
                Else
                    childNode.HtmlAttributes.Add("style", "color:Red")
                End If
                parentNode.Items.Add(childNode)
            Else
                reportNodes.Add(parentNode)
                initialReportType = rpt.value
                parentNode = New TreeViewItem
                parentNode.Text = rpt.value
                parentNode.Value = rpt.value
                childNode = New TreeViewItem
                scheduledRpt = scheduledRpts.Find(New PredicateWrapper(Of GMCListItem, GMCListItem)(rpt, AddressOf ReportMatch))
                childNode.Text = reportObj.FileName
                childNode.Value = reportObj.ReportKey
                '                    childNode.LinkHtmlAttributes.Add("title", reportObj.Description)
                If Not scheduledRpt Is Nothing Then
                    childNode.HtmlAttributes.Add("style", "color:#719501")
                Else
                    childNode.HtmlAttributes.Add("style", "color:Red")
                End If
                parentNode.Items.Add(childNode)
            End If
        Next
        reportNodes.Add(parentNode)
    End If
    Return New JsonResult() With {.Data = reportNodes}
End Function

Here is the view code:

The treeview:

               <div style="float:left; width:54%;">
                    <span class="listbox-label">Customer Reports</span><br />
                    <%: Html.Telerik().TreeView.Name("UserReports").HtmlAttributes(New With {.style = "height:250px;"})%>
                </div>

The javascript (this function is called in  $(document).ready(function ()) :
        function getWebItemsForUserGroup() {
            var webitemstreeview = $("#UserWebItems");
            var reporttreeview = $('#UserReports');
            $.post('<%= Url.Action("GetReportsForUser", "User")%>', { 'userKey': '<%: Model.webUser.UserKey %>' },
                function (result) {
                    if (result.length > 0) {
                        reporttreeview.data('tTreeView').bindTo(result);
                    }
                    else {
                        reporttreeview.data('tTreeView').bindTo({ Text: "No customer reports" });
                    }
                },
                "json"
            );

            $.post('<%= Url.Action("GetWebMenuForUser", "User")%>', { 'userKey': '<%: Model.webUser.UserKey %>' },
                function (result) {
                    if (result.length > 0) {
                        webitemstreeview.data('tTreeView').bindTo(result);
                    }
                    else {
                        webitemstreeview.data('tTreeView').bindTo({ Text: "No web menu options" });
                    }
                },
                "json"
            );
        }

Your help is very much appreciate!!
Donna

[Dimo]

Hello Donna,

I am afraid that sending custom item HtmlAttributes via Ajax binding is not supported. You either need to use server binding only, or think of some other way to pass color information to the client and apply it manually (e.g. in the OnDataBound event).

Regards,
Dimo
the Telerik team

[Donna Stewart]

Thank you, Dimo.  Your answered triggered my memory - I have actually done this before. 
For anyone who might be interested:

 Here is how I did it earlier:

If usr.value.Equals("True") Then
    nodes.Add(New TreeViewItem With {.Text = "<span style='color:#2BE01B;'>" + userDisplayName + "</span>", .Value = webUsr.UserKey, .Encoded = False})
Else
    nodes.Add(New TreeViewItem With {.Text = "<span style='color:Red;'>" + userDisplayName + "</span>", .Value = webUsr.UserKey, .Encoded = False})
End If

Here is how I did it now for this particular piece of code:

If Not scheduledRpt Is Nothing Then
    childNode.Text = "<span style='color:719501;'>" + reportObj.FileName + "</span>"
Else
    childNode.Text = "<span style='color:Red;'>" + reportObj.FileName + "</span>"
End If