ActivityFeed control exposes client render events used with foreeach binding of list:
  • BeforeRemove - called before list element was removed
  • AfterRender - called after element was added
  • AfterAdd - called after element was added
Using those events allows you to customize render effects (fading, colors. etc.) during adding and deleting, displaying information messages during adding and deleting, creating custom item actions (like comment reply).

You can set events for:
  • Updates
  • Comments
  • TopicsFilter
Client events can be set directly from markup.
<af:ActivityFeed runat="server" ID="af" ClientIDMode="AutoID" 
                UpdatesSettings-BeforeRemove="beforeRemoveUpdate" UpdatesSettings-AfterAdd="afterAddUpdate" UpdatesSettings-AfterRender="afterRenderUpdate"/>

The code below shows how to remove update with custom jQuery.Ui effect and how to show alert message during removing update. You should use nodeType property of element, to check if event is called for html or text DOM node.
function beforeRemoveUpdate(elem, p2, viewModel) {
  if (elem.nodeType == 1) {
    if (viewModel.removeUpdate.isInProgress()) {
      $(elem).effect("drop", null, 1000, function() {
        $(elem).remove();
      });
      alert('Update was removed');
    }
    else {
      $(elem).remove();
    }
  }
}

The code below shows how to use custom jQuery.Ui effect diring adding new update. The refreshUpdates.isInProgress condition is used to limit showing effect, to only newly added items.
function afterAddUpdate(elem, a, c, d, e, f) {
  var af = <%=this.af.ClientID %>;
  if (!af.refreshUpdates.isInProgress()) {
    if (elem.nodeType === 1) $(elem).hide().effect("highlight", null, 4000);        
  }
}

The code below shows how to implement comment reply functionality using AfterRender event. When user clicks on Reply link, the comment input become active and take focus.

<li><a class="comment-reply" href="javascript:void(0);" title="placeholder">Reply</a></li>

function afterRenderUpdate(elem) {
  for (var i = 0, length = elem.length; i < length; i++) {
    if (elem[i].nodeType == 1) {

      var $elem = $(elem[i]);
      var newCommentInput = $elem.find('fieldset.submit-comment');
      $elem.find('div.utils .comment-reply').click(function () {
        newCommentInput.fakeInput('showInput');
        return false;
      });
    }
  }
}

Last edited Jul 15, 2012 at 1:13 PM by grzwie, version 12

Comments

No comments yet.