# Custom Node

Develop powerful and lightweight web applications using ASP.NET MVC controls. Learn more about the ComponentOne MVC controls in ASP.NET MVC documentation.

## Content

The TreeView control allows you to display custom content in nodes. You can customize the content of the TreeView nodes using the **formatItem** event. The event handler's parameters include the element that represents the node and the data item being rendered.

The example uses the [OnClientFormatItem](/componentone/api/mvc/online-mvc/dotnet-framework-api/C1.Web.Mvc/C1.Web.Mvc.TreeView.OnClientFormatItem.html) event to add a "new" badge to the right of new items on the treeview. The below example code uses **Property** model added in the [QuickStart](/componentone/docs/mvc/online-mvc/workwithcontrols/TreeView/TreeViewQuickStart) section.

![](https://cdn.mescius.io/document-site-files/images/2b3ac322-100e-4637-958d-fb40dcda3f44/images/customnode.png)

In the code example below, we subscribe the **OnClientFormatItem** method by assigning the JavaScript function name in the razor code. In the **\<Script>** section, we declare the formatItem function to check, if the dataItem is a new item in the list, then it will add a custom image beside the new nodes. The image is stored inside the **Content** folder of your MVC application.

In the code example below, **OnClientFormatItem()** method raises the formatItem event. In the **formatItem(treeview, args)** function, **treeview** is the sender, and **args** is a type of FormatNodeEventArgs class.

**CustomNode.cshtml**

```razor
@using <ApplicationName.Models>
@model Property[]
<script type="text/javascript">
     function formatItem(treeview, args) {
       if (args.dataItem.NewItem) {
        args.element.innerHTML +=
            '<img style="margin-left:6px" src="@Href("~/Content/new.png")"/>';
            }
        }
</script>
@(Html.C1().TreeView()
    .Bind(Model)
    .DisplayMemberPath("Header")
    .ChildItemsPath("Items")
    .OnClientFormatItem("formatItem"))
```

## See Also

[Key Features](/componentone/docs/mvc/online-mvc/workwithcontrols/TreeView/TreeViewKeyFeatures)

[Quick Start](/componentone/docs/mvc/online-mvc/workwithcontrols/TreeView/TreeViewQuickStart)

**Reference**

[TreeView Class](/componentone/api/mvc/online-mvc/dotnet-framework-api/C1.Web.Mvc/C1.Web.Mvc.TreeView.html)