How to use jquery.timeago plugin along with boundfield in the gridview?

Question

I have a simple grid view like this :

   <asp:GridView ID="gv_userActivities" runat="server" AutoGenerateColumns="False">
          <Columns>
            <asp:BoundField DataField="activity" HeaderText="Activity name" />
                <asp:BoundField DataField="activity_date" HeaderText="Activity date" />
            </Columns>
   </asp:GridView>

---

Now i wanna to use jquery.timeago plugin with my boundfield Activity date. How to access the bound field using script like this :

<script type="text/javascript">
        jQuery(document).ready(function() {
            jQuery('gv_userActivities.timeago').timeago();
      });
</script>

Answer 1

You need to use a template field because the timeago plugin expects you to apply the title attribute to the corresponding DOM element and the date must be ISO 8601 formatted:

<asp:GridView ID="gv_userActivities" runat="server" AutoGenerateColumns="False">
    <Columns>
        <asp:BoundField DataField="activity" HeaderText="Activity name" />
        <asp:TemplateField HeaderText="Activity date">
            <ItemTemplate>
                <span class="timeago" title="<%# string.Format("{0:o}", Eval("activity_date")) %>">
                    <%# Eval("activity_date") %>
                </span>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

This obviously assumes that the activity_date property in your datasource is a DateTime instance. If it isn't the ToString("o") format won't work and you will have to manually build an ISO 8601 date in the title attribute that the timeago plugin can understand.

and then:

<script type="text/javascript">
    jQuery(document).ready(function() {
        jQuery('.timeago').timeago();
    });
</script>