Wednesday, 5 March 2014

Text ellipsis in gridview.

.textEllipsis
{
    overflow: hidden;
    max-width: 130px;/* Number of text to be appear before three dots (...)  */
    text-overflow: ellipsis;
     white-space: nowrap;
     width:60px;
/*
     This will used in gridview, it shows text with followed by three dots. For example if
      mrn value is  MRN-XX-0001 and it looks like MRN-XX-...
*/

}
Step-1:
 Add the above css style into style sheet like "kaizen-style.css"

Step-2:
 <asp:TemplateField HeaderText="PO Number" ItemStyle-Width="6%">
    <ItemTemplate>
       <div class="textEllipsis">
          <asp:Label ID="lblPONum" runat="server" Text='<%# Bind("PONumber") %>'></asp:Label>
       </div>
    </ItemTemplate>
</asp:TemplateField>


Then we may use tooltip to show the PONnumber as full.










No comments:

Post a Comment