CODEWITHSUNDEEP
c#javascriptasp.netgridview
Robert Dinaro
Robert Dinaro

Reputation: 538

fitting long text in GridView Column

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

Upvotes: 0

Views: 7659

Answers (3)

Abbas Amiri
Abbas Amiri

Reputation: 3204

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;
}

Upvotes: 5

user2480047
user2480047

Reputation:

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.

Upvotes: 0

Garrison Neely
Garrison Neely

Reputation: 3289

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>

Upvotes: 0

Related Questions