Hi NoorAhmed2,
I have created small sample code which full-fill your requirement. So you need to refer the below code and apply same logic in your code and also refer the below link for paging.
C# HTML
<div>
<div>
<asp:Repeater ID="rptCustomers" runat="server">
<ItemTemplate>
<div class=" col-md-4">
<div class="content">
<div class="items">
<asp:Label Text='<%#Eval("Id")%>' runat="server" />.
<asp:Literal ID="litsort" Text='<%#Eval("Message").ToString().Length > 102 ? Eval("Message").ToString().Substring(0, 102) :Eval("Message").ToString()%>'
Visible="true" runat="server" />
<asp:Literal ID="litfull" Text='<%#Eval("Message")%>' Visible="false" runat="server" />
<asp:Button ID="btnexpand" Text="Read More" OnClick="Onexpand" Visible='<%#Eval("Message").ToString().Length > 100 ? true:false%>'
runat="server" />
<asp:Button ID="btncollapse" Text="collapse" OnClick="Oncollapse" Visible="false"
runat="server" />
</div>
</div>
</div>
</ItemTemplate>
</asp:Repeater>
</div>
<div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
</div>
</div>
Vb.Net HTML
<div>
<div>
<asp:Repeater ID="rptCustomers" runat="server">
<ItemTemplate>
<table border="1px" cellpadding="0" cellspacing="0">
<tr>
<td>
<div class="col-md-4">
<div class="content">
<div class="items">
<asp:Label ID="Label1" Text='<%#Eval("Id")%>' runat="server" />.
<asp:Literal ID="litsort" Text='<%# If(Eval("Message").ToString().Length > 102 ,Eval("Message").ToString().Substring(0, 102),Eval("Message").ToString())%>'
Visible="true" runat="server" />
<asp:Literal ID="litfull" Text='<%#Eval("Message")%>' Visible="false" runat="server" />
<asp:Button ID="btnexpand" Text="Read More" OnClick="Onexpand" Visible='<%# If(Eval("Message").ToString().Length > 100 ,true,false)%>'
runat="server" />
<asp:Button ID="btncollapse" Text="collapse" OnClick="Oncollapse" Visible="false"
runat="server" />
</div>
</div>
</div>
</td>
<br />
</tr>
</table>
</ItemTemplate>
</asp:Repeater>
</div>
<div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
</div>
</div>
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
this.GetData();
}
}
private void GetData()
{
DataTable dt = new DataTable();
dt.Columns.Add("Id");
dt.Columns.Add("Message");
dt.Rows.Add("1", "I need to display Message Column data from the database in such a way that i should display only first 100 charaters of the data in a message and i should have collapse or expand button at the end of the message. when i click on expand button the whole messages ");
dt.Rows.Add("2", "I want button to work for all these elements in one expand and Collapse button.Like this page of link below :");
dt.Rows.Add("3", "I want button to work for all these elements in one expand and Collapse button");
rptCustomers.DataSource = dt;
rptCustomers.DataBind();
}
protected void Onexpand(object sender, EventArgs e)
{
RepeaterItem row = (sender as Button).NamingContainer as RepeaterItem;
(row.FindControl("litsort") as Literal).Visible = false;
(row.FindControl("litfull") as Literal).Visible = true;
(row.FindControl("btnexpand") as Button).Visible = false;
(row.FindControl("btncollapse") as Button).Visible = true;
}
protected void Oncollapse(object sender, EventArgs e)
{
RepeaterItem row = (sender as Button).NamingContainer as RepeaterItem;
(row.FindControl("litsort") as Literal).Visible = true;
(row.FindControl("litfull") as Literal).Visible = false;
(row.FindControl("btnexpand") as Button).Visible = true;
(row.FindControl("btncollapse") as Button).Visible = false;
}
Vb.Net
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
If Not IsPostBack Then
Me.GetData()
End If
End Sub
Private Sub GetData()
Dim dt As New DataTable()
dt.Columns.Add("Id")
dt.Columns.Add("Message")
dt.Rows.Add("1", "I need to display Message Column data from the database in such a way that i should display only first 100 charaters of the data in a message and i should have collapse or expand button at the end of the message. when i click on expand button the whole messages ")
dt.Rows.Add("2", "I want button to work for all these elements in one expand and Collapse button.Like this page of link below :")
dt.Rows.Add("3", "I want button to work for all these elements in one expand and Collapse button")
rptCustomers.DataSource = dt
rptCustomers.DataBind()
End Sub
Protected Sub Onexpand(sender As Object, e As EventArgs)
Dim row As RepeaterItem = TryCast(TryCast(sender, Button).NamingContainer, RepeaterItem)
TryCast(row.FindControl("litsort"), Literal).Visible = False
TryCast(row.FindControl("litfull"), Literal).Visible = True
TryCast(row.FindControl("btnexpand"), Button).Visible = False
TryCast(row.FindControl("btncollapse"), Button).Visible = True
End Sub
Protected Sub Oncollapse(sender As Object, e As EventArgs)
Dim row As RepeaterItem = TryCast(TryCast(sender, Button).NamingContainer, RepeaterItem)
TryCast(row.FindControl("litsort"), Literal).Visible = True
TryCast(row.FindControl("litfull"), Literal).Visible = False
TryCast(row.FindControl("btnexpand"), Button).Visible = True
TryCast(row.FindControl("btncollapse"), Button).Visible = False
End Sub
Screenshot
