[Solved] setting node css from js

[cp]

subItems.push(
{
   Text: "Some text"
   Value: "Some value",
   HtmlAttributes: ... class: someClass ...
});

How does one set the css class for a particular node when a treeview is loaded via Ajax?

Thanks,

[Hristo Germanov]

Hello Claudiu,

Thank you for contacting us.

Could you try this code snippet:

<%= Html.Telerik().TreeView()
      .Name("TreeView")
      .Items(item =>
      {
          item.Add()
             ...
             .HtmlAttributes(new { @class="test" })
             .Items(subItem =>
             {
                 subItem.Add()
                      ...
                      .HtmlAttributes(new { @class="test1" });
             });
      })
    %>

For more information you can examine our online demo for the TreeView component.

Kind regards,
Hristo Germanov
the Telerik team

[cp]

But how would I do it when using client side binding?

http://demos.telerik.com/aspnet-mvc/razor/treeview/clientsidebinding

Thanks,

[Dimo]

Hi Claudiu,

You can use the OnDataBound client event:

http://www.telerik.com/help/aspnet-mvc/telerik-ui-components-treeview-client-api-and-events.html#OnDataBound

It is raised when all new items have been populated, so in order to find the desired node, you should use some DOM operations (e.g. find a node by its content or hierarchy position in the DOM tree).

Best wishes,
Dimo
the Telerik team

[cp]

I'm not trying to find nodes, as I stated in my first post I'd like to set a css class on specific nodes at bind time.

Thanks,

[Dimo]

Hi Claudiu,

Since there is no event fired when each node is databound, you have to use the OnDataBound event, which is fired after all nodes have been populated. And at that time you will have to determine by some criteria which specific nodes need the custom CSS class.

All the best,
Dimo
the Telerik team