Sorting dynamic and content items by title and email in the Grid

This implementation is not working with versions Sitefinity 5.4, Sitefinity 6.0 and Sitefinity 6.1, because of a bug in Sitefinity.

Note: To workaround the bug and implement this feature for versions Sitefinity 5.4, Sitefinity 6.0 and Sitefinity 6.1 you need to manually change the DyanmicModuleConfig.config file and remove from the contentViewControl line the artificial533234 part (the number will be different) that persist in the content type of the control.

Recently a couple of clients have shown interest in sorting dynamic and content items by title and email in the backend grid of Sitefinity. I am going to show you how to implement this modification which will allow users to sort items of content modules and modules created by Module Builder by email and title in ascending and descending order.

In the article below you can find steps describing how to implement sorting functionality in dynamic modules. This modification can be implemented using the same steps for any other content module.

First of all we need to create a new toolbar section by going to Administration -> Settings -> Advanced -> DynamicModule -> Controls -> SelectYourModule -> Views -> Module_BackendList ->Toolbar -> Section -> toolbar -> Item -> Create new and select DynamicCommandWidgetElement. Populate the fields of the section as follow:

Default page size: 15
Header text: Sort Validation Codes
Bind to: ComboBox

Content type: Telerik.Sitefinity.DynamicTypes.Model.Test.Test  (You can get the type of the module from Administration -> Module Builder -> Your Module -> Code reference for .. -> Create .. and see the type in the section there. For example:

Name: ValidationCodesSortingWidget
CssClass: sfQuickSort sfNoMasterViews
WrapperTagName: Li
Type: Telerik.Sitefinity.Web.UI.Backend.Elements.Widgets.SortWidget

After filling the fields, save the changes. Go to Data source (it is placed under the command widget you have created - ValidationCodesSortingWidget ) and select the button Create new. To sort the items by email and title for example you can create four sources (two for ascending and two for descending order). Review the sources below:

Title: EmailASC                       
Value: Email ASC

Title: EmailDESC
Value: Email ASC

Title: TitleASC
Value: Title ASC

Since we are building a custom type widget, we need to explicitly tell the grid view in our backend items list to bind the widget with our data source. What we need to do is get the sidebar, find our widget and then bind it. In order to achieve this what you need to do is to go to your project in Visual Studio and create a new JavaScript file and place the following source code there:

It is important to change the Build Action from the properties of the file to: Embedded Resource.

The Java Script file can be find attached.

After that you need to register the script in the Sitefinity backend. Please follow the steps below.
Go to Administration -> Settings -> Advanced -> DynamicModule -> Controls -> SelectYourModule -> Views -> Module_BackendList ->Scripts . In the field Script location write Namespace.TheNameOfTheJavaScriptFile, Namespace. For example:SitefinityWebApp.testscript.js, SitefinityWebApp
In the second field Name of the load method type : OnModuleMasterViewLoaded
Save the changes, restart your application by making a dummy change in your web configuration file of your project. Then you will be able to sort dynamic items by email and title. Furthermore, you can add more data sources and sort the items by other fields like author and etc.

To implement the sorting functionality for content items you can follow the steps above. All you need to change is the place where you will create the new item of the toolbar section the content type of the item. The item should be a new DynamicCommandWidgetElement for this specific content module. If you are trying to implement sorting functionality for Forms content type properties can be found in Administration -> Settings -> Advanced -> Forms -> Controls -> FormsBackend -> Views -> FormsBackendList . The only difference is in the content type of the DynamicCommandWidgetElement  you are creating. For forms module you should use: Telerik.Sitefinity.Forms.Model.Form

Note that once you add or remove columns to the table (grid) where items are listed or reorder/regroup fields in the form for creating/editing content items, you need to create the item of the toolbox section again.

Attachments:
TestScript