Highlight filtered items

By default, when you filter the dynamic content items by URL, the list is showing only items that satisfy the filter condition. In some cases you may want to show the whole list of items, but to highlight only the ones that satisfy the filter conditions. The following tutorial describe how to accomplish this scenario.

1. Create a page named Countries and drop the Countries MVC widget on it.
2. Open the widget designer and click Advanced» Model.
3. In ListMode property, enter true.
4. Navigate to Design » Widget Templates and find the template that is used by the widget in List viewmode.
   For example, the list view template for the Countries MVC control is List.Country.
5. To highlight the filtered dynamic content items, add the following code in the template:
   HTML+Razor

   @model DynamicContent.Mvc.Models.DynamicContentListViewModel
   
   @using DynamicContent.TemplateGeneration.Fields.Helpers;
   @using Telerik.Sitefinity;
   @using Telerik.Sitefinity.Data.ContentLinks;
   @using Telerik.Sitefinity.Frontend.Mvc.Helpers;
   @using Telerik.Sitefinity.Frontend.Mvc.Models;
   @using Telerik.Sitefinity.Web.DataResolving;
   @using Telerik.Sitefinity.Model.ContentLinks;
   @using Telerik.Sitefinity.Modules.Pages;
   
   @Html.Script(ScriptRef.JQuery)
   
   <link rel="stylesheet" href='@Url.WidgetContent("//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css")' type="text/css" />
   <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
   
   <div class="@Model.CssClass">
       <ul class="list-unstyled">
           @foreach (dynamic item in Model.Items)
           {
               <li @Html.InlineEditingAttributes(Model.ProviderName, Model.ContentType.FullName, (Guid)item.Id)>
   
                   <!-- custom code that highlights the filtered dynamic content items -->
                   @if (Model.SelectedItem == item.DataItem)
                   {
                       <h3>SELECTED</h3>
                   }
                   <!-- end of custom code -->
   
                   <h3 class="sfitemTitle sftitle">
                       @if (ViewBag.OpenInSamePage)
                       {
                           <a href="@(ViewBag.CurrentPageUrl + item.ItemDefaultUrl)">
                               @item.Name
                           </a>
                       }
                       else
                       {
                           <a href="@HyperLinkHelpers.GetDetailPageUrl(item, ViewBag.DetailsPageId)">
                               @item.Name
                           </a>
                       }
                   </h3>
                   <div class="text-muted">
                       @(((DateTime)item.PublicationDate).ToSitefinityUITime().ToString("MMM d, yyyy, HH:mm tt"))
                   </div>
               </li>
           }
       </ul>
   
       @if (Model.ShowPager)
       {
           @Html.Action("Index", "ContentPager", new
       {
           currentPage = Model.CurrentPage,
           totalPagesCount = Model.TotalPagesCount.Value,
           redirectUrlTemplate = ViewBag.RedirectPageUrlTemplate
       })
       }
   
   </div>

6. Save the template.
7. Open the Countries page in the frontend and add a country in the URL in the following way:
   http://domain:XXX/countries/bulgaria/