I was trying to attach an elapsed time to every post of my comments that are displayed on my gridview control. This is a part of my comment section page that I'm working right now.

So I came up with using ajax timer control and I coded and test my Timer_Tick() event handler in a dummy page to create a running clock so I can get the values of the elapsed time like "just a few seconds ago", "8 minutes ago", "2 hrs ago", "Yesterday at 10:00 A.M." and so on. I guess you figure out now what I mean just like posting at Facebook you will see the time elapsed from each post. I only use one timer control when I was testing on the dummy page and was working fine I was able to get those time elapsed values and the clock is running fine. Now, when I embedded the timer control in my gridview where all my comments resides the problem I encounter is it's only the top row will have the time elapsed value displayed but the previous rows are empty. So everytime you enter a new comment its only the last comment will display the elapsed time running and the rest are empty. Any suggestions on how to do this properly?... Thanks

Here's the source code of my gridview:

<asp:GridView ID="gvParentGrid" runat="server" Width="395px" 
AutoGenerateColumns="False"  GridLines="None" BorderStyle="Solid" BorderWidth="0px" OnRowCommand="gvParentGrid_RowCommand"
            BorderColor="White" DataKeyNames="ID" onrowdatabound="gvParentGrid_RowDataBound"  EnableModelValidation="True"  >

<Columns>
<asp:TemplateField >
<ItemTemplate>

 <tr>
      <td id ="comment" onmouseover="highlightBG(this, '#CCCCFF');highlightNext(this, 'black')" onmouseout="highlightClear(this, 'white')" class ="highlightab" style ="border-bottom :2px solid gray;border-bottom-color :#C0C0C0; border-left :0px; border-left-color :White; border-right :0px; border-right-color :White; border-top :0px; border-top-color :White;background-color :White;border-bottom :2px solid gray; border-left :0px; border-left-color :White; border-right :0px; border-right-color :White; border-top :0px; border-top-color :#C0C0C0;background-color :White; height :100px; width :405px; margin-top:-5px; margin-bottom :0px">              
           <div id ="Closebtn" class ="Close" style="width:500px; display :none;"><asp:Button ID="Button3" runat="server" Text="X" style =" cursor:pointer; margin-left :470px; border:0px; background-color :White; color :blue; font-weight :bold; " ToolTip="Delete" /></div>

        <div style="width:435px">
            <asp:Timer ID="Timer1" runat="server" OnTick="Timer1_Tick" Interval="1000"></asp:Timer>   <asp:Label ID="Label10" runat="server" Text="Time Elapsed/Date" CssClass="date" Font-Size="Smaller" Font-Names="Verdana"></asp:Label></div>

          <asp:Image ID="Image1" runat="server" style="  margin-right :5px; background-image :url('Image/blankpeople.png');"  ImageAlign ="Left" Height ="60px" Width="60px" />
            <asp:Label ID ="ComID" runat ="server" style="display :none" Text =' <%#Eval("ID") %>' />
           <asp:Label ID="name" runat="server" style="font-weight :bolder; color :Blue; "  Text='<%# Eval("Name")%>' ></asp:Label>
        <p id ="content" class="comment more" style ="font-family:Verdana; font-weight:normal;font-size:small; border-radius: 4px 4px 4px 4px; max-width :395px; min-height :5px; margin-top :5px; margin-bottom :0px; margin-left :65px; display :block; background-color: #CCCCFF;"> <%# DataBinder.Eval(Container.DataItem,"Comments").ToString().Replace("\n", "<br />") %> </p>
         <div style="width:435px;margin-left :65px;">
         <div style=" width:200px;float:left">
           <a href="JavaScript:divexpandcollapse('div<%# Eval("ID") %>');" style =" margin-top :1px; text-decoration :none " >
            <input id='btndiv<%# Eval("ID") %>' type="button" class ="btndivname" value="Reply" style =" border:0px; background-color :inherit; color :blue; cursor :pointer; "  />
          </a>  
            <asp:Label ID="Label8" runat="server" Text='<%#Eval("Like") %>'>' Font-Size="Smaller" Font-Names="Verdana"></asp:Label>
            <asp:ImageButton ID="ImageButton1" onclick="ImageButton1_Click" runat="server" ImageUrl="~/Image/thumb-up-icon.png"  ImageAlign="Top"  />
           &nbsp; &nbsp;
             <asp:Label ID="Label9" runat="server" Text='<%#Eval("Dislike") %>'>' Font-Size="Smaller" Font-Names="Verdana"></asp:Label> 
            <asp:ImageButton ID="ImageButton2" onclick="ImageButton2_Click" runat="server" ImageUrl="~/Image/thumb-down-icon.png"  ImageAlign="Top" />
        </div> 
          <div style="width:170px;float:right">
          &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <asp:Label ID="Label7" runat="server" Text="Report As" Font-Size="X-Small" Font-Names="Verdana"></asp:Label> <asp:DropDownList ID="DropDownList1" runat="server" ToolTip="Report Comment As" Width="20px" AutoPostBack="True"> <asp:ListItem>Profanity</asp:ListItem>
          <asp:ListItem>Abused</asp:ListItem>
          <asp:ListItem>Threat </asp:ListItem>
          <asp:ListItem>Harassment</asp:ListItem>
         <asp:ListItem>Obscenity</asp:ListItem>
         <asp:ListItem>Copy Infringement </asp:ListItem> 
         <asp:ListItem>Child Pornography </asp:ListItem> 
         </asp:DropDownList>
           </div>  
        </div>  

     </td>    
 </tr>

</ItemTemplate>
</asp:TemplateField>

<asp:TemplateField>
<ItemTemplate>

  <!--This is the child gridview -->
<div id="div<%# Eval("ID") %>" style="display:none; position:relative; left: 65px; overflow: auto; margin-top :5px;margin-bottom:5px">
      <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false">
       <ContentTemplate> 
<asp:GridView ID="gvChildGrid" runat="server" AutoGenerateColumns="false" BorderStyle="Double"  BorderColor="white" GridLines="None" Width="325px" onrowcommand="gvChildGrid_RowCommand"  EnableModelValidation="True" onrowdatabound="gvChildGrid_RowDataBound">
<Columns >
<asp:TemplateField >
<ItemTemplate >
<tr >
  <td style ="margin-top:0px; border-bottom :2px solid Blue;border-bottom-color :Gray; border-left :0px; border-left-color :White; border-right :0px; border-right-color :White; border-top :0px; border-top-color :White;background-color :White; height :100px; width :325px"> 
 <asp:Image ID="Image1" runat="server" style=" margin-right :5px; background-image :url('Image/imagebackground.png');"  ImageAlign ="Left" Height ="60px" Width="60px" />

 <asp:Label ID="name" runat="server"  Font-Bold="True" Text='<%# Eval("Name")%>' ForeColor="Blue"></asp:Label>

 <p id ="content2" class="comment more" style ="font-weight:lighter; font-size:xx-small; border-radius: 4px 4px 4px 4px; max-width :325px; min-height :5px; margin-top :5px; margin-left :65px; display :block; background-color: #CCCCFF; font-size :small"> <%# DataBinder.Eval(Container.DataItem,"Replies").ToString().Replace("\n", "<br />")  %> </p>

    </td>
</tr>

</ItemTemplate>
</asp:TemplateField>

</Columns>
</asp:GridView>

      <!-- This is the inputbox and the reply button -->
<asp:Label ID="Label3" runat="server" Text="Name"></asp:Label>
   <br />
  <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
  <br />
  <asp:TextBox ID="TextBox4" Height ="200px" Width ="325px"  TextMode ="MultiLine" CssClass="norez" runat="server" AutoPostBack="True"></asp:TextBox>
  <br />
      <div style="width:325px">
    <div style="float:left;width:100px">
  <asp:Button ID="Button2" runat="server" Text="Post Reply" OnClick="Button2_Click" OnClientClick="return ShowProgress2()" />
   </div>
        <div align="center" style="float:right;width:225px"> 
    <asp:UpdateProgress ID="UpdateProgress2" runat="server"  DisplayAfter="1" AssociatedUpdatePanelID="UpdatePanel2" >
    <ProgressTemplate>
        <img id="Img1" runat="server" src="Image/loading.gif" alt="wait image" style=" height:40px; width:40px; text-align:left" />&nbsp; <b>Processing Request...</b></ProgressTemplate>
    </asp:UpdateProgress>  
         </div>
               </div>
 </ContentTemplate>
  <Triggers>
  <asp:AsyncPostBackTrigger ControlID="Button2" EventName ="Click" />
</Triggers>  

    </asp:UpdatePanel>
</div>

</ItemTemplate>
</asp:TemplateField>
</Columns>

</asp:GridView>

Related posts

Recent Viewed