How to limit label string length in GridView with Read More link?

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…

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

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)+ "...";
}

Method 2

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" rel="nofollow noreferrer noopener" 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) + "...";
}

Method 3

You can use Modal Popup dialog box:

In ASP.Net page:

<script type="text/javascript" src="https://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript" src="https://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>

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0