How can I create a personalized column in a GridView for a field with large data?

Question

I need to add a column with a short version of a field text. I want that if the user put the mouse over this text a tooltip with the real large version appears. I tough in this as a solution to the distortion of the gridview with excessively big cells. Other solutions are welcome.

<asp:GridView ID="GridView1" runat="server" CellPadding="4" ForeColor="#333333" 
            GridLines="None" AutoGenerateColumns="false">
            <Columns>
                <asp:BoundField DataField="DESC_CORTA" HeaderText="Sistema"  />
                <asp:BoundField DataField="ASIGNADO" HeaderText="Asignado"  />
                <asp:BoundField DataField="SOLICITANTE" HeaderText="Solicitante"  />
                <asp:BoundField DataField="FECHA_INGRESO" HeaderText="Fecha ingreso"  />
                <asp:BoundField DataField="N_SOLICITUD" HeaderText="N solicitud"  />
                <asp:BoundField DataField="TIEMPO_TOTAL" HeaderText="Tiempo total"  />
                <asp:BoundField DataField="TIEMPO_RESTANTE" HeaderText="Tiempo restante" />
                <asp:BoundField DataField="PORCENTAJE_RESTANTE" HeaderText="Porcentaje restante" />
                <asp:BoundField DataField="TIEMPO_ESPERADO" HeaderText="Tiempo esperado" />

HERE COMES THE BIG COLUMN
<asp:BoundField DataField="GLOSA_USUARIO" HeaderText="Glosa" />
            </Columns>
        </asp:GridView>

Answer 1

Use a TemplateField and apply your tooltip.

Change

<asp:BoundField DataField="GLOSA_USUARIO" HeaderText="Glosa" />

To this:

<asp:TemplateField HeaderText="Glosa">
    <ItemTemplate>
        <div title='<%# Eval("GLOSA_USUARIO") %>'>
            <%# Helpers.GeneratePreview(Eval("GLOSA_USUARIO").ToString(), 100) %></div>
    </ItemTemplate>
</asp:TemplateField>

Here is the helpers class with "GeneratePreview" function:

public static class Helpers
{
   public static string GeneratePreview(string Text, int Length)
   {
       if (Text.Length >= Length)
       {
           Text = Text.Remove(Length, Text.Length - Length);
           int CutLastSpace = Text.LastIndexOf(" ");
           Text = Text.Remove(CutLastSpace, Text.Length - CutLastSpace);
           Text = Text + "...";
       }

       return Text;
   }
}

You can get a more fancy tooltip using javascript if you wish. Hope this helps!

Good Luck!

Answer 2

Yes they are right you have to use Template Field like they said. To show fancy or good multiline tooltips , use the best one (link below)

<asp:TemplateField HeaderText="Glosa">
  <ItemTemplate>
      <div title='<%# Eval("GLOSA_USUARIO") %>'>
          <%# Eval("GLOSA_USUARIO")%></div>
  </ItemTemplate>
</asp:TemplateField>

http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/ or http://craigsworks.com/projects/simpletip/