I am having issues displaying long text in a ASP.NET gridview column. I don't want the text to wrap on to the second line as it is one the business requirements not to wrap.

Ideally I want some sort of server or client based code which can help me truncate the text to the size of the column and then maybe display a more button or '...' for more text?

and when the more button or ... are clicked; a pop up appears either with rest of the text or full text.

note: the text or string size varies and it can be any of length from 25 to 75 characters.

any ideas on how should i go about achieving the above? thanks

I am having issues displaying long text in a ASP.NET gridview column. I don't want the text to wrap on to the second line as it is one the business requirements not to wrap.

Ideally I want some sort of server or client based code which can help me truncate the text to the size of the column and then maybe display a more button or '...' for more text?

and when the more button or ... are clicked; a pop up appears either with rest of the text or full text.

note: the text or string size varies and it can be any of length from 25 to 75 characters.

any ideas on how should i go about achieving the above? thanks

• c#
• javascript
• asp
• gridview

• What you can do is add a maxWidth to the colums, and add a tooltip service that displays the all text, when you go over the cell. – provençal le breton Commented Jul 16, 2013 at 15:20
• tooltip service? can you please explain that a bit more. thanks – Robert Dinaro Commented Jul 16, 2013 at 15:51
• The ToolTip attribute of an ASP element translates into the title attribute of the HTML node. It's a text hint that appears when you hover over the node with the mouse. – David R Tribble Commented Jul 16, 2013 at 20:21

3 Answers 3

Use this CSS class for the gridview column

.ellipsis {
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 50px;
    display: block;
    overflow: hidden;
}

It puts ... in the end of the column in a specific width.

Update

Markup

<asp:GridView ID="GridView1" runat="server" DataSourceID="SqlDataSource1"
        AutoGenerateColumns="False" CssClass="employees-grid">
        <Columns>
            <asp:BoundField DataField="id" HeaderText="ID">
                <ItemStyle CssClass="employees-grid-id" />
            </asp:BoundField>
            <asp:BoundField DataField="first_name" HeaderText="First Name">
                <ItemStyle CssClass="employees-grid-first-name" />
            </asp:BoundField>
            <asp:BoundField DataField="last_name" HeaderText="Last Name">
                <ItemStyle CssClass="employees-grid-last-name" />
            </asp:BoundField>
            <asp:BoundField DataField="email" HeaderText="Email">
                <ItemStyle CssClass="employees-grid-email" />
            </asp:BoundField>
            <asp:BoundField DataField="note" HeaderText="Note">
                <ItemStyle CssClass="employees-grid-note" />
            </asp:BoundField>
        </Columns>
</asp:GridView>

CSS

.employees-grid {
    table-layout: fixed;
    width: 100%;
}
.employees-grid-id {
    width: 5%;   
}
.employees-grid-first-name {
    width: 10%; 
}
.employees-grid-last-name {
    width: 10%;   
}
.employees-grid-email {
    width: 15%; 
}
.employees-grid-note {
    width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
    overflow: hidden;
}

If you are concerned about formatting, I would build my query (the one you're binding your GridView to) so that the data is returned in two forms.

Select Left(dataColumn, 20) as TruncatedData, dataColumn as FullData From table

You can then bind your GridView to the TruncatedData column, with a tooltip bound to the FullData column, so that when they hover, they get the full column data. I'd convert a BoundField into a TemplateField and fill it thus:

          <asp:templatefield>
              <itemtemplate>
                  <asp:label id="lblData"
                      Text= '<%# Eval("TruncatedData") %>'
                      runat="server"
                      ToolTip='<%# Eval("FullData") %>' /> 
              </itemtemplate>
          </asp:templatefield>

You should post the code you have tried, such that people can propose changes/improvements, etc. In any case, I had to write a code doing something on the lines of what you are looking for anyway, so here you have it.

private string[] truncateText(string iniText, int colNumber, int noAddRows)
{
    string[] outStrings = new string[noAddRows + 3];
    if (noAddRows == 0)
    {
        outStrings = new string[22];
    }
    outStrings[1] = iniText;
    int addBit = 10;
    int maxLength = (int)GridView1.Columns[colNumber].ItemStyle.Width.Value + addBit;
    int linesCount = 1;

    if (iniText.Length > maxLength)
    {
        outStrings[1] = iniText.Substring(0, maxLength); //New truncated string
        outStrings[2] = iniText.Substring(maxLength, iniText.Length - maxLength); //Remaining bit
        linesCount = 2;
        if (noAddRows > -1 && outStrings[2].Length > maxLength)
        {
            //Further lines of the truncated bit
            string remBit = outStrings[2].Substring(maxLength, outStrings[2].Length - maxLength);
            outStrings[2] = outStrings[2].Substring(0, maxLength);
            while (remBit.Length > 0)
            {
                linesCount = linesCount + 1;
                if ((noAddRows > 0 && linesCount > noAddRows + 2) || linesCount > 20)
                {
                    linesCount = linesCount - 1;
                    if (remBit.Length > 0)
                    {
                        outStrings[linesCount] = outStrings[linesCount] + remBit;
                    }
                    break;
                }

                if (remBit.Length <= maxLength)
                {
                    outStrings[linesCount] = remBit;
                    break;
                }
                else
                {
                    outStrings[linesCount] = remBit.Substring(0, maxLength);
                    remBit = remBit.Substring(maxLength, remBit.Length - maxLength);
                }
            }
        }
    }

    outStrings[0] = Convert.ToString(linesCount); //Total number of lines

    return outStrings;
}

You can call it like this:

string[] truncatedLines = truncateText("text to truncate", colNo, noAdd);

The output string[] holds all the lines truncated such that they fit within the width of the given column + a small bit (addBit which I set to 10). With the noAddRows parameter you control the number of lines you want as output: if it is set to zero, it returns as many lines as required on account of the given column width. The 0 position of the array is reserved for the total number of lines returned.

I guess that you will not find any problem to use this code to have full control on the functionality you want to implement.