Currently I used like this...
<asp:TemplateField HeaderText="Description">
<ItemTemplate>
<asp:Label ID="lblDescription" runat="server"
Text='<%# Limit(Eval("Description"),40) %>' >
</asp:Label>
</ItemTemplate>
The helper function:
public static string Limit(object Desc, int length)
{
StringBuilder strDesc = new StringBuilder();
strDesc.Insert(0, Desc.ToString());
if (strDesc.Length > length)
return strDesc.ToString().Substring(0, length) + "..." + [Read More];
else return strDesc.ToString();
}
But I have no idea how to put [Read More] link...
Do something like this.
Markup
<asp:TemplateField HeaderText="Description">
<ItemTemplate>
<asp:Label ID="lblDescription" runat="server"
Text='<%# Limit(Eval("Description"),40) %>'
Tooltip='<%# Eval("Description") %>'>
</asp:Label>
<asp:LinkButton ID="ReadMoreLinkButton" runat="server"
Text="Read More"
Visible='<%# SetVisibility(Eval("Description"), 40) %>'
OnClick="ReadMoreLinkButton_Click">
</asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
And code-behind
protected bool SetVisibility(object desc, int maxLength)
{
var description = (string)desc;
if (string.IsNullOrEmpty(description)) { return false; }
return description.Length > maxLength;
}
protected void ReadMoreLinkButton_Click(object sender, EventArgs e)
{
LinkButton button = (LinkButton)sender;
GridViewRow row = button.NamingContainer as GridViewRow;
Label descLabel = row.FindControl("lblDescription") as Label;
button.Text = (button.Text == "Read More") ? "Hide" : "Read More";
string temp = descLabel.Text;
descLabel.Text = descLabel.ToolTip;
descLabel.ToolTip = temp;
}
protected string Limit(object desc, int maxLength)
{
var description = (string)desc;
if (string.IsNullOrEmpty(description)) { return description; }
return description.Length <= maxLength ?
description : description.Substring(0, maxLength)+ "...";
}
Add an invisible HtmlAnchor control after the Label. Try something like,
<asp:TemplateField HeaderText="Description">
<ItemTemplate>
<asp:Label ID="lblDescription" runat="server"
Text='<%# Limit(Eval("Description"),40) %>' >
</asp:Label>
<a href="TheReadMorePage" ID="aReadMore" runat="server" Visible="false">[Read More]</a>
</ItemTemplate>
if(strDesc.Length > length)
{
var anchor = ((Label)Desc).NamingContainer.FindControl("aReadMore");
anchor.Visible = true;
return strDesc.ToString().Substring(0, length) + "...";
}
You can use Modal Popup dialog box:
In ASP.Net page:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript">
$(function() {
$('#btnReadMore').click(function() {
$("#popupdiv").dialog({
title: "jQuery Popup from Server Side",
width: 430,
height: 250,
modal: true,
buttons: {
Close: function() {
$(this).dialog('close');
}
}
});
});
})
<asp:TemplateField HeaderText="Description">
<ItemTemplate>
<asp:Label ID="lblDescription" runat="server"
Text='<%# Limit(Eval("Description"),40) %>'
Tooltip='<%# Eval("Description") %>'>
</asp:Label>
<input type="button" id="btnReadMore" value="Show Modal Popup" />
</ItemTemplate>
</asp:TemplateField>
<div>
<div id="popupdiv" title="Basic modal dialog" style="display: none">
</div>