Filtering Sitefinity ContentView-based Controls on the Frontend

Sitefinity's ContentView class, and all its inheritors (News, Blog Posts, Events, etc. widgets) are among the most popular subjects discussed in our blog post. And there's a pretty good reason for that, after all - our ContentView widgets are one of the most important elements that build the Sitefinity experience - they help you select the data you want to display and its behavior on the frontend.

Keeping in mind the numerous use case scenarios ContentView controls cover, you'd be surprised at how much they can do in addition if you plug in the right places and implement your own business logic.

Today we're going to demonstrate how one can inherit from a ContentView widget and directly manipulate its DataSource in order to achieve frontend filtering.

Let's take News for example.  As every other ContentView widget the NewsView widget also has a Master and Details view. Since we want to filter the list of items, we'll need to modify its List of news template and inherit from its MasterView class.

1. You need to create a new UserControl based on the default News widget list template.
In this new template you can define the controls that will handle the presentational part of your filtering mechanism. For example a TextBox/DropDownList that you will populate with the filter options, and a Button that will execute the filtering. For example:

2. Once we've created the custom template we need to inherit from the default Telerik.Sitefinity.Modules.News.Web.UI.MasterListView class.
In the new class we can override MasterListView's LayoutTemplatePath property and point it to the custom template we have already created:

3. Next,  you can then get a reference to your controls so you can operate with them:

4. We can then override the InitializeControls method of the MasterListView, and implement our business logic for populating the filter options.
A common use case scenario we encounter in support is the need to have a categories dropdown, that would allow filtering the list dynamically, so let's go with this one.
In order to ensure we're listing only categories that have been used to mark items of this content type we can query the TaxonomyStatistics - this is where Sitefinity keeps a reference for each taxon about the number of marked items, and their content type. So we can do something like:
5. Once we have the datasource ready, we need to bind it to our dropdown:

Up to this point we have everything we need to display a list of taxa in a dropdown on the list of news items. Our next steps will define our filtering logic.
In order to achieve the best performance we would recommend modifying the default FilterExpression dynamically. The FilterExpression in Sitefinity ContentView widgets is used when constructing the query to the database when we retrieve the data source. This means that by modifying it before the query gets executed, this will ensure we're not making any additional calls to the database, but rather just affecting how the query is constructed, and what items we retrieve from the database.

In order to modify the FilterExpression, and for this modification to take effect we need to do two things:

6. Override the GetItemsList() method - this is where we construct the query and get the items. So we can simply get the selected value from our categories dropdown and apply this value to the filter expression:


7. Due to the specific lifecycle of the ContentView widgets we will need to override the 
OnPreRender() method - this is where we're going to invoke the GetItemsList() and InitializeListView() methods of the ContentView, so we can ensure our filtering takes effect:
That's it - once you have compiled your project successfully there's one last piece to complete today's exercise - we need to tell Sitefinity to use our custom Master View instead of the default one.

To do that we can take advantage of the concept of Definitions in Sitefinity. They allow us to substitute any existing view with a custom one through the corresponding ContentViewDefinitionElement.
8. In the current case we just need to go to Administration->Settings->Advanced->ContentView->News->News Frontend -> Views-> NewsFrontendList and replace the ViewType property with the CLR type of our custom view. Save the changes and you-re done - from this point on all News widgets throughout your site will use the custom master view instead of the default one.

As usual, here's a sample video demonstrating this functionality.

The complete sample can be downloaded from here:
 
FilterContentViewFrontend

With this we finish today's blog post. Feel free to modify it as per your specific requirements, and we hope you found this information useful.