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.

Last edited Jul 15, 2012 at 11:22 AM by grzwie, version 19

Comments

No comments yet.