ActivityFeed control supports filtering updates by list of topics. Control exposes TopicsFilter as IEnumerable<Topic>.
Note: There is also TopicFilter property which is a shortcut for assigning single topic filter to TopicsFilter collection.
<af:ActivityFeed ID="afMain" runat="server" FeedType="Global">
protected void Page_Load(object sender, EventArgs e)
{
if ( !IsPostBack)
{
this.afMain.TopicsFilter.Add(Topic.FromUserId("user1"));
this.afMain.TopicsFilter.Add(Topic.FromUserId("user2"));
}
}
To change active filter on client-side you can change
topicsFilter value of activityFeedViewModel. The topicsFilter is an observableArray collection. Adding or removing elements of this array will trigger refreshUpdate function.
af.topicsFilter('topic1', 'topic2'); // topic1 and topic2 filters are enabled
af.topicsFilter.push('topic3'); // topic1, topic2 and topic3 filters are enabled
af.topicsFilter.remove('topic2'); // topic1 and topic3 filters are enabled
There are few methods inside activityFeedViewModel object, that could help with filtering by topics:
- getAvailableTopicsToFilter: returns list of filters assigned in ActivityFeed control TopicsFilter property
- isTopicFilterEnabled(topicId): checks if topic filter is currenty enabled
- switchTopicFilter(topicId): toggle topic filter - if filter was enabled then it becomes disabled and otherwise when filter was disabled then it become enabled
Filters should be placed in Template area of ActivityFeed control. You can use
TopicsFilterPlaceHolder control that will automatically generate foreach binding for the
getAvailableTopicsToFilter function.
<af:ActivityFeed ID="afMain" runat="server" FeedType="Global">
<Template>
...
<ow:TopicsFilterPlaceHolder runat="server"/>
...
</Template>
</af:ActivityFeed>
It will rendered as html:
<ul data-bind="template: {name: 'topicsFilterTemplate', foreach: getAvailableTopicsToFilter()}" class="topicsFilter"></ul>
The default filter item could be copied from ActivityFeedDefaultTemplate control.
<TopicsFilterTemplate>
<li><input type="checkbox"
data-bind="checked: $parent.isTopicFilterEnabled($data), click: $parent.switchTopicFilter"/><span data-bind="text: $data"></span></li>
</TopicsFilterTemplate>
Note: Live example is available in source code.