# Extend the model of built-in widgets

## Overview

You can extend widget models to modify widgets implementation.

The following example demonstrates how to extend the model of the *Navigation* widget and thus modify the widget's display settings. You first implement a custom model that represents page nodes with descriptions and then modify the widget's view to use the new model.

## Implement the custom model

First, in the `Mvc/Models/Navigation` folder you create a new view model that represents a page node. The model inherits from the default model, so it is usable. Add an extra `Description` property to the model:

```C#
using System.Web;
using Telerik.Sitefinity.Frontend.Navigation.Mvc.Models;
using Telerik.Sitefinity.Web;

namespace SitefinityWebApp
{
   public class CustomNodeViewModel : NodeViewModel
   {
       public CustomNodeViewModel()
           : base()
       {
           this.description = this.GetDescription();
       }

       public CustomNodeViewModel(SiteMapNode node, string url, string target, bool isCurrentlyOpened, bool hasChildOpen)

           : base(node, url, target, isCurrentlyOpened, hasChildOpen)
       {
           this.description = this.GetDescription();
       }

       public string Description
       {
           get
           {
               return this.description;
           }
       }

       private string GetDescription()
       {
           var pageNode = this.OriginalSiteMapNode as PageSiteNode;
           if (pageNode != null)
           {
               return pageNode.Description ?? string.Empty;
           }

           else
           {
               return string.Empty;
           }
       }

       private readonly string description;
   }
}
```

As a result, the new model extracts page descriptions.

Next, you create a new model that is aware of the custom view model. The new navigation model inherits from the default model and exposes the same constructors. You then override the `InstantiateNodeViewModel` method and its overloads in the new model:

```C#
using System;
using System.Web;
using Telerik.Sitefinity.Frontend.Navigation.Mvc.Models;

namespace SitefinityWebApp
{
   public class CustomNavigationModel : NavigationModel
   {
       public CustomNavigationModel()
           : base()
       {
       }

       public CustomNavigationModel(PageSelectionMode selectionMode, Guid selectedPageId, SelectedPageModel[] selectedPages, int? levelsToInclude, bool showParentPage, string cssClass, bool openExternalPageInNewTab)

           : base(selectionMode, selectedPageId, selectedPages, levelsToInclude, showParentPage, cssClass, openExternalPageInNewTab)
       {
       }

       protected override NodeViewModel InstantiateNodeViewModel(SiteMapNode node)
       {
           bool isSelectedPage = this.CurrentSiteMapNode != null && this.CurrentSiteMapNode.Key == node.Key;
           string url = this.ResolveUrl(node);
           string target = this.GetLinkTarget(node);
           var hasSelectedChild = this.CurrentSiteMapNode != null && this.CurrentSiteMapNode.IsDescendantOf(node);

           return new CustomNodeViewModel(node, url, target, isSelectedPage, hasSelectedChild);
       }

       protected override NodeViewModel InstantiateNodeViewModel(string url, string target)
       {
           return new CustomNodeViewModel(null, url, target, false, false);
       }
   }
}
```

## Modify the view to use the new view model

You use the `NavigationView.Tabs` view as a starting point. Wherever page nodes are enumerated, make sure to specify the new view model class and print the node's `Description`:

```Razor
@foreach(CustomNodeViewModel node in nodes)
{
    <li class="@GetClass(node)">
        <a href="@node.Url" target="@node.LinkTarget">@node.Title</a><span>@node.Description</span>
    </li>
}
```

## Rebind the model to the new implementation

You finally replace the original implementation of the *Navigation* widget model with the new model. You do this using `Bootstrapper.Bootstrapped` event. Place the following code in your `Global.asax` file:

```C#
using System;
using Telerik.Sitefinity.Abstractions;
using Telerik.Sitefinity.Frontend;
using Telerik.Sitefinity.Frontend.Navigation.Mvc.Models;

namespace SitefinityWebApp
{
    public class Global : System.Web.HttpApplication
    {

        protected void Application_Start(object sender, EventArgs e)
        {
            Bootstrapper.Bootstrapped += Bootstrapper_Bootstrapped;
        }

        private void Bootstrapper_Bootstrapped(object sender, EventArgs e)
        {
            FrontendModule.Current.DependencyResolver.Rebind<INavigationModel>().To<CustomNavigationModel>();
        }
    }
}
```

## List of built-in widget models

 <table>
<tbody>
<tr>
<th>Interface</th>
<th>Implementation</th>
</tr>
<tr>
<td>

`IBlogModel`

</td>
<td>

`BlogModel`

</td>
</tr>
<tr>
<td>

`IBlogPostModel`

</td>
<td>

`BlogPostModel`

</td>
</tr>
<tr>
<td>

`ICardModel`

</td>
<td>

`CardModel`

</td>
</tr>
<tr>
<td>

`ICommentsModel`

</td>
<td>

`CommentsModel`

</td>
</tr>
<tr>
<td>

`IContentBlockModel`

</td>
<td>

`ContentBlockModel`

</td>
</tr>
<tr>
<td>

`IDynamicContentModel`

</td>
<td>

`DynamicContentModel`

</td>
</tr>
<tr>
<td>

`ISubscribeFormModel`

</td>
<td>

`SubscribeFormModel`

</td>
</tr>
<tr>
<td>

`IUnsubscribeFormModel`

</td>
<td>

`UnsubscribeFormModel`

</td>
</tr>
<tr>
<td>

`IEventModel`

</td>
<td>

`EventModel`

</td>
</tr>
<tr>
<td>

`IEventSchedulerModel`

</td>
<td>

`EventSchedulerModel`

</td>
</tr>
<tr>
<td>

`IFormModel:`

* `ICaptchaModel`
* `ICheckboxesFieldModel`
* `IDropdownListFieldModel`
* `IFileFieldModel`
* `IHiddenFieldModel`
* `IMultipleChoiceFieldModel`
* `INavigationFieldModel`
* `IPageBreakModel`
* `IParagraphTextFieldModel`
* `ISectionHeaderModel`
* `ISubmitButtonModel`
* `ITextFieldModel`
* `IFormFieldModel`

</td>
<td>

`FormModel:`

* `CaptchaModel`
* `CheckboxesFieldModel`
* `DropdownListFieldModel`
* `FileFieldModel`
* `HiddenFieldModel`
* `MultipleChoiceFieldModel`
* `NavigationFieldModel`
* `PageBreakModel`
* `ParagraphTextFieldModel`
* `SectionHeaderModel`
* `SubmitButtonModel`
* `TextFieldModel`
* `FormFieldModel`

</td>
</tr>
<tr>
<td>

`IAccountActivationModel`

</td>
<td>

`AccountActivationModel`

</td>
</tr>
<tr>
<td>

`IChangePasswordModel`

</td>
<td>

`ChangePasswordModel`

</td>
</tr>
<tr>
<td>

`ILoginFormModel`

</td>
<td>

`LoginFormModel`

</td>
</tr>
<tr>
<td>

`ILoginStatusModel`

</td>
<td>

`LoginStatusModel`

</td>
</tr>
<tr>
<td>

`IProfileModel`

</td>
<td>

`ProfileModel`

</td>
</tr>
<tr>
<td>

`IRegistrationModel`

</td>
<td>

`RegistrationModel`

</td>
</tr>
<tr>
<td>

`IUsersListModel`

</td>
<td>

`UsersListModel`

</td>
</tr>
<tr>
<td>

`IEmbedCodeModel`

</td>
<td>

`EmbedCodeModel`

</td>
</tr>
<tr>
<td>

`IJavaScriptModel`

</td>
<td>

`JavaScriptModel`

</td>
</tr>
<tr>
<td>

`IStyleSheetModel`

</td>
<td>

`StyleSheetModel`

</td>
</tr>
<tr>
<td>

`IListsModel`

</td>
<td>

`ListsModel`

</td>
</tr>
<tr>
<td>

`IDocumentModel`

</td>
<td>

`DocumentModel`

</td>
</tr>
<tr>
<td>

`IDocumentsListModel`

</td>
<td>

`DocumentsListModel`

</td>
</tr>
<tr>
<td>

`IImageModel`

</td>
<td>

`ImageModel`

</td>
</tr>
<tr>
<td>

`IImageGalleryModel`

</td>
<td>

`ImageGalleryModel`

</td>
</tr>
<tr>
<td>

`IVideoModel`

</td>
<td>

`VideoModel`

</td>
</tr>
<tr>
<td>

`IVideoGalleryModel`

</td>
<td>

`VideoGalleryModel`

</td>
</tr>
<tr>
<td>

`INavigationModel`

</td>
<td>

`NavigationModel`

</td>
</tr>
<tr>
<td>

`INewsModel`

</td>
<td>

`NewsModel`

</td>
</tr>
<tr>
<td>

`IFeedModel`

</td>
<td>

`FeedModel`

</td>
</tr>
<tr>
<td>

`ISearchBoxModel`

</td>
<td>

`SearchBoxModel`

</td>
</tr>
<tr>
<td>

`ISocialShareModel`

</td>
<td>

`SocialShareModel`

</td>
</tr>
<tr>
<td>

`IFlatTaxonomyModel`

</td>
<td>

`FlatTaxonomyModel`

</td>
</tr>
<tr>
<td>

`IHierarchicalTaxonomyModel`

</td>
<td>

`HierarchicalTaxonomyModel`

</td>
</tr>
</tbody>
</table>