The content you're reading is getting on in years
This post is on the older side and its content may be out of date.
Be sure to visit our blogs homepage for our latest news, updates and information.
This blog post, as many others, is inspired by a client support request. I've decided to put post it, so others can use the code to create their own sidebar widgets for their custom modules. In this post I am going to sample how you can extend a built in command widget to add new functionality to it, and make it filter by something which is not part of the out of the box functionality. For convenience, please refer to the ProductsCatalogSample module which is distributed with the Sitefinity SDK
I've decided to extend the DynamicCommandWidget class which allows you to bind a datasource such as collection of categories and display them on the side bar. Then you can filter for your items based on desired filter expression.
First we need to create our custom widget class. The only difference with the built in one is that we are going to add an extra JavaScript file reference to execute our custom logic:
using
System;
using
System.Collections.Generic;
using
System.Web.UI;
using
Telerik.Sitefinity.Web.UI.Backend.Elements.Widgets;
namespace
ProductCatalogSample.Web.UI
{
class
CustomDynamicCommandWidget : DynamicCommandWidget
{
protected
override
Type ResourcesAssemblyInfo
{
get
{
return
typeof
(DynamicCommandWidget);
}
}
public
override
IEnumerable<System.Web.UI.ScriptReference> GetScriptReferences()
{
var widgetInterfaceScript =
new
ScriptReference
{
Assembly =
typeof
(IWidget).Assembly.FullName,
Name = Scripts.IWidget
};
var commandWidgetInterfaceScript =
new
ScriptReference
{
Assembly =
typeof
(DynamicCommandWidget).Assembly.FullName,
Name = Scripts.ICommandWidget
};
var commandWidgetScript =
new
ScriptReference
{
Assembly =
typeof
(DynamicCommandWidget).Assembly.FullName,
Name = Scripts.DynamicCommandWidget
};
//register the custom script
var customCommandWidgetScript =
new
ScriptReference
{
Assembly =
typeof
(CustomDynamicCommandWidget).Assembly.FullName,
Name = Scripts.CustomDynamicCommandWidget
};
return
new
ScriptReference[] { widgetInterfaceScript, commandWidgetInterfaceScript, commandWidgetScript, customCommandWidgetScript };
}
internal
struct
Scripts
{
public
const
string
IWidget =
"Telerik.Sitefinity.Web.SitefinityJS.UI.IWidget.js"
;
public
const
string
ICommandWidget =
"Telerik.Sitefinity.Web.SitefinityJS.UI.ICommandWidget.js"
;
public
const
string
DynamicCommandWidget =
"Telerik.Sitefinity.Web.UI.Backend.Elements.Widgets.Scripts.DynamicCommandWidget.js"
;
public
const
string
CustomDynamicCommandWidget =
"ProductCatalogSample.Web.UI.CustomDynamicCommandWidget.js"
;
}
}
}
After we have implemented the server-side class we need to add our custom filtering functionality to the client-side component (CustomDynamicCommandWidget.js). There is a built in method which handles item commands and we are simply going to override it:
/// <reference name="MicrosoftAjax.js"/>
/// <reference name="Telerik.Sitefinity.Resources.Scripts.jquery-1.4.2-vsdoc.js" assembly="Telerik.Sitefinity.Resources"/>
Type.registerNamespace(
"ProductCatalogSample.Web.UI"
);
ProductCatalogSample.Web.UI.CustomDynamicCommandWidget =
function
(element) {
ProductCatalogSample.Web.UI.CustomDynamicCommandWidget.initializeBase(
this
, [element]);
}
ProductCatalogSample.Web.UI.CustomDynamicCommandWidget.prototype =
{
initialize:
function
() {
ProductCatalogSample.Web.UI.CustomDynamicCommandWidget.callBaseMethod(
this
,
"initialize"
);
},
dispose:
function
() {
ProductCatalogSample.Web.UI.CustomDynamicCommandWidget.callBaseMethod(
this
,
"dispose"
);
},
_binderCommandHandler:
function
(sender, args) {
var
commandEventArgs =
new
Telerik.Sitefinity.UI.CommandEventArgs(
this
._commandName, {
'filterExpression'
:
this
.getCategoriesFilterExpression() });
//send a filtering command to our grid view to filter by the selected checkboxes
//if there are no selected checkboxes the filtering expression will be empty string showing all items
var
h =
this
.get_events().getHandler(
'command'
);
if
(h) h(
this
, commandEventArgs);
},
getCategoriesFilterExpression:
function
() {
var
selectedItems = jQuery(
"input.sf_binderCommand_filterByCategory:checked"
);
var
expression =
''
;
//get selected checkboxes and construct the filter expression
if
(selectedItems.length > 0) {
for
(
var
i = 0; i < selectedItems.length; i++) {
if
(i == 0)
expression = expression +
'Category.Contains(('
+ selectedItems[i].value +
'))'
;
else
expression = expression +
'OR Category.Contains(('
+ selectedItems[i].value +
'))'
;
}
}
return
expression;
}
}
ProductCatalogSample.Web.UI.CustomDynamicCommandWidget.registerClass(
"ProductCatalogSample.Web.UI.CustomDynamicCommandWidget"
, Telerik.Sitefinity.Web.UI.Backend.Elements.Widgets.DynamicCommandWidget, Telerik.Sitefinity.UI.ICommandWidget, Telerik.Sitefinity.UI.IWidget);
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 datasource (CustomDynamicCommandWidgetExtensionScript.js). We need to get the sidebar and find our widget. Then bind it:
function
OnMasterViewLoaded(sender, args) {
if
(sender.get_sidebar()) {
var
widgetsInSidebar = sender.get_sidebar()._widgets;
if
(widgetsInSidebar) {
for
(
var
i = 0; i < widgetsInSidebar.length; i++) {
if
(Object.getTypeName(widgetsInSidebar[i]) ==
"ProductCatalogSample.Web.UI.CustomDynamicCommandWidget"
) {
widgetsInSidebar[i].dataBind();
}
}
}
}
}
When we are done with the client-side component and the extension script we need to register them as embedded resources in the AssemblyInfo class of our code library project:
[assembly: WebResource(
"ProductCatalogSample.Web.UI.CustomDynamicCommandWidget.js"
,
"text/javascript"
)]
[assembly: WebResource(
"ProductCatalogSample.Web.UI.CustomDynamicCommandWidgetExtensionScript.js"
,
"text/javascript"
)]
All configurations of the backend of your modules are done through the module's definition class. We need to register the extension script and our custom command widget. Since we are working with the ProductsCatalogSample project we need to edit the ProductsDefinitions class.
This is done in the DefineProductsBackendContentView method where the grid view is defined:
#region external scripts
var scripts =
new
Dictionary<
string
,
string
>();
scripts.Add(
string
.Format(
"{0}, {1}"
,
ProductsDefinitions.CustomDynamicCommandWidgetExtensionScript,
typeof
(ProductsModule).Assembly.FullName),
"OnMasterViewLoaded"
);
productsGridView.ExternalClientScripts = scripts;
#endregion
public
const
string
CustomDynamicCommandWidgetExtensionScript =
"ProductCatalogSample.Web.UI.CustomDynamicCommandWidgetExtensionScript.js"
;
We need to substitute the built in dynamic command widget definition for filtering by categories with the custom one. Find where the dynamic command widget for categories is registered in the ProductDefinitions class and amend it to be as bellow:
var categoryFilterWidget =
new
DynamicCommandWidgetElement(categoryFilterSection.Items)
{
Name =
"CategoryFilter"
,
CommandName =
"filter"
,
PageSize = 10,
WidgetType =
typeof
(CustomDynamicCommandWidget),
IsSeparator =
false
,
BindTo = BindCommandListTo.HierarchicalData,
BaseServiceUrl = String.Format(
"~/Sitefinity/Services/Taxonomies/HierarchicalTaxon.svc/{0}/"
, TaxonomyManager.CategoriesTaxonomyId),
ChildItemsServiceUrl =
"~/Sitefinity/Services/Taxonomies/HierarchicalTaxon.svc/subtaxa/"
,
PredecessorServiceUrl =
"~/Sitefinity/Services/Taxonomies/HierarchicalTaxon.svc/predecessor/"
,
ClientItemTemplate = @
" <input type='checkbox' class='sf_binderCommand_filterByCategory' sys:value='{{ Id }}'>{{ Title }}</input> <span class='sfCount'>({{ItemsCount}})</span>"
};
Finally build the project and see the result.
View all posts from The Progress Team on the Progress blog. Connect with us about all things application development and deployment, data integration and digital business.
Let our experts teach you how to use Sitefinity's best-in-class features to deliver compelling digital experiences.
Learn MoreSubscribe to get all the news, info and tutorials you need to build better business apps and sites
Progress collects the Personal Information set out in our Privacy Policy and the Supplemental Privacy notice for residents of California and other US States and uses it for the purposes stated in that policy.
You can also ask us not to share your Personal Information to third parties here: Do Not Sell or Share My Info
We see that you have already chosen to receive marketing materials from us. If you wish to change this at any time you may do so by clicking here.
Thank you for your continued interest in Progress. Based on either your previous activity on our websites or our ongoing relationship, we will keep you updated on our products, solutions, services, company news and events. If you decide that you want to be removed from our mailing lists at any time, you can change your contact preferences by clicking here.