Filtering Sitefinity DynamicContentView on the frontend

The scenario for today's blog post is a pretty straightforward one - as a website developer I'd like to offer my frontend users a mechanism for filtering the list of Dynamic Module items by certain criteria.

To represent the idea better, let's say we'll be dealing with Offices - we're an international company that has offices around the globe. 

Handling this type of scenario with Sitefinity Module Builder takes not more than 5 minutes - the time in which I defined my new module, added some fields to specify the office Title, Country, City, ZipCode, PhoneNumber etc. fields.

Once we've created the module our next step is to deliver the filtering functionality.

For this purpose we're going to inherit from DynamicContentView, which is the type of the widget ModuleBuilder creates for displaying your new module content:
-------------------------------------------------------------------------------------------------------------------------------
NOTE:
After Sitefinity 6.1 the DynamicContentViewMaster class now has a Host property which allows you to easily access the DynamicContentView (which is the Host) for its master/details view. This change requires you to modify the above code slightly, so if you are using Sitefinity 6.1 or higher version of our product, please use this sample instead:
-------------------------------------------------------------------------------------------------------------------------------
As you can see from the above sample, our new class overrides just one method of the base DynamicContentView, namely InitializeMasterView(). In InitializeMasterView() we are able to substitute the default MasterViewControl with our custom one - DynamicContentViewMasterCustom, defined above.

Our DynamicContentViewMasterCustom is a new class, inheriting from DynamicContentViewMaster, and will have a customized template that will facilitate the UI for filtering on the frontend.

For the sake of this example I've copied the default template our new module has created (you can access this from Design->WidgetTemplates-> YourModule list) and added the desired controls to it:


In the DynamicContentViewMasterCustom we can now reference these controls, using the this.Container.GetControl<T>() approach:
and then subscribe to the Click event of the SearchButton by overriding the base InitializeControls method:
our final step is to implement the actual filtering of the DataSource according to the user input:


as you can see, DynamicContentListView already has its DataSource set for us, so we can access it, and apply our filtering directly.

Once you're done the last step is registering your new widget. Go to App_Data/Sitefinity/Configuration/ToolboxesConfig.config and find the entry for your module's widget. It should look  like this:
Change the type parameter to match the type of your custom DynamicContentView:


Save the file and restart your application - you'll now be able to drop the widget on any Sitefinity page and enjoy the results.

You can find the complete implementation of our DynamicContentViewMasterCustom along with the custom template and DynamicContentViewCustom attached to this post - OfficesModule.

For your convenience please find here a short video demonstrating the final results as well.

I hope you enjoyed reading about this simple functionality, and the ease of achieving it with Sitefinity.