locked
How to create Grid View control like in Forum? RRS feed

  • Question

  • User134299215 posted

    HI Guys,

    I want to develop a grid view control which looks similer to the grid in this forum.

     Can any body help me giving a link or sample code please?

     

     

     

     

     

    Monday, July 28, 2008 9:13 PM

Answers

  • User1564875471 posted

    Actually it needs a lot of work , i create a simple example for you so that you can start , Note that the gridview is not a suitable solution here ,because we are not going to display a table with columns , we need more flexible layout which can be accomplished using the repeater control :

     

    <div>
    <asp:Repeater ID="Repeater1" runat="server">
    <ItemTemplate>
    <div style="text-align: left; margin: 3px; border: 1px solid #0000ff">
    <table style="width: 100%">
    <tr style="background-color: #ccc;">
    <td style="width: 150px" colspan="2">
    <asp:Label ID="lblThreadTitle" runat="server" Text='<%#Eval("Title") %>'></asp:Label></td>
    </tr>
    <tr>
    <td style="width: 150px">
    <asp:Image ID="Image1" runat="server" ImageUrl='<%# Eval("UserAvatar") %>' /><br />
    <asp:HyperLink ID="HyperLink1" runat="server" Text='<%#Eval("UserName") %>' NavigateUrl='<%#Eval("UserName","~/MemberDetails.aspx?User={0}") %>'></asp:HyperLink><br />
    Joined on :<asp:Label ID="lblMemberSince" runat="server" Text='<%Eval("MemberSince","{0:d}") %>'></asp:Label></td>
    <td style="width: auto; vertical-align: top; text-align: left;">
    <p>
    <%#Eval("Body") %>
    </p>
    </td>
    </tr>
    <tr>
    <td style="width: 150px">
    </td>
    <td style="width: auto">
    </td>
    </tr>
    </table>
    </div>
    </ItemTemplate>
    <SeparatorTemplate>
    <br />
    </SeparatorTemplate>
    </asp:Repeater>
    <br />
    <asp:LinkButton ID="lnkReply" runat="server">Reply</asp:LinkButton></div>

     

    And Please this is the Code behind (it simply populate the repeater with a dummy data )

        Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
            If Not IsPostBack Then
                CreateDummyThread()
            End If
        End Sub

    Private Sub
    CreateDummyThread()

    Dim list As New System.Collections.Generic.List(Of ForumThread)
    For i As Integer = 0 To 9
    list.Add(New ForumThread("How to create Grid View control like in Forum?", "JPalaparthi", Now, _
    "HI Guys,<br/>I want to develop a grid view control which looks similer to the grid in this forum.", "~/Images/SomeImage.gif"))
    Next

    Repeater1.DataSource = list
    Repeater1.DataBind()

    End Sub

    Protected Sub
    lnkReply_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles lnkReply.Click
    Response.Redirect("Reply.aspx?id=" + "1")
    End Sub
     

     

    And Please add the following class in App_Code folder

    Imports Microsoft.VisualBasic

    Public Class ForumThread

    Public Sub New(ByVal Title As String, _
    ByVal UserName As String, _
    ByVal MemberSince As DateTime, _
    ByVal Body As String, _
    ByVal UserAvatar As String)

    _UserName = UserName
    _MemberSince = MemberSince
    _Body = Body
    _UserAvatar = UserAvatar
    _PostedDate = DateTime.Now
    _Title = Title


    End Sub
    Private
    _Title As String
    Public Property
    Title() As String
    Get
    Return
    _Title
    End Get
    Set
    (ByVal value As String)
    _Title = value
    End Set
    End Property

    Private
    _PostedDate As DateTime
    Public Property PostedDate() As DateTime
    Get
    Return
    _PostedDate
    End Get
    Set
    (ByVal value As DateTime)
    _PostedDate = value
    End Set
    End Property

    Private
    _UserName As String
    Public Property
    UserName() As String
    Get
    Return
    _UserName
    End Get
    Set
    (ByVal value As String)
    _UserName = value
    End Set
    End Property

    Private
    _Body As String
    Public Property
    Body() As String
    Get
    Return
    _Body
    End Get
    Set
    (ByVal value As String)
    _Body = value
    End Set
    End Property

    Private
    _UserAvatar As String
    Public Property
    UserAvatar() As String
    Get
    Return
    _UserAvatar
    End Get
    Set
    (ByVal value As String)
    _UserAvatar = value
    End Set
    End Property
    Private
    _MemberSince As DateTime
    Public Property MemberSince() As DateTime
    Get
    Return
    _MemberSince
    End Get
    Set
    (ByVal value As DateTime)
    _MemberSince = value
    End Set
    End Property

    End Class

     

    The output of the example will be :

     

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, July 30, 2008 4:58 PM

All replies

  • User1564875471 posted

    Which GridView ? can you give me a link to the page ?

     

    Tuesday, July 29, 2008 12:58 PM
  • User2027475418 posted

    I think he means asp.net forum layout=)

    Tuesday, July 29, 2008 2:51 PM
  • User134299215 posted

    Yes just similer to this layout.. please help me solving this.

     

    Tuesday, July 29, 2008 4:01 PM
  • User1564875471 posted

    Actually it needs a lot of work , i create a simple example for you so that you can start , Note that the gridview is not a suitable solution here ,because we are not going to display a table with columns , we need more flexible layout which can be accomplished using the repeater control :

     

    <div>
    <asp:Repeater ID="Repeater1" runat="server">
    <ItemTemplate>
    <div style="text-align: left; margin: 3px; border: 1px solid #0000ff">
    <table style="width: 100%">
    <tr style="background-color: #ccc;">
    <td style="width: 150px" colspan="2">
    <asp:Label ID="lblThreadTitle" runat="server" Text='<%#Eval("Title") %>'></asp:Label></td>
    </tr>
    <tr>
    <td style="width: 150px">
    <asp:Image ID="Image1" runat="server" ImageUrl='<%# Eval("UserAvatar") %>' /><br />
    <asp:HyperLink ID="HyperLink1" runat="server" Text='<%#Eval("UserName") %>' NavigateUrl='<%#Eval("UserName","~/MemberDetails.aspx?User={0}") %>'></asp:HyperLink><br />
    Joined on :<asp:Label ID="lblMemberSince" runat="server" Text='<%Eval("MemberSince","{0:d}") %>'></asp:Label></td>
    <td style="width: auto; vertical-align: top; text-align: left;">
    <p>
    <%#Eval("Body") %>
    </p>
    </td>
    </tr>
    <tr>
    <td style="width: 150px">
    </td>
    <td style="width: auto">
    </td>
    </tr>
    </table>
    </div>
    </ItemTemplate>
    <SeparatorTemplate>
    <br />
    </SeparatorTemplate>
    </asp:Repeater>
    <br />
    <asp:LinkButton ID="lnkReply" runat="server">Reply</asp:LinkButton></div>

     

    And Please this is the Code behind (it simply populate the repeater with a dummy data )

        Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
            If Not IsPostBack Then
                CreateDummyThread()
            End If
        End Sub

    Private Sub
    CreateDummyThread()

    Dim list As New System.Collections.Generic.List(Of ForumThread)
    For i As Integer = 0 To 9
    list.Add(New ForumThread("How to create Grid View control like in Forum?", "JPalaparthi", Now, _
    "HI Guys,<br/>I want to develop a grid view control which looks similer to the grid in this forum.", "~/Images/SomeImage.gif"))
    Next

    Repeater1.DataSource = list
    Repeater1.DataBind()

    End Sub

    Protected Sub
    lnkReply_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles lnkReply.Click
    Response.Redirect("Reply.aspx?id=" + "1")
    End Sub
     

     

    And Please add the following class in App_Code folder

    Imports Microsoft.VisualBasic

    Public Class ForumThread

    Public Sub New(ByVal Title As String, _
    ByVal UserName As String, _
    ByVal MemberSince As DateTime, _
    ByVal Body As String, _
    ByVal UserAvatar As String)

    _UserName = UserName
    _MemberSince = MemberSince
    _Body = Body
    _UserAvatar = UserAvatar
    _PostedDate = DateTime.Now
    _Title = Title


    End Sub
    Private
    _Title As String
    Public Property
    Title() As String
    Get
    Return
    _Title
    End Get
    Set
    (ByVal value As String)
    _Title = value
    End Set
    End Property

    Private
    _PostedDate As DateTime
    Public Property PostedDate() As DateTime
    Get
    Return
    _PostedDate
    End Get
    Set
    (ByVal value As DateTime)
    _PostedDate = value
    End Set
    End Property

    Private
    _UserName As String
    Public Property
    UserName() As String
    Get
    Return
    _UserName
    End Get
    Set
    (ByVal value As String)
    _UserName = value
    End Set
    End Property

    Private
    _Body As String
    Public Property
    Body() As String
    Get
    Return
    _Body
    End Get
    Set
    (ByVal value As String)
    _Body = value
    End Set
    End Property

    Private
    _UserAvatar As String
    Public Property
    UserAvatar() As String
    Get
    Return
    _UserAvatar
    End Get
    Set
    (ByVal value As String)
    _UserAvatar = value
    End Set
    End Property
    Private
    _MemberSince As DateTime
    Public Property MemberSince() As DateTime
    Get
    Return
    _MemberSince
    End Get
    Set
    (ByVal value As DateTime)
    _MemberSince = value
    End Set
    End Property

    End Class

     

    The output of the example will be :

     

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, July 30, 2008 4:58 PM
  • User134299215 posted

    Hi,

     The example is really great.It helps me a lot.

    This example can suffice my needs .

    Thanks,

    Jitendra

    Actually it needs a lot of work , i create a simple example for you so that you can start , Note that the gridview is not a suitable solution here ,because we are not going to display a table with columns , we need more flexible layout which can be accomplished using the repeater control :

    <div>
        <asp:Repeater ID="Repeater1" runat="server">
            <ItemTemplate>
                <div style="text-align: left; margin: 3px; border: 1px solid #0000ff">
                    <table style="width: 100%">
                        <tr style="background-color: #ccc;">
                            <td style="width: 150px" colspan="2">
                                <asp:Label ID="lblThreadTitle" runat="server" Text='<%#Eval("Title") %>'></asp:Label></td>
                        </tr>
                        <tr>
                            <td style="width: 150px">
                                <asp:Image ID="Image1" runat="server" ImageUrl='<%# Eval("UserAvatar") %>' /><br />
                                <asp:HyperLink ID="HyperLink1" runat="server" Text='<%#Eval("UserName") %>' NavigateUrl='<%#Eval("UserName","~/MemberDetails.aspx?User={0}") %>'></asp:HyperLink><br />
                                Joined on :<asp:Label ID="lblMemberSince" runat="server" Text='<%Eval("MemberSince","{0:d}") %>'></asp:Label></td>
                            <td style="width: auto; vertical-align: top; text-align: left;">
                                <p>
                                    <%#Eval("Body") %>
                                </p>
                            </td>
                        </tr>
                        <tr>
                            <td style="width: 150px">
                            </td>
                            <td style="width: auto">
                            </td>
                        </tr>
                    </table>
                </div>
            </ItemTemplate>
            <SeparatorTemplate>
                <br />
            </SeparatorTemplate>
        </asp:Repeater>
        <br />
        <asp:LinkButton ID="lnkReply" runat="server">Reply</asp:LinkButton></div>

     

    And Please this is the Code behind (it simply populate the repeater with a dummy data )

      Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
            CreateDummyThread()
        End Sub
    
        Private Sub CreateDummyThread()
    
            Dim list As New System.Collections.Generic.List(Of ForumThread)
            For i As Integer = 0 To 9
                list.Add(New ForumThread("How to create Grid View control like in Forum?", "JPalaparthi", Now, _
                      "HI Guys,<br/>I want to develop a grid view control which looks similer to the grid in this forum.", "~/Images/SomeImage.gif"))
            Next
    
            Repeater1.DataSource = list
            Repeater1.DataBind()
    
        End Sub
    
        Protected Sub lnkReply_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles lnkReply.Click
            Response.Redirect("Reply.aspx?id=" + "1")
        End Sub
     

     

    And Please add the following class in App_Code folder

    Imports Microsoft.VisualBasic
    
    Public Class ForumThread
    
        Public Sub New(ByVal Title As String, _
        ByVal UserName As String, _
        ByVal MemberSince As DateTime, _
        ByVal Body As String, _
        ByVal UserAvatar As String)
    
            _UserName = UserName
            _MemberSince = MemberSince
            _Body = Body
            _UserAvatar = UserAvatar
            _PostedDate = DateTime.Now
            _Title = Title
    
    
        End Sub
        Private _Title As String
        Public Property Title() As String
            Get
                Return _Title
            End Get
            Set(ByVal value As String)
                _Title = value
            End Set
        End Property
    
        Private _PostedDate As DateTime
        Public Property PostedDate() As DateTime
            Get
                Return _PostedDate
            End Get
            Set(ByVal value As DateTime)
                _PostedDate = value
            End Set
        End Property
    
        Private _UserName As String
        Public Property UserName() As String
            Get
                Return _UserName
            End Get
            Set(ByVal value As String)
                _UserName = value
            End Set
        End Property
    
        Private _Body As String
        Public Property Body() As String
            Get
                Return _Body
            End Get
            Set(ByVal value As String)
                _Body = value
            End Set
        End Property
    
        Private _UserAvatar As String
        Public Property UserAvatar() As String
            Get
                Return _UserAvatar
            End Get
            Set(ByVal value As String)
                _UserAvatar = value
            End Set
        End Property
        Private _MemberSince As DateTime
        Public Property MemberSince() As DateTime
            Get
                Return _MemberSince
            End Get
            Set(ByVal value As DateTime)
                _MemberSince = value
            End Set
        End Property
    
    End Class
    

     

    The output of the example will be :

     

     

    Thursday, July 31, 2008 3:44 AM